PDA

View Full Version : help with css list



esthera
Nov 29th, 2006, 12:51 PM
my html is

<div id="navigation">
<ul>
<li>Category 1
<ul>
<li>sub 1</li>
<li>sub 2</li>
<li>sub 3</li>
<li>sub 4</li>
</ul>
</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
<li>Category 6</li>

</ul>

</div>


my css is

#navigation ul {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #FFFFFF;
font-weight: bold;
list-style:none;
margin-left:0px;

}
#navigation ul li{
background-image: url(images/category_bar.jpg);
padding-left:20px;

}


how do I set the background image for teh second list (within the first list)?

Arbitrator
Nov 29th, 2006, 01:43 PM
Try the following selector: *#navigation ul ul.

esthera
Nov 29th, 2006, 02:16 PM
i tried that but it applies both teh new ul style plus the style of
#navigation ul li{
background-image: url(images/category_bar.jpg);
padding-left:20px;

}

ronaldb66
Nov 29th, 2006, 02:35 PM
Do you mean to set the background image for the sub list itself, or for the list items?

More specific styles could be assigned using child selectors but since IE6 doesn't understand these it might be more reliable, if less efficient, to assign classes to the various list levels and use those to address specific groups of elements, for instance:

<ul class="top">
<li>top cat 1</li>
<li>top cat 2
<ul class="sub1">
<li>sub1 cat 1</li>
<li>sub1 cat 3</li>
</ul>
</li>
<li>top cat 3</li>
</ul>
Both the top list and its items can be specifically addressed with "ul.top" c.q. "ul.top li", the first sub level with "ul.sub1" resp. "ul.sub1 li".

esthera
Nov 29th, 2006, 03:55 PM
no my second list should not have a background image
it is

#navigation ul ul{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
background-color:#ffffff;
text-align: center;
font-weight: bold;
vertical-align: top;
list-style-image: url(images/e-com-24_11_06_52.jpg);
}


but it is showing the background image from the main list item.

_Aerospace_Eng_
Nov 29th, 2006, 04:08 PM
Do you mean the image that is to replace the bullets? I see that you have some background images on the lis so are you wanting to change the background image of the lis in the second ul?


#navigation ul li ul li {
background-image:url(differentimage.jpg);
padding-left:40px;
}

esthera
Nov 29th, 2006, 04:55 PM
no the second li should not have any background image. it has a backgroudn color of white and a bullet image but not a background image.

is this possible?

_Aerospace_Eng_
Nov 29th, 2006, 07:08 PM
#navigation ul li ul li {
background:none;
}

esthera
Nov 29th, 2006, 07:19 PM
thanks that sort of worked although it doesn't look good yet as i want the entire background of the list within the list to be white (and not the color of the first list)
now it's doing part of the list white and part not.

#navigation ul ul{
margin-left:0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
background-color:#ffffff;
text-align: left;
font-weight: bold;
list-style-image:url(images/bullet.jpg)


}

_Aerospace_Eng_
Nov 29th, 2006, 07:23 PM
Do you have a link to your site? This guessing game is getting old. Help us help you.

esthera
Nov 29th, 2006, 07:29 PM
http://www.awe bf oryou.com/g/

though I see the page is awful on firefox and have no idea why......any ideas on this will also be appreciated. I'm all for not using tables for layout until I spend hours trying not to....

_Aerospace_Eng_
Nov 29th, 2006, 07:47 PM
Okay adding this to the top of your CSS, kind of fixes things

* {
margin:0;
padding:0;
}
That zeros out all margins and padding on all elements unless done manually.
Using this for #extra helps in Firefox as well

div#extra{margin-left:167px; padding-top:10px; padding-left:8px; }
TBH you seemed to use too many divs. You have a case of divitis (look it up).

Something like this should work

#navigation ul li{
background: url(images/category_bar.jpg) no-repeat;
padding-left:20px;
}

esthera
Nov 29th, 2006, 08:01 PM
thanks.. but it still is not right --
it should look like http://www.aw ebf oryou.com/ge fen/index.html -- a semitable version

_Aerospace_Eng_
Nov 29th, 2006, 08:30 PM
See how easy it is when you post links? So remember in the future, help us help you.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#navigation {
width:167px;
}
#navigation ul {
margin:0;
padding:0;
list-style:none;
background:url(images/category_bar.jpg);
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:#FFF;
font-weight: bold;
}
#navigation ul li ul {
background:#FFF;
font-size:14px;
}
#navigation ul li ul li a {
color:#000;
text-decoration:none;
display:block;
width:100%;
}
#navigation ul li ul li {
background:url(images/bullet.jpg) left center no-repeat;
padding-left:24px;
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li>Category 1
<ul>
<li><a href="#">sub 1</a></li>
<li><a href="#">sub 2</a></li>
<li><a href="#">sub 3</a></li>
<li><a href="#">sub 4</a></li>
</ul>
</li>
<li>Category 2
<ul>
<li><a href="#">sub 1</a></li>
<li><a href="#">sub 2</a></li>
<li><a href="#">sub 3</a></li>
<li><a href="#">sub 4</a></li>
</ul>
</li>
<li>Category 3
<ul>
<li><a href="#">sub 1</a></li>
<li><a href="#">sub 2</a></li>
<li><a href="#">sub 3</a></li>
<li><a href="#">sub 4</a></li>
</ul>
</li>
<li>Category 4
<ul>
<li><a href="#">sub 1</a></li>
<li><a href="#">sub 2</a></li>
<li><a href="#">sub 3</a></li>
<li><a href="#">sub 4</a></li>
</ul>
</li>
<li>Category 5
<ul>
<li><a href="#">sub 1</a></li>
<li><a href="#">sub 2</a></li>
<li><a href="#">sub 3</a></li>
<li><a href="#">sub 4</a></li>
</ul>
</li>
<li>Category 6
<ul>
<li><a href="#">sub 1</a></li>
<li><a href="#">sub 2</a></li>
<li><a href="#">sub 3</a></li>
<li><a href="#">sub 4</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

esthera
Nov 30th, 2006, 06:35 AM
thanks for your help...
www.aw eb for you.com/g/index.html
but look at it now ---

it should look like http://www.a webfo ryo u.com/gefen/index.html

what am i doing wrong? teh layout looks all wrong... and your list is spaced nicely and mine is spaced with big spaces in between.

_Aerospace_Eng_
Nov 30th, 2006, 07:38 AM
Its because of your padding here

a{display:block;color: #981793;padding:10px}
add padding:0; to the declarations for the links in the ul. It seems like you coded for IE and paid no attention to what Firefox was doing. General rule of thumb. Code for a good browser like Firefox and tweak for IE.

You really need to validate your code. You have 68 errors, see them here (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.awebforyou.com%2Fg%2F).

esthera
Nov 30th, 2006, 10:59 AM
ok -- but the layout is all wrong on firefox is see -- is that because of the warnings. (most are missing alt tags which i'll add but should not make a different)

_Aerospace_Eng_
Nov 30th, 2006, 12:02 PM
Most but not all. You have some elements that are in places they shouldn't be. You can't expect Firefox to display your page the way you want when you have errors. Get rid of the errors then come back. There is no point in trying to fix the CSS when your document isn't valid.

esthera
Nov 30th, 2006, 12:36 PM
ok i fixed all warnings except those associated with the iframe which i can't remove as it is not on my server.

please see http://www.awe bfor you .com/g/ on firefox (and I was told opera is also messed up) - can you help me fix it so it looks good on all browsers.

the main part is supposed to be 3 parts -- 1 the menu list, 2 the main part, 3 the iframe.

(and each one should have white under it if another section is longer.)

esthera
Nov 30th, 2006, 01:17 PM
i see there are some w3 editors when i go to w3 (but not showing in my firefox validator) I have no idea waht tag is misssing. - do you???

_Aerospace_Eng_
Nov 30th, 2006, 05:44 PM
Form controls need to go in a block level element like a div. They can't go directly in between the form tags.

<form>
<div>
<!--form controls-->
</div>
</form>
You still aren't paying attention to what we tell you. You have this for #extra

div#extra{margin-left:160px; padding-top:10px; padding-left:0px; float:right; }
I told you to use this

div#extra{margin-left:160px; padding-top:10px; padding-left:0px; }
IF you had done that things would look better in Firefox but you didn't.

Please follow the example here
http://bonrouge.com/2c-hf-fixed.php

It will help fix a lot of your problems.

esthera
Nov 30th, 2006, 06:01 PM
thanks i really appreciate all your help... i thought I had to use a float right for the iframe.

now there's just the middle collumn left -- I want it to be straight down teh middle without wrapping around the categories.

It's also not lining up properly. (you can see the proper one in my table version at http://www.aw eb for you.com/gef en/

thanks again for all your help... thougth this was a simple design to code in css without tables but I see i'm wrong...