#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Posts
    37
    Rep Power
    12

    Help needed with css rollovers


    #butt1 {
    margin: 0px;
    padding: 0px;
    width: 27px;
    height: 9px;
    }

    #butt1 {
    /* Opera uses this background for the rollover effect. */
    background: url(/img/menu/daily.gif) no-repeat 1px;
    }

    #dbutt {
    display: block;
    padding: 0;
    background: url(/img/menu/daily.gif) no-repeat 1px; /* start hiding from macie\*/
    background-image: url(/img/menu/daily.gif);
    background-position: 0px; /* stop hiding */
    width: 27px;
    height: 9px;
    voice-family: "\"}\""; /* Need we explain? */
    voice-family: inherit;
    width: 27px;
    height: 9px; /* Actual values to overlap borders */
    }

    html>body #dbutt {
    width: 27px;
    height: 9px; /* Be nice to Opera */
    }



    a#dbutt:hover {
    background-image: url(/img/menu/daily_ro.gif);
    }


    #butt2 {
    margin: 0px;
    padding: 0px;
    width: 42px;
    height: 9px;
    }

    #butt2 {
    /* Opera uses this background for the rollover effect. */
    background: url(/img/menu/script.gif) no-repeat 1px;
    }

    #sbutt {
    display: block;
    padding: 0;
    background: url(/img/menu/scripts.gif) no-repeat 1px; /* start hiding from macie\*/
    background-image: url(/img/menu/scripts.gif);
    background-position: 0px; /* stop hiding */
    width: 42px;
    height: 9px;
    voice-family: "\"}\""; /* Need we explain? */
    voice-family: inherit;
    width: 42px;
    height: 9px; /* Actual values to overlap borders */
    }

    html>body #sbutt {
    width: 42px;
    height: 9px; /* Be nice to Opera */
    }



    a#sbutt:hover {
    background-image: url(/img/menu/scripts_ro.gif);
    }


    #butt3 {
    margin: 0px;
    padding: 0px;
    width: 18px;
    height: 9px;
    }

    #butt3 {
    /* Opera uses this background for the rollover effect. */
    background: url(/img/menu/bio.gif) no-repeat 1px;
    }

    #bbutt {
    display: block;
    padding: 0;
    background: url(/img/menu/bio.gif) no-repeat 1px; /* start hiding from macie\*/
    background-image: url(/img/menu/bio.gif);
    background-position: 0px; /* stop hiding */
    width: 18px;
    height: 9px;
    voice-family: "\"}\""; /* Need we explain? */
    voice-family: inherit;
    width: 18px;
    height: 9px; /* Actual values to overlap borders */
    }

    html>body #bbutt {
    width: 18px;
    height: 9px; /* Be nice to Opera */
    }



    a#bbutt:hover {
    background-image: url(/img/menu/bio_ro.gif);
    }

    #butt4 {
    margin: 0px;
    padding: 0px;
    width: 50px;
    height: 9px;
    }

    #butt4 {
    /* Opera uses this background for the rollover effect. */
    background: url(/img/menu/portfolio.gif) no-repeat 1px;
    }

    #pbutt {
    display: block;
    padding: 0;
    background: url(/img/menu/portfolio.gif) no-repeat 1px; /* start hiding from macie\*/
    background-image: url(/img/menu/portfolio.gif);
    background-position: 0px; /* stop hiding */
    width: 50px;
    height: 9px;
    voice-family: "\"}\""; /* Need we explain? */
    voice-family: inherit;
    width: 50px;
    height: 9px; /* Actual values to overlap borders */
    }

    html>body #pbutt {
    width: 50px;
    height: 9px; /* Be nice to Opera */
    }



    a#pbutt:hover {
    background-image: url(/img/menu/portfolio_ro.gif);
    }

    #butt5 {
    margin: 0px;
    padding: 0px;
    width: 42px;
    height: 9px;
    }

    #butt5 {
    /* Opera uses this background for the rollover effect. */
    background: url(/img/menu/contact.gif) no-repeat 1px;
    }

    #cbutt {
    display: block;
    padding: 0;
    background: url(/img/menu/contact.gif) no-repeat 1px; /* start hiding from macie\*/
    background-image: url(/img/menu/contact.gif);
    background-position: 0px; /* stop hiding */
    width: 42px;
    height: 9px;
    voice-family: "\"}\""; /* Need we explain? */
    voice-family: inherit;
    width: 42px;
    height: 9px; /* Actual values to overlap borders */
    }

    html>body #cbutt {
    width: 50px;
    height: 9px; /* Be nice to Opera */
    }



    a#cbutt:hover {
    background-image: url(/img/menu/contact_ro.gif);
    }

    #butt6 {
    margin: 0px;
    padding: 0px;
    width: 37px;
    height: 9px;
    }

    #butt6 {
    /* Opera uses this background for the rollover effect. */
    background: url(/img/menu/forum.gif) no-repeat 1px;
    }

    #fbutt {
    display: block;
    padding: 0;
    background: url(/img/menu/forum.gif) no-repeat 1px; /* start hiding from macie\*/
    background-image: url(/img/menu/forum.gif);
    background-position: 0px; /* stop hiding */
    width: 37px;
    height: 9px;
    voice-family: "\"}\""; /* Need we explain? */
    voice-family: inherit;
    width: 37px;
    height: 9px; /* Actual values to overlap borders */
    }

    html>body #fbutt {
    width: 37px;
    height: 9px; /* Be nice to Opera */
    }



    a#fbutt:hover {
    background-image: url(/img/menu/forum_ro.gif);
    }
    Above is some CSS and below follows teh relavant HTML:
    <div id="butt1"><a id="dbutt" href="index.php" title="Daily New Blog"><span class="alt">Daily</span></a></div>
    <div id="butt2"><a id="sbutt" href="scripts.php" title="Scripts"><span class="alt">Scripts</span></a></div>
    <div id="butt3"><a id="bbutt" href="bio.php" title="All about Me"><span class="alt">Bio</span></a></div>
    <div id="butt4"><a id="pbutt" href="portfolio.php" title="Portfolio"><span class="alt">Portfolio</span></a></div>
    <div id="butt5"><a id="cbutt" href="contact.php" title="Contact"><span class="alt">Contact</span></a></div>
    <div id="butt6"><a id="fbutt" href="forum.php" title="Forum"><span class="alt">Forum</span></a></div>
    The URL that the page is at it http://www.vinfinate.co.uk/template.php
    How do I get these links to line up on a single line rather than under each other?
    Cheers
    Clod
    Computers are like Air conditioning, when you start opening windows they stop working!
  2. #2
  3. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    Add this to the rules for each link (#butt1, #butt2, etc.):

    float: left;
    margin: 5px; --->adjust to suit
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Posts
    37
    Rep Power
    12

    Cool Cheers


    Thanks for the help. It works fine now.
    Cheers
    James
    Computers are like Air conditioning, when you start opening windows they stop working!

IMN logo majestic logo threadwatch logo seochat tools logo