RSS Forums RSS
Please support our HTML and CSS advertiser: Lunarpages Web Hosting

Hover Image Position ???

Join Date: Jan 2006
Location: Land of Hope & Glory
Posts: 88
Reputation: j4mes_bond25 is an unknown quantity at this point 
Rep Power: 3
Solved Threads: 0
j4mes_bond25's Avatar
j4mes_bond25 j4mes_bond25 is offline Offline
Junior Poster in Training

Question Hover Image Position ???

  #1  
Apr 28th, 2006
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:

/* 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;
}
Nope, I'm NOT God, but I'm British (which is the next best thing ;)
AddThis Social Bookmark Button
Reply With Quote  
All times are GMT -4. The time now is 9:25 pm.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC