Hello and welcome to our community! Is this your first visit?
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
    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.


    <!DOCTYPE html>
    <html lang="en">
    	<meta charset="utf-8">
    <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;
    <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 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 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 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>

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Flint, Michigan, USA
    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