PDA

View Full Version : Horizontal Nav' will not position left ?



webdiv
Nov 27th, 2006, 12:41 PM
Hi,

I have a horizontal Nav bar and it remains positioned slightly to the right of centre in the container div. I have tried everything and no matter what I do I cannot get it to move left, no amount of messing around with padding or margin has any effect. I have also ran the relevant code through the w3c validators and they pass. I'm completely stumped. Can anyone help? I would be very grateful.

Thanks

webdiv.

The ul in question is the one in the "pricesnavcontainer" div in the html. I have attached all of the css for completeness but the page in question is at the bottom - 'Prices Page' . There is another ul on the 'sounds' page that may have something to do with the problem ? Maybe it is connected to 'display-inline :confused:

CSS

#header {
float:left;
width:100%;
background:#DAE0D2 url("img/bg.gif") repeat-x bottom;
font-size:93%;
line-height:normal;
margin-bottom: 30px;
}


#header ul {
margin:0;
padding:30px 10px 0 50px;
list-style:none;
}

#header li {
float:left;
background:url("img/left.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
#header a {
display:block;
background:url("img/right.gif") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:normal;
color:black;
}
#header a:hover {
color:gray;
}
#header #current {
background-image:url("img/left.gif");
}
#header #current a {
font-weight:bold;
background-image:url("img/right.gif");
color:maroon;
padding-bottom:6px;
}

/*index starts */
#pageheader {
clear: left;
width: 450px;
margin-left: auto;
margin-right: auto;
padding-top: 1px;
padding-left: 1px;
padding-right: 1px;
color:#A57E5F;
background-color:#DDD9C5;
border: solid 1px;
}

#pageheader h1{
text-align: center;
font-size: 1.9em;
}

#pageheader h2{
text-align: center;
margin-top: 10px;
font-size: 1.3em;
}

#container {
width: 750px;
color:#A57E5F;
background-color:#DDD9C5;
margin-top: 10px;
margin-right: auto;
margin-left: auto;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 30px;
border: solid 1px;
text-align: center;

}

#container h3{
text-align: center;
}

#illustration img{
position: relative;
padding-top: 10px;
}


#indexfooter {
text-align: center;
Margin: 0px;
padding: 0px;
}

#indexfooter img{
position: absolute;
top: 515px;
left: 140px;
}
/*Survival Guide Starts*/

#survivalcontainer {
clear: left;
color: #A57E5F;
width: 800px;
margin-left: 100px;
padding: 1px 20px 20px 20px;
background-color:#D5D0BA;
}

#pagename {
width: 450px;
border-right: 1px solid;
border-bottom: 1px solid;
margin-bottom: 20px;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color:#DDD9C5;
}

#survivalcontent {
border: solid 1px;
background:#DDD9C5;
padding: 0px 20px 20px 20px ;
background-color:#DDD9C5;
}

#survivalcontent img {
float: left;
margin-top: 10px;
margin-right: 20px;
margin-left: 5px;
}
#survivalcontent a {
text-decoration:none;
}

#adobe{
position: absolute;
top: 120px;
left: 800px;
}


/*start Bellows page*/


#bellone {
position: relative;
top: 25px;
margin-bottom: 50px;
}

/*finish Bellows page*/

/* SSP starts*/

#sspcontent {
width: 750px;
color:#A57E5F;
background-color:#DDD9C5;
margin-top: 50px;
margin-right: auto;
margin-left: auto;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 30px;
padding-top: 10px;
border: solid 1px;

}

#sspcontent img{
float: left;
margin-right: 20px;
}

#irishcontent {

text-align: center;
line-height: 0.5;
}


/* style for Sounds page starts */

#navcontainer {
position: relative;
width: 300px;
left: 225px;
top: 10px;

}

#navcontainer ul
{
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
}

#navcontainer a{
margin-bottom: 2px;
color: #A57E5F;
display: block;
padding-top: 10px;
padding-bottom:10px;
width: 200px;
background-color: #D5D0BA;
border:solid 1px;
text-decoration: none;
text-align: center;
}

#navcontainer a:link, .navlist a:visited
{
text-decoration: none;
}

#navcontainer a:hover
{
background-color: #D5CCA3;
color: maroon;
}


/* style for Price page starts */


#pricesnavcontainer {
margin-top:50px;
padding-left:5px;
}

#pricesnavlist ul
{
white-space: nowrap;
font-family: Arial, Helvetica, sans-serif;
}

#pricesnavlist li
{
margin:2px;
font-size: 1.2em;
display: inline;
list-style-type: none;
}

#pricesnavlist a {
padding:3px 10px;
border: solid 1px;
}

#pricesnavlist a:link, #pricesnavlist a:visited
{
color: #A57E5F;;
background-color: #D5D0BA;
text-decoration: none;
}


#pricesnavlist a:hover
{
color: maroon;
background-color: #D5CCA3;
text-decoration: none;
}


#pricesfooter h3 {
font-style: italic;
}
#pricesfooter {
text-align: center;
}

HTML


<div id="header">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Uilleann.html">Uilleann Pipes</a></li>
<li><a href="Smallpipes.html">Scottish Smallpipes</a></li>
<li><a href="Sounds.html">Sound Samples</a></li>
<li><a href="Bellows.html">Bellows</a></li>
<li><a href="Survival.html">Smallpipes Survival Guide</a></li>
<li id="current"><a href="Prices.html">Prices</a></li>
<li><a href="Contact.html">Contact</a></li>
<li><a href="Links.html">Links</a></li>
</ul>
</div>
<div id="pageheader"><h1>Prices</h1>
</div>
<div id="container">
<p>All prices are shown in EURO. To check prices in your local currency use the</p>
<p><a href="http://www.xe.com/ucc/" target="_blank">Currency Converter</a></p>
<p>A 20% deposit is required as confirmation of all orders.</p>
<p>For ordering Information please<a href="mailto:[email protected]"><strong> e-mail</strong></a></p>
<p><img src="img/cards.gif" alt="credit card logos"/></p>
<div id="pricesnavcontainer">
<ul id="pricesnavlist">
<li><a href="uilleann.html" title="Irish Pipes">Irish Pipes</a></li>
<li><a href="smallpipes.html" title="Scottish Smallpipes">Scottish Smallpipes</a></li>
<li><a href="Bellows.html" title="Bellows">Bellows</a></li>
<li><a href="" title="Accessories">Bags</a></li>
<li><a href="" title="Accessories">Reeds & Accessories</a></li>
</ul>
</div>
</div>

_Aerospace_Eng_
Nov 27th, 2006, 01:46 PM
Please use code tags in the future. Its the # image. Okay this is your problem. Lists have default margins and padding. You needed to 0 this out, however you have this

#pricesnavlist ul
{
white-space: nowrap;
font-family: Arial, Helvetica, sans-serif;
}

There is no ul in #pricesnavlist because #pricesnavlist is your ul so it should be this

#pricesnavlist
{
white-space: nowrap;
font-family: Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}

webdiv
Nov 27th, 2006, 05:13 PM
[QUOTE=_Aerospace_Eng_;508850]Please use code tags in the future. Its the # image.[/code]

Sorry 'Aerospace', this was my first visit, I'll try and get it right next time.

You are a marvel, thank you, that worked a treat, I had myself completely frazzled after beating my head against a wall with that for a whole day:eek: I am still new to CSS and so I've learned something else now.

Cheers.:thumbsup:

webdiv