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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation Something obvious but I have no idea

    Hello,

    I have styled some rollover buttons and coded them into my page. However, the buttons are not showing up in any state (hover, rollover etc) so I believe there must be something wrong with either my bad css skills or my bad coding skills... either way its my bad!

    Could someone please look at the code below and see if you can see any obvious problems with this and let me know.

    Code on page:
    PHP Code:
        <div id="nav">
    <
    a id="home" href="#" title="Home"><span>Home</span></a><a id="bio" href="#" title="Bio"><span>Biography</span></a><a id="blog" href="#" title="Blog"><span>Blog</span></a><a id="gallery" href="#" title="Gallery"><span>Gallery</span></a><a id="media" href="#" title="Media"><span>Media</span></a><a id="schedule" href="#" title="Schedule"><span>Schedule</span></a><a id="downloads" href="#" title="Downloads"><span>Downloads</span></a><a id="contact" href="#" title="Contact"><span>Contact</span></a>
      </
    div
    This is the css:
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    
    #home
    {
      display:inline-block;
      width: 62px;
      height: 33px;
      background: url("images/buttons/home.jpg") no-repeat 0 0;
    
    }
    
    .home:hover
    { 
      background-position: 0 -33px;
    }
    
    #home span
    {
      display: none;
    }
    
    #bio
    {
      display:inline-block;
      width: 57px;
      height: 33px;
      background: url("images/buttons/bio.jpg") no-repeat 0 0;
    
    }
    
    #bio:hover
    { 
      background-position: 0 -33px;
    }
    
    #bio span
    {
      display: none;
    }
    
    #blog
    {
      display:inline-block;
      width: 68px;
      height: 33px;
      background: url("images/buttons/blog.jpg") no-repeat 0 0;
    
    }
    
    #blog:hover
    { 
      background-position: 0 -33px;
    }
    
    #blog span
    {
      display: none;
    }
    
    #gallery
    {
      display:inline-block;
      width: 91px;
      height: 33px;
      background: url("images/buttons/gallery.jpg") no-repeat 0 0;
    
    }
    
    #gallery:hover
    { 
      background-position: 0 -33px;
    }
    
    #gallery span
    {
      display: none;
    }
    
    #media
    {
      display:inline-block;
      width: 66px;
      height: 33px;
      background: url("images/buttons/media.jpg") no-repeat 0 0;
    
    }
    
    #media:hover
    { 
      background-position: 0 -33px;
    }
    
    #media span
    {
      display: none;
    }
    
    #schedule
    {
      display:inline-block;
      width: 85px;
      height: 33px;
      background: url("images/buttons/schedule.jpg") no-repeat 0 0;
    
    }
    
    #schedule:hover
    { 
      background-position: 0 -33px;
    }
    
    #schedule span
    {
      display: none;
    }
    
    #downloads
    {
      display:inline-block;
      width: 97px;
      height: 33px;
      background: url("images/buttons/downloads.jpg") no-repeat 0 0;
    
    }
    
    #downloads:hover
    { 
      background-position: 0 -33px;
    }
    
    #downloads span
    {
      display: none;
    }
    
    #contact
    {
      display:inline-block;
      width: 71px;
      height: 33px;
      background: url("images/buttons/contact.jpg") no-repeat 0 0;
    
    }
    
    #contact:hover
    { 
      background-position: 0 -33px;
    }
    
    #contact span
    {
      display: none;
    }

  • #2
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    your css for the id="home" section should be more like shown below. Remember, and 'id' tag has its css begin with # whereas a 'class' tag begins with a '.' (dot)

    An 'id' can appear just once per page and 'class' can appear many times.


    I would change the source code to have a semantic list for the buttons.

    Code:
    <div id="nav">
    <ul>
    <li id="home"><a href="#" title="Home">Home</a></li>
    <li id="bio"><a href="#" title="Bio">Biography</a></li>
    <li id="blog"><a href="#" title="Blog">Blog</a></li>
    <li id="gallery"><a href="#" title="Gallery">Gallery</a></li>
    <li id="media"><a href="#" title="Media">Media</a></li>
    <li id="schedule"><a href="#" title="Schedule">Schedule</a></li>
    <li id="downloads"><a href="#" title="Downloads">Downloads</a></li>
    <li id="contact"><a href="#" title="Contact">Contact</a></li>
    </div>
    then the css can have a default setting for the attributes that are common to all li's and the ones speciifc to each 'id' li would be set for each.

    Code:
    #nav ul li { /* this is standardised for all li's */
    common stuff eg
    height:33px;
    display:inline;
    }
    
    #nav ul li#home:link, #nav ul li#home:visited, #nav ul li#home:hover, #nav ul li#home:active { /* this is specific to the li with the 'id' home */
      width: 62px;
      background: url("images/buttons/home.jpg") no-repeat 0 0;
    }
    
    #nav ul li#home:hover { /* specific to the li with the id home when hovered. */
    css in here for the hover state
     background-position: 0 -33px;
    
    }
    If you use 'span' around some text, you need to assign it a class or an id and put the diplay:none in the css. eg

    <span class='invisible'>bleh</span>

    .invisible {
    display:none
    }

    why have text in your page if you want it to be invisible? is this a workaround for not being able (yet) to have the background images show if there is nothing in the link? I would either make the css force the link to be a size, without the text or use &nbsp; in place of the invisible words.

    hth
    bazz
    Last edited by bazz; 05-11-2009 at 04:39 AM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • Users who have thanked bazz for this post:

    happydj (05-11-2009)

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Im new to coding as you can tell - i think i understand the explanation and thanks very much for your help!

  • #4
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    well if you need more help, just ask

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link


  •  

    Posting Permissions

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