SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jul 2002
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need Help with Positioning Header

    I am using Blue Robot's 3-Column-Layout on my site.
    I tried to place a header on top, spanning across the whole horizontal space of the page, but the two sidebars always come on top crashing into the header from below.
    It's just an ordinary header as seen on most pages, like this one. I'd like to have a horizontal bar with images and navigation and the content and sidebars below the actual header.
    I put the header right after the <BODY> tag, to no avail.
    The sidebars keep on aligning with the top of the page.
    Since I am primarily a Copy-And-Paste artist with very little knowledge of CSS, I could not find a way to deal with this.
    Perhaps somebody has an Idea how to accomplish this within this specific template?

    Thank you very much,
    Aleks

  2. #2
    SitePoint Member
    Join Date
    Jul 2002
    Location
    Somerset, UK
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To get your header across the top of the page I changed these lines in the CSS

    In .header change the margin: to read
    margin:0px 20px 20px 20px;

    in #navAlpha change top margin to
    top:120px;

    and in navBeta change top margin to
    top:120px;

    It looks like the .header class is set between the alpha and beta sections, the above just pushes them down the page a bit and expands the header to the width of the page.
    Hopefully this helps you out, it worked ok when I tried it out.
    dave

  3. #3
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    use clear left and dont use absolute positioning

    PHP Code:
    <style type="text/css">
    clearfloatL {clear:left;}
    clearfloatR {clear:right;}
    </
    style>

    <
    div class="clearfloatL">&nbsp;<div>
    <
    div class="clearfloatR">&nbsp;<div
    put this where you want to stop the floats btw, and i think they use absolute positioning as well, so it may need a little modifying unless you wanna post it here

  4. #4
    SitePoint Member
    Join Date
    Jul 2002
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All right. Thanks a lot. I think the solution in the first reply should do the job, since I only need to push down the sidebars a little bit, so the header can spread across the page without interference.


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
  •