Topic: Rollover Div (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=27301" title="Pages that link to Topic: Rollover Div (Page 1 of 1)" rel="nofollow" >Topic: Rollover Div <span class="small">(Page 1 of 1)</span>\$

Hustluz Nervous Wreck (II) Inmate From: Insane since: Jun 2003	posted 01-10-2006 23:12 Im currently trying to make a div rollover for a menu. i just want the background color to change when you rollover the div. im using dreamweaver and at first i used <ul> and <li> but that puts a bullet to the left of the link and i dont want that. so i used a div tag for each button instead. trouble is i cant get the background color to change how do i code the css2 so that when i rollover it the background color will change
divinechaos Obsessive-Compulsive (I) Inmate From: Insane since: Dec 2001	posted 01-10-2006 23:31 For the ul, use: ul { list-style: none; } As for the rollover, use the :hover pseudoclass. Except, IE doesn't support :hover on non-links. Use this: http://htmldog.com/articles/suckerfish/ ... to fix the situation. I would suggest using LI's, because that's what the Suckerfish script uses by default. Cheers, Derek
kuckus Paranoid (IV) Mad Librarian From: Glieberlermany Insane since: Dec 2001	posted 01-11-2006 00:00 it took me a bit, but examples are so nice... here is a proper scriptless one (though I don't know if the suckerfish would actually have used JS for this, only skimmed the page): code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Rollover List Demo</title> <style type="text/css"> body { background: #333; color: #111; font-family: sans-serif; font-size: 12px; margin: 0; padding: 60px 180px; } ul { margin: 0; padding: 0; } ul li { list-style: none; border: 1px solid #111; margin: 0; padding: 0; } ul li a, ul li a:visited { display: block; background: #111; color: #bbb; padding: 6px 18px; } ul li a:hover, ul li a:active { background: #222; padding: 6px 18px; } </style> </head> <body> <h1>Rollover List Demo</h1> <ul> <li><a href="#">Intel Core Duo</a></li> <li><a href="#">Front Row</a></li> <li><a href="#">Built-in iSight camera</a></li> <li><a href="#">iLife `06 featuring iWeb</a></li> </ul> <p>(Works best across browsers if the elements you apply the 'hover' pseudo-class to are anchors, so this is what I'm doing here.)</p> </body> </html> http://kussatz.com/asylum/rollover_list.html (Edited by kuckus on 01-11-2006 00:07)
Hustluz Nervous Wreck (II) Inmate From: Insane since: Jun 2003	posted 01-11-2006 00:03 okay thanks now i got that to work. i didnt us the suckerfish but i used the list-stlye: none; the problem im having now is that if it turnes all my links on the page to the same color and attributes as the rollover. this is my code code: <div id="navigation">Content for id "navigation" Goes Here</div> <div id="left"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Pictures</a></li> <li><a href="#">Awards</a></li> <li><a href="#">Articles</a></li> </ul> </div> this is the css2 for that code code: #left { padding: 5px; height: 500px; margin: 0; width: 20%; right: auto; background-color: #9A918A; border: thick double #666666; list-style-type: none; position: static; } #left ul { list-style-type: none; width: 100%; margin: 0; padding: 0; height: 10px; } #left a { display: block; width: 100%; text-decoration: none; color: #333333; font-weight: bold; } #left a:hover { color: #CCCCCC; background-color: #666666; } i thought if i used the #left before the a link it would only change the a links inside the div with the id="left". anyone know what im doing wrong
kuckus Paranoid (IV) Mad Librarian From: Glieberlermany Insane since: Dec 2001	posted 01-11-2006 09:49 Yeah it should do that... and right off I don't see the the problem, the code you posted looks ok. Can you post a link the whole uploaded page?
Blaise Paranoid (IV) Inmate From: London Insane since: Jun 2003	posted 01-11-2006 11:35 It might be because all your links go to the same place, '#', try putting real href values in and see if that makes a difference, also #left is a little dubious for an id, perhaps it should be #leftNav or something similar. Cheers,
Skaarjj Maniac (V) Mad Scientist From: :morF Insane since: May 2000	posted 01-13-2006 10:34 If you're going to use nested unordered lists to create a menu on your page it's generally a good idea to give the top-level <ul> tag an idea, like "nav", and make sure that all your CSS references are done as children of this. The markup: code: <ul id="nav"> <li>Item 1 <ul> <li>Sub Item 1.1</li> <li>Sub Item 1.2</li> <li>Sub Item 1.3</li> <li>Sub Item 1.4</li> </ul> </li> <li>Item 2 <ul> <li>Sub Item 2.1</li> <li>Sub Item 2.2</li> <li>Sub Item 2.3</li> <li>Sub Item 2.4</li> </ul> </li> <li>Item 3 <ul> <li>Sub Item 3.1</li> <li>Sub Item 3.2</li> <li>Sub Item 3.3</li> <li>Sub Item 3.4</li> </ul> </li> <li>Item 4 <ul> <li>Sub Item 4.1</li> <li>Sub Item 4.2</li> <li>Sub Item 4.3</li> <li>Sub Item 4.4</li> </ul> </li> </ul> And the CSS: code: ul#nav { list-style-type: none; font-family: verdana, arial, sans-serif; font-size: 0.95em; } ul#nav li { } ul#nav li:hover { } ul#nav li ul { list-style-type: none; display: } ul#nav li:hover ul { display: visible; } ul#nav li ul li { } ul#nav li ul li a { } ul#nav li ul li a:hover { } Okay, I'm in a lazy mood, I must confess. Tha'ts only some of the elements, and I can't be bothered looking up the rest. See the suckerfish dropdowns article on ALA. That does it perfectly in both IE and FF, using a little javascript for IE. Justice 4 Pat Richard

Topic: Rollover Div (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=27301" title="Pages that link to Topic: Rollover Div (Page 1 of 1)" rel="nofollow" >Topic: Rollover Div <span class="small">(Page 1 of 1)</span>\$

Hustluz
Nervous Wreck (II) Inmate

From:
Insane since: Jun 2003

posted 01-10-2006 23:12

Im currently trying to make a div rollover for a menu. i just want the background color to change when you rollover the div. im using dreamweaver and at first i used <ul> and <li> but that puts a bullet to the left of the link and i dont want that. so i used a div tag for each button instead. trouble is i cant get the background color to change how do i code the css2 so that when i rollover it the background color will change

divinechaos
Obsessive-Compulsive (I) Inmate

From:
Insane since: Dec 2001

posted 01-10-2006 23:31

For the ul, use:
ul {
list-style: none;
}

As for the rollover, use the :hover pseudoclass. Except, IE doesn't support :hover on non-links. Use this:
http://htmldog.com/articles/suckerfish/

... to fix the situation. I would suggest using LI's, because that's what the Suckerfish script uses by default.

Cheers,
Derek

kuckus
Paranoid (IV) Mad Librarian

From: Glieberlermany
Insane since: Dec 2001

posted 01-11-2006 00:00

it took me a bit, but examples are so nice... here is a proper scriptless one (though I don't know if the suckerfish would actually have used JS for this, only skimmed the page):

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Rollover List Demo</title>
<style type="text/css">
body {
	background: #333;
         color: #111;
         font-family: sans-serif;
         font-size: 12px;
	margin: 0;
         padding: 60px 180px;
}
ul {
	margin: 0;
         padding: 0;

}
ul li {
	list-style: none;
         border: 1px solid #111;
         margin: 0;
         padding: 0;
}
ul li a, ul li a:visited {
	display: block;
         background: #111;
         color: #bbb;
         padding: 6px 18px;
}
ul li a:hover, ul li a:active {
	background: #222;
         padding: 6px 18px;
}
</style>
</head>
<body>
	<h1>Rollover List Demo</h1>
	<ul>
         	<li><a href="#">Intel Core Duo</a></li>
                 <li><a href="#">Front Row</a></li>
                 <li><a href="#">Built-in iSight camera</a></li>
                 <li><a href="#">iLife `06 featuring iWeb</a></li>
         </ul>
         <p>(Works best across browsers if the elements you apply the 'hover' pseudo-class to are anchors, so this is what I'm doing here.)</p>
</body>
</html>

http://kussatz.com/asylum/rollover_list.html

(Edited by kuckus on 01-11-2006 00:07)

Hustluz
Nervous Wreck (II) Inmate

From:
Insane since: Jun 2003

posted 01-11-2006 00:03

okay thanks now i got that to work. i didnt us the suckerfish but i used the list-stlye: none; the problem im having now is that if it turnes all my links on the page to the same color and attributes as the rollover. this is my code

code:

<div id="navigation">Content for  id "navigation" Goes Here</div>
	<div id="left">
		<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Pictures</a></li>
		<li><a href="#">Awards</a></li>
		<li><a href="#">Articles</a></li>
		</ul>
                 </div>

this is the css2 for that code

code:

#left {
	padding: 5px;
	height: 500px;
	margin: 0;
	width: 20%;
	right: auto;
	background-color: #9A918A;
	border: thick double #666666;
	list-style-type: none;
	position: static;
}
#left ul {
	list-style-type: none;
	width: 100%;
	margin: 0;
	padding: 0;
	height: 10px;
}
#left a {
	display: block;
	width: 100%;
	text-decoration: none;
	color: #333333;
	font-weight: bold;
}
#left a:hover {
	color: #CCCCCC;
	background-color: #666666;
}

i thought if i used the #left before the a link it would only change the a links inside the div with the id="left". anyone know what im doing wrong

kuckus
Paranoid (IV) Mad Librarian

From: Glieberlermany
Insane since: Dec 2001

posted 01-11-2006 09:49

Yeah it should do that... and right off I don't see the the problem, the code you posted looks ok.

Can you post a link the whole uploaded page?

Blaise
Paranoid (IV) Inmate

From: London
Insane since: Jun 2003

posted 01-11-2006 11:35

It might be because all your links go to the same place, '#', try putting real href values in and see if that makes a difference, also #left is a little dubious for an id, perhaps it should be #leftNav or something similar.

Cheers,

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

posted 01-13-2006 10:34

If you're going to use nested unordered lists to create a menu on your page it's generally a good idea to give the top-level <ul> tag an idea, like "nav", and make sure that all your CSS references are done as children of this.

The markup:

code:

<ul id="nav">
	<li>Item 1
		<ul>
			<li>Sub Item 1.1</li>
			<li>Sub Item 1.2</li>
			<li>Sub Item 1.3</li>
			<li>Sub Item 1.4</li>
		</ul>
	</li>
	<li>Item 2
		<ul>
			<li>Sub Item 2.1</li>
			<li>Sub Item 2.2</li>
			<li>Sub Item 2.3</li>
			<li>Sub Item 2.4</li>
		</ul>
	</li>
	<li>Item 3
		<ul>
			<li>Sub Item 3.1</li>
			<li>Sub Item 3.2</li>
			<li>Sub Item 3.3</li>
			<li>Sub Item 3.4</li>
		</ul>
	</li>
	<li>Item 4
		<ul>
			<li>Sub Item 4.1</li>
			<li>Sub Item 4.2</li>
			<li>Sub Item 4.3</li>
			<li>Sub Item 4.4</li>
		</ul>
	</li>
</ul>

And the CSS:

code:

ul#nav {
list-style-type: none;
font-family: verdana, arial, sans-serif;
font-size: 0.95em;
}
ul#nav li {
}
ul#nav li:hover {
}
ul#nav li ul {
list-style-type: none;
display:
}
ul#nav li:hover ul {
display: visible;
}
ul#nav li ul li {
}
ul#nav li ul li a {
}
ul#nav li ul li a:hover {
}

Okay, I'm in a lazy mood, I must confess. Tha'ts only some of the elements, and I can't be bothered looking up the rest. See the suckerfish dropdowns article on ALA. That does it perfectly in both IE and FF, using a little javascript for IE.

Justice 4 Pat Richard

Post Reply

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: Rollover Div (Page 1 of 1)

Insert Slimies »

Insert UBB Code »

Topic: Rollover Div (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=27301" title="Pages that link to Topic: Rollover Div (Page 1 of 1)" rel="nofollow" >Topic: Rollover Div <span class="small">(Page 1 of 1)</span>\$