Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS A Beginner Question: Alignment and Flow

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #33266
    Hisharu
    Member

    Hello all!

    I’m quite the beginner at this CSS Combat, and I’ve run into what seems to be an often-searched problem. Of course, I couldn’t find anyone else with my particular brand of this problem.

    I have a header that is (supposed to be – question for a different day) flush with the top of the window and spans infinitely in the left and right directions. In that header I wanted three elements: an image that always sits on the left-most side of the header, an image that is always center in the header, and a couple of text links that always sit on the right-most side of the header. If the page is shrunk smaller than the sum of the objects’ widths, they do not fall down to the next “line” but rather just disappear beyond the edge of the window.

    To me this should be a fairly simple CSS problem but whenever I fix one part I break another. If it helps, here’s my code:

    HTML:



    CSS:


    div#header{
    background:url(b.gif) repeat-x top;
    height:116px;
    /*The following two lines are my current solution to making the header flush with the top of the window */
    margin:-8px;
    padding: 4px;
    }

    img#logo{
    float:left;
    }

    p#catch-image{
    background:url(c.png);
    height: 116px;
    width: 269px;
    margin: 0 auto;
    margin-top:-8px;
    }

    a.header{
    float:right;
    margin-right:25px;
    margin-top:35px;
    }

    What currently happens is the links sit atop the center image instead of on the right side of the page. I have no idea why.

    Any tips, pointers, or comments on how terrible my code is would be greatly appreciated.

    Thanks in advance!
    -Nick

    EDIT: I got CLOSER to my solution. Edited the code and description of the problem

    #82470
    wolfcry911
    Participant

    get rid of the negative margins. set the body margin to zero instead. the p element is not self closing – use an open and end tag. put the floats (even the right floats) before the non-floating content. give the header a min-width equal to the sum of the three parts.

    #82523
    Hisharu
    Member

    wolfcry, your suggestions were spot on. In five minutes I made the changes you said and everything just flew right into place. Thanks a ton!

    sl1dr, that’s a really nifty tool. Thanks for the reference — maybe this can save me some time rooting through my code and reloading my page over and over :)

    #82544
    wolfcry911
    Participant

    why?

    #83661
    Hisharu
    Member

    @sl1dr As far as I know, the discussion of different types of positioning simply changes what attributes like “left” and “top” are relative to. I want a bunch of content, hypothetically wrapped in a div, to always hug the rightmost side of this header/banner. Thus, as someone shrinks the page (up to a certain point) or reduces their resolution (again up to a certain point), the “absolute” value of the content’s position will have to change. In a fullscreen 800×600 window, it might be at 600,0 (assuming it has a width of 200). But as they load the page on a widescreen 1280×800 monitor, it will be located at 1080,0.

    So, how could I achieve that effect with absolute positioning and no floats? I’m guessing its some simple attribute I’m overlooking?

    Also, take this question as a simple hypothetical response to your mantra =) as opposed to specifically citing my code. I’ve learned a lot (but clearly not enough) in the last month and made numerous improvements.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.