...

View Full Version : Problem with navigation positioning



designedbyria
07-06-2011, 09:41 AM
Hi guys,

this is driving me insane and I even had it working early this morning but now something changed and it's all over the place. I am trying to get my navigation to look like the below image...

http://creationdesign.co.uk/images/1.png

but what's happening is this...

http://creationdesign.co.uk/images/2.png

I've tried lots and lots of different things with the css but nothing seems to be working now (even when I reverted to the old code that worked this morning it still doesn't)

I want the tabs to be fixed to the main content to the right but at the moment they are all over the place.

Here's the html...

<div id="container"> <div id="navigation">
<ul class="tabs">
<li><a class="selected" href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Gallery</a></li>
<li><a hred="#">Testimonials</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div></div>

and here's the css..

#container
{
margin: 0 auto;
width: 914px;
}

#navigation
{
position:relative;
top: 43px;
right:20px;
}


#navigation ul, #navigation ul li {
list-style: none;
margin-left: auto;
margin-right: auto;
padding: 0;
}

ul.tabs {
list-style: none;
height: 43px; /*--Set height of tabs--*/
width: 914px;
overflow:hidden;
}

ul.tabs li {
float: left;
height: 42px; /*--Subtract 1px from the height of the unordered list--*/
width:133px;
line-height: 41px; /*--Vertically aligns the text within the tab--*/
overflow:hidden;
}

ul.tabs li a {
text-decoration: none;
color: #ffffff;
display: block;
font-size: 16px;
font-weight:300;
text-align:center;
width: 133px;
height: 43px;
background-image:url(../images/tab_a.png);
}

ul.tabs li a:hover {
background-image:url(../images/tab_roll.png)
}

ul.tabs li a.selected {
background-image:url(../images/tab_active.png);
color:#000000;
font-weight:normal;
}

Any and all help very much appreciated, if you need any more info let me know (site currently hosted remotely)

Thanks! :thumbsup:

majunior
07-06-2011, 09:55 AM
it might help to set the margin to 0 as well

so:


#navigation ul, #navigation ul li {
list-style: none;
margin-left: auto;
margin-right: auto;
padding: 0;
margin: 0;
}

Other than that, I'd have to see an online test version before I can determine what the problem might be.

vikram1vicky
07-06-2011, 10:32 AM
Please avoid using position unnecessarily.

try following CSS code...


*{
margin:0;
padding:0;
}
#container
{
margin: 0 auto;
width: 914px;
background:#CCC;
}

#navigation
{
padding-left:230px;
background:#0C9;
}



#navigation ul {
list-style: none;
overflow:auto;
height:1%;
}

ul li {
float:left;
width:125px;
padding:17px 0;
overflow:auto;
background:#39F;
}

ul li a {
text-decoration: none;
color: #ffffff;
display:block;
font:bold 16px Verdana, Geneva, sans-serif;
text-align:center;
background:#FC3;
}

ul li a:hover {
background-image:url(../images/tab_roll.png)
}

ul li a.selected {
background-image:#FC9;
color:#000000;
font-weight:normal;
}


HTML


<div id="container"> <div id="navigation">
<ul>
<li><a class="selected" href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Gallery</a></li>
<li><a hred="#">Testimonials</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div></div>


Let me know if it will work or not..

Cheers :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum