...

View Full Version : Eh, stupid css not working :(



martynball
12-24-2010, 05:48 PM
I'm trying to mimic this effect when the image moves up when the user hover's over the element: http://support.xbox.com/en-gb/Pages/default.aspx?wa=wsignin1.0

But for some reason i just can't seem to get the everything to go in the correct position. If I put the overflow:hidden on to stop the text from showing below the green button type element then the bullet points go to the top of the container behind the image :S



<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slider Development</title>
<style type="text/css">
body {
background-color:#1A1A1A;
color:#FFFFFF;
}
a { color:#FFF; text-decoration:none; } a:hover { color:#0CF; }
.text { background-color:#FFF; }
.text ul li a { color:#333; }
.content {
/* float:left; display:inline; */
width:225px;
height:284px;
overflow:hidden;
}
.moduel_container {
float:left; display:inline;
width:225px;
height:284px;
}
.text { z-index:0; }
.activator {
float:left; display:inline;
width: 100%;
background-color:#090;
text-align:center;
padding:1em 0em;
z-index:50;
}
</style>
</head>
<body>
<div class="moduel_container">
<div class="moduel">
<div class="content">
<img src="images/home-4col-xbox-360.jpg" />
<div class="text">
<ul style="margin:0px;">
<li><a href="#">Google</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Yahoo</a></li>
</ul>
</div>
</div>
<div class="activator">
<a href="#">Hover</a>
</div>
</div>
</div>
</body>
</html>


Image size: 225 x 284

Shoot2Kill
12-24-2010, 06:43 PM
I'm fairly sure that to get the scrolling image effect, you will have to use JavaScript, and not just HTML/CSS

martynball
12-24-2010, 06:52 PM
yeah i know that, but i need to get the elements positioned correctly first.

Excavator
12-24-2010, 08:43 PM
Hello martynball,
What happens when you style that image a bit?
Like this -

img {
height: 284px;
width: 225px;
display: block;
background: #0f0;
}

martynball
12-24-2010, 09:00 PM
Edit: Aha, that seems to work. Now how would I go about moving the image and text up with CSS? I can write the JS my self then, I was thinking padding?

But that seems to make the div bigger when I need it to stay the defined size.

Excavator
12-24-2010, 10:28 PM
Edit: Aha, that seems to work. Now how would I go about moving the image and text up with CSS? I can write the JS my self then, I was thinking padding?

But that seems to make the div bigger when I need it to stay the defined size.

Have a look at a simple CSS disjointed rollover (http://nopeople.com/CSS%20tips/disjointed_rollover/index.html). Not the same thing but similar.

xXandarXx
12-24-2010, 10:52 PM
Have you tried placing the image and text in a separate html file and using an iframe? I don't know how to do it, but I imagine it's not overly difficult to make the iframe scroll with an onMouseOver event, then scroll back with an onMouseOut event.

martynball
12-25-2010, 12:00 AM
That will to much trouble than it's worth. Bad way imo. Would prob use more system resources and memory.

All i need to figure out now is how to move the text and image up without making the container expand. lol, the scrolling part I can do then.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum