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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation CSS hover state problem

    Hello Codingforums.com members,

    I'm currently trying to develop a facebook landing page and have stumbled upon a problem. What i want to do is have the <a><img/></a> tagged objects to have a :hover effect. As in when i hover over those pictures they change to another picture. Also i need to get all of the links or <a> tags in the div with an id of "lineup" to be positioned as they are in the background. I'm not sure if i have approached this correctly by doin <a> with an <img> inside of it. Im having serious diificulties trying to figure this one out. Please help me out.

    Philip

    Code:
    <!DOCTYPE html>
    
    <html lang="en">
    <head>
    	<meta charset="utf-8">
    	<title>5tone</title>
    
    <style type="text/css" media="all">
    <!--
    	/* RESET */
    /* ----------------------------------------- */
    
    /* Global reset */
    /* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
    *, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
    table { border-collapse:collapse; border-spacing:0 }
    fieldset, img { border:0 }
    address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
    ol, ul, li { list-style:none }
    caption, th { text-align:left }
    h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
    q:before, q:after { content:''}
    
    /* Global reset-RESET */
    /* The below restores some sensible defaults */
    strong { font-weight:bold }
    em { font-style:italic }
    a img { border:none } /* Gets rid of IE's blue borders */
    
    
    
    /* Styling */
    #container {
    width: 520px;
    height: 800px; 
    margin: auto;
    background: url(http://img836.imageshack.us/img836/8623/backgroundv.gif) no-repeat; 
    }
    
    /* Logo */ 
    #logo a {
    	position: relative;
    	top: 54px;
    	left: 100px;
    }
    
    /* Lineup */
    #lineup {
    
    }
    
    /* Billetter */
    #billetter {
    	position: relative;
    	top: 542px;
    	left: 83px;
    }
    
    /* Sponsors */
    #sponsors {
    	width: 520px;
    }
    
    #sponsors, nav {
    	position: relative;
    	top: 568px;
    	left: 53px;
    	float: left;
    }
    
    #Gjethuset {
    	position: relative;
    	top: 0px; 
    	left: 36px;
    }
    
    #Action-Video {
    	position: relative; 
    	left: 56px;
    	top: -2px;
    }
    
    -->
    </style>
    </head>
    
    <body>
    <div id="container">
    
    <!-- Background Images -->
    
    <div id="logo">
    	<a id="Logo_a" href="http://www.facebook.com/event.php?eid=217737594911125" target="_blank"><img src="http://img717.imageshack.us/img717/9527/5tonelogo.gif" alt="5tone-logo" width="316" height="69"/></a>
    </div>
    
    <div id="lineup">
    	<a id="Runerk" href="http://www.runerk.com/" target="_blank"><img src="http://img705.imageshack.us/img705/4482/runerkoriginal.gif" alt="Rune Rk" width="81" height="19"/></a>
    	<a id="LuluR" href="http://soundcloud.com/lulu-rouge" target="_blank"><img src="http://img9.imageshack.us/img9/5508/lulurougeoriginal.gif" alt="Lulu Rouge" width="109" height="19"/></a>
    	<a id="DennisH" href="http://soundcloud.com/denis-horvat" target="_blank"><img src="http://img13.imageshack.us/img13/8601/dennishorvatoriginal.gif" alt="Dennis Horvat" width="135" height="18"/></a>
    	<a id="EdgarM" href="http://soundcloud.com/edgar-morris" target="_blank"><img src="http://img40.imageshack.us/img40/5871/edgarmorrisoriginal.gif" alt="Edgar Morris" width="137" height="18"/></a>
    	<a id="SebastianV" href="http://soundcloud.com/sebastian-vedelsby" target="_blank"><img src="http://img64.imageshack.us/img64/157/sebastianvedelsbyorigin.gif" alt="Sebastian-Vedelsby" width="196" height="18"/></a>
    	<a id="Worsøe" href="http://vimeo.com/23257936" target="_blank"><img src="http://img843.imageshack.us/img843/8470/worsevisualsoriginal.gif" alt="Worsøe (Visuals)" width="177" height="21"/></a>
    </div>
    
    <div id="billetter">
    	<a href="http://www.billetnet.dk/event/​Rune-RK-Lulu-Rouge-T-O-M-Buda-​Denis-Horvat-Sebastian-Vedelsb​y-billetter/GJH1009Q" target="_blank"<img src="http://img845.imageshack.us/img845/3913/billetnetlink.gif" alt="Billetnet" width="137" height="55"/></a>
    	<a id="button-billetter" href="http://www.billetnet.dk/event/​Rune-RK-Lulu-Rouge-T-O-M-Buda-​Denis-Horvat-Sebastian-Vedelsb​y-billetter/GJH1009Q" target="_blank"><img src="http://img641.imageshack.us/img641/8395/kbbilleterbutton.gif" alt="K%C3%B8b-billeter-button" width="220" height="54"/></a> 
    </div>
    
    <div id="sponsors">
    	<a id="Pro-event" href="http://www.pro-event.dk/" target="_blank"><img src="http://img845.imageshack.us/img845/7131/proeventlink.gif" alt="Pro-Event" width="105" height="38"/></a>
    	<a id="Gjethuset" href="http://gjethuset.dk/" target="_blank"><img src="http://img171.imageshack.us/img171/3135/gjethusetdk.gif" alt="Gjethuset.dk" width="122" height="19"/></a>
    	<a id="Action-Video" href="http://www.actionvideo.dk/shop/frontpage.html" target="_blank"><img src="http://img339.imageshack.us/img339/4078/actionvideo.gif" alt="Action-Video" width="123" height="31"/></a>
    </div>
    
    </div>
    
    </body>
    
    </html>

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Flint, Michigan, USA
    Posts
    632
    Thanks
    1
    Thanked 21 Times in 21 Posts
    There are two options that I'm aware of. You could use the JavaScript "onmouseover" attribute on the anchor, or use CSS sprites and a :hover.


  •  

    Posting Permissions

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