JavaScript and client side scripting.
Moderator: General Moderators
-
hairyjim
- Forum Contributor
- Posts: 219
- Joined: Wed Nov 13, 2002 9:04 am
- Location: Warwickshire, UK
Post
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>
Last edited by
hairyjim on Thu Nov 04, 2004 8:45 am, edited 1 time in total.
-
phpScott
- DevNet Resident
- Posts: 1206
- Joined: Wed Oct 09, 2002 6:51 pm
- Location: Keele, U.K.
Post
by phpScott »
with my limited exp I wonder my in your detailnavcontainer you have text align=center? would that not be causing it partly
-
hairyjim
- Forum Contributor
- Posts: 219
- Joined: Wed Nov 13, 2002 9:04 am
- Location: Warwickshire, UK
Post
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
-
patrikG
- DevNet Master
- Posts: 4235
- Joined: Thu Aug 15, 2002 5:53 am
- Location: Sussex, UK
Post
by patrikG »
check the parent elements such body, html etc. Might be worth posting the entire CSS file here.
-
hairyjim
- Forum Contributor
- Posts: 219
- Joined: Wed Nov 13, 2002 9:04 am
- Location: Warwickshire, UK
Post
by hairyjim »
At the minute that is the entire css file. I am just experimenting in css navigation.
-
patrikG
- DevNet Master
- Posts: 4235
- Joined: Thu Aug 15, 2002 5:53 am
- Location: Sussex, UK
Post
by patrikG »
-
hairyjim
- Forum Contributor
- Posts: 219
- Joined: Wed Nov 13, 2002 9:04 am
- Location: Warwickshire, UK
Post
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
{
margin: 0;
padding: 0 0 0 30px;
}
#navcontainer UL
{
list-style: none;
margin: 0;
padding: 0;
border: none;
font: 10px/20px "Verdana", Arial, Helvetica, sans-serif;
}
#navcontainer LI
{
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;
}
#navcontainer A
{
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;
}
#navcontainer A:hover, #navcontainer A:active { background: url("/images/navBgRoll.gif") }
#navcontainer li#active { background: url("/images/navBgRoll.gif") repeat-x 20px; }