Jump to content

Why is this so hard?


Aspire

Recommended Posts

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

post-28702-001461400 1281813161_thumb.jpg

template.html

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by Wickham
Link to comment
Share on other sites

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 post-28702-025047800 1281818301_thumb.jpg. 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.

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...