|
CSS - Change Body Background On List Item Hover
I've been using CSS for a couple of days now, and am a bit stuck on how to change the main background image in the body when I hover over a menu item on the side bar. Changing the menu item background seemed easy enough. But, I suspect I am missing a key piece on how to get access to a body style from inside a list style.
Here is the short section I am working on, with the full CSS file shown below that. This validates with a couple of warnings about my black on black color selection. I would certainly appreciate any help with this. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>HOTWORKS</title> <link rel="stylesheet" href="stylz.css" type="text/css"> </head> <body class="top" id="bdy" > <!-- Site navigation menu --> <ul class="navbar" id="navlist"> <li><a href="tools.html"><br>Tools</a> <li><a href="glass.html"><br>Glass <br> Artwork</a> <li><a href="pottery.html"><br>Ceramic<br> Artwork</a> <li><a href="about.html"><br>About</a> </ul> <!-- Main content --> <h1> </h1> <p> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> TOOLS - ART - MISCELLANEA <br> <address> </address> </body> </html> Code: #navlist a:hover {
color: #1e5ebd;
background:url("images/drawer4b.jpg") no-repeat;
background-repeat:no-repeat;
background-position: 0px -10px;
color:#FF0000;
/* how do I do something like this
body.top { background-image: url(images/tabtool.jpg) ; }
*/
}
Just to be complete, and in case there is something in here that you might need, here is the full css file: Code:
body.top {
padding-left: 11em;
font-family: Fantasy, "Times New Roman", Times, serif;
font-size:15px;
color: #000000;
/*background-image: url(images/tab3.jpg) ; */
background-position: 210px 10px;
background-repeat:no-repeat;
background-color: #000000;
margin-left:5cm;
}
body.top { background-image: url(images/tab3.jpg) ; }
ul.navbar {
color: #000000;
list-style-type: none;
position: absolute;
display:block;
float:left;
left: 1em;
}
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif
}
ul.navbar li {
text-align:center;
/* vertical-align:100px; */
background: #000000;
border-right: 1em solid black;
}
ul.navbar a {
text-decoration: none ;
top:10%;
height:4em;
}
a:link {
color: white }
a:visited {
color: white }
#navlist {
font-family:Arial, Helvetica, sans-serif;
font-size:.8em;
font-weight:bold;
list-style:none;
}
#navlist a {
display:block;
width:144px;
height:137px;
color:#fff;
text-decoration:none;
background:url("images/drawer4.jpg") no-repeat;
background-repeat:no-repeat;
background-position: 0px -10px;
}
#navlist a:hover {
color: #1e5ebd;
background:url("images/drawer4b.jpg") no-repeat;
background-repeat:no-repeat;
background-position: 0px -10px;
color:#FF0000;
/* how do I do something like this
body.top { background-image: url(images/tabtool.jpg) ; }
*/
}
#navlist a:active {
background:url("images/drawer4b.jpg") no-repeat;
background-repeat:no-repeat;
background-position: 0px -10px;
color:#FFC741;
}
Similar TutorialsI would like the link colour to change and the background of the <li> to change as well. I can't figure out what CSS to use for it though. I have made bold and underlined the li I want to change on hover. Code: <li id="menuitem_2mainnav"> <a id="menulink_2mainnav" class="mainlevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=2">Meetings</a> <ul id="menulist_2mainnav"> <li id="menuitem_2_1mainnav"><a id="menulink_2_1mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=14">TEST 1</a></li> <li id="menuitem_2_2mainnav"><a id="menulink_2_2mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=15">TEST 2</a></li> <li id="menuitem_2_3mainnav"><a id="menulink_2_3mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=16">TEST 3</a></li> <li id="menuitem_2_4mainnav"><a id="menulink_2_4mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=17">TEST 4</a></li> </ul> </li> I have tried: Code: #menulist_2mainnav li:hover{ color:#000000 !important; }
But it doesn't change the links text colour. Hi guys, Is it possible in CSS to change the colour / image of the page background dynamically. So that as you hovered over different links , the background of the page changed. I know you can do this in JS but how would you do it in CSS? I was kinda thinking something like: a.linkname:hover, a.linkname:focus body { background-color:#00FF00; } but thats just a guess and doesnt work lol. Many Thanks, Alvin. I have a button which is drawn using css background-image and it has a hover effect using css a:hover. I also need to have a click state for this button, so that each time the button is clicked it switches between two different states (4 states total). Is this possible? I'm assuming this will probably require JavaScript which I have little experience. Thanks in advance for any help! Hi I am creating a navigation bar using unsorted list and CSS. I have given my CSS and HTML code here Code: #navcontainer
{
width: 200px;
margin-top:150px;
}
#navcontainer ul#navlist
{
width:200px;
clear:left;
text-align:left;
margin-left:0;
padding-left:0;
list-style:none;
font-size: 12px;
font-weight:bold;
line-height: 14px;
}
#navcontainer ul#navlist li
{
margin-left:0;
padding: 0px;
display: block;
list-style:none;
border-bottom: 1px solid gray;
}
#navcontainer ul#navlist li.last
{
border-right: 0;
background:none;
}
a.linkText {
padding: 10px;
display: block;
color : #444444;
font-family : arial;
font-size : 11px;
font-weight : bold;
text-decoration : none;
height:25px;
}
a.linkText:link {
color : Aqua;
/* you can define other styles if necessary */
}
a.linkText:visited {
color : Maroon;
/* you can define other styles if necessary */
}
a.linkText:hover {
color : Blue;
}
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li><a class="linkText" href="#">Item One</a></li>
<li><a class="linkText" href="#">Item two</a></li>
<li><a class="linkText" href="#">Item three</a></li>
<li><a class="linkText" href="#">Item four</a></li>
<li><a class="linkText" href="#">Item five</a></li>
</ul>
</div>
The problem is, when I select the next list item, previously selected list item should come to the original color. Is there any way I can achieve this? Your guidence will be appreciated. Many thanks Hi All, Anyone know of a way to change acheive this behaviour? I want to have several links in LI and when one hovers over the LI, the background of the whole UL changes (not just the background of the list item itself). Thanks in advance for any pointers. Cheers, :)Ben Thanks for taking the time to read my question. I have a <li> that has a background-color and border. I would like it to become transparent when the user hovers over it. In my a:hover I have background-color: transparent; but that is not working. Any ideas? Thanks, Brad I have these two areas. Code:
.MenuItem {
color:#FFFFFF;
font-size:12px;
background-color:#CC0000;
font-weight:bold;
height:18px;
padding-top:5px;
padding-bottom:5px;
border-top:0px solid #FF0000;
border-left:2px solid #FF0000;
border-bottom:2px solid #FF0000;
border-right:2px solid #FF0000;
}
.MenuItemTop {
color:#FFFFFF;
font-size:12px;
background-color:#CC0000;
font-weight:bold;
height:18px;
padding-top:5px;
padding-bottom:5px;
border-top:2px solid #FF0000;
border-left:2px solid #FF0000;
border-bottom:2px solid #FF0000;
border-right:2px solid #FF0000;
}
which refer to the left nav. My code only changes the color behind the text, not the entire area (box) behind the text. Code:
.MenuItemTop a:hover, .MenuItem a:hover {
color:#FFFFFF;
text-decoration:underline;
font-size:12px;
background-color:#000000;
}
Any ideas why? example at : http://www.pierced.ca/FeedProductionRecordsHelp.htm Brad Nevermind, fixed. Changed Pixels into Percentages. Delete thread. I have a list that I've created with the list-style-type being an image. For some reason, the space between the list-style-image and the list text differs in IE and Firefox. Has this happened to anyone else, or am I doing something incorrectly? Below is the code. The cell that these lists sit in has has an id of 'cellid'. Code:
#cellid {
margin: 0 0;
padding: 0 0;
}
#cellid ul {
margin: 10px 0 0 20px;
padding: 0 0;
}
#cellid li {
margin: 0 0;
padding: 0 0;
list-style-image: url(images/idxyellowlist.gif);
}
The ul has a margin of 20px on the left to line up with an element above it. Does anyone have any ideas as to how to get around this space? Thanks, Brian Hi everyone, I was wondering what I would have to do to get an image to be above an in-line horizontal menu when it is is hovered upon. Here is my css so far, right now on hover I have it changing color with text-shadow. I would like to keep that along with the image above. I have seen some tutorials using about using spans but nothing worked. Thanks in advance! Code: .nav ul{list-style-type:none; margin:0 auto; padding:0; width:600px; height:50px; padding-left:500px; padding-top:100px} .nav li {display:inline; padding-right:15px } .nav a {text-decoration:none; color:white;} .nav a:hover {color: #0C0; text-shadow:2px 2px 2px white;}
Please look at the bottom of this page in FF - http://certified.tmhdesign.com The li elements have a margin-left or the ul a padding left. Can someone help me out? Here is my css ul#hp_offers{ width:600px; margin:0 0 0 10px; border:1px solid #e0e0e0; } ul#hp_offers li{ padding:3px 5px 3px 25px; border-bottom:1px solid #e0e0e0; list-style:none; list-style-type:none; margin:0; } li.even{ background: #f1efef url(../images/offer_even_bullet.gif) no-repeat 10px 7px; } li.odd{ background: #e0e0e0 url(../images/offer_odd_bullet.gif) no-repeat 10px 7px; } I've been struggling with this a bit. I would rather not use a container div for my lists, but it seems that it's not possible to assign the lists themselves a width. When I assign a width to the <ol> element, I lose the numbers under the margin on the left, which I can sort-of understand. If I assign a width to the <li> elements, it works fine in Firefox, but IE drops the number on the first <li> and changes the numbers on each following <li> to "1". Hi all, and thanks for reading. The following code looks fine in Firefox, but has huge spaces between the images in IE 6. CSS: Code:
#menu {float:left; width:157px; background-color:#FFFFFF;}
#menu IMG {display:block; margin:0; padding:0;}
#menu UL {list-style-type:none; margin:0; padding:0; background-color:#FFFFFF;}
#menu UL LI {margin:0; padding:0;}
HTML: Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
...
<div id="menu">
<ul>
<li><a href="../balloons/" title="Balloons"><img src="../images/menu-balloons.gif" alt="Balloons" width="157" height="37" border="0" /></a></li>
<li><a href="../centerpieces/" title="Centerpieces"><img src="../images/menu-centerpieces.gif" alt="Centerpieces" width="157" height="37" border="0" /></a></li>
<li><a href="../supplies/" title="Supplies"><img src="../images/menu-supplies.gif" alt="Suppliers" width="157" height="37" border="0" /></a></li>
<li><a href="../contact/" title="Contact Us"><img src="../images/menu-contact.gif" alt="Contact Us" width="157" height="37" border="0" /></a></li>
<li><a href="../" title="Home"><img src="../images/menu-home.gif" alt="Home" width="157" height="37" border="0" /></a></li>
</ul>
</div>
Thanks in advance. -colin I am having trouble with my navigation. it works fine in safari and firefox, but when i try it in IE for the PC the main navigational elements don't move. does anyone know why? www.iconiqdesigner.com thanks! Hey everyone, After doing some reprogramming of the site I was making I'm having troubles with lists. I can't set the width of the li or a so that the size takes shape. I can't figure out why, or how to do it. I know I've done it before but the code i used there just doesn't seem to want to work. The LI and A tags take the size of the text within. I've checked the resources I could find in the sticky and that kravitz gave me and they seem to be able to set width but it's just not working. here is my css Code:
#menu{
width:750px;
border:thin solid #000000;
}
#menu ul{
margin:0;
padding:0;
width:750px;
display:inline;
}
#menu li{
width:150px;
display:inline;
border:thin solid #000000;
list-style-type:none;
background-color:#550210;
}
#menu a{
width:150px;
}
If I take out the display:inline the width takes shape but when I put it back in it resizes to the size of the text within. Of course, IE is being a P.I.T.A. I can't figure out why this is happening... but it's probably something so simple I'm overlooking it. I have a set of images and/or links set up as a list and the last item on the first row shifts down. After that row, everything looks fine. No problems on FF, Chrome and Safari (Mac). See this page for example and view with Explorer: www[dot]cameronstevens[dot]ca/gallery[dot]html Thanks Is there any way to have horizontal list items automatically fill any given width? for example, If I have 5 list items, I can set each width to 20% and the list will fill the width of the container, but if I don't set a width, then they collapse to the left. the behavior I'm after is like a table. The 'old' way to create a horizontal list would be to create a table with one row and 5 cols. Setting the width of the table to 100% would make each cell 20% automatically. Any way to accomplish this in css without explicitly setting the width? I am really stumped -- I need to stack images on top of one another using an unordered list but I get a few pixels of whitespace at the bottom no matter what I do. I know this could be acheived using divs instead but I would like to figure it out using lists. I broke the code into as simple a form as possible and put it below. Removing everything between the </li> tag and the next <li> tag does not work. I tried adding "height: 20px;" under "#nav ul li" to force the images to stack on top of each other -- this works in Safari and Firefox but not in IE Windows. If I remove the DocType tag or switch it to xhtml transitional the images do stack in Safari but not in Firefox or IE. Am I missing something here or is this just not possible? Appreciate any help. The code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css list test</title>
<style type="text/css" media="screen">
img {
border: 0;
}
#nav {
padding: 0;
margin: 0;
}
#nav ul {
padding: 0;
margin: 0;
list-style-type: none;
}
#nav ul li {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><img src="http://test.mightylab.com/images/colors/blue.jpg" width="40" height="20" /></li>
<li><img src="http://test.mightylab.com/images/colors/yellow.jpg" width="40" height="20" /></li>
<li><img src="http://test.mightylab.com/images/colors/red.jpg" width="40" height="20" /></li>
</ul>
</div>
</body>
</html>
First of all, I hope this makes sense - I just spent two hours nonstop tweaking the navigation on my first client's site, and my brain and eyes are a bit frazzled. I have the navigation in a list, displayed horizontally in a Suckerfish dropdown. The container is elastic but the navigation is not; I want it to stick to the right side but move to the left when the browser is made narrower. Floating it to the right works perfectly.. But it reverses the order of my list items so that "Home" is to the far right instead of the left. Is there any way to reverse the order of the list items without touching the HTML? Going for full accessibility here, so I obviously don't want to reverse the item order in the HTML. I could probably figure this out on my own but it would take time, and like I said.. My brain is a little wonky right now Thanks in advance! |
|||||||