PDA

View Full Version : Css list



tokio
Jun 5th, 2009, 07:32 PM
I want to make a list of links styled links, but i want small pieces of white spaces in between the links. In addition, i want the current link to be highlighted once the page is loaded. So, 1 should be highlighted, and if i click "2" then that should be highlighted. Here is the source code:




Xhtml Code

<table class="tables" border="1" cellspacing="2">
<tr>
<td><a href=""> 1 </a></td>
<td><a href=""> 2 </a></td>
<td><a href=""> 3 </a></td>
<td><a href=""> 4 </a></td>
<td><a href=""> 5 </a></td>
<td><a href=""> 6 </a></td>
<td><a href=""> 7 </a></td>
<td><a href=""> 8 </a></td>
<td><a href=""> 9 </a></td>
<td><a href=""> 10 </a></td>
</tr>
</table>





Css Code

.tables {
border-collapse: collapse;

}
.tables td {
padding: 5px;
border: 1px solid black;


}
.tables td a {
text-decoration: none;
}
.tables td:hover {
background-color: red;
color: white;
}

Kimmi
Jun 6th, 2009, 05:48 AM
If you want small pieces of white spaces in between each border, then you're going to have to get rid of border-collapse. Border-collapse makes sure that all your borders stay together so that you can't have any space between them. But if you're just talking about the content, stick with padding.

abduraooft
Jun 6th, 2009, 09:02 AM
In addition, i want the current link to be highlighted once the page is loaded. So, 1 should be highlighted, and if i click "2" then that should be highlighted. Here is the source code: Have a look at http://www.codingforums.com/showpost.php?p=605564&postcount=3

tokio
Jun 6th, 2009, 05:38 PM
If you want small pieces of white spaces in between each border, then you're going to have to get rid of border-collapse. Border-collapse makes sure that all your borders stay together so that you can't have any space between them. But if you're just talking about the content, stick with padding.


Thanks for the response but i asked the question ambiguously. I just want spaces in between each table cell like the example below.




|1| |2| |3| |4| |5|



I still wnat to keep the border collapse :).

tokio
Jun 6th, 2009, 05:39 PM
Have a look at http://www.codingforums.com/showpost.php?p=605564&postcount=3

Ha, thats an interesting way of doing it.

abduraooft
Jun 6th, 2009, 05:46 PM
Thanks for the response but i asked the question ambiguously. I just want spaces in between each table cell like the example below.
Don't you know why table for layout is very bad? Make use of an unordered list (http://www.htmldog.com/reference/htmltags/ul/)(you'd need to apply floats to the <li> to align them horizontal), which will make your markup semantic (http://boagworld.com/technology/semantic-code-what-why-how)

Apostropartheid
Jun 7th, 2009, 12:03 AM
The keyword here is "list". Why use a table when you have a perfectly adequate element at your disposal already? It would not be difficult to make it do what you wish: remove the list-items, make it display inline and add a touch of padding.

tokio
Jun 9th, 2009, 03:18 PM
Don't you know why table for layout is very bad? Make use of an unordered list (http://www.htmldog.com/reference/htmltags/ul/)(you'd need to apply floats to the <li> to align them horizontal), which will make your markup semantic (http://boagworld.com/technology/semantic-code-what-why-how)


Ofcourse i know why tables for layout is bad. However, by layout i thought it means for formatting a site. Im just using an data to display an array of links, because i couldn't figure out how to do it with an unordered list. Thanks for the links b/w :).