Help wanted with CSS layout

Discussion in 'HTML' started by Fred Emmott, May 14, 2004.

  1. Fred Emmott

    Fred Emmott Guest

    -----BEGIN PGP SIGNED MESSAGE-----
    Hash: SHA1

    Hi - no idea why this isn't working (at least in konqueror) - the "Left"
    "Centre" and "Right" divs should be in a row. Any ideas?

    Thanks.

    <html>
    <head>
    <title>CSS test</title>
    <style type="text/css">
    <!--
    #leftcontent {
    position: absolute;
    left: 10px;
    top: 50px;
    width: 200px;
    border: 1px solid black;
    }
    #centrecontent {
    background: white;
    margin-left: 201px;
    margin-right: 201px;
    border: 1px solid black;
    }
    #rightcontent {
    position: absolute;
    right: 10px;
    top: 50px;
    width: 200px;
    background: white;
    border: 1px solid black;
    }
    #banner h1 {
    font-size: 14px;
    padding: 10px 10px 0px 10px;
    margin: 0px
    }
    - -->
    </style>
    </head>
    <body>
    <div id="banner"><h1>test</h1></div>
    <div id="leftcontent">
    Left
    </div>
    <div id="centrecontent">
    Centre
    </div>
    <div id="rightcontent">
    Right
    </div>
    </body>
    </html>
    - --
    Fred Emmott
    -----BEGIN PGP SIGNATURE-----
    Version: GnuPG v1.2.3 (GNU/Linux)

    iD8DBQFApKfqima0zti2BQgRAl74AJ9zY1PMm4dC3x7dZWPVKvPhfwXzvgCeKUK7
    xvDyWA4kuWotDMox7+YygaE=
    =ZpcK
    -----END PGP SIGNATURE-----
     
    Fred Emmott, May 14, 2004
    #1
    1. Advertising

  2. Fred Emmott

    Mitja Guest

    Fred Emmott <>
    (news:c8296i$vg8$) wrote:
    > -----BEGIN PGP SIGNED MESSAGE-----
    > Hash: SHA1
    >
    > Hi - no idea why this isn't working (at least in konqueror) - the
    > "Left" "Centre" and "Right" divs should be in a row. Any ideas?


    Um. Left and right DIVs have margin-top:50px, the central one doesn't?

    Position them all absolutely (worse, banner height is flexible) or using
    floats (better).

    > Thanks.
    >
    > <html>
    > <head>
    > <title>CSS test</title>
    > <style type="text/css">
    > <!--
    > #leftcontent {
    > position: absolute;
    > left: 10px;
    > top: 50px;
    > width: 200px;
    > border: 1px solid black;
    > }
    > #centrecontent {
    > background: white;
    > margin-left: 201px;
    > margin-right: 201px;
    > border: 1px solid black;
    > }
    > #rightcontent {
    > position: absolute;
    > right: 10px;
    > top: 50px;
    > width: 200px;
    > background: white;
    > border: 1px solid black;
    > }
    > #banner h1 {
    > font-size: 14px;
    > padding: 10px 10px 0px 10px;
    > margin: 0px
    > }
    > - -->
    > </style>
    > </head>
    > <body>
    > <div id="banner"><h1>test</h1></div>
    > <div id="leftcontent">
    > Left
    > </div>
    > <div id="centrecontent">
    > Centre
    > </div>
    > <div id="rightcontent">
    > Right
    > </div>
    > </body>
    > </html>
    > - --
    > Fred Emmott
    > -----BEGIN PGP SIGNATURE-----
    > Version: GnuPG v1.2.3 (GNU/Linux)
    >
    > iD8DBQFApKfqima0zti2BQgRAl74AJ9zY1PMm4dC3x7dZWPVKvPhfwXzvgCeKUK7
    > xvDyWA4kuWotDMox7+YygaE=
    > =ZpcK
    > -----END PGP SIGNATURE-----
     
    Mitja, May 14, 2004
    #2
    1. Advertising

  3. Fred Emmott wrote:
    > -----BEGIN PGP SIGNED MESSAGE-----
    > Hash: SHA1
    >
    > Hi - no idea why this isn't working (at least in konqueror) - the "Left"
    > "Centre" and "Right" divs should be in a row. Any ideas?


    What exactly isn't working in Konqueror, do you have a screenshot, and
    what's the URL so we can look at the original code?

    The "right" property doesn't work in a number of browsers, perhaps
    Konqueror suffers from that too.

    And the code isn't valid, you forgot the Doctype. There's also a rogue -
    near the end of the stylesheet.

    BTW, getting three DIV in a row is more easily done with float. See
    <http://www.w3.org/TR/CSS2/visuren.html#propdef-float>

    Matthias
     
    Matthias Gutfeldt, May 14, 2004
    #3
  4. Fred Emmott

    Steve Pugh Guest

    Fred Emmott <> wrote:

    >Hi - no idea why this isn't working (at least in konqueror) - the "Left"
    >"Centre" and "Right" divs should be in a row. Any ideas?


    They are in a row, but left and right are somewhat lower. left and
    right will be 50px down from the top of the page. center will be
    immediately beneath banner. You've given banner margins of 0, top and
    bottom padding of 10px and a font size 14px.

    So center will start at
    page margin/padding + 10px + line height of banner + 10px from the top
    of the page. On many browsers this is going to be around 35px total.

    Have you considered using floats rather than absolute positioing?
    They're often more flexible.

    If you really want to use absolute positioining then something like
    this would work better:

    <style type="text/css">
    #threecols {position: relative;}
    #leftcontent {
    position: absolute;
    left: 10px;
    top: 0;
    width: 200px;
    border: 1px solid black;
    }
    #centrecontent {
    margin-left: 210px;
    margin-right: 210px;
    border: 1px solid black;
    }
    #rightcontent {
    position: absolute;
    right: 10px;
    top: 0;
    width: 200px;
    border: 1px solid black;
    }
    #banner h1 {
    padding: 10px 10px 0 10px;
    margin: 0;
    }
    </style>

    <div id="banner"><h1>test</h1></div>
    <div id="threecols">
    <div id="leftcontent">Left</div>
    <div id="centrecontent">Centre</div>
    <div id="rightcontent">Right</div>
    </div>

    cheers,
    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, May 14, 2004
    #4
  5. Fred Emmott

    Steve Pugh Guest

    Steve Pugh <> wrote:

    >You've given banner margins of 0, top and
    >bottom padding of 10px and a font size 14px.


    Whoops, bottom margin is 0 not 10px. But that's a mere detail, the
    core of my explanation remains the same.

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, May 14, 2004
    #5
  6. Fred Emmott

    Whitecrest Guest

    In article <c8296i$vg8$>,
    says...
    > Hi - no idea why this isn't working (at least in konqueror)


    Well to paraphrase Toby... don't use Konquer. That seems to be his
    answer every time someone brings up an issue with IE....

    --
    Whitecrest Entertainment
    www.whitecrestent.com
     
    Whitecrest, May 14, 2004
    #6
  7. Fred Emmott

    Fred Emmott Guest

    -----BEGIN PGP SIGNED MESSAGE-----
    Hash: SHA1

    Whitecrest shared these words of wisdom:

    > In article <c8296i$vg8$>,
    > says...
    >> Hi - no idea why this isn't working (at least in konqueror)

    >
    > Well to paraphrase Toby... don't use Konquer. That seems to be his
    > answer every time someone brings up an issue with IE....
    >


    I don't want my site to discriminate against any browser - anyway i can't
    see any (important) difference between the site i referenced in one of my
    other posts, and that renders fine...

    anyway the konqueror in KDE 3.2 is much improved over earlier versions (the
    enhancements apple made for safari made there way back into konqueror).

    - --
    Fred Emmott
    -----BEGIN PGP SIGNATURE-----
    Version: GnuPG v1.2.3 (GNU/Linux)

    iD8DBQFApNcxima0zti2BQgRAvC2AKCC5SxUPouRYqxjzPeTytaMxW7R9wCfUbGG
    7/IDQqQ178QnLVaEcgIIJxw=
    =UeTK
    -----END PGP SIGNATURE-----
     
    Fred Emmott, May 14, 2004
    #7
  8. Fred Emmott

    Whitecrest Guest

    In article <c82l0o$67p$>,
    says...
    > > Well to paraphrase Toby... don't use Konquer. That seems to be his
    > > answer every time someone brings up an issue with IE....

    > I don't want my site to discriminate against any browser....


    <snip>
    Easy, I was being facetious.

    --
    Whitecrest Entertainment
    www.whitecrestent.com
     
    Whitecrest, May 14, 2004
    #8
  9. Checking your reference http://glish.com/css/7.asp I found that they used
    html>body #banner {
    height:39px;
    }

    Added to the padding-top of 10 px you would have 49px which would line up
    the three DIVs. It would be easier than making the #centrecontent absolute
    positioned, although that does work.

    Stephen
    "Fred Emmott" <> wrote in message
    news:c82bb9$p5$...
    > Matthias Gutfeldt shared these words of wisdom:
    >
    > > Fred Emmott wrote:
    > >> -----BEGIN PGP SIGNED MESSAGE-----
    > >> Hash: SHA1
    > >>
    > >> Hi - no idea why this isn't working (at least in konqueror) - the

    "Left"
    > >> "Centre" and "Right" divs should be in a row. Any ideas?

    > >
    > > What exactly isn't working in Konqueror, do you have a screenshot, and
    > > what's the URL so we can look at the original code?
    > >
    > > The "right" property doesn't work in a number of browsers, perhaps
    > > Konqueror suffers from that too.
    > >
    > > And the code isn't valid, you forgot the Doctype. There's also a rogue -
    > > near the end of the stylesheet.
    > >
    > > BTW, getting three DIV in a row is more easily done with float. See
    > > <http://www.w3.org/TR/CSS2/visuren.html#propdef-float>
    > >
    > > Matthias

    >
    > This isn't the actual code i want to use - it's a simplified example. It
    > should work like http://glish.com/css/7.asp (which displays fine in
    > konqueror), but instead displays like the screenshot in the attachment
    >
    > --
    > Fred Emmott
     
    Stephen T. Fox, May 16, 2004
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Harvey
    Replies:
    0
    Views:
    790
    Harvey
    Jul 16, 2004
  2. Harvey
    Replies:
    1
    Views:
    896
    Daniel
    Jul 16, 2004
  3. Eric
    Replies:
    4
    Views:
    781
    clintonG
    Dec 24, 2004
  4. Guybrush Threepwood

    Table-based layout to CSS layout

    Guybrush Threepwood, Jun 6, 2006, in forum: HTML
    Replies:
    20
    Views:
    1,051
  5. Replies:
    1
    Views:
    643
    John Timney \(MVP\)
    Jun 19, 2006
Loading...

Share This Page