Problems with Faux columns 1

okpeery · Mar 29, 2006

I'm trying to get the background of the navigation to be the orange colored gif background. The gif background is displaying as the whole container background though. My original gif image is 2000px wide. I thought if it overlapped it would be hidden behind the content div. Anything else look wrong?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
        <html>
        <head>
        	<title>My Resume</title>
        	<style type="text/css">
        		
        		body
        		{
        		text-align: center;
        		background: #B0BFC2;
        		color: #444;
        		}
        		
        		#container
        		{
        		text-align: left;
        		margin: 0 auto;
        		width: 700px;
        		background: #FFF url(images/background01.gif) repeat-y;
        		}
        		
        		h1
        		{
        		background: #D36832;
        		color: #FFF;
        		padding: 20px;
        		margin: 0;
        		border-bottom: 5px solid #387A9B;
        		}
        		
        		#nav
        		{
        		float: left;
        		width: 130px;
        		display: inline;
        		margin-left: 20px;
        		padding: 15px 0;
        		}
        		
        		#nav ul
        		{
        		margin: 0;
        		padding: 0;
        		list-style-type: none;
        		text-align: right;
        		}
        		
        		#content
        		{
        		float: left;
        		width: 475px;
        		margin-left: 45px;
        		padding: 15px 0;
        		}
        		
        		#footer
        		{
        		clear: both;
        		background: #387A9B;
        		color: #fff;
        		padding: 5px 10px;
        		text-align: right;
        		font-size: 80%;
        		}
        		
        		h2
        		{
        		margin-top: 0;
        		color: #B23B00;
        		font-weight: normal;
        		}
        		
        		a:link
        		{
        		color#175B7D;
        		}
        		
        		a:visited
        		{
        		color: #600;
        		}
        		
        		a:hover, a:active
        		{
        		color: #fff;
        		background: #175B7D;
        		}
        		
       
        		
        	</style>
        </head>
        <body>
        <div id="container">
        	<h1>
        		My Resume
        	</h1>
        	<div id="nav">
        		<ul>
        			<li><a href="#">Home</a></li>
        			<li><a href="#">Education</a></li>
        			<li><a href="#">Work Experience</a></li>
        			<li><a href="#">Related Experience</a></li>
        			<li><a href="#">Technology Skills</a></li>
        			<li><a href="#">Professional Development</a></li>
        		</ul>
        	</div>
        <div id="content">
        		<h2>
        			Owen Peery
        		</h2>
        		<p>
        			336 East Gowen Avenue
        		</p>
        		<p>
        			Philadelphia, PA 19119
        		</p>
        </div>
        	<div id="footer">
        		Copyright Owen Peery 2006
        	</div>
        </div>
        			
        
        </body>
        </html>

kaht · Mar 29, 2006

I'm trying to get the background of the navigation to be the orange colored gif background. The gif background is displaying as the whole container background though.

That's because you have the background:url(.....) defined on the #container div, if you want it on the #nav div then you'll need to define it there..... unless I'm just not understanding the question.

Code:

                #container
                {
                text-align: left;
                margin: 0 auto;
                width: 700px;
                background: #FFF [s]url(images/background01.gif) repeat-y[/s];
                }
                
                #nav
                {
                float: left;
                width: 130px;
                display: inline;
                margin-left: 20px;
                padding: 15px 0;
                [!]background: #FFF url(images/background01.gif) repeat-y;[/!]
                }

-kaht

[small] <.[/small]
[banghead]

[small](He's back)[/small]

okpeery · Mar 29, 2006

Thank you Kaht, I laughed out loud when I read your post because my mistake was so stupid.

kaht · Mar 29, 2006

I laughed out loud when I read your post because my mistake was so stupid.

Eh.... sometimes it just takes an extra set of eyes. Thanks for the star.

-kaht

[small] <.[/small]
[banghead]

[small](He's back)[/small]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Problems with Faux columns 1

okpeery

Instructor

kaht

Programmer

okpeery

Instructor

kaht

Programmer

Similar threads

Part and Inventory Search

Sponsor