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

    Join Date
    Dec 2012
    Posts
    5
    Rep Power
    0

    Simple problem - but impossible for a newbie


    I had started making my new site with frames - like this:

    A header from left to right, 100 pixels high

    Under that

    A menu frame in the left side, 300 pixels wide
    A content frame, filling the rest of the screen.

    But then I tried to make it with CSS instead - but after having fought with it for 5 hours, I gave up.

    Can someone help me with some code I can use?

    Thanks a lot
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    709
    Rep Power
    441
    There's probably a lot more you want that you're not mentioning, but in the most basic terms, things flow top to bottom naturally. To get things to display side by side you can "float" elements (though that's not the only way).

    An ultra basic approach to what you're describing would be:

    Code:
    <div class="header">Header</div>
    <div class="menu">Menu</div>
    <div class="content">Content</div>
    Then in your CSS:

    Code:
    .header {height: 100px; background: red}
    .menu {width: 300px; float: left; background: blue}
    .content {background: yellow}
    If you have any design sense you'll come back and say things like "but I want the menu to be as tall as the content" and "I want a footer at the bottom of the screen no matter how tall the page is" and that's where you get into the more complicated stuff. But the above is the basic shell of what you're talking about.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    5
    Rep Power
    0

    Oh, mine


    Are you sure, that works - always?
    I am asking, because other suggestions, I have seen, are far more complicated.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    5
    Rep Power
    0

    One problem :(


    I want the whole screen to have the same colour (maybe with the menu on top of it with a different colour).

    How do I do that?
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    5
    Rep Power
    0

    Solved it


    Giving the body div the colour I want must be the correct way?
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    709
    Rep Power
    441
    Yes, assigning a background color to the <body> would be one way to handle that.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    5
    Rep Power
    0

    Doesn't work


    When I put enough text in the content, that last of it is placed beneath menu
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    709
    Rep Power
    441
    I wouldn't say it "doesn't work", you're just simply noticing the things that aren't there you didn't ask for. Coming from frames, if I had told you everything you needed for a bulletproof CSS design, your head would have exploded.

    When you float something, other content will wrap around it. You can stop that by either setting a margin on that content, or by setting the content to overflow: hidden or auto.

    If you add overflow: hidden to your content CSS, it will no longer wrap underneath the menu. (Cue your next complaint that the menu and content aren't the same height in 5...4...)

IMN logo majestic logo threadwatch logo seochat tools logo