Smarra
04-15-2010, 07:27 AM
Ok so Im new to css and I come across a practice exersise to help me learn to code. Im having problems making the page look like the jpg of the finished project. I can send all files upon request.
the html I have is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pour Rite Concrete International</title>
</head>
<body>
<div id="header"><h1>Pour Rite Concrete International</h1></div>
<div id="navigation"></div>
<div id="content">
<h2>Lorem ipsum dolor</h2>
<p> sit amet, consectetuer adipiscing elit. Curabitur fringilla magna sed metus. Sed accumsan. In nec metus in sem venenatis ornare. Curabitur vitae nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquam velit. Duis elit. Integer risus lacus, congue ac, mattis et, rhoncus quis, mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce sit amet ante ac velit viverra aliquet. In auctor eros malesuada velit. Donec erat metus, elementum a, suscipit in, auctor sed, mi. Nullam sollicitudin magna eget felis. Proin sit amet neque nec metus bibendum nonummy.</p>
<p>Proin condimentum gravida urna. Praesent in justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam congue sem ac magna. Maecenas mauris magna, laoreet nec, mattis non, consectetuer eu, diam. Aliquam tristique nisl nec enim lobortis volutpat. </p>
<p>Vestibulum eget nisi. Maecenas at ligula. Duis neque dolor, fringilla ac, vehicula et, sollicitudin non, justo. In malesuada facilisis lorem. Cras a eros in erat vulputate egestas. Aliquam non purus. Aenean at orci. Aliquam ornare pharetra justo.</p>
<p>Vestibulum faucibus purus eleifend leo. Sed aliquet dui id massa. Suspendisse eget tellus posuere est aliquet auctor. Curabitur cursus. Integer facilisis pede ut nisi. Etiam sed lorem.</p>
</div>
<div id="sidebar">
<h3>Lorem ipsum dolor</h3>
<p> sit amet, consectetuer adipiscing elit. Curabitur fringilla magna sed metus. Sed accumsan. In nec metus in sem venenatis ornare. Curabitur vitae nulla. </p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquam velit. Duis elit. </p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce sit amet ante ac velit viverra aliquet. In auctor eros malesuada velit.</p>
<h3>Article Archives </h3>
<ul>
<li> <a href="#">hymenaeos </a></li>
<li><a href="#">Fusce sit amet ante </a></li>
<li> <a href="#">visited link</a></li>
<li> <a href="#">In auctor eros </a></li>
<li> <a href="#">malesuada velit</a></li>
</ul>
</div>
<div id="footer">
<h3>Want to Learn More?</h3>
<p>Article About Concrete Pouring</p>
<p>Concrete Pouring Article Two</p>
<h3>Things You Should Know</h3>
<p>Stuff About Concrete</p>
<p>Why Pour Rite is the Best</p>
<p><img src="images/truck.jpg" alt="Truck" />
<div id="secondarynav">
<a href="about.html">About</a> |
<a href="products.html">Products</a> |
<a href="history.html">History</a> |
<a href="contact.html">Contact</a> |
<a href="privacy.html">Privacy Policy</a> |
<a href="index.html">Home</a>
</div>
</div>
</body>
</html>
..................
The css I have is
body {
background-image:url(images/background-concrete.jpg);
width: 755px;
margin: 0 auto;
}
#container {
background: url(images/bg.gif) repeat-y;
width: 755px;
}
#navigation {
margin-top: -183px;
margin-left:25px;
}
#header {
height: 262px;
background-image:url(images/header.jpg);
background-repeat:no-repeat;
}
#content {
background: #f5f5f3;
width: 470px;
float: left;
margin-top: -120px;
margin-left:25px;
padding-left: 0px;
}
#sidebar {
background: #f5f5f3;
width: 215px;
float: left;
margin-top: -120px;
padding-left: 20px;
}
#footer {
background: url(images/footer.gif) no-repeat;
height: 68px;
clear: both;
}
................
its supose to look like the jpg I attached
I as well will post other images used
the html I have is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pour Rite Concrete International</title>
</head>
<body>
<div id="header"><h1>Pour Rite Concrete International</h1></div>
<div id="navigation"></div>
<div id="content">
<h2>Lorem ipsum dolor</h2>
<p> sit amet, consectetuer adipiscing elit. Curabitur fringilla magna sed metus. Sed accumsan. In nec metus in sem venenatis ornare. Curabitur vitae nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquam velit. Duis elit. Integer risus lacus, congue ac, mattis et, rhoncus quis, mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce sit amet ante ac velit viverra aliquet. In auctor eros malesuada velit. Donec erat metus, elementum a, suscipit in, auctor sed, mi. Nullam sollicitudin magna eget felis. Proin sit amet neque nec metus bibendum nonummy.</p>
<p>Proin condimentum gravida urna. Praesent in justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam congue sem ac magna. Maecenas mauris magna, laoreet nec, mattis non, consectetuer eu, diam. Aliquam tristique nisl nec enim lobortis volutpat. </p>
<p>Vestibulum eget nisi. Maecenas at ligula. Duis neque dolor, fringilla ac, vehicula et, sollicitudin non, justo. In malesuada facilisis lorem. Cras a eros in erat vulputate egestas. Aliquam non purus. Aenean at orci. Aliquam ornare pharetra justo.</p>
<p>Vestibulum faucibus purus eleifend leo. Sed aliquet dui id massa. Suspendisse eget tellus posuere est aliquet auctor. Curabitur cursus. Integer facilisis pede ut nisi. Etiam sed lorem.</p>
</div>
<div id="sidebar">
<h3>Lorem ipsum dolor</h3>
<p> sit amet, consectetuer adipiscing elit. Curabitur fringilla magna sed metus. Sed accumsan. In nec metus in sem venenatis ornare. Curabitur vitae nulla. </p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquam velit. Duis elit. </p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce sit amet ante ac velit viverra aliquet. In auctor eros malesuada velit.</p>
<h3>Article Archives </h3>
<ul>
<li> <a href="#">hymenaeos </a></li>
<li><a href="#">Fusce sit amet ante </a></li>
<li> <a href="#">visited link</a></li>
<li> <a href="#">In auctor eros </a></li>
<li> <a href="#">malesuada velit</a></li>
</ul>
</div>
<div id="footer">
<h3>Want to Learn More?</h3>
<p>Article About Concrete Pouring</p>
<p>Concrete Pouring Article Two</p>
<h3>Things You Should Know</h3>
<p>Stuff About Concrete</p>
<p>Why Pour Rite is the Best</p>
<p><img src="images/truck.jpg" alt="Truck" />
<div id="secondarynav">
<a href="about.html">About</a> |
<a href="products.html">Products</a> |
<a href="history.html">History</a> |
<a href="contact.html">Contact</a> |
<a href="privacy.html">Privacy Policy</a> |
<a href="index.html">Home</a>
</div>
</div>
</body>
</html>
..................
The css I have is
body {
background-image:url(images/background-concrete.jpg);
width: 755px;
margin: 0 auto;
}
#container {
background: url(images/bg.gif) repeat-y;
width: 755px;
}
#navigation {
margin-top: -183px;
margin-left:25px;
}
#header {
height: 262px;
background-image:url(images/header.jpg);
background-repeat:no-repeat;
}
#content {
background: #f5f5f3;
width: 470px;
float: left;
margin-top: -120px;
margin-left:25px;
padding-left: 0px;
}
#sidebar {
background: #f5f5f3;
width: 215px;
float: left;
margin-top: -120px;
padding-left: 20px;
}
#footer {
background: url(images/footer.gif) no-repeat;
height: 68px;
clear: both;
}
................
its supose to look like the jpg I attached
I as well will post other images used