6 replies [Last post]
untangledweb
untangledweb's picture
Offline
newbie
Vancouver, Washington
Last seen: 13 years 4 weeks ago
Vancouver, Washington
Timezone: GMT-8
Joined: 2007-01-29
Posts: 8
Points: 0

Hi,
Climbing the CSS learning curve slowly, trying to convert some of my old table sites to CSS. My lefthand #sitenav list items are all shifting to the right, with lots of blank space on the left. I've thought it's something with the padding somewhere, but I've tried a few different things and can't see what's doing it. I've already validated both CSS and HTML. Thanks in advance, and hopefully this is one more newbie question I can cross off my list, never to ask again.

Bill

Here's the URL
http://www.time-share-resorts.biz/colorado02.html

and here's the CSS
/* Time Share Resorts CSS */

body { background-color: #FFFFFF;
margin: 0px; padding:0px;
text-align: center;
font-family: geneva, 'Trebuchet MS', sans-serif;
color: #000066;
}
h1, h2, h3, h4
{ font-size: 1.1em; letter-spacing: 0.25em; }

/* THIS IS THE MAIN CONTAINER */
#layoutbox { position: relative;
width: 740px;
margin: 0px auto;
padding: 0;
}

#header

#bannerad { float: right;
width: 468px;
}

#content { float: left;
font-size: .9em;
margin: .1em;
padding: .1em;
}

/* SIDE NAVIGATION BAR */
#sitenav { float: left;
text-align: left;
width: 150px;
border: 0;
margin: 0.1em;
padding: 0.1em;
position: relative;
color: #FFFFFF;
background-color: #000066;
font-size: 0.7em;
font-weight: bold;
}
#sitenav ul li
{
display: list-item;
list-style-type: none;
margin: 0;
padding: 0;
}
#sitenav li a { color: #FFFFFF; }
#sitenav li a:hover { background-color: #CC0000; }

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

in your css #sitenav { }

in your css
#sitenav { } should be #sitenav ul { }

braumab
Offline
Enthusiast
Last seen: 9 years 9 weeks ago
Timezone: GMT-5
Joined: 2007-03-27
Posts: 52
Points: 2

did that fix the problem?

did that fix the problem?

eh.....?

untangledweb
untangledweb's picture
Offline
newbie
Vancouver, Washington
Last seen: 13 years 4 weeks ago
Vancouver, Washington
Timezone: GMT-8
Joined: 2007-01-29
Posts: 8
Points: 0

Perfect--thank you!

Excellent, that did it. I'll make a note. Now, given that, do I need to take the ul off this selector below?
(This one: #sitenav ul li)

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

no, but it wouldn't matter

no, but it wouldn't matter if you did because the li is still a descendant of #sitenav.

untangledweb
untangledweb's picture
Offline
newbie
Vancouver, Washington
Last seen: 13 years 4 weeks ago
Vancouver, Washington
Timezone: GMT-8
Joined: 2007-01-29
Posts: 8
Points: 0

I get it

That makes sense. Thanks.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 36 weeks 1 day ago
Joined: 2004-06-30
Posts: 9668
Points: 801

untangledweb

untangledweb wrote:
Excellent, that did it. I'll make a note. Now, given that, do I need to take the ul off this selector below?
(This one: #sitenav ul li)

#sitenav ul li refers to any list-item that is a child of a UL which in turn is a child of #sitenav, whereas #sitenav li refers to list-items that are a child of #sitenav.

But in this case it doesn't matter as list-items need to be a child of a UL anyway Tongue

Verschwindende wrote:
  • CSS doesn't make pies