Topic: Rollover Div Pages that link to <a href="https://ozoneasylum.com/backlink?for=27301" title="Pages that link to Topic: Rollover Div" rel="nofollow" >Topic: Rollover Div\
 
Author Thread
Hustluz
Nervous Wreck (II) Inmate

From:
Insane since: Jun 2003

 IP logged posted posted 01-10-2006 23:12 Edit Quote

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

 IP logged posted posted 01-10-2006 23:31 Edit Quote

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

 IP logged posted posted 01-11-2006 00:00 Edit Quote

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

 IP logged posted posted 01-11-2006 00:03 Edit Quote

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

 IP logged posted posted 01-11-2006 09:49 Edit Quote

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

 IP logged posted posted 01-11-2006 11:35 Edit Quote

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

 IP logged posted posted 01-13-2006 10:34 Edit Quote

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:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu