Unordered List Styles (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

boonedawg -> Unordered List Styles (6/10/2006 17:30:56)

How can I create the same effect as:

.navTitle {
width: 178px;
font-weight: bold;
color: #011750;
padding: 2px 0 2px 5px;
margin: 0;
}

.navSubTitle {
width: 178px;
font-weight: bold;
font-size: 11px;
padding-left: 5px;
margin: 0;
}

but also validate? I see now the you can not have div tags within a list. Is this possible to achive this effect?



jaybee -> RE: Unordered List Styles (6/10/2006 18:38:52)

I'm not sure I understand what you're trying to do. It's obviously a menu but why do you want sub titles?



boonedawg -> RE: Unordered List Styles (6/10/2006 19:00:34)

This is what I am trying to achieve:
http://www.ramare.com/hair_care.html

my stylesheet for this is:
* Sidebar Nav */
#navcontainer ul {
width: 183px;
background: #f9f9f9;
border: 1px solid #cccccc;
list-style-type: none;
text-align: left;
padding: 0;
margin: 0;
}

#navcontainer ul li a {
background: transparent url(../imgs/mb.gif) 5px center no-repeat;
padding-left: 15px;
text-align: left;
text-decoration: none;
font-size: 11px;
color: #011750;
outline: none;
}

#navcontainer ul li a:hover {
background: transparent url(../imgs/mb2.gif) 5px center no-repeat;
font-size: 11px;
color: #011750;
}

#navcontainer ul li a#current {
background: transparent url(../imgs/mb2.gif) 5px center no-repeat;
outline: none;
color: #567fa5;
}

.navTitle {
width: 178px;
font-weight: bold;
color: #011750;
padding: 2px 0 2px 5px;
margin: 0;
}

.navSubTitle {
width: 178px;
font-weight: bold;
font-size: 11px;
padding-left: 5px;
margin: 0;
}

I am a newb to CSS and I don't know any other way to do it. [&:]



womble -> RE: Unordered List Styles (6/10/2006 20:17:19)

You don't need those <divs> for your .navTitle - you just need to use nested lists. Listamatic here shows quite simply how a nested list can be used to create a variety of effects. You basically need lists within lists. I was going to type a simple example of how you could nest a list, but it's rather late here and my brain's shut down for the night and is refusing to think code...[:-]

If you check out any of those example nested lists though you should see what I mean. You basically put a list (which would be your subtitles) within the main list. The only thing you have to watch out for is where you place your closing </li> - as you can see from the simple Listamatic examples - where you start you nested list you don't close the list item before it - the closing </li> comes after the nested list.

The only difference between the Listamatic examples and what you're wanting to do is that your section headings will be straight text rather than hyperlinks, but it makes no difference to the basic mark-up - no <div>s required. [;)]



boonedawg -> RE: Unordered List Styles (6/10/2006 21:32:47)

Thanks Womble that is exactly what I was looking for. After I redo my menu bar with one of these lists my code should validate. [:D]



boonedawg -> RE: Unordered List Styles (6/11/2006 0:55:21)

Ok I tried some nested lists and failed miserably, lol.
What I am trying to do is make a navigation that looks like the one I have here.

If anyone can help me out with this code it would be greatly appreciated.



Tailslide -> RE: Unordered List Styles (6/11/2006 4:25:08)

Here you go: Menu Test Page

There are several different ways to do the active menu item - I've used the easiest to understand - i.e. given the "active item" a different class to all the other items. The drawback to this is that you need to do this on every page which is a pain.

The method I use which you might want to have a play with once you get this fixed up is to assign an id to the body element on each page. Then you assign and id to each menu item.

Then in your CSS you add a rule to say basically when the body id=whatever then a particular menu id item will be "active" like this (simplified) 
<body id="home">

<ul>
<li><a href="index.html" id="nav-home">Home</a></li>
<li><a href="about.html" id="nav-about">About</a><li>
<li><a href="contact.html" id="nav-contact">Contact</a></li>
</ul>


CSS: 

#home #nav-home, #about #nav-about, #contact #nav-contact {whatever rules}


The advantage of doing it this way is that you have the same menu on every page - you can stick the lot in an include if you like.

The only disadvantage in your case would be working out the rules as you sometimes have two items "active" at the same time (e.g. haircare and hairdryers).



boonedawg -> RE: Unordered List Styles (6/13/2006 13:08:23)

Tailslide,

Thank you so much for the menu, it works great. I tried replying to your message but both times it failed, lol. There was one thing that I tried to modify in this list but I am unable to do it. I would like to make the sub links non bold, I could only seem to get it to work for the hover state. Anyway it looks good as is, and I appreciate all your help with this matter.



Tailslide -> RE: Unordered List Styles (6/13/2006 13:22:23)

Just add in 

#navcontainer ul ul a:link {font-weight:normal;}


and that will get the sub-sub menu links back to normal weight in FF, Moz, Opera etc. In IE they were already non-bold.



boonedawg -> RE: Unordered List Styles (6/13/2006 15:45:33)

Thank you so much Tailslide for all your help. Everyone on this site is so helpful, I am glad to be apart of these forums. The menu bar works great, my next mission is to get all the pages to work in IE, I redid my css layout on the index page and it works, just need to do the other pages now. After I have completed that I will need some assistance in making my html and css validate, there are some things I still don't understand, but I know with the help from people in these forums I will get this done. Thanks to everyone who has taken the time to help me out.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.046875