HTML Help

+1 Robert Summers · September 22, 2014
Hello, I am currently learning HTML5 and CSS3. I don't understand why for #main_section in the first few tutorials if I copy buckys CSS code, why does everything in the main_section act differently when I type out the code below 

HTML File 


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Robert's Website</title>
<link rel="stylesheet" href="main.css"/>
</head>
<body>
<div id="big_wrapper">
<header id="top_header">
<h1>Welcome to Robert's Website</h1>
</header>
<nav id="top_menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<section id="main_section">
<article>
<header>
<hgroup>
<h1>Title of Article</h1>
<h2>Subtitle for Article!</h2>
</hgroup>
</header>
<p>This is the best article eva!</p>
<footer>
<p>- written by robert summers</p>
</footer>
</article>

<article>
<header>
<hgroup>
<h1>Title of Article 2</h1>
<h2>Subtitle for Article 2!</h2>
</hgroup>
</header>
<p>This is the second best article eva!</p>
<footer>
<p>- written by robert summers</p>
</footer>
</article>
</section>
<aside id="side_news">
<h4>News</h4>
Robert wants to go aboard!!
</aside>
<footer id="the_footer">
Copyright R.S 2014
</footer>
</div>
</body>
</html>


CSS File 



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

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

body{ 
text-align:center; 

h1{ 
font: bold 20px Tahoma; 

h2{ 
font: bold 14px Tahoma; 

#big_wrapper{ 
border:2px solid black; 
width:1000px; 
margin:20px; 
text-align:left; 

#top_header{ 
background:blue; 
color:white; 
padding: 10px; 
font: bold 14px Tahoma; 

#top_menu{ 
background:yellow; 
color:black; 
padding:5px; 

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

#main_section{ 
float:left; 
width:660px; 
margin:30px; 
}

Post a Reply

Replies

Oldest  Newest  Rating
0 Jonah Morrison · September 22, 2014
What do you mean? Well for starters in the CSS the #main_section is being used. Could that be what you are noticing?
-1 Robert Summers · September 22, 2014
I'm confused as to why it seems to be placing the main section in a different place to what it may seem
0 Jonah Morrison · September 22, 2014
Well there is a float property. Could that be the problem? Do you have a screenshot of what its doing? :) 
0 Robert Summers · September 23, 2014
I suppose, how do you take a screenshot on a mac os x?
0 Jonah Morrison · September 24, 2014
Don't own a MAC! :P Google prehpas?
0 Robert Summers · September 25, 2014
I have figured the screenshot now, its horrible you take a screenshot and uploads on the desktop not like copys it to your clipboard :/ but anyway, don't worry about it now. Thanks anyway :)
  • 1

HTML / CSS / Web Design

107,083 followers
About

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

Links
Moderators