Forums

iasiis

Hi everyone,

I have been trying to find a solution to my problem for 2 days now via tutorials but have not had success.

Firstly I am trying to get my top menu bar buttons to show up in a straight horizontal line right under the title image. I can get the first button to display with in the "nav" div but each succeeding button drops down a level falling out of the "nav" div.

Secondly I am trying to position the buttons under the "title" div with pixel perfect precision because the sine wave pattern of the title picture flows into each of the buttons.

And here is the code:


<html>
<head>



<style type=\"text/css\">

html, body 
	{
	text-align: center;
   	 padding:0;
    	margin:0;
	}


#wrapper
	{
	width:100%;
	height:100%;
	background-color:#000;
	
	}

#content
	{
	width:825px;
	height:100%;
	margin:0 auto;
	background-color:#C0C0C0;
	}

#title
	{
	width:825px;
	height:93px;
	background:url(/media/Title-Fullbar.jpg) 0 0 no-repeat;
	position:relative;
	top:0px;
	left:0px;
	}

#nav

	{
	width:825px;
	height:26px;
	background-color:#0066ff;
	position:relative;
	top:0px;
	left:0px;
	}
	


/*.................................................................................................................*/
 .blog a 
	{
 	outline: none;
 	text-indent: -5000px ;
 	display:block;
 	width:55px;
 	height:26px;
 	background: url(/media/Nav-3state-Blog.jpg) 0 0 no-repeat;
	position:relative;
	top:0px;
	left:0px;
 	}

 .blog a:hover 
	{
 	background-position: 0px -26px;
 	}

 .blog a:active, a:focus
	{
 	background-position: 0px -52px;
 	}

.store a 
	{
 	outline: none;
 	text-indent: -5000px ;
 	display:block;
 	width:60px;
 	height:26px;
 	background: url(/media/Nav-3state-Store.jpg) 0 0 no-repeat;
	position:relative;
	top:0px;
	left:55px;
 	}

 .store a:hover 
	{
 	background-position: 0px -26px;
 	}

 .store a:active, a:focus
	{
 	background-position: 0px -52px;
 	}

 .about a 
	{
 	outline: none;
 	text-indent: -5000px ;
 	display:block;
 	width:66px;
 	height:26px;
 	background: url(/media/Nav-3state-About.jpg) 0 0 no-repeat;
	position:relative;
	top:0px;
	left:115px;
 	}

 .about a:hover 
	{
 	background-position: 0px -26px;
 	}

 .about a:active, a:focus
	{
 	background-position: 0px -52px;
 	}

.contact a 
	{
 	outline: none;/* get rid of dotted borders in FireFox */
 	text-indent: -5000px ;/* this move the text outside of the screen area */
 	display:block;
 	width:77px;
 	height:26px;
 	background: url(/media/Nav-3state-Contact.jpg) 0 0 no-repeat;
	position:relative;
	top:0px;
	left:181px;
 	}

 .contact a:hover 
	{
 	background-position: 0px -26px;
 	}

 .contact a:active, a:focus
	{
 	background-position: 0px -52px;
 	}
 
</style>
</head>
<body>

<div id=\"wrapper\">
 
     <div id=\"content\">
         
          <div id=\"title\">
          </div>

	<div id=\"nav\">

                    <div class=\"blog\">
                          <a href=\"#nogo\">blog</a>
                    </div>
                     <div class=\"store\">
                           <a href=\"#nogo\">store</a>
                    </div>

                    <div class=\"about\">
                           <a href=\"#nogo\">about</a>
                    </div>

                    <div class=\"contact\">
                            <a href=\"#nogo\">contact</a>
                    </div>
	
	</div>
    
     </div>/* closing content */
    
</div>/* closing wrapper */

</body>

</html>

Thanks for taking time out to looking my code over.
Take care,
IASIIS

falkencreative

You should be able to float the divs within #nav and have them all align to the left...

#nav div { float:left; }

iasiis

Thank you so much Falkencreative. You suggestion aligned all my button divs within the nav div. All I had to do then was add "left:17px;" to have the buttons right next to eachother as well as having their internal patterning match up with the patterning of the title bar. Thanks :) ;)

treehouse : what would you like to learn today?

Forums

How do I align & position 4 divs with in 1 div? (SOLVED)