Jump to content

Help With Styling Lists

Darwyn

By Darwyn
in CSS

Recommended Posts

Darwyn Newbie

Darwyn

Posted
Posted

Hi there, this is my first post...I'm hoping someone can help me.I recently took up CSS and have been reading a lot, going through tutorials etc...but I'm still having a problem understanding how to style unordered lists as a menu.You can view my test environment here: http://www.jomar.com/test/menu_test.htmlI'm trying to make the buttons fill with white when hovering...but all I get highlighted is the height of the font.Here's my CSS and HTML<style>#menus {background-color:#CCCCCC;width:200px;padding:5px;}#menus ul{display:block;list-style:none;text-align:left;margin:0;padding:0;width:100%;}#menus li {border-bottom:1px solid #666666;margin:0 0 10px 0;background-color:tan;padding:10px;}#menus li a {display:block;text-decoration:none;font-family:Arial, Helvetica, sans-serif;}#menus a:hover {background-color:white;}</style><body><div id="menus"><ul><li><a href="#">Home</a></li><li><a href="#">Contact Us</a></li><li><a href="#">Products</a></li><li><a href="#">Tech Corner</a></li><li><a href="#">About Us</a></li><li><a href="#">Documentation</a></li></ul></div></body></html>I guess what I don't quite understand is the heirarchy of divs and lists and what to place where. I realize the div is the container, but when it comes to assigning classes to lists, I get lost. My #menu div seems to be handling most of the styling of the list without having to call a class.When is it appropriate to assign the list a class?

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

since you have #menus, any element that you style within that div, like <li>'s and <a>'s will take on its properties. That way if you had another div and wanted to style its particular list and link differently you could, without interfering with your previous link or list styles. A class is helpful if you want to apply a particular style multiple times.try applying the hover psuedo class to the element that you actually want to turn white. What you have right now is only the <a> tags turning white.

Link to comment
Share on other sites
Darwyn Newbie

Darwyn

Posted
  • Author
Posted
try applying the hover psuedo class to the element that you actually want to turn white. What you have right now is only the <a> tags turning white.
I've tried...but to no avail. I'm guess I need to apply it to the <li> element, right? well, I changed my code a bit to include a class designation and it all works the same. But I'm still stumped on how to get the whole button to change color.What am I doing wrong?<style>#menus { background-color:#CCCCCC; width:200px; padding:5px;}.list { display:block; list-style:none; text-align:left; margin:0; padding:0; width:100%;}.list li { border-bottom:1px solid #666666; margin:0 0 10px 0; background-color:white; padding:10px;}.list li a { display:block; text-decoration:none; font-family:Arial, Helvetica, sans-serif;}.list li a:hover { background-color:tan;}</style><body><div id="menus"><ul class="list"> <li><a href="#">Home</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Products</a></li> <li><a href="#">Tech Corner</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Documentation</a></li></ul></div></body></html>
Link to comment
Share on other sites
GPSJane Newbie

GPSJane

Posted
Posted

Try seperating out your A styling and LI styling.LI does not need to be a block but the A should be a block. Then set your block to whatever height you want to highlight.Like so:

.list li {text-decoration:none;font-family:Arial, Helvetica, sans-serif;}a {display:block;height : 99px;}

Also, I just discovered that vertical-align doesn't work on this so you need to set the line-height for 'a' in em. Ie. line-height:2em;. YOu just play with it until it's aligned how you want it.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...