Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member spasm attack's Avatar
    Join Date
    Aug 2006
    Location
    Colorado
    Posts
    15
    Member #
    13735
    Alright, so I just learned the basics of CSS, and I'm trying to make a practice page that you can completely change by using a different CSS file. So far, I've been successful with everything but doing that button rollover thing. There is probably a better way to do this, so please do enlighten me.
    Heres that part of my .css
    Code:
     
    #navbar {
     background: black;
     float: left;
     width: 137px;
     height: auto;
     padding: 10px;
    }
     
    .button {
     font-style: bold;
     font-size: large;
     padding: 10px;
     text-align: center;
     background: url(http://www.freebuttons.com/freebutto...OvalTxtDz0.gif) no-repeat center;
    }
     
    #navbar a:link {color: #ffffff}
    #navbar a:hover {background: url(http://www.freebuttons.com/freebutto...OvalTxtDu0.gif)}
    and here is that part of my .html
    Code:
      <div id="navbar">
        <div id="navbar_header">Work in progress</div>
     <a href="whatever"><div class="button">Link</div></a>
     <a href="whatever"><div class="button">Link</div></a>
     <a href="whatever"><div class="button">Link</div></a>
     <a href="whatever"><div class="button">Link</div></a>
     <a href="whatever"><div class="button">Link</div></a>
     <a href="whatever"><div class="button">Link</div></a>
     </div>
    I put the <a href="whatever"> around the <div class="button">Link</div> with the intention of making the whole div class="button" clickable, but it only got the text within. When I roll over it with the mouse, the background of the text changes, but not the background of the <div>

    any way to get the background of the div to change on the rollover and I would also like the thing to be a link, including the background of the div. Any suggestions?
    "There is no spoone" -The Matricks

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Give the a tag inside the div a [minicode]display: block;[/minicode]. That'll make it fill up the entire space of the div.

  4. #3
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    You are correct, this code is entirely too complicated!

    CSS
    Code:
     
    #navbar {
     background: black;
     float: left;
     width: 137px;
     height: auto;
     padding: 10px;
    }
    
    #navbar ul, #navbar li {
     list-style-type: none;
     padding: 0;
     margin: 0;
    }
    
    #navbar a {
     font-style: bold;
     font-size: large;
     padding: 10px;
     text-align: center;
     display: block;
     background: white  url(./images/local_but.gif) -1000 0 no-repeat;
    }
    
    #navbar a:hover {
     background: url(./images/local_but.gif) auto auto no-repeat;
    }
    HTML Code:
    <div id="navbar_header">Work in progress</div>
    <ul id="navbar">
      <li><a href="whatever">Link</a></li>
      <li><a href="whatever">Link</a></li>
      <li><a href="whatever">Link</a></li>
      <li><a href="whatever">Link</a></li>
      <li><a href="whatever">Link</a></li>
      <li><a href="whatever">Link</a></li>
    </ul>
    Summary of changes...
    In the CSS I removed the button class and put the attributes into the a and added display: block;. A little comment on display: block for the a... it may still need a width, in order to work properly. I added a style for <ul> and <li> because the best way to code a navigation is using an unordered list, as seen in the altered html.

    In my version you have a local copy of your button (hint, hint). The button is positioned off the page when you get there, but appears on the hover. Why? It's a way to pre-load the image. This is a trick we use for background images all the time, and can be applied to many things! I also removed "center" and replaced it with comparable coordinates.

    The html obviously, is now a list. I took out the divs. If you want to be technical, it is incorrect to put a div (block level element) inside of an a (in-line element). I also moved the navbar_header because it does not belong in the list, but I do not see a style for it, so I will not talk about it any more.
    Shani

    I have an eye for detail like you'd never believe.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:25 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com