Ad:

HTML and CSS Discussion Thread
Unsolved
Views: 12069

Apr 28th, 2006

Hover Image Position ???

Expand Post »

My website, which can be viewed on:

http://homepage.ntlworld.com/darsh25/alcohol.html

On the left menu, I want images appearing ONLY when we hover mouse over particular link (Beer/Wine/Whisky, etc.) & its submenus, which works perfectly well.

But what I want is ALL images appearing (only when mouse is hovered over a particular link) exactly at the same position/place, but right now, it seems popping below each other.

I want images appearing exactly as in:

http://www.meyerweb.com/eric/css/edge/popups/demo2.html

Can anyone please help ???

Following is the code for this particular thing:

/* ......... Left Menu Link Rollover Showing Image ............ */

#leftMenu ul li img
{
position:absolute;
top:340px;
left:20px;
height:100px;
width:100px;
}

#leftMenu ul li img {display:none;}
#leftMenu ul li:hover img {display:block;}

The Entire Style Sheet is:

HTML and CSS Syntax (Toggle Plain Text)

/* CSS Document */
 
body 
{
background-image:url(background_champagne.gif);
background-attachment:fixed;
}
 
/* ........................................ Banner ........................................ */
 
div.banner
{
	width:40px;
	height:100px;
}
 
 
div.banner img
{
	width:40px;
	height:50px;
}
 
/* ......................................... Top Menu .................................... */
 
#topMenu
{
	background-color:transparent;
	cursor:default;
	text-align:center;
	width:980px;
	float:right;
}
 
#topMenu ul
{
	list-style: none;
	font-size:medium;
	float:right;
	position:relative;
	margin-left: 130px;
	width:850px;
	padding: 0;
}
 
#topMenu ul li 
{
	display: inline;
	border:1px solid black;
	width:210px;
	background-color:white;
	color:#FF00FF;
	float:left;
	position: relative;
	font-size:large;
}
 
#topMenu ul li:hover
{
	background-color:black;
}
 
#topMenu a
{
	display:block;
	text-decoration:none; 
	font-size:large;
	color:blue; 
}
 
#topMenu a:hover
{
	color:white;
	text-transform:uppercase;
}
 
body {behavior: url(csshover.htc);}
 
 
/* ....................................... Left Menu .......................................... */
 
#leftMenu
{
	background-color:transparent;
	cursor:default;
	text-align:center;
	width:100px;
	float:left;
}
 
#leftMenu ul
{
	text-align:center;
	list-style:none;
	margin:0px;
	position:relative;
	padding:0px;
	width:120px;
	border:thin solid red;
}
 
#leftMenu ul li 
{
	display: block;
	background-color:white;
	width:120px;
	border-bottom:thin solid red;
	color:blue;
	position: relative;
	font-size:large;
	line-height:50px; 
}
 
#leftMenu ul li:hover
{
	color:black;
	background-color:yellow;
	text-transform:uppercase;
}
 
#leftMenu ul li ul 
{
	position:absolute;
	display: none;
	text-transform:none;
	left:121px;
	width:123px;
	top:0px;
}
 
#leftMenu a
{
	display:block;
	position:relative;
	text-decoration:none; 
	background-color:white;
	line-height:20px; 
	font-size:large;
	width:123px;
	color:green;
	text-transform:none;
}
 
#leftMenu a:hover
{
	color:#00FFFF;
	background-color:black;
}
 
#leftMenu ul li ul {display:none;}
#leftMenu ul li:hover ul {display:block;}
 
 
/* This Code is for Microsoft Internet Explorer Browser 
to it shows the effect of "li:hover" */
 
body { behavior: url(csshover.htc); }
 
 
/* ........................... Left Menu Link Rollover Showing Image ....................... */
 
#leftMenu ul li img
{
position:absolute;
top:340px;
left:20px;
height:100px;
width:100px;
}
 
#leftMenu ul li img {display:none;}
#leftMenu ul li:hover img {display:block;}
 
 
/* ................................... Content ................................................ */
 
#content
{
	background-color:white;
	width:850px; 
	border:1px solid green;
	float:right;
}
 
#content h2
{
font-family:"Times New Roman", Times, serif;
text-align:justify;
margin:1em;
color:#990033;
text-decoration:underline;
}
 
#content h3
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:left;
font-size:large;
margin-left:20px;
color:blue;
text-decoration:none;
}
 
#content h4
{
font-family:"Courier New", Courier, monospace;
text-align:left;
font-size:large;
color:red;
margin-left:20px;
text-decoration:none;
}
 
#content h5
{
font-family:"Courier New", Courier, monospace;
text-align:left;
font-size:large;
color:fuchsia;
margin-left:20px;
text-decoration:none;
}
 
#content h6
{
font-family:"Courier New", Courier, monospace;
text-align:left;
font-size:medium;
color:black;
margin-left:20px;
text-decoration:underline;
}
 
#content table
{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:left;
font-size:medium;
color:black;
margin-left:20px;
}
 
#content p
{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:justify;
margin:1em 2em;
color:black;
}
 
#content p.first-letter:first-letter
{
color:red;
margin-left:20px;
font-size:xx-large;
}
 
#content ul
{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:justify;
color:black;
margin:10px 50px;
list-style-image:url(list_icon.gif);
}
 
#content ul li
{
margin-top:15px;
}
 
#content ol
{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:justify;
color:black;
margin:1em 1em 2em 3em;
list-style-type:decimal;
}
 
#content ol li
{
margin-top:20px;
}
 
#content img.left
{
float:left;
padding:10px;
}
 
#content img.right
{
float:right;
padding:10px;
}
 
/* ................................... Bottom Menu ......................................... */
 
 
#bottomMenu
{
	border:1px solid red;
	float:left;
	background-color:black;
	color:#FFFFFF;
	text-align:center;
	font-family:"Times New Roman", Times, serif;
	font-style:italic;
	font-size:large;
	width:100%; 
	height:5%; 
	margin:0px;
}

/* CSS Document */

body 
{
background-image:url(background_champagne.gif);
background-attachment:fixed;
}

/* ........................................ Banner ........................................ */

div.banner
{
	width:40px;
	height:100px;
}


div.banner img
{
	width:40px;
	height:50px;
}

/* ......................................... Top Menu .................................... */

#topMenu
{
	background-color:transparent;
	cursor:default;
	text-align:center;
	width:980px;
	float:right;
}

#topMenu ul
{
	list-style: none;
	font-size:medium;
	float:right;
	position:relative;
	margin-left: 130px;
	width:850px;
	padding: 0;
}

#topMenu ul li 
{
	display: inline;
	border:1px solid black;
	width:210px;
	background-color:white;
	color:#FF00FF;
	float:left;
	position: relative;
	font-size:large;
}

#topMenu ul li:hover
{
	background-color:black;
}

#topMenu a
{
	display:block;
	text-decoration:none; 
	font-size:large;
	color:blue; 
}

#topMenu a:hover
{
	color:white;
	text-transform:uppercase;
}

body {behavior: url(csshover.htc);}


/* ....................................... Left Menu .......................................... */

#leftMenu
{
	background-color:transparent;
	cursor:default;
	text-align:center;
	width:100px;
	float:left;
}

#leftMenu ul
{
	text-align:center;
	list-style:none;
	margin:0px;
	position:relative;
	padding:0px;
	width:120px;
	border:thin solid red;
}

#leftMenu ul li 
{
	display: block;
	background-color:white;
	width:120px;
	border-bottom:thin solid red;
	color:blue;
	position: relative;
	font-size:large;
	line-height:50px; 
}

#leftMenu ul li:hover
{
	color:black;
	background-color:yellow;
	text-transform:uppercase;
}

#leftMenu ul li ul 
{
	position:absolute;
	display: none;
	text-transform:none;
	left:121px;
	width:123px;
	top:0px;
}

#leftMenu a
{
	display:block;
	position:relative;
	text-decoration:none; 
	background-color:white;
	line-height:20px; 
	font-size:large;
	width:123px;
	color:green;
	text-transform:none;
}

#leftMenu a:hover
{
	color:#00FFFF;
	background-color:black;
}

#leftMenu ul li ul {display:none;}
#leftMenu ul li:hover ul {display:block;}


/* This Code is for Microsoft Internet Explorer Browser 
to it shows the effect of "li:hover" */

body { behavior: url(csshover.htc); }


/* ........................... Left Menu Link Rollover Showing Image ....................... */

#leftMenu ul li img
{
position:absolute;
top:340px;
left:20px;
height:100px;
width:100px;
}

#leftMenu ul li img {display:none;}
#leftMenu ul li:hover img {display:block;}


/* ................................... Content ................................................ */

#content
{
	background-color:white;
	width:850px; 
	border:1px solid green;
	float:right;
}

#content h2
{
font-family:"Times New Roman", Times, serif;
text-align:justify;
margin:1em;
color:#990033;
text-decoration:underline;
}

#content h3
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:left;
font-size:large;
margin-left:20px;
color:blue;
text-decoration:none;
}

#content h4
{
font-family:"Courier New", Courier, monospace;
text-align:left;
font-size:large;
color:red;
margin-left:20px;
text-decoration:none;
}

#content h5
{
font-family:"Courier New", Courier, monospace;
text-align:left;
font-size:large;
color:fuchsia;
margin-left:20px;
text-decoration:none;
}

#content h6
{
font-family:"Courier New", Courier, monospace;
text-align:left;
font-size:medium;
color:black;
margin-left:20px;
text-decoration:underline;
}

#content table
{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:left;
font-size:medium;
color:black;
margin-left:20px;
}

#content p
{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:justify;
margin:1em 2em;
color:black;
}

#content p.first-letter:first-letter
{
color:red;
margin-left:20px;
font-size:xx-large;
}

#content ul
{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:justify;
color:black;
margin:10px 50px;
list-style-image:url(list_icon.gif);
}

#content ul li
{
margin-top:15px;
}

#content ol
{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:justify;
color:black;
margin:1em 1em 2em 3em;
list-style-type:decimal;
}

#content ol li
{
margin-top:20px;
}

#content img.left
{
float:left;
padding:10px;
}

#content img.right
{
float:right;
padding:10px;
}

/* ................................... Bottom Menu ......................................... */


#bottomMenu
{
	border:1px solid red;
	float:left;
	background-color:black;
	color:#FFFFFF;
	text-align:center;
	font-family:"Times New Roman", Times, serif;
	font-style:italic;
	font-size:large;
	width:100%; 
	height:5%; 
	margin:0px;
}

Similar Threads

Background-image position change with smooth in HTML and CSS
Image Position in Site Layout and Usability

j4mes_bond25

Reputation Points: 10

Solved Threads: 0

Junior Poster in Training

Offline

90 posts
since Jan 2006

Permalink

Apr 28th, 2006

Re: Hover Image Position ???

The problem is related to absolute vs. relative positioning. "Absolute" doesn't really mean "absolute", it means, "relative to the nearest parent element which is absolutely-positioned, but disregarding that parent element's content". A mouthful, I know.

What's happening is... equally hard to explain. An experiment helps.

HTML and CSS Syntax (Toggle Plain Text)

 #leftMenu ul li img
{
position:absolute;
top:340px;
left:20px;
height:100px;
width:100px;
}

Change the position to "relative". You can see that your image is PART OF the "li" element. It's position will be influenced by it. Technically, the li is relatively-positioned, so the img should still be absolute relative to the body, but this is a LIST, and so obeys its own box model (it's like its own private page, in a sense). Saying it another way, the LI element is seen as the parent of the image, acting as if the LI was absolutely positioned, even though it isn't. So, the image's "top" will always be relative to the LI's position. Said a third way: the natural order of the the elements of a list will always supercede and/or influence CSS positioning.

Your choices:

Take the images out of the MENU. Have a separate DIV, and use Javascript to position the proper image within that DIV.

-or-

Don't use a LIST for your menu. That will make your pop-outs much more difficult.

I attempt to explain CSS positioning in this article. When you read the part about Absolute Position, just keep in mind that your LI element will act as if it is absolute.

Last edited by tgreer; Apr 28th, 2006 at 1:09 pm.

tgreer

Team Colleague

Reputation Points: 227

Solved Threads: 37

Made Her Cry

Offline

1,697 posts
since Dec 2004

Permalink

Apr 28th, 2006

Re: Hover Image Position ???

Quote originally posted by tgreer ...

Your choices:

Take the images out of the MENU. Have a separate DIV, and use Javascript to position the proper image within that DIV.

-or-

Don't use a LIST for your menu. That will make your pop-outs much more difficult.

I attempt to explain CSS positioning in this article. When you read the part about Absolute Position, just keep in mind that your LI element will act as if it is absolute.

Thanks for your time & detailed explanation.

I'll delve into explanation bit further.

As far as you 2nd recommendation about NOT to use LIST. I wonder in that case, how could I possibly display these headings (Beer/Wine/Whisky, etc.) since right now, it's displayed as list & are "block".

As far as the pop-up i.e. sub menus is concerned, present, it's often a pain in the neck that it simply DOES NOT give viewer enough time to drag their mouse on the sub-menu's list (Introduction/Varieties/History, etc.), since by the time they drag their mouse pointer there, it just disappears.

Isn't there any way, I can have this sub-menu stay, at least long enough for viewers to be able to make a selection from this sub-menu's list ???

j4mes_bond25

Reputation Points: 10

Solved Threads: 0

Junior Poster in Training

Offline

90 posts
since Jan 2006

Permalink

Apr 28th, 2006

Re: Hover Image Position ???

You could leave the list as is. Place all of your images in their own absolutely-positioned DIV element. Just stack them on top of each other.

Use "onmouseover" and "onmouseout" to control either the CSS "visibility" or CSS "display" attribute of the appropiate image.

Your script should store the ID of the "current" image in a variable, so that the script can toggle it back off.

tgreer

Team Colleague

Reputation Points: 227

Solved Threads: 37

Made Her Cry

Offline

1,697 posts
since Dec 2004

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: google search form: directions?

Next Thread in HTML and CSS Forum Timeline: How do I get a objects property at runtime?

DaniWeb Message

Cancel Changes

User Name
Password