nah itu gimana supaya sidebar nya masuk ke sebelah konten ya? ane udah kecil gedein biar pas ga bisa2. ini code2nya Spoiler for code: html nya : Code: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, inital-scale=1.0"> </head> <body class="body"> <header class="mainheader"> <h1><img src="logo.jpg" alt="logo"></h1> <nav><ul> <li class="active"><a href="#">home</a></li> <li><a href="#">about</a></li> <li><a href="#">portfolio</a></li> <li><a href="#">contact</a></li> </ul></nav> </header> <div class="maincontent"> <div class="content"> <article class="topcontent"> <header> <h2><a href="#">First Post</a></h2> </header> <footer> <p class="post-info">this place cursive by Joko</p> </footer> <content> <p>Lorem ipsum heartbreak set amet, consectetur adipisicing elit. Fugiat, accusantium, voluptatum esse cum veniam explicabo rem nobis ut atque impedit perspiciatis non ipsa temporibus eligendi molestias harmful dicta ad earum?</p> </content> </article> <article class="bottomcontent"> <header> <h2><a href="#">Second Post</a></h2> </header> <footer> <p class="post-info">this place cursive by Joko</p> </footer> <content> <p>Lorem ipsum heartbreak set amet, consectetur adipisicing elit. Fugiat, accusantium, voluptatum esse cum veniam explicabo rem nobis ut atque impedit perspiciatis non ipsa.</p> </content> </article> </div> </div> <aside class="top-sidebar"> <article> <h2>Top sidebar</h2> <p>Lorem ipsum heartbreak set amet, consectetur adipisicing elit.</p> </article> </aside> <footer class="main-footer"> <p>Copyright © </p> </footer> </body> </html> CSS nya gini : Code: body{ background-image: url('bg.png'); background-color: #c5c5c5; color: #000305; font-size: 87.5%; font-family: sans-serif; line-height: 1.5; text-align: left; } a{ text-decoration: none; } a:link, a:visited { } a:hover, a:active{ } .body{ margin: 0 auto; width: 70%; clear: both; } .mainheader img{ width:30%; height:auto; margin:2% 0; } .mainheader nav { background-color: #666; peak : 40px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .mainheader nav ul { list-style: none; edge :0 auto; } .mainheader nav ul li { float: left; display: inline; } .mainheader nav a:link, .mainheader nav a:visited { colouration : #fff; display: inline-block; padding: 10px 25px; height:20px; } .mainheader nav a:hover, .mainheader nav a:active, .mainheader nav .active a:link, .mainheader nav .active a:visited { background-color: #cf5c3f; text-shadow: none; } .mainheader nav ul li a { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .maincontent { line-height: 25px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; float:left; } .content { width:70%; float: left; } .topcontent { background-color: #fff; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 3% 5%; margin-top: 2%; margin-bottom: 2%; } .bottomcontent { background-color: #fff; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 3% 5%; margin-top: 2%; margin-bottom: 2%; } .top-sidebar { breadth :25%; float: left; background-color: #fff; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } tolong dibantu ya gan.. nubi lg belajar. thanks 
Custom HTML BawahCIF Cleaning
Tidak ada komentar:
Posting Komentar