css help needed

**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

HTML Code:

<!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

Code:

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

**Smarra** · 04-15-2010, 07:28 AM

more jpgs from site

**Smarra** · 04-15-2010, 07:30 AM

and some more

**Smarra** · 04-15-2010, 07:30 AM

and 3 more

**Smarra** · 04-15-2010, 07:31 AM

and the final 2

**BLiZZaRD** · 04-15-2010, 10:02 PM

So.. what does it look like now. Since we know what it is supposed to look like, it will help to know where you are having the problems. A link to your test page or a screen shot a a very minimum...

**Smarra** · 04-16-2010, 03:36 AM

http://test.site12345.angelfire.com/index.html
this is what i got

**BLiZZaRD** · 04-17-2010, 01:03 AM

Okay, I am working on it. I didn't forget you. Where did you get the template from? There is an image or two missing. (the solid gray background piece named bg.gif)

If you have it, please attach it, if you don't please link me to the template so I can grab it.

**BLiZZaRD** · 04-17-2010, 09:55 PM

Well, did what I could just going off the picture.

You can see a live example here

Keep in mind this is just a quick layout example. Menu works with no image flicker (using a method I developed a few years ago

)

For the footer, I just found a close matching color so it isn't exact, nor is it perfect. The whole thing at least validates. Which brings me to one more thing...

I don't write in XHTML. I never will. The page you view is coded for HTML 4.01strict/HTML 5. If you want it in XHTML you will have to convert it.

As for the CSS you will have to change the image links to where they are on your server. And of course editing the HTML to suit your needs.

The CSS is thus:

Code:

body {
background-image:url(background-concrete.jpg);
width: 760px;
margin: 0 auto;

}

#header {
height: 305px;
background-image:url(header.jpg); 
background-repeat:no-repeat;
}

#header span{
	display: none;
}

#nav-menu{
	width: 760px;
margin-top: -225px;
margin-left:25px;
background-repeat:no-repeat;
}

#pre * {height: 1px; width: 1px; overflow: hidden; visibility: hidden}
#pre0 {background: url(about-over.gif) ;}
#pre1 {background: url(products-over.gif) ;}
#pre2 {background: url(hisotry-over.gif) ;}
#pre3 {background: url(contact-over.gif) ;}
#pre4 {background: url(home-over.gif) ;}


#nav-menu ul{
	list-style-type: none;
	padding: 0px;
	margin: 0;
}

#nav-menu li{
	float: left;
	margin: 0;
}

#nav-menu li a{
	background: url(about.gif) #000;
	background-repeat:no-repeat;
	height: 35px;
	line-height: 2em;
	float: left;
	width: 152px;
	display: block;
	border: 0;
	color: #0d2474;
	text-decoration: none;
	text-align: center;
	margin: 0 auto;
}

#nav-menu li a:hover{
	background: url(about-over.gif) #000;
	background-repeat:no-repeat;
	height: 35px;
	line-height: 2em;
	float: left;
	width: 152px;
	display: block;
	border: 0;
	color: #0d2474;
	text-decoration: none;
	text-align: center;
	margin: 0 auto;
}

.nav-text{
	visibility: hidden;
	display: none;
	text-align: center;
}

#nav-menu li a#a0 {background: url(about.gif) ;background-repeat:no-repeat;}
#nav-menu li a#a1 {background: url(products.gif) ;background-repeat:no-repeat;}
#nav-menu li a#a2 {background: url(history.gif) ;background-repeat:no-repeat;}
#nav-menu li a#a3 {background: url(contact.gif) ;background-repeat:no-repeat;}
#nav-menu li a#a4 {background: url(home.gif) ;background-repeat:no-repeat;}


#nav-menu li a:hover#a0 {background: url(about-over.gif) ;background-repeat:no-repeat;}
#nav-menu li a:hover#a1 {background: url(products-over.gif) ;background-repeat:no-repeat;}
#nav-menu li a:hover#a2 {background: url(history-over.gif) ;background-repeat:no-repeat;}
#nav-menu li a:hover#a3 {background: url(contact-over.gif) ;background-repeat:no-repeat;}
#nav-menu li a:hover#a4 {background: url(home-over.gif) ;background-repeat:no-repeat;}


/* Hide from IE5-Mac \*/
#nav-menu li a
{
	float: none;
}
/* End hide */

.container {
	width: 760px;
	padding-left: 0.4em;
	padding-right: 0.5em;
}

#content {
background: #f5f5f3;
width: 470px;
height: 600px;
float: left;
}

#content p, h2{
	margin-left: 1em;
}

#sidebar {
background: #f5f5f3;
width: 215px;
height: 600px;
float: left;
padding-left: 4em;
}

#sidebar p, h3, ul{
	margin-right: 1em;
}

#sidebar li {
	list-style-type: none;
}

#footer {
	background: url(footer.gif) no-repeat #6E6E6E;
	height: 240px;
	width: 730px;
	padding-left: 1.3em;
	padding-bottom: 4em;
	clear: both;
	color: #FCB514;
}

#footer img {
	float:right;
}

#footer h3{
	color: #FFF;
	margin-bottom: 0;
	margin-top: 0;
}

And the HTML is thus:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pour Rite Concrete International</title>
<link rel="stylesheet" type="text/css" href="quick.css">
</head>

<body>
<div id="pre"><span id="pre0"></span><span id="pre1"></span><span id="pre2"></span><span id="pre3"></span><span id="pre4"></span></div>
<div id="header"><span><h1>Pour Rite Concrete International</h1></span></div>
	<div id="nav-menu">
	<ul>
<li><a id="a0" href="#nogo" title= "About"><span class="nav-text">About</span></a></li>
<li><a id="a1" href="#nogo" title= "Products"><span class="nav-text">Products</span></a></li>
<li><a id="a2" href="#nogo" title= "History"><span class="nav-text">History</span></a></li>
<li><a id="a3" href="#nogo" title= "Contact"><span class="nav-text">Contact</span></a></li>
<li><a id="a4" href="#nogo" title= "Home"><span class="nav-text">Home</span></a></li>
</ul>	
	</div>

	<div class="container">
		<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>
	<div id="footer">
	<p><h3>Want to Learn More?</h3><br>
	Article About Concrete Pouring<br>
	Concrete Pouring Article Two</p>
	<img src="truck.jpg">
	<p><h3>Things You Should Know</h3>
	Stuff About Concrete<br>
	Why Pour Rite is the Best</p>
	<p>&nbsp;</p>
	<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>

Keep in mind, I didn't test this other than in the browser I am using to make my web pages. So I don't know how it looks in IE, or Opera, or on other resolutions, etc. Just the basics.

But it should get you going at least.

Any questions just ask

Hope it helps.

Thread: css help needed

Thread Tools

Search Thread

css help needed

Bookmarks

Bookmarks

Posting Permissions