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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Apr 2006
    Posts
    117
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Unhappy CSS - Anchor Background Image

    Hello,

    I want to make buttons for my side nav bar using background images in css.

    I used to use javascript and make individual images for each button, but I would much rather tile a small image (background-repeat: repeat-x and lay text over top of it.

    I did this using the following code

    Code:
    #mainNav a  {
    background-image: url('images/nav1.gif');
    background-repeat: repeat-x;
    color: #004080;
    font-family: sans-serif;
    font-weight: 500;
    text-decoration: none;
    height: 25px !important;
    width: 125px !important;
    padding-left: 10px;
    }
    
    #mainNav a:hover {
    background-image: url('images/nav2.gif');
    background-repeat: repeat-x;
    height: 25px !important;
    width: 125px !important;
    color: #004080;
    font-family: sans-serif;
    font-weight: 500;
    text-decoration: none;
    
    padding-left: 15px;
    }
    
    #mainNav a:active {
    background-image: url('images/nav2.gif');
    background-repeat: repeat-x;
    height: 25px !important;
    width: 125px !important;
    color: #004080;
    font-family: sans-serif;
    font-weight: 500;
    text-decoration: none;
    padding-left: 15px;
    }
    Now, this does exactly what I want (that is making a 25x125px image with text on top, that when active or hovered over changes images) when using the browser IE. All of the other browsers I have used have done the same with a small difference. The background image is only the size of the space that the text is filling. So, basically, it looks like highlighted text.

    I know there is a way to do this, but I am not sure if I can do it usign strictly CSS or if I have to add in another web developing language into the mix.

    How could I pull this off without making individual images for each link?

  • #2
    Regular Coder
    Join Date
    Apr 2006
    Posts
    117
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Also, all of the above code has to validate with w3.org

    I am making the site for a web design competition, so everything has to validate

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Tyrial101
    Here are some rollover and menu examples I have made.
    All pure CSS (no js) and they all validate.

    Have a look at
    rollover
    horizontal buttons
    vertical buttons

    In your browser, click View/Source to see how they are done - the CSS in the <head> of each one.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    And I have this example that does it with no images.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Apr 2006
    Posts
    117
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Alright, thanks.

    I was missing the Display: block; attribute


  •  

    Posting Permissions

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