Tutorial #16 form mismatch!!

0 Ahmed AbdElMoteleb · November 5, 2014
Hello,

in the code of #16's tutorial of HTML5 I followed the coding line by line but when I opened the html file what I got was different to what Bucky's got 
/images/forum/upload/2014-11-05/09d0d1963ee652df279be0ee5034d364.JPG

Here is the source code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Bucky's training</title>
<link rel="stylesheet" href="main.css"/>
</head>

<body>
<div id="big_wrapper">
<header id="top_header">
<h1> Welcome to the asylum</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 for Article</h1>
  <h2>Subtitle for Article</h2>
  </hgroup>
</header>
<p>This is the best article eva!</p>
<footer>
<p> written by Saiko</p>
</footer>
</article>
</section>

<aside id="side_news">
<h4>News</h4>
Bucky has a new dog
</aside>
</div>
<footer id="footer">
Copyrights tothenewboston
</footer>
</div>
</body>

</html>

and the .css file

*{
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;
}
#footer{
text-align: center;
padding:20px;
border-top:2px solid green;

}



Post a Reply

Replies

Oldest  Newest  Rating
0 ricky araneta · April 26, 2015
i think it is because of your article width
  • 1

Other Programming Languages

107,345 followers
About

I think it is pretty obvious what this section is for.

Links
Moderators
Bucky Roberts Administrator