SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot ChestRockwell's Avatar
    Join Date
    Nov 2003
    Location
    New Jersey
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    grr....this is really annoying me

    ok when i am working with CSS and trying to make a box that sits at the top of the screen this is what i do

    #box {
    position: absolute;
    top: 0px;
    width: 100px;
    height: 100px;
    }

    the problem i keep running into is that 0px is not the top of the screen it looks to be like 10 px away from the top...i need this box to be at the top of the screen (just like the orange stripe at the top of the sitepoint website) how do i go about doing this....
    thanks
    CR

  2. #2
    Degrading Gracefully PalmerB's Avatar
    Join Date
    Sep 2001
    Location
    Ohio - U.S.A. Outlook: Cautiously Optimistic
    Posts
    3,283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Add margin: 0px 0px 0px 0px; to your body tag.

  3. #3
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    IMO absolute positioning is a real pain in the behind, but it isn't your problem here. What you want is for the page to have no top margin.
    If you wanted a red bar like the one on this site you would do a code something like this:

    div {margin: 0; width: 100%; padding: x; border: 0;}

    with "x" in padding being the size you want between the outside of the division and the contents of the division. If you are looking to do an empty division (no content), you are better off setting your page margins to 0 and putting a transparent graphic into the division since they collapse into oblivion if they are empty. The graphic should be the height that you want for the top bar.

    Your body tag would then read:
    <body style="margin: 0;">

    The first element in the body would be the div which would be the container for the transparent image. The html would look something like this (this starting at the closing head tag):

    </head>
    <body style="margin: 0;">
    <div style="background: red; color: inherit; padding: 1em; margin: 0; width: 100%;>
    <img src="myimage.gif" />
    </div>

    This would be followed by the rest of your html document.
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  4. #4
    Degrading Gracefully PalmerB's Avatar
    Join Date
    Sep 2001
    Location
    Ohio - U.S.A. Outlook: Cautiously Optimistic
    Posts
    3,283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah... sure... that'll work too if you're in to a more detailed reply.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    (just like the orange stripe at the top of the sitepoint website) how do i go about doing this....
    CSS:
    Code:
    body {margin:0;padding:0}
    #box {
    position: absolute;
    top: 0px;
    left:0;
    width: 100%;
    height: 50px;
    background:red;
    }
    html:
    Code:
    <div id="box"></div>
    All you needed to do was set the margin to 0 for the body element as pointed out correctly by PalmerB.

    However you also need to add padding:0 for Opera which uses padding for its default body margins.

    You don't actually need absolute positioning for the above anyway (unless you have an alternative motive). As long as the element is first in the html you can omit the absolute positioning and the top left co-ordinates.
    e.g.
    Code:
    body {margin:0;padding:0;}
    #box {
    width: 100%;
    height: 50px;
    background:red;
    }
    This has the benefit of allowing following content to flow naturally and avoid the element. (When you use absolute positioning the element is removed from the flow and other elements will not know its there.)
    Quote Originally Posted by shyflower
    IMO absolute positioning is a real pain in the behind
    There's nothing wrong with absolute positioning when used in the right context.

    Quote Originally Posted by shyflower
    If you are looking to do an empty division (no content), you are better off setting your page margins to 0 and putting a transparent graphic into the division since they collapse into oblivion if they are empty. The graphic should be the height that you want for the top bar.
    Blasphemy - we don't want any table tricks here. This is CSS there is no need for spacer gifs there is always an alternative. Just specify a height for the element as in my example above. (For small heights in IE (e.g. height:5px) just specify overflow:hidden as well.)

    Quote Originally Posted by shyflower
    </head>
    <body style="margin: 0;">
    <div style="background: red; color: inherit; padding: 1em; margin: 0; width: 100%;>
    <img src="myimage.gif" />
    </div>
    May as well use tables if you are going to use inline styles. While I realise you may have put the styles inline just for demonstration purposes, people are now going to thing that this is the way it should be done.

    The styles should be separate from the content, after all CSS is all about separating style from content.

    Sorry to take you to task Shyflower but I think we need to be clear about this

    Paul

  6. #6
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    Sorry to take you to task Shyflower but I think we need to be clear about this

    Paul
    You didn't really "take me to task". Everybody has a right to their own opinion. Yours is yours.

    I am not a self-appointed web guru. I do what works for me and what validates, and if I can pass it along to someone, I will.

    By the way, according to the W3C there is a place for css in-line as well as embedded into the head information or in an external style sheet.
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Shyflower,

    By the way, according to the W3C there is a place for css in-line as well as embedded into the head information or in an external style sheet.
    From the W3C site :
    http://www.w3.org/TR/REC-html40/pres....html#h-14.2.2
    For optimal flexibility, authors should define styles in external style sheets.
    I am not a self-appointed web guru.
    Neither am I - I'm just someone trying to help and point people in the right direction. I just felt that your contribution of transparent gifs and inline styles could confuse a beginner in css .

    But you're right it's just my opinion and I could well be wrong again! I understand you posted in order to help and pass along what you know, which is good and I'm just trying to do the same. If the information I give out is incorrect then I expect to be corrected as well (as there are some very knowledgable people on this forum).

    Paul

  8. #8
    Ensure you finish what you sta bronze trophy John Colby's Avatar
    Join Date
    Aug 2003
    Location
    University of Central England, U.K.
    Posts
    487
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But for the future, http://www.w3.org/TR/xhtml11/doctype.html#s_doctype says:

    "Style Attribute Module Deprecated"
    John
    No electrons were harmed during the creation, transmission
    or reading of this posting. However, many were excited and
    some may have enjoyed the experience.


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
  •