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
    Apr 2011
    Posts
    144
    Thanks
    3
    Thanked 1 Time in 1 Post

    hover not working properly

    Hey all,

    got a question, i am currently learning to code html and css so bare with me.
    I am trying to put a hover button behind my ul menu
    here are my codes,
    HTML

    <ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    </ul>

    CSS

    #menu a:hover {
    background:url(images/button.png) no-repeat;
    display:block;
    text-align:center;
    line-height:35px;
    width:115px;
    height:62px;
    }

    would that be right? the button displays when hovered but it's glitchy as all hell. when you hover over it, the button image and all the ul menus move all over the place. If I leave my mouse over, lets say Home, the ul menus and button will start to blink all over the top of the content page.

    what am I doing wrong?

    Thanks

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi the dazd,

    there is bound to be strange behaviour on hover, you are changing an inline element to block.

    Make the settings before hover instead...
    Code:
    
    #menu a {
        display:block;
        width:115px;
        height:62px;
        line-height:35px;
        text-align:center;
     }
    #menu a:hover {
        background:url(images/button.png) no-repeat;
     }
    
    coothead

  • #3
    Regular Coder
    Join Date
    Apr 2011
    Posts
    144
    Thanks
    3
    Thanked 1 Time in 1 Post
    Wonderful, that did it.
    but the hover button is not showing directly behind the text, it shows the button directly below the text of the ul menu when you hover over it.
    How do I change that? Would I change the position of the button? If so, how would I change it?

    Thanks again


    Quote Originally Posted by coothead View Post
    Hi the dazd,

    there is bound to be strange behaviour on hover, you are changing an inline element to block.

    Make the settings before hover instead...
    Code:
    
    #menu a {
        display:block;
        width:115px;
        height:62px;
        line-height:35px;
        text-align:center;
     }
    #menu a:hover {
        background:url(images/button.png) no-repeat;
     }
    
    coothead
    Last edited by dazd; 05-12-2011 at 06:41 PM.

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there dazd,

    can we see your "button.png" image, it will enable us to then see your problem.

    coothead

  • #5
    Regular Coder
    Join Date
    Apr 2011
    Posts
    144
    Thanks
    3
    Thanked 1 Time in 1 Post
    I got it to work I just put padding on the top of the ul menus and it pushed them down right into the button.

    Got another question for you. For some reason I cannot get my footer out of my container box, if I add a background-color in the css for my #footer it puts a background color behind all of my col1, col2, col3 divs.

    Here is my html,

    <div id="container">
    <div id="page">

    <div id="header">
    <ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    </ul>

    <div class="headerStyle"><center><h1> Welcome to our Website! </h1>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus vitae erat pretium gravida eget sagittis massa. Suspendisse congue rhoncus odio, varius venenatis augue posuere vitae. Proin sit amet pretium eros. Aliquam erat volutpat. In hac habitasse platea dictumst. Duis sagittis pharetra rhoncus. Pellentesque nec ligula lacus. Suspendisse nisl lorem, hendrerit non lobortis eget, volutpat nec tortor. Donec id purus metus, eget fermentum neque. </p></center>
    </div>
    </div>
    <!-----------end header----------->

    <div id="colImages">
    <div class="col1">
    <h3 class="port"> Professional Designs </h3>
    <a href="#"><img src="images/img1.png" alt="Image One"/></a>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus vitae erat pretium gravida eget sagittis massa.</p>
    </div>
    <div class="col2">
    <h3> Professional Services </h3>
    <a href="#"><img src="images/img2.png" alt="Image Two"/></a>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus vitae erat pretium gravida eget sagittis massa.</p>
    </div>
    <div class="col3">
    <h3> Professional Teams </h3>
    <a href="#"><img src="images/img3.png" alt="Image Three"/></a>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus vitae erat pretium gravida eget sagittis massa.</p>
    </div>
    </div>
    <!----------end colImages----------->
    </div>
    <div id="footer">
    <small> Copyright &copy; 2010 All Rights Reserved. </small>
    </div>
    </div>

    and here is my css

    body {
    background: #ffffff;
    }

    p {
    color: white;
    font-family:arial, verdana, georgia;
    font-size:15px;
    }

    h1 {
    font-family: georgia, arial, verdana;
    font-size: 28px;
    color: #002838;
    }

    h3 {
    font-family: arial, verdana, georgia;
    }

    ul {
    list-style-type: none;
    }

    li {
    font-family: georgia, arial, verdana;
    float:left;
    }

    a {
    text-decoration: underline;
    }

    a:hover {
    color:white;
    text-decoration:none;
    }

    li, a {
    text-align:center;
    color:black;
    }

    ul#menu {
    margin:0px;
    padding:0px;
    position:absolute;
    right:525px;
    }


    #menu a {
    display:block;
    width:115px;
    height:62px;
    line-height:35px;
    text-align:center;
    padding-top:11px;
    }

    #menu a:hover {
    background:url(images/button.png) no-repeat;
    }

    /********** end etc styles ************/

    #container {
    background:#767676;
    width:1100px;
    margin:0 auto;
    border:solid 5px black;
    }

    #header h1 {
    padding-top:80px;
    }

    #header p {
    padding: 0 100px 0 100px;
    line-height:20px;
    }

    #colImages {
    float:left;
    display:inline;
    }

    #colImages, small {
    margin:0 auto;
    }

    .col1, .col2, .col3 {
    float:left;
    width:350px;
    padding-left:10px;
    }

    .col3, img {
    padding-left:20px;
    }

    p.text {
    line-height:22px;
    margin:0px 5px 0px 22px;
    width:320px;
    }

    #footer {
    }

    Quote Originally Posted by coothead View Post
    Hi there dazd,

    can we see your "button.png" image, it will enable us to then see your problem.

    coothead

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there dazd,

    does this help...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    body {
         background:#fff;
     }
    #container {
        width:1100px;
        padding-bottom:10px;
        border:solid 5px #000;
        margin:auto;
        background:#767676;
        overflow:hidden;
     }
    p {
        color:#fff;
        font-family:arial,verdana,georgia,sans-serif;
        font-size:15px;
     }
    h1 {
        font-family:georgia,arial,verdana,sans-serif;
        font-size:28px;
        color:#002838;
     }
    h3 {
        font-family:arial,verdana,georgia,sans-serif;
     }
    
    ul {
        list-style-type:none;
     }
    
    li {
        font-family:georgia,arial,verdana,sans-serif;
        float:left;
     }
    li, a {
        color:#000;
        text-align:center;
     }
    a:hover {
        color:#fff;
        text-decoration:none;
     }
    ul#menu {
        margin:0;
        padding:0;
        position:absolute;
        right:525px;
     }
    #menu a {
        display:block;
        width:115px;
        height:62px;
        line-height:35px;
        text-align:center;
        padding-top:11px;
     }
    #menu a:hover {
        background:url(images/button.png) no-repeat;
     }
    
    /********** end etc styles ************/
    
    #header h1 {
        padding-top:80px;
     }
    #header p {
        padding:0 100px;
        line-height:20px;
     }
    .headerStyle {
        text-align:center;
     }
    #colImages {
        float:left;
        display:inline;
     }
    #colImages, small {
        margin:auto;
     }
    .col1, .col2, .col3 {
        float:left;
        width:350px;
        padding-left:10px;
     }
    .col3, img {
        padding-left:20px;
     }
    p.text {
        width:320px;
        margin:0 5px 0 22px;
        line-height:22px;
     }
    #footer {
        width:1090px;
        margin:auto;
        font-size:12px;
        line-height:28px;
    } 
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <div id="header">
    
    <ul id="menu">
     <li><a href="#">Home</a></li>
     <li><a href="#">Portfolio</a></li>
     <li><a href="#">Services</a></li>
     <li><a href="#">About</a></li>
     <li><a href="#">Contact</a></li>
    </ul>
    
    <div class="headerStyle">
    <h1> Welcome to our Website!</h1>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus vitae erat pretium gravida 
    eget sagittis massa. Suspendisse congue rhoncus odio, varius venenatis augue posuere vitae. Proin sit 
    amet pretium eros. Aliquam erat volutpat. In hac habitasse platea dictumst. Duis sagittis pharetra 
    rhoncus. Pellentesque nec ligula lacus. Suspendisse nisl lorem, hendrerit non lobortis eget, volutpat 
    nec tortor. Donec id purus metus, eget fermentum neque. 
    </p>
    </div>
    </div>
    <!-- ---------end header--------- -->
    
    <div id="colImages">
    <div class="col1">
    <h3 class="port"> Professional Designs </h3>
    <a href="#"><img src="images/img1.png" alt="Image One"></a>
    <p class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus vitae erat 
    pretium gravida eget sagittis massa.
    </p>
    </div>
    <div class="col2">
    <h3> Professional Services</h3>
    <a href="#"><img src="images/img2.png" alt="Image Two"></a>
    <p class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus vitae erat 
    pretium gravida eget sagittis massa.
    </p>
    </div>
    <div class="col3">
    <h3> Professional Teams</h3>
    <a href="#"><img src="images/img3.png" alt="Image Three"></a>
    <p class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus vitae erat 
    pretium gravida eget sagittis massa.
    </p>
    </div>
    </div>
    <!-- --------end colImages--------- -->
    
    </div>
    
    <div id="footer">Copyright &copy; 2010 All Rights Reserved.</div>
    </body>
    </html>
    
    coothead

  • Users who have thanked coothead for this post:

    dazd (05-12-2011)

  • #7
    Regular Coder
    Join Date
    Apr 2011
    Posts
    144
    Thanks
    3
    Thanked 1 Time in 1 Post
    Yes that did it, thank you!

    Now I got another question, I am trying to add an active button on my ul.
    How would I go about doing that? I added a class of active to all of my li menus and then added the background-image in css but it displays the button off of the li menus. when I tried to correct then with a padding or margin it moves the whole li menu and not only the button image.

    edit: also, if I wanted to add something to the background of my site, like a simple paragraph <p> Follow us on Social Networks: </p> then a few images below it, but I would the position fixed, so when you scroll down it stays in the same place on the background.
    How would I go about doing that in my html and css?

    :/
    I have troubles with css,
    Thank you for all the help coothead!!

    Quote Originally Posted by coothead View Post
    Hi there dazd,

    does this help...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    body {
         background:#fff;
     }
    #container {
        width:1100px;
        padding-bottom:10px;
        border:solid 5px #000;
        margin:auto;
        background:#767676;
        overflow:hidden;
     }
    p {
        color:#fff;
        font-family:arial,verdana,georgia,sans-serif;
        font-size:15px;
     }
    h1 {
        font-family:georgia,arial,verdana,sans-serif;
        font-size:28px;
        color:#002838;
     }
    h3 {
        font-family:arial,verdana,georgia,sans-serif;
     }
    
    ul {
        list-style-type:none;
     }
    
    li {
        font-family:georgia,arial,verdana,sans-serif;
        float:left;
     }
    li, a {
        color:#000;
        text-align:center;
     }
    a:hover {
        color:#fff;
        text-decoration:none;
     }
    ul#menu {
        margin:0;
        padding:0;
        position:absolute;
        right:525px;
     }
    #menu a {
        display:block;
        width:115px;
        height:62px;
        line-height:35px;
        text-align:center;
        padding-top:11px;
     }
    #menu a:hover {
        background:url(images/button.png) no-repeat;
     }
    
    /********** end etc styles ************/
    
    #header h1 {
        padding-top:80px;
     }
    #header p {
        padding:0 100px;
        line-height:20px;
     }
    .headerStyle {
        text-align:center;
     }
    #colImages {
        float:left;
        display:inline;
     }
    #colImages, small {
        margin:auto;
     }
    .col1, .col2, .col3 {
        float:left;
        width:350px;
        padding-left:10px;
     }
    .col3, img {
        padding-left:20px;
     }
    p.text {
        width:320px;
        margin:0 5px 0 22px;
        line-height:22px;
     }
    #footer {
        width:1090px;
        margin:auto;
        font-size:12px;
        line-height:28px;
    } 
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <div id="header">
    
    <ul id="menu">
     <li><a href="#">Home</a></li>
     <li><a href="#">Portfolio</a></li>
     <li><a href="#">Services</a></li>
     <li><a href="#">About</a></li>
     <li><a href="#">Contact</a></li>
    </ul>
    
    <div class="headerStyle">
    <h1> Welcome to our Website!</h1>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus vitae erat pretium gravida 
    eget sagittis massa. Suspendisse congue rhoncus odio, varius venenatis augue posuere vitae. Proin sit 
    amet pretium eros. Aliquam erat volutpat. In hac habitasse platea dictumst. Duis sagittis pharetra 
    rhoncus. Pellentesque nec ligula lacus. Suspendisse nisl lorem, hendrerit non lobortis eget, volutpat 
    nec tortor. Donec id purus metus, eget fermentum neque. 
    </p>
    </div>
    </div>
    <!-- ---------end header--------- -->
    
    <div id="colImages">
    <div class="col1">
    <h3 class="port"> Professional Designs </h3>
    <a href="#"><img src="images/img1.png" alt="Image One"></a>
    <p class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus vitae erat 
    pretium gravida eget sagittis massa.
    </p>
    </div>
    <div class="col2">
    <h3> Professional Services</h3>
    <a href="#"><img src="images/img2.png" alt="Image Two"></a>
    <p class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus vitae erat 
    pretium gravida eget sagittis massa.
    </p>
    </div>
    <div class="col3">
    <h3> Professional Teams</h3>
    <a href="#"><img src="images/img3.png" alt="Image Three"></a>
    <p class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus vitae erat 
    pretium gravida eget sagittis massa.
    </p>
    </div>
    </div>
    <!-- --------end colImages--------- -->
    
    </div>
    
    <div id="footer">Copyright &copy; 2010 All Rights Reserved.</div>
    </body>
    </html>
    
    coothead
    Last edited by dazd; 05-12-2011 at 09:42 PM.

  • #8
    Regular Coder
    Join Date
    Apr 2011
    Posts
    144
    Thanks
    3
    Thanked 1 Time in 1 Post
    I don't know how I was able to do it, but I figured out how to add a paragraph and images for social networks to the background. the position is not fixed, because my page isn't long enough to scroll down yet. But so far so good

    I just added a position of absolute and then added some padding to the top to move it down.


  •  

    Posting Permissions

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