Welcome to WebmasterWorld Guest from 54.145.176.120

Forum Moderators: not2easy

Message Too Old, No Replies

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

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

10+ Year Member



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>

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

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month