SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation css rollovers - urgent help please

    Hi All

    I am a fairly new to css. I have a website that I created in tables -www.monicawellsphotography.net and I am in the process of converting/recreating it to css.

    However I am a little stuck on how I would convert the navigation buttons into css. At the moment they are gif images. I have read a few books on rollover navigation in css but they only seem to deal with solid colours (which is easy)

    The nav buttons in this site have a little solid colour on one side and when you put your mouse over it, both the little block of colour and the text colour change.

    I thought I could make two divs one nested inside the other, and then make the link change colour which i can do but then how would I get the block of colour to change as well.....

    I would appreciate any help you can give

    Best Regards
    lojo

  2. #2
    The Mind's I ® silver trophy Dark Tranquility's Avatar
    Join Date
    Sep 2003
    Location
    KSA - UAE
    Posts
    9,457
    Mentioned
    8 Post(s)
    Tagged
    1 Thread(s)
    You can use some thing like this:
    HTML Code:
      <div id="menu"><a href="index.php">	  HOME</a>
      <a href="item1.php">	 ITEM1</a>
      <a href="item2.php">	 ITEM2</a>
      <a href="item3.php">	 ITEM3</a>
      <a href="item4.php">	 ITEM4</a></div>

    CSS:

    Code:
    #menu a {color: #ff0;
      border: 1px solid;
      background : url(buttons.jpg) no-repeat;
      width : xxxpx;
      height : xxpx;
      border-color: #00ff00;
      display: block;
      margin: 0px;
      text-align: left;}
      
      #menu a:hover {border: 1px solid;
      background : url(buttons2.jpg) no-repeat;
      color: #0000ff;
      text-decoration: none;}

    Use buttons.jpg as a background for your nav items and buttons2.jpg as the rollover image for instance!
    of course you can tweak the CSS to fit what you need

    Edit:

    ....beaten by all4nerds!!

  3. #3
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, you don't need the no-repeat in there if you've got no background-image.

  4. #4
    The Mind's I ® silver trophy Dark Tranquility's Avatar
    Join Date
    Sep 2003
    Location
    KSA - UAE
    Posts
    9,457
    Mentioned
    8 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Tyssen
    Actually, you don't need the no-repeat in there if you've got no background-image.
    yeah sure forgot to remove that

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Location
    Utrecht (Netherlands, the)
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In that case, you might as well use background-color instead .
    Hippopotomonstrosesquippedaliophobia - Fear of long words

  6. #6
    The Mind's I ® silver trophy Dark Tranquility's Avatar
    Join Date
    Sep 2003
    Location
    KSA - UAE
    Posts
    9,457
    Mentioned
    8 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by CadmiumNL
    In that case, you might as well use background-color instead .
    I always prefer to use background instead of background-color cause adding a bckground image later would be easier! yes I am sometimes Lazy!!

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds
    Hello

    basic
    a{background:#ff0000 url(x.gif) no-repeat;}
    a:hover{background:#0000ff url(xx.gif) no-repeat}
    Hi all4nerds

    many thanks so does this mean that there isnt a way do this without using a gifs as i thought there might me a way to do this with only css

    regards
    Lojo

  8. #8
    The Mind's I ® silver trophy Dark Tranquility's Avatar
    Join Date
    Sep 2003
    Location
    KSA - UAE
    Posts
    9,457
    Mentioned
    8 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by lojo
    Hi all4nerds

    many thanks so does this mean that there isnt a way do this without using a gifs as i thought there might me a way to do this with only css

    regards
    Lojo
    What do you mean with CSS only? you still have to use graphics don't you? (.gif, .jpg, .png)

    Or you mean just a background color rollover effect?

    in that case use

    Code:
     a{background: #00F;}
     
     a:hover{background: #F00;}
    instead


Bookmarks

Posting Permissions

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