SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    Non-Member
    Join Date
    Feb 2005
    Posts
    737
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do they do this in CSS?

    Hi,

    On This page where it has the teams and subs named alltogether how do they do that?

    I tried it by creating a div with a dark border of 1 on the bottom for each players name, but it did not display properly. Can anyone point me in the right direction?

    Thanks

    Chris

  2. #2
    SitePoint Evangelist
    Join Date
    Apr 2003
    Location
    Lexington, KY
    Posts
    437
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Chris,

    Are you talking about this part of the page?

    Code:
    Arsenal
    
        * Jens Lehmann 
          Yellow Card
        * Sol Campbell
        * Emmanuel Eboue 
          Yellow Card
        * Kolo Toure
        * Ashley Cole
        * Gilberto
        * Francesc Fabregas
        * Mathieu Flamini 74
        * Alexander Hleb
        * Jose Antonio Reyes 84
        * Robert Pires
        * Manuel Almunia 19
        * Fredrik Ljungberg
        * Thierry Henry 
          Yellow Card
    
    Subs not used
    
        * Philippe Senderos
        * Gael Clichy
        * Dennis Bergkamp
        * Robin Van Persie

    If so, all that is an un-ordered list with the bullet style and padding removed and a bottom border added to each LI


    -Michael

  3. #3
    Non-Member
    Join Date
    Feb 2005
    Posts
    737
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks,

    That's the bit and have tried it:

    HTML Code:
    <HTML>
    <HEAD>
    <TITLE>test</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> 
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252"> <STYLE TYPE="text/css"> 
    	.menustyling ul{ 
    		list-style:none; 
    		padding:0px; 
    		margin:0px;
    	}
    
    	.menustyling{ 
    		width:300px; 
    		margin:0px; 
    		padding:0px; 
    		background-color:#fff;
                    border-color: black; 
                    border-style: solid; 
                    border-bottom-width: thin       
            } 
    </STYLE> 
    </HEAD>
    
    <BODY BGCOLOR="#FFFFFF">
    <DIV CLASS="menustyling"> <UL ID="nav"> <LI><A HREF="link">Player One</A></LI><LI><A HREF="link">Player 
    Two </A></LI><LI><A HREF="link">Player Three</A></LI><LI><A HREF="link">Player 
    Four </A></LI><LI><A HREF="link">Player Five</A></LI></UL></DIV><SPAN CLASS="menustyling"></SPAN> 
    </BODY>
    </HTML>
    But it just don't work - can anyone help please?

  4. #4
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,727
    Mentioned
    44 Post(s)
    Tagged
    0 Thread(s)
    li{display:block; border-bottom:1px #000000 solid;}

  5. #5
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Shaun(OfTheDead)
    li{display:block; border-bottom:1px #000000 solid;}
    <li>'s are block-level by default.

  6. #6
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,727
    Mentioned
    44 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Egor
    <li>'s are block-level by default.
    They are block level, yes... but their default display is "list-item".

    Setting them to "block" gets rid of the bullet point.

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Shaun(OfTheDead)
    They are block level, yes... but their default display is "list-item".

    Setting them to "block" gets rid of the bullet point.
    So does this:
    Code:
      #nav {list-style-type: none;}
    But you have to apply the style to the list itself in order for it to work. You can do this by declaring the list directly, or through a class or ID (as I have done here).

  8. #8
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,727
    Mentioned
    44 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz
    So does this:
    Code:
      #nav {list-style-type: none;}
    But you have to apply the style to the list itself in order for it to work. You can do this by declaring the list directly, or through a class or ID (as I have done here).
    So would that be...

    li{list-style-type: none;}

    or

    ul{list-style-type: none;}

    ??

  9. #9
    SitePoint Member
    Join Date
    Feb 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ul list items

    Should be
    Code:
    ul { list-style: none; }
    because if I am not mistaken the li is a child of ul so if you put it on ul it should affect its children.

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Shaun(OfTheDead)
    So would that be...

    li{list-style-type: none;}

    or

    ul{list-style-type: none;}

    ??
    I'm sorry, I should have clarified myself when I posted that message. If you look in 7724's example code, you will see that he has an ID with the name "nav" on the unordered list. I used the ID attribute in the example since he had it in his code.

    The style rule would be applied to the unordered list, since the list items are children of the unordered list.


Bookmarks

Posting Permissions

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