CSS - Problem With Mouseover Over Image Inside A Div, Div Gets Hidden?

Greetings

I'm sure if I was cleverer I could figure this out for myself, but...
Also if I could figure out what the last person who more than likely already got an answer about this topic called it in their post, I might have found it in the search, but...

So, what I'm trying to do is this: I have a grid of images that link to a series of pages. To the right there is a standard navagation menu that also links to the same pages, and has a hover background color.

What I (and by "I" I really mean the person who I am building this for, since I wouldn't do it this way, but...) want to have happen is that when you mouseover the images they highlight the corresponding links in the navagation menu.

here is the css:
Code:

// the image grid
#left {
	float: left;
	height: auto;
	text-align: center;
	width: 810px;
}

#left ul {
	padding: 0px;
	list-style-type: none;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#left img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

#left ul li {
	text-align: center;
	width: auto;
	float: left;
	margin-right: 15px;
	height: 200px;
	margin-bottom: 15px;
}
#left ul li a {
	text-decoration: none;
	color: #000000;
	display: block;
}

// the nav menu
#right {
	height: auto;
	width: 150px;
	float: left;
}
#right ul {
	width: 150px;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	float: right;
}
#right ul li {
	text-align: right;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-transform: uppercase;
}
#right ul li a {
	text-decoration: none;
	color: #000000;
	line-height: 38px;
	width: 135px;
	display: block;
	padding-right: 15px;
}
a.home:hover {
	background-color: #C6CED0;
}
a.bio:hover {
	background-color: #B4C2A1;
}
a.gallery:hover {
	background-color: #B4B281;
}
a.review:hover {
	background-color: #9A8F62;
}
a.current:hover {
	background-color: #AF8459;
}
a.past:hover {
	background-color: #AA8050;
}
a.contact:hover {
	background-color: #8A9B93;
}

...and here is the html:
Code:

<div id="left">
    	<ul>
      <li><a href="gallery_landscape.html"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
      <li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
      <li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
      <li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
      <li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
      <li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
      </ul>
    </div>
     <!--end left -->  
    <div id="right">
    <ul>
    <li><a class="home" href="armin.html">Home</a></li>
    <li><a class="bio" href="#">Landscape</a></li>
    <li><a class="gallery" href="#">Plein-Air</a></li>
    <li><a class="review" href="#">Non-Objective</a></li>
    <li><a class="current" href="#">The Figure</a></li>
    <li><a class="past" href="#">The West</a></li>
    <li><a class="contact" href="#">Comics</a></li>
    
    </ul>
    </div>
  <!--end right -->

Sorry for the long post, but I hope that makes sense...
Thanks in advance for any help.

Hi.

I have just recently begun working with CSS. Is it possible with CSS (and without the use of any JavaScript) to have the background image change on a link mouseover?

I have the first image below (blue.jpg) set as my default background image and would like the second image (blue1.jpg) to display when the user hovers over a particular link.

URL
URL

Thanks for any help anyone can offer

On my site I have a list of links on the left side. I keep them in an unordered list, and set the background image using css. I want to change the image on rollover. In Firefox I can just change it putting by :hover after an li in the style sheet as if it were an anchor, but IE won't accept that, and for some reason I can't get the style to change using javascript either. Any help appreciated- I know it's something really simple that I'm just not seeing. IE also won't display the hand cursor, but if I figure out how to get the image to change I can do the hand on my own at the same time. Firefox does everything right, so you can use that to see what i'm going for.

Hey everyone.

I'm trying to create a cool menu system for my site and I wanted it to be images only.

Its he -
http://www.how-to-pass.info/topf2.html

I wanted this to have cool mouse over images, as well as displaying drop down menus.

Unfortunately, there are two problems:
1. Mouseover images don't display
2. Drop down menu disapears when you move over the menus.


Can anyone tell me how I can get this to work in a simple way?
I dont much hardly anything about style sheets and javascript etc.

Many Thanks.

Hello all

I have an elastic design in which an image clips to the appropriate size via overflow: hidden. Is there any way to control which sides are cropped? What I mean is, can one emulate the background-position property for IMGes with overflow: hidden?

Thanks

Tom

Hi


I'm kinda new to this forum, so i'll just hope im in the right place to post my problems..
I'm from the Netherlands, so i dont know if my English is always correct.. I'll try to make it as best as i can..
ok.. that was the short intro.. now the problem:

ok.. i have made the following page, using some css from a website.
Code:

<html>
<head>
<title>lol</title>

</head>
<style media="screen" type="text/css">
			/* NAVIGATION BUTTONS */
			.cssnav	{
						position:relative;
						font-family: arial, helvetica, sans-serif;
						background-image:  url(overbtn2.jpg);
						background-repeat: no-repeat;
						white-space: nowrap;
						display: block;
						width: 211px;
						height: 44px;
						margin: 0; 
						padding: 0; 
			}
			.cssnav a {
						display: block;
						color: #000000;
						font-size: 11px;
						width: 211px;
						height: 44px;
						display: block;
						float: right;
						color: black; 
						text-decoration: none;
			}

			.cssnav img {width: 211px; height: 44px; border: 0; }
			* html a:hover {visibility:visible}
			.cssnav a:hover img{visibility:hidden}

			.cssnav span {
						position: absolute;
						left: 30px;
						top: 15px;
						margin: 0px;
						padding: 0px;
						cursor: pointer;
						width: 149px;
						height: 14px;
						text-align: center;
			}
			/* END OF NAVIGATION */
</style>

<body bgcolor="#000000">

<!--MAIN NAVIGATION START-->

<div class="cssnav"><a href="onder.html" target="onder" title="home"><img src="downbtn2.jpg" alt="home" /><span>home</span></a></div>
<div class="cssnav"><a href="onder.html" target="onder" title="home"><img src="downbtn2.jpg" alt="home" /><span>home</span></a></div>
<div class="cssnav"><a href="onder.html" target="onder" title="home"><img src="downbtn2.jpg" alt="home" /><span>home</span></a></div>
<div class="cssnav"><a href="onder.html" target="onder" title="home"><img src="downbtn2.jpg" alt="home" /><span>home</span></a></div>
<div class="cssnav"><a href="onder.html" target="onder" title="home"><img src="downbtn2.jpg" alt="home" /><span>home</span></a></div>
<div class="cssnav"><a href="onder.html" target="onder" title="home"><img src="downbtn2.jpg" alt="home" /><span>home</span></a></div>
<div class="cssnav"><a href="onder.html" target="onder" title="home"><img src="downbtn2.jpg" alt="home" /><span>home</span></a></div>
<div class="cssnav"><a href="onder.html" target="onder" title="home"><img src="downbtn2.jpg" alt="home" /><span>home</span></a></div>

<!--MAIN NAVIGATION END-->


</body>
</html>

this was a test page for a menu i am currently making.
I also wanted to make a link that works quite like this, only without the text in the buttons.
Currently the idea is like..
i made a nice pic in paint of a closed book, and on a mouseover.. the other pic i made, an opened book, should appear..
but it doesnt
the source is now like this
Code:

<html>
<head>
</head>
<style media="screen" type="text/css">
			/* NAVIGATION BUTTONS */
			.cssnav	{
						position:relative;
						background-image:  url(open.bmp);
						background-repeat: no-repeat;
						white-space: nowrap;
						display: block;
						
						margin: 0; 
						padding: 0; 
			}
			.cssnav a {
						display: block;
						display: block;
						float: right;
						color: black; 
					
			}

			.cssnav img {border: 0}
			* html a:hover {visibility:visible}
			.cssnav a:hover img{visibility:hidden}

			
			}
			/* END OF NAVIGATION */
</style>

<body bgcolor="#000000">

<!--MAIN NAVIGATION START-->

<div class="cssnav"><a href="onder.html" target="onder" title="home"><img src="dicht.bmp" alt="home" /><span>home</span></a></div>


<!--MAIN NAVIGATION END-->


</body>
</html>

can anyone please tell me how i can solve this problem?
thanks in advance..
-Emiel-

I use centered css layout on my site. There is a problem with IE on one page. Sometimes main layer content comes hidden but only text content. Like this:
http://img351.imageshack.us/img351/5152/hidden1zu.jpg
When on mouse over to the table cells text comes. Like this:
http://img351.imageshack.us/img351/1853/nothidden2pe.jpg

No problem with Firefox or Opera.
The page url is:
http://www.limk.com/sonyorumz.php

Can you help me about finding the solution?

I'm having problems with a javascript rotating picture overlapping my drop down menu! I've fiddled around the the z-index but cant seem to get the drop down menu to drop ABOVE the picture.

Everything is contained inside my <div id="wrapper"> and my layout scheme works like:
Banner = top image ("Why won't my drop menu's show up") the image extends all the way down to the menu, and then the navigation is just words that go on top of the menu texture i've made. The only gif im using in the #nav is for the small yellow triangle for the roll over effect on the menu's. I get the white and menu bar on the sides because i just made the background a 40px height by 10px width image the sample and had it repeat in x only and then set background colour to that grey.

My images are all inside the .main_view div id.

Any help is appreciated!

you can see my problem he htmltest2.weebly.com

What do i need to do to fix this?!

Hello

I hope somebody can help me. I have a newly designed home page for my website, which looks fine now in pretty well all browsers - but I've just started getting feedback from people looking at the site with ie, and they say that the flyout menu on the left of the page is obscured by the content in the centre column when it does its flying out thing.

I've tried giving the menu elements z-index:100; but it doesn't seem to have made any difference.

I would be really appreciative if anyone can help - it is even more difficult to work out as I don't have access to a machine with ie as a browser, and remote screen shots don't show up the problem...

This is the page:

http://www.independentliving.co.uk/index.shtml

And this is the part of the style sheet for the menu:

.menu {
width:150px;
position:relative;
margin:0;
font-size:11px;
margin:0px 0;
z-index:100;

}

.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#003366; width:150px;
height:25px;
text-align:center;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#003366 url(nav.gif);
line-height:19px;
font-size:11px;
z-index:100;
}

.menu ul {
padding:0;
margin:0;
list-style-type: none;
z-index:100;
}

.menu ul li {
float:left;
margin-right:1px;
position:relative;
z-index:100;
}

.menu ul li ul {
display:none;
}

/* specific to non IE browsers */
.menu ul li:hover a {
color:#996600;
background:#cccccc;
font-size:11px;
text-decoration:none;
z-index:100;
}

.menu ul li:hover ul {
display:block;
position:absolute;
top:0;
left:150px;
width:150px;
z-index:100;
}

.menu ul li:hover ul li a.hide {
background:#ffffff;
color:#003366;
font-size:11px;
text-decoration:none;
}

.menu ul li:hover ul li:hover a.hide {
width:150px;
font-size:11px;
text-decoration:none;
}

.menu ul li:hover ul li ul {
display: none;
}

.menu ul li:hover ul li a {
display:block;
background:#cccccc;
color:#996600;
width:200px;
font-size:11px;
text-decoration:none;
z-index:100;
}

.menu ul li:hover ul li a:hover {
background:#dfc184;
color:#666666;
font-size:11px;
text-decoration:none;
z-index:100;
}

.menu ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:151px;
top:0;
color:#003366;
font-size:11px;
text-decoration:none;
z-index:100;
}

.menu ul li:hover ul li:hover ul li a {
display:block;
width:200px;
background:#dfc184;
color:#003366;
font-size:11px;
text-decoration:none;
z-index:100;
}

.menu ul li:hover ul li:hover ul li a:hover {
background:#bd8d5e;
color:#fff;
font-size:11px;
text-decoration:none;
z-index:100;
}

Any ideas gratefully received!

Thanks

Frances

Hello, after a few hours I managed to identify the CSS element responsible for this problem. However so far I have no solution on how I could solve this problem. Basically the problem is very minor but still frustrating.

I am using the following command to set a DIV element with transparent background;

Code:

filter: progid:DXImageTransform.Microsoft.gradient
(gradientype=0,startColorstr='#60ff0000', endColorstr='#60ff0000');

The DIV element becomes transparent. However the parent element - which is set with the CSS attribute overflow:hidden - is always displaying an extra pixel on the right of the container. This might not be clear at first, which is why I attached the following screen shot.

(the light red line is the extra 1px I am referring to)

If I remove the transparency CSS attribute for IE8 then this extra 1px will disappear. However that means loosing the wanted transparency. I have also developed the following example of the problem;

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>

		<style>

body {

	margin: 0px;
	padding: 0px;
	/*
	 * IE hack to center .content div (part1).
	 */
	*text-align: center;
}

div.content {

	width:600px;
	margin: 0px auto;
	/*
	 * IE hack to center .content div (part2).
	 */
	*text-align: left;
}

div#a {

	border-bottom: 1px solid grey;
	border-top: 1px solid grey;
	padding-bottom: 5px;
	padding-top: 5px;

}

div#a div#b {

	overflow: hidden;
	height: 280px;
	position:relative;
}

div#a div#b div#c {
	
	position: absolute;
}

div#a div#b div#c img {
	
	border: none;
	display: block;
}

div#a div#b div#e {

	background-color: red;
	color: #fff;
	position:absolute;
	padding: 20px 10px;
	width:260px;
	height: 240px;
	margin-left: 500px;
	/* IE8 hack for background colour with alpha value */
	filter: progid:DXImageTransform.Microsoft.gradient
	(gradientype=0,startColorstr='#60ff0000', endColorstr='#60ff0000');
}
			
		</style>
	</head>
	<body>
		<h1>Test 5</h1>
		<div id="a" class="content">
			<div id="b">
					<div id="c">			
						<img src="pic.png" />
					</div>
					
					<div id="e">			
						hello
					</div>
			</div>
		</div>	
	</body>
	
</html>

Does anyone know what's causing the problem and how I can solve it. It is true that 1px might not sound much. But it still frustrates me knowing that it is there and the fact that on Firefox all works great.

This is probably a dumb question, but I have a div, with a floated image inside. When the div doesn't have enough text inside to make it taller than the image, the image will stick out the bottom of the div. I've attached a couple of images to show what's happening. I want div to stretch around the image at all times, even if there's only one line of text next to it.

Code:

<html>
   <head>
      <style>

         body {
            width: 800px; /* change this value */
            margin: 20px auto;
         }

         #container {
            border: 1px solid #f00;
            padding: 10px;
         }

         .floatright {
            float: right;
            margin: 10px;
            background-color: #aaf;
         }

      </style>
   </head>

   <body>

      <div id="container">

         <h3>some latin text</h3>

         <p>
            <img class="floatright" src="some_image.jpg" width="100" height="150" alt="Image" />
            Lorem ipsum dolor sit amet, consectetuer adipiscing
            elit, sed diam nonummy nibh euismod tincidunt ut            
            laoreet dolore magna aliquam erat volutpat. Ut wisi
            enim ad minim veniam, quis nostrud exerci tation 
            ullamcorper suscipit lobortis nisl ut aliquip ex ea 
            commodo consequat. Duis autem vel eum iriure dolor in 
            hendrerit in vulputate velit esse molestie consequat, 
            vel illum dolore eu feugiat nulla facilisis at vero eros et 
            accumsan et iusto odio dignissim qui blandit praesent 
            luptatum zzril delenit augue duis dolore te feugait nulla 
            facilisi.
         </p>
      </div>

   </body>

</html>

My page has:
1) a left-sidebar which goes from the top-left corner and stretches down
2) a top-bar which goes from the edge of the left-sidebar and stretches all the way across to the right side of the page
3) a main content which covers the rest of the page

I want to place an image in the center of the top-bar but so far it only is centered when the window is maximised...I want it to be centered no matter what size the window is.

currently my css rules a

Code:

#topBar {
   position: absolute;
   height:15%;
   text-align: center;
   left:30%;
   margin:0px auto;
}

the xhtml source code for the topBar and image is:

Code:

<div id="topBar">
   <p><img src="../logo1.jpg" alt="..." id="sirgLogo"/></p>
</div>

(the image id is just concerned with the size of the image at this time)

any suggestions as to how to I can have the image centered within the <div>?

some bright spark on Yahoo Answers failed to spot that I'm using xhtml (which tbf is only mentioned once) and told me to try:

Code:

<div id="topBar">
   <p><center><img src="../logo1.jpg" alt="..." id="sirgLogo"/></center></p>
</div> 

or

Code:

<div id="topBar" align="center">
   <p><img src="../logo1.jpg" alt="..." id="sirgLogo"/></p>
</div>

Unless I'm mistaken, these are possibilities which will cause w3's validator to throw up an error.
For the record I'm using XHTML 1.0 Transitional and I presume my doctype declaration is correct as it was automatically generated by dreamweaver when I first made the document!

Hi.

K, I have NO idea where to begin on this one. I need to display a series of thumbnails (to be selected dynamically from a database) inside 1 <td> tag. I need them to be organized 3 wide by 3 high, with their titles underneath.

What would I use for this? I"m assuming I just set up a new class for that, but I don't know what to do for it.

Any help is greatly appreciated.

How do i center the image both horizontally and vertically....

I have read the < ALIGN > has be depreciated and must use style, but STYLE="vertical-align:middle" dpesnt seem to work in either/both the < DIV > and < IMG > tags

I am using an external CSS with a hiehgt of 168px, and calling the < DIV > block, then just using a < IMG > tag.

How can i align the image int he middle??