Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Nov 2007
    Posts
    680
    Thanks
    319
    Thanked 1 Time in 1 Post

    Eh, stupid css not working :(

    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/...?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

    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>
    <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

  • #2
    Regular Coder
    Join Date
    Oct 2006
    Posts
    181
    Thanks
    1
    Thanked 6 Times in 6 Posts
    I'm fairly sure that to get the scrolling image effect, you will have to use JavaScript, and not just HTML/CSS
    Quote Originally Posted by Excavator
    write it for firefox then hack it for IE

  • #3
    Regular Coder
    Join Date
    Nov 2007
    Posts
    680
    Thanks
    319
    Thanked 1 Time in 1 Post
    yeah i know that, but i need to get the elements positioned correctly first.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello martynball,
    What happens when you style that image a bit?
    Like this -
    Code:
    img {
    	height: 284px;
    	width: 225px;
    	display: block;
    	background: #0f0;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Nov 2007
    Posts
    680
    Thanks
    319
    Thanked 1 Time in 1 Post
    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.
    Last edited by martynball; 12-24-2010 at 09:05 PM.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by martynball View Post
    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. Not the same thing but similar.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Regular Coder
    Join Date
    Nov 2007
    Posts
    680
    Thanks
    319
    Thanked 1 Time in 1 Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •