Aspire Posted August 14, 2010 Report Share Posted August 14, 2010 I hope someone will help me figure out why this isn't working. It should be so simple. My css file is from Dreamweaver - fixed two column header and footer. Under the header, I want to add a navigation row that contains a row of four rectangles Each rectangle has the same background with text that links to other key pages. (Image sample attached - nav.jpg) In css I added a box called .twoColFixLtHdr #navigation Using Dreamweaver, I created a class called .nav I want to put the #navigation box under the header and fill it with four smaller boxes each based on the class .nav. Can you tell me what I am doing wrong? Thanks in advance. cascade.css template.html Quote Link to comment Share on other sites More sharing options...
Andrea Posted August 14, 2010 Report Share Posted August 14, 2010 See this: <div id="header"> <!-- end #header --></div> <div> id="navigation"> <div> class="nav" </div> There's a typo there - it should be: <div id="header"> <!-- end #header --></div> <div id="navigation"> <div class="nav"> .. and there should be something between these div tags </div> I have not tried to see what happens with this correction - but this is clearly an error that must be fixed. See what happens when you do. Quote Link to comment Share on other sites More sharing options...
Andrea Posted August 14, 2010 Report Share Posted August 14, 2010 and in your CSS you have a align: center; there is no such thing - it should be 'text-align' Quote Link to comment Share on other sites More sharing options...
Wickham Posted August 14, 2010 Report Share Posted August 14, 2010 (edited) First, you've got the > in the wrong place, it should be:- <div id="navigation"> <div class="nav"><a href="link1.html">Link 1</a></div> </div> and I've put in an example link. Second, your image as I downloaded it is nav.jpg but in your stylesheet you have background-image: url(nav_top6.jpg); in the style for .nav but this is the wrong filename and only 200px wide (presumably just one button) so if you want the background for the whole navbar, put it in #navigation:- .twoColFixLtHdr #navigation { height: 72px; width: auto; padding: 0px; background:#fff url(nav.jpg); border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #660033; } Inside #navigation, if you have several links it's more usual to use a list than several divs for the links. So you would then have:- HTML <div id="navigation"> <ul> <li class="nav"><a href="link1.html">Link 1</a></li> <li class="nav"><a href="link2.html">Link 2</a></li> </ul> <!--<div class="nav"><a href="link1.html">Link 1</a></div>--> </div> CSS .twoColFixLtHdr #navigation { height: 70px; width: auto; padding: 0px; background:#fff url(nav.jpg) no-repeat left top; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #660033; } #navigation ul { margin: 0; padding: 0; } .nav { float: left; list-style-type: none; font-family: Arial, Helvetica, sans-serif; font-size: 10px; line-height: normal; font-weight: bold; color: #FFF; /*background-image: url(nav_top6.jpg);*/ /*background-repeat: no-repeat;*/ /*background-position: left top;*/ text-align: center; padding: 0px; height: 70px; width: 200px; } I've edited slightly as I did it in too much of a hurry. Edited August 14, 2010 by Wickham Quote Link to comment Share on other sites More sharing options...
Aspire Posted August 14, 2010 Author Report Share Posted August 14, 2010 Andrea - thanks for catching those two mistakes. Wickham - I appreciate your input. It works, but not exactly what I wanted to do. There is a 70x200 jpg that I want to use as a background . I want to line up the four nav boxes because they contain a link plus description. Can you tell me how to code the four nav boxes sitting beside each other in a row? Do they even need to be in a container since there is already one for the whole page? Thanks again. I am so grateful to the folks on this board for your helpfulness. Quote Link to comment Share on other sites More sharing options...
Aspire Posted August 14, 2010 Author Report Share Posted August 14, 2010 Okay. I got it. The float: left did the job once I took clear: both out. Thanks again for your help. I know I will be back before this project is over! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.