PDA

View Full Version : HELP! css navigation bar not positioning correctly


cocoonfx
05-17-2009, 02:48 PM
Hello

For some reason i can not get the position of my navigation bar to work. I am using css style sheet, in Dreamweaver its in the correct position but in safari and FF the nav bar is wrongly positioned. The navigation bar should sit below the logo.....

can anyone have a look at my css and advise what i am doing wrong?????

http://www.rebecca-adams.co.uk

coloeagle
05-17-2009, 03:03 PM
Looking at the css and your code. You have some extra stuff/divs in there.

You might consider rewriting the code for the navigation using an unordered list.

cocoonfx
05-17-2009, 03:27 PM
i have checked the divs and they seem fine. I am stuck.

coloeagle
05-17-2009, 03:31 PM
More explanation of what you can do;

Set your navigation links in an unordered list;

<div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="qualifications.html">Qualifications</a></li>
<li><a href="training.html">Training</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>

With css for your nav id

Set text-align:center;
Set the bullet marker to be the image of the figure you have.
Set the ul li to display:inline;
Set the margins and paddings for your desired look/positioning
Set the link text colors you wantNo images for links and you have clean, easily editable code and a lot less css

cocoonfx
05-17-2009, 03:51 PM
that did not work either still placed at the top of the logo.

coloeagle
05-17-2009, 03:59 PM
Not tested. You will need to adjust the #nav margins (I'm guessing). You will need to set the path for the figure image in #nav li

#nav {
width:100%;
text-align:center;
height:20px;
margin:150px 0 0 0;
}

#nav ul {margin:0; padding:0;}
#nav li {
list-style-image: url("path-to-image/image.gif");
display:inline;
margin:5px 10px;
}

#nav li a {
text-decoration:none;
color:#000;
padding:5px;
margin:0;
}

#nav li a:hover, #nav li a:focus {
color:#f00;
}

<div id="logo">
<div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="qualifications.html">Qualifications</a></li>
<li><a href="training.html">Training</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>

cocoonfx
05-17-2009, 04:42 PM
thanks for the help. I realised if i changed the over divs to left align it sorts the navigation out... you pointed me in the right direction.