html 5 and css help

+1 Emmanuelg Gaolekwe · April 22, 2015
can you help me guys,i get a different layout, here is my code

index
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>bucky's website</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
    <div id="big_wrapper">

    <header id="top_header">
<h1>Welcome the newboston!</h1>
    </header>

<nav id="top_menu">

<ul>
<li>Home</li>
<li>Tutorials</li>
<li>Podcast</li>

</ul>
</nav>

<div id="new_div">

<section id="main_section">
    <article>
<header>
    <hgroup>
<h1>Title of Article</h1>
<h2>Subticle for article</h2>
</hgroup>
</header>
<p>this is the best article ever</p>
<footer>

<p>- written by bucky roberts</p>
</footer>
    </article>


    <article>
<header>
    <hgroup>
<h1>Title of Article 2</h1>
<h2>Subticle for article</h2>
</hgroup>
</header>
<p>this is the best article ever</p>
<footer>

<p>- written by bucky roberts</p>
</footer>
    </article>

</section>

<aside id="side_news">

<h4>News</h4>
Bucky has a new Dog
</aside>

</div>

<footer id="the_footer">
copyright the newboston 2011
</footer>
    </div>
</body>

</html>

CSS CODE

*{
    margin: 0px;
    padding: 0px;
}

h1{
    font: bold 20px Tahoma;
}

h2{
    font: bold 14px Tahoma;
}

header, section, footer, aside, nav, article, hgroup {
    display: block;
}

body{
    width: 100%;
    display:-webkit-box;
    -webkit-box-pack: center;
}

#big_wrapper{
    max-width: 1000px;
    margin: 20px 0px;
    display:-webkit-box;
    -webkit-box-orient: vertical;
-webkit-box-flex: 1;
}

#top_header{
    background: yellow;
    border: 3px solid black;
    padding: 20px;

}

#top_menu{

    border: red;
    background: blue;
    color: white;
}

#top_menu li {
    display: inline-block;
    list-style: none;
    padding: 5px;
    font:  bold 14px Tahoma;
}


#new_div {
display:-webkit-box;
-webkit-box-orient: horizontal;
}

#main_section{

    border: 1px solid blue;
    -webkit-box-flex: 1;
    margin:  20px;
    padding: 20px;
}

#side_news{

    border: 1px solid red;
    width: 220px;
    margin: 20px 0px;
    padding: 30px;
    background: #66cccc;
}

#the_footer{
    text-align: center;
    padding: 20px;
    border-top: 2px solid green;
}





Post a Reply

Replies

Oldest  Newest  Rating
0 Abdullah Nauman · April 22, 2015
Are you trying to clone the TNB homepage? 
  • 1

HTML / CSS / Web Design

107,078 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators