Untitled

Hello Guilherme,

Can you please run this code and see what is actually happening.  I read your last messages but
I think I will understand more if you could please solve these problems direclty. At this point I
am still lost with advice, I should do better if I can see the answer.

1) You gave #menu a: margin-right:10%, but it didnt work for me at all, so I ended up giving them
padding-right:30px; padding-top:10px;, but when you resize the browser it is a distaster. Can you
please tell me what % I should give my links so that the first link aligns nicely with 'Welcome'
and the paragraphs below 'Welcome' and when I resize the browser my menu remains fluid?

1a) Because I gave the links paddings, you will see in the web console that the entire menu
is sticking padd the #header. How can I fix that?

2) If you look at your web console, you will see that div with id="footer"(486 X 98) and the
h2 header "About us" (691 x 29) have completely different measurements. How can I align
the paragraph in the footer with the h2"About us"?

3) YOu gave the paragraph a line-height of 20px; I thought line heights were usually 1.5.
How does line-height:20px compare to a line-height:1.5? In fact what is the unit of line-height:1.5?

4) The menu with a green background has a bottom border the color of grey. Does this grey
bottom border come with the image?

5) When you resize the browser, all the text collapses into each other, Can you please tell me
exactly what I should change so that I can achieve a fluid layout.


thanks


<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Fluid Layout Example</title>
<meta charset="UTF-8" />
<style>
*{
margin:0;
padding:0;

}
a img{
border:none;
}
input, select, textarea, body{
font-family: Arial, Tahoma, sans-serif;

}
h2{
font-weight:normal;
font-size:24px;

}
p{
font-size:13px;
line-height:1.5;

margin-bottom:1.5em;


}
/*styling the header and menu
===========================================*/
#header{
height:56px;
background: url(images/menu_background.png) repeat-x;
position:relative;
z-index:100;

}
#logo{
position:absolute;
width:36%;
top:90px;

}
#logo a{
display:block;
margin: 0 auto;
width:210px;

}
#menu{
position:absolute;
width:64%;

right:0;
top:25px;

}
#menu a:hover, #menu a.current {
	color: #e6ff9b;
}

#menu ul{
list-style-type:none;
margin-left:82px;
}

#menu ul li{
display:inline-block;
}
#menu a{
display:inline-block;
color:#FFF;
text-decoration:none;
height:23px;
padding-right:30px;
padding-top:10px;
float:left;


}


/*styling the content
========================================*/
html, body, #wrapper, #content, #content-inner{
height:100%;

}
#content{
width:64%;
background:pink;
float:right;
color:#FFF;
background: #304100 url(images/content_background.png) repeat-x;
margin-top:-56px;
}

#content-inner{
padding:96px 10% 40px 10%;

}

#content a {
	color: #FFFFFF;
}

#content a:hover {
	text-decoration: none;
	color: #e6ff9b;
}

#wrapper{
background: url(images/footer_background.png) no-repeat bottom left;


}
/*styling the footer
=================================================*/

#footer{

width:36%;
margin-top:150px;

}

#footer p{
width:200px;
color: #231f20;
line-height:15px;
font-size:11px;
margin:0 auto;


}
</style>
</head>
<body id="bd-home">
<div id="wrapper">
			<div id="header">
				<h1 id="logo">
					<a href="#">
						<img src="images/company_logo.png" alt="Company Logo" width="210" height="102" />
					</a>
				</h1>

				<div id="menu">
					<ul>
						<li>
							<a id="bt-home" class="current" href="#">Home</a>
						</li>
						<li>
							<a id="bt-aboutus" href="#">About Us</a>
						</li>
						<li>
							<a id="bt-services" href="#">Services</a>
						</li>
						<li>
							<a id="bt-contactus" href="#">Contact Us</a>
						</li>
					</ul>
				</div>
			</div>

			<div id="content">
				<div id="content-inner">
					<h2>Welcome</h2>

					<p>
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
						nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
						enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
						nisl ut aliquip ex ea commodo consequat.
					</p>

					<h2>About Us</h2>

					<p>
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
						euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
						minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
						aliquip ex ea commodo consequat.
						<a href="#">&raquo; Learn more</a>
					</p>
				</div>
			</div>

			<div id="footer">
				<p>
					Company Address, 200
					<br />
					City, State, Country
					<br />
					Postal Code 80000-000
					<br />
					5555-5555
					<br />
					support@companyname.com
				</p>
			</div>
</div>
</body>
</html>