Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: Css list

  1. #1
    New Coder
    Join Date
    Jun 2008
    Location
    Jupiter
    Posts
    49
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Css list

    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:

    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>
    Code:
    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;
    }

  • #2
    New to the CF scene
    Join Date
    Jun 2009
    Location
    East Coast
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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 Change link text style for current page.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New Coder
    Join Date
    Jun 2008
    Location
    Jupiter
    Posts
    49
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Kimmi View Post
    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.

    Code:
    |1| |2| |3| |4| |5|
    I still wnat to keep the border collapse .

  • #5
    New Coder
    Join Date
    Jun 2008
    Location
    Jupiter
    Posts
    49
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Ha, thats an interesting way of doing it.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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(you'd need to apply floats to the <li> to align them horizontal), which will make your markup semantic
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    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.

  • #8
    New Coder
    Join Date
    Jun 2008
    Location
    Jupiter
    Posts
    49
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Don't you know why table for layout is very bad? Make use of an unordered list(you'd need to apply floats to the <li> to align them horizontal), which will make your markup semantic

    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 .


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •