Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Header, left sidebar, article to the right, and footer in CSS?

    Hey all, I am trying to make a website with a header at the top, a sidebar to the left under that header, an article to the right/center, and a footer stuck to the bottom of the page. Every implementation I've tried so far causes overlap/changes dramatically when the browser is resized/is an obfuscated mess. How would I go about getting a <insert title>?

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,746
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there steampunknyanja,

    and a warm welcome to these forums.

    check out the attachment for a basic example.

    coothead
    Attached Files Attached Files

  • Users who have thanked coothead for this post:

    steampunknyanja (02-11-2012)

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you so much for this! But when I try to put a <h1> element in the header section, the footer is pushed downward, even if no text is there.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello steampunknyanja,
    Your h1 has default margins on it, the top one is pushing #container down. This behaviour is called "uncollapsing margins."
    Google that for lots of examples.

    Here's one, along with a couple cures for it - uncollapsing margins
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    steampunknyanja (02-11-2012)

  • #5
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you, that fixed the footer getting pushed downward, but when I put overflow:auto into the header section of the css, a scrollbar appeared to the right of that section

    EDIT: I was able to fix that by changing
    Code:
        font:bold 120%/100px verdana,arial,helvetica,sans-serif;
    in the header to
    Code:
        font:bold 120%/50px verdana,arial,helvetica,sans-serif;
    Last edited by steampunknyanja; 02-11-2012 at 10:31 PM.

  • #6
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Can I safely replace the div's with semantic elements like <article> and <footer> replacing div right and div footer? And before I was able to use @font-face, but when I copy that over, it does not change the font.
    Last edited by steampunknyanja; 02-11-2012 at 11:58 PM.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by steampunknyanja View Post
    Thank you, that fixed the footer getting pushed downward, but when I put overflow:auto into the header section of the css, a scrollbar appeared to the right of that section
    One of the undocumented benefits, I think, of overflow: auto; is that is shows you when your box model is broken by throwing up a scrollbar to handle the overflow. I don't have cootheads example in front of me anymore but any content you put in #header cannot exceed the set height of the header or there is overflow.

    See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by steampunknyanja View Post
    Can I safely replace the div's with semantic elements like <article> and <footer> replacing div right and div footer? And before I was able to use @font-face, but when I copy that over, it does not change the font.
    Those are HTML5 elements and they are only semantic if you use them correctly. It should be no problem using them though, they'll work just fine. I have some getting started with HTML5 tips here that may help you.

    @font-face is something else entirely. Are you sure you understand what that's for? See http://sixrevisions.com/css/font-face-guide/ or https://www.google.com/search?q=chri...=1348&bih=1017 for help with that if you feel that's really how you need to style your text.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    steampunknyanja (02-12-2012)

  • #9
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you, but even after using font squirrel to convert the fonts, whenever I try to apply the font to a class the webpage does not show the font.

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    If you put up a test site with your most recent code, we can have a look at it. Maybe it's something we've run into before. Give us a link
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I've not put it up, I guess I misused the word webpage up there. Here are the code I have, I'm trying to make all elements of a class have this font (Visitor, a overly blockish font):
    Code:
    @font-face {
        font-family:visitor;
        src: url('visitor1-webfont.eot');
        src: url('visitor1-webfont.eot?#iefix') format('embedded-opentype'),
             url('visitor1-webfont.woff') format('woff'),
             url('visitor1-webfont.ttf') format('truetype'),
             url('visitor1-webfont.svg#VisitorTT1BRKRegular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    html,body {
        height:100%;
        margin:0;
        background-image:url('images/stars.png');
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:16px;
    }
    .visitor {
        font-family:Visitor !important;
        color:#fff;
    }
    #container {
        position:relative;
        width:998px;
        min-height:100%;
        border-right:1px solid #000;
        border-left:1px solid #000;
        margin:auto;
        background-color:#cff;
    }
    #header {
        height:100px;
        border-bottom:1px solid #000;
        background-color:#fcc;
        overflow:auto;
        font:bold 120%/50px verdana,arial,helvetica,sans-serif;
        text-align:center
    }
    and
    Code:
    <div id="header">
        <h1 class='visitor'>Lorem Ipsum</h1>
    </div>
    It successfully makes the text white, though.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •