Page 1 of 1

[SOLVED] Css style won't align left

Posted: Thu Nov 04, 2004 5:08 am
by hairyjim
I can't seem to align my css style to the left. It seems to indent the style about 15 pixels form the left.

Im a bit new to css styling so could someone please help me out it is driving me crazy.

Here is the css code:

Code: Select all

#detailnavcontainer ul li
{
list-style-type: none;
padding: 0;
margin: 0;
display: block;
float: left;
background: url(/images/navBgRoll.gif) repeat-x 10px;
font: 10px/20px "Verdana", Arial, Helvetica, sans-serif;
text-align: center;
}

#detailnavcontainer a
{
color: #000;
text-decoration: none;
display: block;
width: 100px;
border-top: 1px solid #A8B090;
border-bottom: 1px solid #A8B090;
border-left: 1px solid #A8B090;
border-right: 1px solid #A8B090;
}
And this is my html code for the output:

Code: Select all

<div id="detailnavcontainer">
		    <ul id="navlist">
	            <li><a href="/products/volocity/">Volocity</a></li>
		            <li><a href="/products/volocity/visualization/">Visualization</a></li>
		            <li><a href="/products/volocity/classification/">Classification</a></li>
		            <li><a href="/products/volocity/restoration/">Restoration</a></li>
		            <li><a href="/products/volocity/acquisition/">Acquisition</a></li>
		            <li><a href="/products/volocity/3dm/">3DM</a></li>
		            <li><a href="/products/volocity/volocity_le/">Volocity LE</a></li>
		      </ul>
</div>

Posted: Thu Nov 04, 2004 6:21 am
by phpScott
with my limited exp I wonder my in your detailnavcontainer you have text align=center? would that not be causing it partly

Posted: Thu Nov 04, 2004 6:42 am
by hairyjim
Nope.

That just aligns the text within the container.

To be honest I am not even sure if I am doing this right at all. This is my first stab at doing a simple navigation layout with css.

Seems quite fiddly

Posted: Thu Nov 04, 2004 7:31 am
by patrikG
check the parent elements such body, html etc. Might be worth posting the entire CSS file here.

Posted: Thu Nov 04, 2004 7:46 am
by hairyjim
At the minute that is the entire css file. I am just experimenting in css navigation.

Posted: Thu Nov 04, 2004 7:49 am
by patrikG
add a

Code: Select all

body&#123;
	margin:0px;
&#125;

Posted: Thu Nov 04, 2004 8:24 am
by hairyjim
That did not solve the problem.

I took another look around and found some other examples of what I was trying to achieve.

I go tthis working correctly in the end:

Code: Select all

#navcontainer
&#123;
margin: 0;
padding: 0 0 0 30px;

&#125;

#navcontainer UL
&#123;
list-style: none;
margin: 0;
padding: 0;
border: none;
font: 10px/20px "Verdana", Arial, Helvetica, sans-serif;
&#125;

#navcontainer LI
&#123;
display: block;
margin: 0;
padding: 0;
float: left;
width: auto;
font: 10px/20px "Verdana", Arial, Helvetica, sans-serif;
background: url("/images/navBarBg.gif") repeat-x 20px;
text-align: center;
&#125;

#navcontainer A
&#123;
color: #000;
text-decoration: none;
display: block;
width: 98px;
border-top: 1px solid #A8B090;
border-bottom: 1px solid #A8B090;
border-left: 1px solid #A8B090;
border-right: 1px solid #A8B090;
&#125;

#navcontainer A:hover, #navcontainer A:active &#123; background: url("/images/navBgRoll.gif") &#125;
#navcontainer li#active &#123; background: url("/images/navBgRoll.gif") repeat-x 20px; &#125;