#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    67
    Rep Power
    11

    Don't understand this CSS


    okay, so i was trying to accomplish the same thing as the website http://<a href="http://www.alistapar...tapart.com</a> I wanted the same thing for the links up at the top, i achieved this by looking at this websites CSS file.

    this was teh relevant CSS code:

    PHP Code:
     #menu UL {
        
    BORDER-TOP-WIDTH0px
                    
    CLEARleft
                    
    PADDING-RIGHT0px
                    
    PADDING-LEFT0px
                    
    BORDER-LEFT-WIDTH0px
                    
    BORDER-BOTTOM-WIDTH0px;
                    
    PADDING-BOTTOM0px
                    
    MARGIN0px
                    
    PADDING-TOP0px
                    LIST-
    STYLE-TYPEnone
                    
    TEXT-ALIGNcenter
                    
    BORDER-RIGHT-WIDTH0px
    }
    #menu UL LI {
        
    PADDING-RIGHT0px
                    
    DISPLAYblock
                    
    PADDING-LEFT0px
                    
    FLOATleft
                    
    PADDING-BOTTOM0px
                    
    MARGIN0px
                    
    PADDING-TOP0px;
                    
    TEXT-ALIGNcenter
    }
    #menu UL LI A {
        
    PADDING-RIGHT0px;
                    
    BORDER-TOP#ccc 1px solid;
                    
    DISPLAYblock
                    
    PADDING-LEFT0px;
                    
    FONT-WEIGHTnormal
                    
    FONT-SIZEx-small;
                    
    BACKGROUND#fff; 
                    
    PADDING-BOTTOM0px
                    
    MARGIN0px 0px 10px
                    
    BORDER-LEFT#ccc 1px solid;
                    
    WIDTH118px;
                    
    COLOR#c30; 
                    
    LINE-HEIGHT2em
                    
    PADDING-TOP0px
                    
    BORDER-BOTTOM#ccc 1px solid; 
                    
    BORDER-RIGHT-STYLEnone
                    
    LETTER-SPACING1px;
                    
    HEIGHT2em
                    
    TEXT-ALIGNcenter;
                    
    TEXT-DECORATIONnone;
                    
    voice-familyinherit;

    lol so it accomplishes what im looking for but i don't understand WHY it does this.

    Any help would be great!

    thanks.
    Last edited by chrisab508; February 3rd, 2004 at 07:47 PM.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    67
    Rep Power
    11
    what i mainly don't understand about it is: the links are typed in as a list in the HTML, so how does this get them horizontal?

    thanks.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    Lyon, France
    Posts
    49
    Rep Power
    11
    Try reading the alistapart website some more. It's probably the worlds best one-stop-shop for webdesign tutorials & articles and a great way to start learning CSS.

    They actually have an entire article (called 'taming lists') that explains in detail what the above css does...

    Read my friend... read..
  6. #4
  7. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    they are using FLOAT: left;
    on the li-element to get them on one line

    you can achieve a similar effect by using display:inline on the li-elements,

    then they use display:block on the anchor elements, so that they can set width and height to those elements.


    http://www.alistapart.com/articles/taminglists/

IMN logo majestic logo threadwatch logo seochat tools logo