WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > List problem...

Reply
  Thread Tools Display Modes
Old 1st September 06, 02:44 PM   #1
willsmith727
WLC Member
 
Join Date: Jun 2006
Posts: 37
Default List problem...

Ok just messing about with a list today in a spare 5mins and wondering why the first of these links wont appear as a link. When uploaded and viewed the 'Home' link isn't even a link and the rollover won't work. All the others work fine. Any ideas would be great ty . Im probably doing it wrong.

Code:
ul#navigation li {display:inline;}

li#home {
text-indent: -1000em; 
/* This '-1000em' is a little hack which misalligns any text such that it cannot be read */
background: url(../images/home.jpg) no-repeat left top;
width: 64px;
height: 31px; 
/* The 36px height allows only the top half of the image to be used */
display: block;
overflow: hidden;
position: absolute;
top: 167px;
left: 0px;
}


li#home a:hover {
background-position: 0px -31px; 
/* This adjusts background positioning such that only the bottom half of the image can be seen */
}

li#forum a {
text-indent: -1000em; 
/* This '-1000em' is a little hack which misalligns any text such that it cannot be read */
background: url(../images/forum.jpg) no-repeat left top;
width: 69px;
height: 31px; 
/* The 36px height allows only the top half of the image to be used */
display: block;
overflow: hidden;
position: absolute;
top: 167px;
left: 64px;
}

li#forum a:hover {
background-position: 0px -31px; 
/* This adjusts background positioning such that only the bottom half of the image can be seen */
}

li#about a {
text-indent: -1000em; 
/* This '-1000em' is a little hack which misalligns any text such that it cannot be read */
background: url(../images/about.jpg) no-repeat left top;
width: 65px;
height: 31px; 
/* The 36px height allows only the top half of the image to be used */
display: block;
overflow: hidden;
position: absolute;
top: 167px;
left: 133px;
}

li#about a:hover {
background-position: 0px -31px; 
/* This adjusts background positioning such that only the bottom half of the image can be seen */
}

li#staff a {
text-indent: -1000em; 
/* This '-1000em' is a little hack which misalligns any text such that it cannot be read */
background: url(../images/staff.jpg) no-repeat left top;
width: 59px;
height: 31px; 
/* The 36px height allows only the top half of the image to be used */
display: block;
overflow: hidden;
position: absolute;
top: 167px;
left: 198px;
}

li#staff a:hover {
background-position: 0px -31px; 
/* This adjusts background positioning such that only the bottom half of the image can be seen */
}

li#tutorials a {
text-indent: -1000em; 
/* This '-1000em' is a little hack which misalligns any text such that it cannot be read */
background: url(../images/tutorials.jpg) no-repeat left top;
width: 81px;
height: 31px; 
/* The 36px height allows only the top half of the image to be used */
display: block;
overflow: hidden;
position: absolute;
top: 167px;
left: 257px;
}

li#tutorials a:hover {
background-position: 0px -31px; 
/* This adjusts background positioning such that only the bottom half of the image can be seen */
}

li#contests a {
text-indent: -1000em; 
/* This '-1000em' is a little hack which misalligns any text such that it cannot be read */
background: url(../images/contests.jpg) no-repeat left top;
width: 80px;
height: 31px; 
/* The 36px height allows only the top half of the image to be used */
display: block;
overflow: hidden;
position: absolute;
top: 167px;
left: 338px;
}

li#contests a:hover {
background-position: 0px -31px; 
/* This adjusts background positioning such that only the bottom half of the image can be seen */
}

li#resources a {
text-indent: -1000em; 
/* This '-1000em' is a little hack which misalligns any text such that it cannot be read */
background: url(../images/resources.jpg) no-repeat left top;
width: 90px;
height: 31px; 
/* The 36px height allows only the top half of the image to be used */
display: block;
overflow: hidden;
position: absolute;
top: 167px;
left: 418px;
}

li#resources a:hover {
background-position: 0px -31px; 
/* This adjusts background positioning such that only the bottom half of the image can be seen */
}

li#articles a {
text-indent: -1000em; 
/* This '-1000em' is a little hack which misalligns any text such that it cannot be read */
background: url(../images/articles.jpg) no-repeat left top;
width: 75px;
height: 31px; 
/* The 36px height allows only the top half of the image to be used */
display: block;
overflow: hidden;
position: absolute;
top: 167px;
left: 508px;
}

li#articles a:hover {
background-position: 0px -31px; 
/* This adjusts background positioning such that only the bottom half of the image can be seen */
}

li#request a {
text-indent: -1000em; 
/* This '-1000em' is a little hack which misalligns any text such that it cannot be read */
background: url(../images/request.jpg) no-repeat left top;
width: 79px;
height: 31px; 
/* The 36px height allows only the top half of the image to be used */
display: block;
overflow: hidden;
position: absolute;
top: 167px;
left: 583px;
}

li#request a:hover {
background-position: 0px -31px; 
/* This adjusts background positioning such that only the bottom half of the image can be seen */
}

li#contact a {
text-indent: -1000em; 
/* This '-1000em' is a little hack which misalligns any text such that it cannot be read */
background: url(../images/contact.jpg) no-repeat left top;
width: 76px;
height: 31px; 
/* The 36px height allows only the top half of the image to be used */
display: block;
overflow: hidden;
position: absolute;
top: 167px;
left: 662px;
}

li#contact a:hover {
background-position: 0px -31px; 
/* This adjusts background positioning such that only the bottom half of the image can be seen */
}
Code:
<ul id="navigation">

<li id="home"><a href="index.php" title="Home">Home</a></li>
<li id="forum"><a href="http://www.freedom-fighters.net/sigsource/" title="Sigsource Community">Forum</a></li>
<li id="about"><a href="about.php" title="About Sigsource">About</a></li>
<li id="staff"><a href="staff.php" title="Sigsource Volunteers">Sigsource Staff</a></li>
<li id="tutorials"><a href="Tutorials.php" title="Free Tutorials">Tutorials</a></li>
<li id="contests"><a href="contests.php" title="Photoshop Contests for Prizes">Contests</a></li>
<li id="resources"><a href="resources.php" title="Free Photoshop Resources">Resources</a></li>
<li id="articles"><a href="articles.php" title="Webmaster Articles">Articles</a></li>
<li id="request"><a href="sigrequest.php" title="Sig Request">Sig Request</a></li>
<li id="contact"><a href="contact.php" title="Contact Sigsource">Contact Sigsource</a></li>

</ul>
__________________

To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
|
To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
willsmith727 is offline   Reply With Quote
Old 1st September 06, 02:54 PM   #2
willsmith727
WLC Member
 
Join Date: Jun 2006
Posts: 37
Default Re: List problem...

Wh000ps! Turns out i was missing the 'a' from the home part of the CSS. Sorry!

Ive never used lists before for my nav, so is the way ive done it perfectly ok? Im trying to avoid the whole divitus thing .
__________________

To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
|
To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
willsmith727 is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Browser Incorrect Render of clear: both, List Item Height, and Corners abalmos CSS 2 23rd June 07 10:51 AM
List Problem. Need some help. shapper CSS 1 15th June 07 01:12 PM
Background height problem in FireFox but work in IE EthanCote Browser Compatibility 3 16th March 07 07:34 AM
Wierd IE7 120 DPI CSS Problem ste-jenkins Browser Compatibility 0 22nd January 07 10:47 AM
IE List gaps between items davviau Browser Compatibility 6 8th September 06 10:17 PM


All times are GMT. The time now is 04:14 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.