...

View Full Version : Something obvious but I have no idea



happydj
05-11-2009, 04:25 AM
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:

<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:

@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;
}

bazz
05-11-2009, 05:36 AM
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.



<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.



#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

happydj
05-11-2009, 05:45 AM
Im new to coding as you can tell - i think i understand the explanation and thanks very much for your help!

bazz
05-11-2009, 06:00 AM
well if you need more help, just ask :)

bazz



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum