homepage Welcome to WebmasterWorld Guest from 54.166.105.24
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
<li> and <a href=""> tags
LinuxGold




msg:1182771
 5:48 pm on Nov 7, 2005 (gmt 0)

Following is the current code that works in FF (neglecting IE since Intranet runs on FireFox anyway) where CSS highlights the hoovered <ul> part. I am trying to figure out how to set up <a href="student.php?ID=1">1</a> immediately after "ID:" part in <ul> section and use the <a> when <ul> part is hoovered and clicked. I can not do the following as it invalidates the html check:


<a href="foo"><ul><li>foo</li>....</li></ul></a>

Here is the existing code:

body {
background-color:#fff;
color:#000;
font-family:arial;
font-size:1em;
}
ul.student {
list-style:none;
margin:0;
padding:0;
margin-bottom:10px;
width:250px;
border-width:1px;
border-style:solid;
}
ul.odd {
border-color:#e0e0e0;
}
ul.even {
border-color:#f0f0f0;
}
ul.student li span {
display:block;
float:left;
clear:left;
width:90px;
text-align:right;
padding-right:5px;
font-weight:bold;
font-size:.9em;
}
ul.odd:hover {
background-color:#e0e0e0;
}
ul.even:hover {
background-color:#f0f0f0;
}


<ul class="student odd">
<li><span>ID: </span>
<a href="students.php?ID=1">1</a></li>

<li><span>Name:</span> Scott R Hamm</li>
<li><span>DOB:</span> 1971-02-23</li>
<li><span>Start Date:</span> 2005-11-07</li>
</ul>

 

Fotiman




msg:1182772
 5:58 pm on Nov 7, 2005 (gmt 0)

Your data is technically speaking NOT a list. It would be more accurately displayed as a table.

For example:

<table class="student">
<tr>
<th>ID:</th>
<td><a href="students.php?ID=1">1</a></td>
</tr>
<tr>
<th>Name:</th>
<td>Scott R Hamm</td>
</tr>
<tr>
<th>DOB:</th>
<td>1971-02-23</td>
</tr>
<tr>
<th>Start Date:</th>
<td>2005-11-07</td>
</tr>
</table>

In which case, you might be able to give your "a" a display: block; to achieve what you're trying to achieve.

Just my 2 cents.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved