SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: CSS Postioning

Hybrid View

  1. #1
    SitePoint Evangelist lirux's Avatar
    Join Date
    Jan 2001
    Location
    Lisboa : Portugal
    Posts
    418
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Postioning

    I just found out that I can use top: Xpx and left: Ypx to position anything in CSS, and it works with version 4+ browsers... But there must be something I'm not getting, here, else everyone would do this, right?

    Anyways, the code I got was something like:

    <div class="content">The content of the page here..</div>
    <div class="sidebar">Sidebar stuff here</div>
    <div class="headline">headline</div>

    and this would be all i'd need in the <body> of the page, then the CSS would be:

    div.sidebar {
    position: absolute;
    top: 30px;
    left: 5px
    }

    div.headline {
    position: absolute;
    top: 50px;
    left: 100px;
    font-family: Trebuchet MS;
    font-size: 15pt;
    }

    div.content {
    position: absolute;
    top: 70px;
    left: 90px;
    font-family: Trebuchet MS;
    font-size: 10pt;
    }

    Does this really work?? I mean, there must be somethign keeping everyone from doing this, right?

    And what is position: absolute (i think there is something like position: relative or something, but don't know the difference)
    Duarte Carrilho da Graša
    RailsHelp.com: Searchable Rails reference
    CACA: Committee for the Annihilation of Complicated Acronyms

  2. #2
    You talkin to me? Anarchos's Avatar
    Join Date
    Oct 2000
    Location
    Austin, TX
    Posts
    1,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep, that's how it works =). The reason everyone doesn't do that is backwards-compatibility and that there are many differences between browsers on how CSS is displayed.

    Position: absolute means that the values of top: and left: are based on the upper left corner being top: 0px and left: 0px, whereas position: relative means that the current position of the element is top: 0px and left: 0px. So if it's relative positioning, left: 10px will move it 10 pixels to the right.

  3. #3
    SitePoint Evangelist lirux's Avatar
    Join Date
    Jan 2001
    Location
    Lisboa : Portugal
    Posts
    418
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Anarchos! This is so GREAT!
    So this is so cool. I have a webmastering site, so I got to double check my stats, but I'm sure most people would have at at least 4 version browsers..

    Do you think It'd be overdoing it if I positioned every single element? (like setting the exact place for each image, etc..) Or does this make it slower..? Do you think I should put each element in a div (sidebars, text, ads, header, etc..) and then format each div internally with a table?

    Another thing, I've seen examples of CSS usually use <span class="whatever">, what's span? (Is it any different using span or <div>?
    Duarte Carrilho da Graša
    RailsHelp.com: Searchable Rails reference
    CACA: Committee for the Annihilation of Complicated Acronyms

  4. #4
    SitePoint Guru
    Join Date
    Sep 1999
    Location
    Singapore
    Posts
    854
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll not sure about the performance issue, but regarding the <span> tag, it actually does not serve any function by itself. It acts as an inline element and you can specify a CSS style for it, that's about it.

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2000
    Location
    Northern California
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "...Planet lurches to the right as ideologies engage/suddenly it's
    repression, moratorium on rights/what did they think the politics of
    panic would invite/the person on the street shrugs "security comes
    first"/but the trouble with normal is it always gets worse!" -- Bruce Cockburn

  6. #6
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lirux...

    Let me rain on your parade a bit. Positioning via CSS is a fantastic thing, BUT it doesn't work properly in every browsers, most notably Netscape 4.x. That is the reason why more people don't use this method. I would actually recommend using a combination of DIVS and normal P tags.

    As for the SPAN tag, it is an empty element having no attributes of it's own. Unlike the B, I or U tags (which are also inline, but have a specific attribute). I love the SPAN tag and use it almost exclusively for giving a snippet of text a certain set of styles.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes


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
  •