SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Evangelist dalangalma's Avatar
    Join Date
    Aug 2002
    Posts
    468
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Newbie layout help needed

    OK, well, I've decided to finally jump into table-less layout headfirst.

    Here's what I'm trying to do:

    Top banner, spans page 100%

    Left content pane, has some text, whatever, has to be fluid.

    Right content pane, must always be flush with the right side of the browser and must always be 190px wide.

    The left and right content panes can't overlap - they should just touch.

    I've been able to get a few of these requirements going at once, but not all of those (ie, I can get a reasonable approximation using percentages instead of pixel values, etc). The fluidity of the left pane is important though, and they really have to line up under the top banner (I got things working pretty well with the right pane in absolute positioning and the left pane with a right-margin value of 190px, but they didn't line up horizontally. Is it really possible to do what I want in CSS, or am I back to good old tables? Thanks!

  2. #2
    SitePoint Wizard
    Join Date
    Jul 2001
    Location
    The Netherlands
    Posts
    2,617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is possible. Have a look at this page: http://www.aquatric.com/problem/index.php. That page is totally done with CSS, and has about the same requirements as you do. The stylesheet is located here if you want to take a look at that.

    What you should do is upload your website, and post a link to it, together with the CSS code. We might be able to get you going using that .
    Last edited by Mark T.; Aug 2, 2002 at 04:38.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Location
    Penns Woods
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Making Progress...

    Hey Mark,

    The 'a' and the 'u' are transposed on your link.
    For some reason there is content that gets cut off below the fold. It looks like overflow-y:hidden but I didn't see it in the stylesheet.
    // PS! My brain just hit a bad sector...

  4. #4
    SitePoint Wizard
    Join Date
    Jul 2001
    Location
    The Netherlands
    Posts
    2,617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm.. do you have a link to the page you are talking about?

  5. #5
    SitePoint Evangelist dalangalma's Avatar
    Join Date
    Aug 2002
    Posts
    468
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.numbera.com/evacss/

    It's my girlfriend's diary site - I figured I'd use it as a practice subject.

  6. #6
    SitePoint Evangelist dalangalma's Avatar
    Join Date
    Aug 2002
    Posts
    468
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, that link was really helpful. I didn't sleep much last night, thinking of ways to fix the layers, and what I had eventually come up with (but not implemented yet) is pretty much the same, code-wise. However, the bottom menus are positioned using absolute, and *ideally* I'd like to have all the menus lign up, say, 10px below the link box in the header (you'll see what I'm talking about if you visit the site) since differences in fonts and stuff could push the header into the content. One thing I still don't get is what "positon: relative" does. I'd love to be able to position things relative to their container, and to other layers, but I'm not sure how to go about that. Thanks for all the help, it's really appreciated. I don't want to lose my excitement over CSS just because I can't figure out something this simple.

  7. #7
    SitePoint Wizard
    Join Date
    Jul 2001
    Location
    The Netherlands
    Posts
    2,617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You shouldn't loose excitement, look upon it as a challenge, you have to start somewhere .

    Anyway, you just gave your own answer -- position: relative; makes the element position relative it's container, while position: absolute just positions the element in the page.

    Right now, the lay-out looks great. Just a few general remarks:

    I see the header has a height of about 75 - 100 pixels. If this is a fixed height, which is usual, you can position your elements about 10px below that by adding this to your CSS:

    Code:
    top: 110px;
    The element with this code will start 110 pixels from the top. Is that what you are after?

  8. #8
    SitePoint Evangelist dalangalma's Avatar
    Join Date
    Aug 2002
    Posts
    468
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All righty... I just read the brainjar positioning tutorial again (this time realizing that there was more than one page!) and I think I have a much better grip on things. However, I'm still a little unclear - brainjar says that absolute positioning is relative to the containing block, but some people have told me it's always relative to the page corner... which is correct?

    As for what I'm trying to do, that height should not be there. I don't want to have a fixed hight for my header (I put that in to test some things), I just want the columns to be 10px below the header, no matter what I put in the header (more fluid design, can't get enough). After reading the brainjar page, it seems that giving my left column a clear:right property would move its position under the links bar (my problem was that the links bar would overlap stuff) and then I could position:relative to my heart's content. I'll code that up when I get home, unless anybody has any more suggestions, then I'll post the result here. I think I can clean up the code, too - it seems that when I start going at it with CSS, I end up with just as many, if not more, DIVs as I had nested TABLEs before...

  9. #9
    SitePoint Wizard
    Join Date
    Jul 2001
    Location
    The Netherlands
    Posts
    2,617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by dalangalma
    All righty... I just read the brainjar positioning tutorial again (this time realizing that there was more than one page!) and I think I have a much better grip on things. However, I'm still a little unclear - brainjar says that absolute positioning is relative to the containing block, but some people have told me it's always relative to the page corner... which is correct?
    The latter one is correct as far as I am concerned. Relative positioning is, as the name says, relative to the containing block, and absolute positioning is relative to the page corner.

    About the positioning of the elements below the header. I am not quite sure how to achieve that, I'll try and find out though .

  10. #10
    SitePoint Evangelist dalangalma's Avatar
    Join Date
    Aug 2002
    Posts
    468
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    brainjar's example is sure the one I WANT to be correct. Perhaps it has something to do with browser's default for the "static" attribute - perhaps if I set that explicitly it'll position relative to the block.

  11. #11
    SitePoint Wizard
    Join Date
    Jul 2001
    Location
    The Netherlands
    Posts
    2,617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you have a link to that article?

  12. #12
    SitePoint Evangelist dalangalma's Avatar
    Join Date
    Aug 2002
    Posts
    468
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.brainjar.com/css/positioning/

  13. #13
    SitePoint Evangelist dalangalma's Avatar
    Join Date
    Aug 2002
    Posts
    468
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    OK

    OK, I've fixed the layout, mostly. It looks good in Mozilla. Now I have 3 questions:

    1) Why does the left panel slide all the way down the page in MSIE6?

    2) Why is it that when I give borders to the left and right content boxes, the "headers" (diary and visions) line up, but removing the borders makes them not line up (in Mozilla)?

    3) This is a niggly thing, but as a matter of principle, is there a way I can rewrite this to have the "leftcontent" DIV appear before the "rightcontent" DIV in the source code (for non-CSS browsers).

    Here's the URL again:

    http://www.numbera.com/evacss/

  14. #14
    SitePoint Evangelist dalangalma's Avatar
    Join Date
    Aug 2002
    Posts
    468
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm... Opera tests come up weird.

    Check it out for yourself.

  15. #15
    SitePoint Wizard
    Join Date
    Jul 2001
    Location
    The Netherlands
    Posts
    2,617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, you basically want this to display right:


    Code:
    +++++++++++++++++++++++++++++
    +         1. Header         +
    +++++++++++++++++++++++++++++
    +                 +         +
    +                 +         +
    +    2.Content    + 3.Right +
    +                 +         +
    +                 +         +
    +                 +         +
    +++++++++++++++++++++++++++++
    The numbers show the position in the source code.

    What I would do, is define the header and the content as a block.

    The simplifief CSS code for this would be:

    Code:
    div.header {
    width: 100%;
    height: 100;
    display: block;
    }
    
    div.content {
    display: block;
    margin-right: 150px;
    }
    
    div.right {
    position: absolute;
    top: 100px;
    right: 0px;
    }
    I think that should work just about right. Basically what you are doing by defining the header and content div's as a block, you want them to appear right below each other. The content div has a space of 150 px to the right left open, in which you can absolutely position the right side div. In theory it should work .

  16. #16
    SitePoint Evangelist dalangalma's Avatar
    Join Date
    Aug 2002
    Posts
    468
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That goes back to what I didn't want to do in the beginning. My main problem is that I don't want to use absolute positioning for the content and menu. The header should be able to expand (height-wise) to any size and still have the columns aligned under them. That's working that way in Mozilla now, as you can see in the site, except for two problems: if there is a border around the div that contains the content and menu divs, the column labels are aligned, but have a mysterious space above them. If there is no border around the container div (no other changes) then Mozilla will render the menu div offset down a bit from the content panel. In IE, at least the way I have it coded now, the left panel displays even with the BOTTOM edge of the right panel. In Opera, the first "diary entry header" grey box is stretched horizontally to the height of the right menu, despite them being in entirely separate DIVs (actually separated even farther by containing DIVs. My problem is that I don't want to specify absolute heights or positions (except for the width of the right pane) but I still want things to line up - I want this to be as fluid a design as possible. As you can see, so far Mozilla's doing the best, and IE and Opera are unusable, but even Mozilla's got problems. There's got to be workarounds for this.

    Again, the site is here: http://www.numbera.com/evacss/

    And the stylesheet (though most of the layout stuff is defined in the page source) is here http://www.numbera.com/evacss/styles/eva.css

    Thanks for the help - I know there's gotta be a way to do this, I just haven't seen any examples. Maybe once I get this working I'll put it up as an example (with due credit of course).

  17. #17
    SitePoint Evangelist dalangalma's Avatar
    Join Date
    Aug 2002
    Posts
    468
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could it be that CSS cannot give me the same control over my page as a very very simple table? This is very upsetting. C'mon, there's gotta be a way to make this work.

  18. #18
    SitePoint Evangelist dalangalma's Avatar
    Join Date
    Aug 2002
    Posts
    468
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I fixed one of the problems - I had improperly set the margins for H1. OK, so now that's fixed (no more gap above the labels in Mozilla, no misalignment in IE), but I have a more serious problem, still. Here:

    Mozilla: http://www.numbera.com/pics/mozilla.png - This is how it should look

    Opera 6: http://www.numbera.com/pics/opera.png - Not so cool

    MSIE6: http://www.numbera.com/pics/msie6.png - Terrible

    So what am I doing wrong? Again:

    Site: http://www.numbera.com/evacss/
    CSS: http://www.numbera.com/evacss/styles/eva.css

  19. #19
    SitePoint Evangelist dalangalma's Avatar
    Join Date
    Aug 2002
    Posts
    468
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's another question:

    What's wrong with Opera 6 here? The boxes around these two spans (the subject & date) are floated left & right, and should shrink-wrap around the text. But they get all ugly in Opera 6.

    http://www.numbera.com/pics/opera2.png


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
  •