help withj css and div's

Discussion in 'HTML' started by Neil Monk, Feb 20, 2004.

  1. Neil Monk

    Neil Monk Guest

    (sorry for x-post but news://macromedia.dreamweaver seem unable to help,
    which I find astounding.)

    Hi, I'm VERY new to DW MX 2004 (opk then, I'm new to DW..period!)

    I'm sipmly trying to do the following:

    setup a page with 4 divs -
    1) div id Logo (top right)
    2) div id links (next to logo at the top, so call it top right)
    3) div id main main part of page, in the middle
    4) div id bottom at the bottom of the page below everything else.

    I've managed to do it, BUT, when altering the text size in IE6 to largest,
    the bottom div is overlayed on top on the main div.

    Here is the code from the CSS:
    <!-- start code-->
    /* CSS Document */
    body{
    padding :0;
    margin :0;
    }
    #main{
    padding-top : 130px;
    padding-bottom : 30px;
    padding-left : 30px;
    padding-right : 30px;
    }

    #content h1 {
    font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
    font-size: 120%;
    font-weight: normal;
    color: #000000;
    background-color : transparent;
    }

    #content h2 {
    font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
    font-size: 100%;
    font-weight: bold;
    color: #000000;
    background-color : transparent;
    }

    #content p{
    font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
    font-size: 80%;
    font-weight: normal;
    color: #000000;
    background-color : transparent;
    line-height : 140%;
    }
    #logo{
    position : absolute;
    top : 16px;
    left : 12px;
    z-index : 50;
    width: 443px;
    height: 76px;
    }

    #links{
    position : absolute;
    top : 20px;
    right : 0;
    text-align : right;
    left: 391px;
    width: 500px;
    height: 80px;
    }

    #bottom{
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: center;
    left: 18px;
    top: 433px;
    background-color: #FFFFCC;
    }

    <!--end code-->

    Amy ideas what I'm doing wrong???

    Thanks, a newbie
    --
    Neil
    Neil Monk, Feb 20, 2004
    #1
    1. Advertising

  2. Neil Monk wrote:
    > (sorry for x-post but news://macromedia.dreamweaver seem unable to
    > help, which I find astounding.)

    [snip]

    (I won't attempt to answer the question because I get similar problems with
    footers when I use absolute positioning! I normally avoid absolute positioning
    in these circumstances for that reason. It isn't just IE 6. Try (say) Firefox,
    or any of the others.)

    My real purpose was to point out that macromedia.dreamweaver is a rather
    strangely-configured newsgroup. The "real" newsgroup is run on a Macromedia
    news-server forums.macromedia.com and if you post via that you should be OK.
    But it appears from your message-IDs that you posted via your ISP's
    news-server. Now, while there is a feed *out* from the Macromedia news-server,
    there isn't a feed in (at least, not in normal circumstances). So no one there
    saw your posts!

    Don't ask why! It is a hot topic of debate there at the moment. I've made the
    same "mistake" in the past.

    --
    Barry Pearson
    http://www.Barry.Pearson.name/photography/
    http://www.BirdsAndAnimals.info/
    http://www.ChildSupportAnalysis.co.uk/
    Barry Pearson, Feb 20, 2004
    #2
    1. Advertising

  3. Neil Monk

    Els Guest

    Neil Monk wrote:
    > (sorry for x-post but news://macromedia.dreamweaver seem unable to help,
    > which I find astounding.)
    >
    > Hi, I'm VERY new to DW MX 2004 (opk then, I'm new to DW..period!)
    >
    > I'm sipmly trying to do the following:
    >
    > setup a page with 4 divs -
    > 1) div id Logo (top right)
    > 2) div id links (next to logo at the top, so call it top right)
    > 3) div id main main part of page, in the middle
    > 4) div id bottom at the bottom of the page below everything else.
    >
    > I've managed to do it, BUT, when altering the text size in IE6 to largest,
    > the bottom div is overlayed on top on the main div.
    >
    > Here is the code from the CSS:
    > <!-- start code-->
    > /* CSS Document */
    > body{
    > padding :0;
    > margin :0;
    > }
    > #main{
    > padding-top : 130px;
    > padding-bottom : 30px;
    > padding-left : 30px;
    > padding-right : 30px;
    > }
    >
    > #content h1 {
    > font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
    > font-size: 120%;
    > font-weight: normal;
    > color: #000000;
    > background-color : transparent;
    > }
    >
    > #content h2 {
    > font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
    > font-size: 100%;
    > font-weight: bold;
    > color: #000000;
    > background-color : transparent;
    > }
    >
    > #content p{
    > font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
    > font-size: 80%;
    > font-weight: normal;
    > color: #000000;
    > background-color : transparent;
    > line-height : 140%;
    > }
    > #logo{
    > position : absolute;
    > top : 16px;
    > left : 12px;
    > z-index : 50;
    > width: 443px;
    > height: 76px;
    > }
    >
    > #links{
    > position : absolute;
    > top : 20px;
    > right : 0;
    > text-align : right;
    > left: 391px;
    > width: 500px;
    > height: 80px;
    > }
    >
    > #bottom{
    > position: absolute;
    > bottom: 0;
    > right: 0;
    > text-align: center;
    > left: 18px;
    > top: 433px;
    > background-color: #FFFFCC;
    > }
    >
    > <!--end code-->
    >
    > Amy ideas what I'm doing wrong???


    You didn't put all of these divs in a container, which
    means, that position:absolute on the footer div, is in
    respect to it's container, being the body, which isn't any
    higher than (or not even as high as) the viewport, being
    your browser's window.
    If you put all the divs in a container div, which you give a
    height in ems instead of px, the whole lot will expand with
    the text size.

    http://www.csscreator.com/version2/pagelayout.php
    might be useful :)

    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
    Els, Feb 20, 2004
    #3
  4. Neil Monk

    Els Guest

    Els wrote:

    > Neil Monk wrote:
    >

    [snip]
    >> Here is the code from the CSS:

    [snip]
    >> width: 443px;
    >> height: 76px;


    >> left: 391px;
    >> width: 500px;
    >> height: 80px;


    >> left: 18px;
    >> top: 433px;


    >> Amy ideas what I'm doing wrong???


    > If you put all the divs in a container div, which you give a height in
    > ems instead of px, the whole lot will expand with the text size.


    Forgot to mention: lose the other px measures as well. use
    ems, to make them expand with the text size.

    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
    Els, Feb 20, 2004
    #4
  5. Neil Monk

    SpaceGirl Guest

    "Els" <> wrote in message
    news:4035e47e$0$41764$...
    > Els wrote:
    >
    > > Neil Monk wrote:
    > >

    > [snip]
    > >> Here is the code from the CSS:

    > [snip]
    > >> width: 443px;
    > >> height: 76px;

    >
    > >> left: 391px;
    > >> width: 500px;
    > >> height: 80px;

    >
    > >> left: 18px;
    > >> top: 433px;

    >
    > >> Amy ideas what I'm doing wrong???

    >
    > > If you put all the divs in a container div, which you give a height in
    > > ems instead of px, the whole lot will expand with the text size.

    >
    > Forgot to mention: lose the other px measures as well. use
    > ems, to make them expand with the text size.



    ewww no :)
    SpaceGirl, Feb 20, 2004
    #5
  6. On Fri, 20 Feb 2004 09:41:18 -0000, "Neil Monk"
    <neil.monk02@__REMOVE__NO__SPAM__blueyonder.co.uk> wrote:

    >#bottom{
    > position: absolute;
    > bottom: 0;
    > right: 0;
    > text-align: center;
    > left: 18px;
    > top: 433px;
    > background-color: #FFFFCC;
    >}
    >
    ><!--end code-->
    >
    >Amy ideas what I'm doing wrong???


    Yes - you are specifying font size in % (good) but positioning the
    'bottom' div 433 pixels down the document (not good). The bottom can't
    move when it needs to get out of the way of the larger text.

    I haven't examined it in minute detail, but I think you can simply
    remove the positioning from the bottom div and let it take up its
    position within the normal flow.

    One other thing: you've specified P as having font-size 80%, H2 as 100%,
    H1 as 120%. Much better to have P as 100% and H1/H2 larger. If that
    looks too large to you, reduce the default text size in your browser.

    --
    Stephen Poley

    http://www.xs4all.nl/~sbpoley/webmatters/
    Stephen Poley, Feb 20, 2004
    #6
  7. Neil Monk

    Richard Guest

    Neil Monk wrote:

    > (sorry for x-post but news://macromedia.dreamweaver seem unable to help,
    > which I find astounding.)


    > Hi, I'm VERY new to DW MX 2004 (opk then, I'm new to DW..period!)


    > I'm sipmly trying to do the following:


    > #bottom{
    > position: absolute;
    > bottom: 0;



    Can't be done.

    Position 0,0 is the top left of your screen.
    You're telling the division to place the bottom line at left position 0, the
    right side at the left border.

    Plus I've noticed you've tried to position divisions the wrong way.
    Top means the top border. Left means the left border.
    So where does top:20; left:0; get placed?

    20 pixels down from the top, 0 pixels from the left border.
    left:20; would simply move the division 20 pixels to the right.

    If you intend to have two divisions side by side, you must use "float:"
    I do not see a float element anywhere.
    Unless you're using position:absolute which is not necessary on top line
    divisions.

    Try this on for size:

    <style type="text/css">
    ..mylinks { width:30%; height:150px; background:#88DCF0; float:left; }
    ..mylogo { height:150px; background:#FFFFA8; float:none;}
    ..main { background:gold; }
    ..footer { background:blue;

    </style>



    </HEAD>
    <BODY>

    <div class="mylinks"> this is the links place</div>
    <div class="mylogo"> Logo goes here</div>
    <div class="main"> Main content of the page</div>
    <div class="footer"> copyright and legal stuff</div>


    </BODY>
    Richard, Feb 20, 2004
    #7
  8. Neil Monk

    Neil Monk Guest

    "Barry Pearson" <> wrote in message
    news:1alZb.77$Td6.65@newsfe1-win...
    > Neil Monk wrote:
    > > (sorry for x-post but news://macromedia.dreamweaver seem unable to
    > > help, which I find astounding.)

    > [snip]
    >
    > (I won't attempt to answer the question because I get similar problems

    with
    > footers when I use absolute positioning! I normally avoid absolute

    positioning
    > in these circumstances for that reason. It isn't just IE 6. Try (say)

    Firefox,
    > or any of the others.)
    >
    > My real purpose was to point out that macromedia.dreamweaver is a rather
    > strangely-configured newsgroup. The "real" newsgroup is run on a

    Macromedia
    > news-server forums.macromedia.com and if you post via that you should be

    OK.
    > But it appears from your message-IDs that you posted via your ISP's
    > news-server. Now, while there is a feed *out* from the Macromedia

    news-server,
    > there isn't a feed in (at least, not in normal circumstances). So no one

    there
    > saw your posts!
    >
    > Don't ask why! It is a hot topic of debate there at the moment. I've made

    the
    > same "mistake" in the past.
    >
    > --
    > Barry Pearson
    > http://www.Barry.Pearson.name/photography/
    > http://www.BirdsAndAnimals.info/
    > http://www.ChildSupportAnalysis.co.uk/
    >
    >

    Thanks for that Barry, makes sense now, thought it was weird them not
    replying! D'oh!
    --
    Neil
    Neil Monk, Feb 20, 2004
    #8
  9. Neil Monk

    Neil Monk Guest

    "Richard" <anonymous@127.000> wrote in message
    news:...
    > Neil Monk wrote:
    >
    > > (sorry for x-post but news://macromedia.dreamweaver seem unable to

    help,
    > > which I find astounding.)

    >
    > > Hi, I'm VERY new to DW MX 2004 (opk then, I'm new to DW..period!)

    >
    > > I'm sipmly trying to do the following:

    >
    > > #bottom{
    > > position: absolute;
    > > bottom: 0;

    >
    >
    > Can't be done.
    >
    > Position 0,0 is the top left of your screen.
    > You're telling the division to place the bottom line at left position 0,

    the
    > right side at the left border.
    >
    > Plus I've noticed you've tried to position divisions the wrong way.
    > Top means the top border. Left means the left border.
    > So where does top:20; left:0; get placed?
    >
    > 20 pixels down from the top, 0 pixels from the left border.
    > left:20; would simply move the division 20 pixels to the right.
    >
    > If you intend to have two divisions side by side, you must use "float:"
    > I do not see a float element anywhere.
    > Unless you're using position:absolute which is not necessary on top line
    > divisions.
    >
    > Try this on for size:
    >
    > <style type="text/css">
    > .mylinks { width:30%; height:150px; background:#88DCF0; float:left; }
    > .mylogo { height:150px; background:#FFFFA8; float:none;}
    > .main { background:gold; }
    > .footer { background:blue;
    >
    > </style>
    >
    >
    >
    > </HEAD>
    > <BODY>
    >
    > <div class="mylinks"> this is the links place</div>
    > <div class="mylogo"> Logo goes here</div>
    > <div class="main"> Main content of the page</div>
    > <div class="footer"> copyright and legal stuff</div>
    >
    >
    > </BODY>
    >
    >

    I don't really understand that, but I'm basically wanting to put the stuff
    into an external style sheet, and reference it in, to each page.

    Can you please be as simple as possible, and maybe given an example of where
    my code is wrong, and what it maybe ought too look like. I'm not asking you
    to do my site for me, but I'm "OLD SCHOOL" HTML author, before CSS and DIV's
    were this popular, so I'm only really familiar with pure HTML (prob verion
    three-ish)!!!

    Thanks for all your help so far, but its gone way above my head :-(
    --
    Neil.
    Neil Monk, Feb 20, 2004
    #9
  10. Neil Monk

    Neal Guest

    On Fri, 20 Feb 2004 20:53:04 -0000, Neil Monk
    <neil.monk02@__REMOVE__NO__SPAM__blueyonder.co.uk> wrote:

    > Thanks for all your help so far, but its gone way above my head :-(



    As a "reformed" old-school coder myself, I found http://www.htmldog.com to
    be very good at getting me up to speed on current web authoring techniques.
    Neal, Feb 20, 2004
    #10
  11. Neil Monk

    Neil Monk Guest

    "Els" <> wrote in message
    news:4035e2f0$0$41755$...
    >
    >
    > Neil Monk wrote:
    > > (sorry for x-post but news://macromedia.dreamweaver seem unable to help,
    > > which I find astounding.)
    > >
    > > Hi, I'm VERY new to DW MX 2004 (opk then, I'm new to DW..period!)
    > >
    > > I'm sipmly trying to do the following:
    > >
    > > setup a page with 4 divs -
    > > 1) div id Logo (top right)
    > > 2) div id links (next to logo at the top, so call it top right)
    > > 3) div id main main part of page, in the middle
    > > 4) div id bottom at the bottom of the page below everything

    else.
    > >
    > > I've managed to do it, BUT, when altering the text size in IE6 to

    largest,
    > > the bottom div is overlayed on top on the main div.
    > >
    > > Here is the code from the CSS:
    > > <!-- start code-->
    > > /* CSS Document */
    > > body{
    > > padding :0;
    > > margin :0;
    > > }
    > > #main{
    > > padding-top : 130px;
    > > padding-bottom : 30px;
    > > padding-left : 30px;
    > > padding-right : 30px;
    > > }
    > >
    > > #content h1 {
    > > font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
    > > font-size: 120%;
    > > font-weight: normal;
    > > color: #000000;
    > > background-color : transparent;
    > > }
    > >
    > > #content h2 {
    > > font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
    > > font-size: 100%;
    > > font-weight: bold;
    > > color: #000000;
    > > background-color : transparent;
    > > }
    > >
    > > #content p{
    > > font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
    > > font-size: 80%;
    > > font-weight: normal;
    > > color: #000000;
    > > background-color : transparent;
    > > line-height : 140%;
    > > }
    > > #logo{
    > > position : absolute;
    > > top : 16px;
    > > left : 12px;
    > > z-index : 50;
    > > width: 443px;
    > > height: 76px;
    > > }
    > >
    > > #links{
    > > position : absolute;
    > > top : 20px;
    > > right : 0;
    > > text-align : right;
    > > left: 391px;
    > > width: 500px;
    > > height: 80px;
    > > }
    > >
    > > #bottom{
    > > position: absolute;
    > > bottom: 0;
    > > right: 0;
    > > text-align: center;
    > > left: 18px;
    > > top: 433px;
    > > background-color: #FFFFCC;
    > > }
    > >
    > > <!--end code-->
    > >
    > > Amy ideas what I'm doing wrong???

    >
    > You didn't put all of these divs in a container, which
    > means, that position:absolute on the footer div, is in
    > respect to it's container, being the body, which isn't any
    > higher than (or not even as high as) the viewport, being
    > your browser's window.
    > If you put all the divs in a container div, which you give a
    > height in ems instead of px, the whole lot will expand with
    > the text size.

    <snip>
    Not sure what you mean...? Could you explain it simply and use examples
    please??
    Thanks for your help however,
    --
    Neil
    Neil Monk, Feb 20, 2004
    #11
  12. Neil Monk

    Els Guest

    Neil Monk wrote:

    > "Els" <> wrote in message
    > news:4035e2f0$0$41755$...
    >
    >>Neil Monk wrote:
    >>
    >>>I'm sipmly trying to do the following:
    >>>
    >>>setup a page with 4 divs -
    >>> 1) div id Logo (top right)
    >>> 2) div id links (next to logo at the top, so call it top right)
    >>> 3) div id main main part of page, in the middle
    >>> 4) div id bottom at the bottom of the page below everything else.
    >>>I've managed to do it, BUT, when altering the text size in IE6 to largest,
    >>>the bottom div is overlayed on top on the main div.
    >>>
    >>>Here is the code from the CSS:
    >>><!-- start code-->
    >>>/* CSS Document */
    >>>body{
    >>> padding :0;
    >>> margin :0;
    >>>}
    >>>#main{
    >>> padding-top : 130px;
    >>> padding-bottom : 30px;
    >>> padding-left : 30px;
    >>> padding-right : 30px;
    >>>}
    >>>
    >>>#content h1 {
    >>> font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
    >>> font-size: 120%;
    >>> font-weight: normal;
    >>> color: #000000;
    >>> background-color : transparent;
    >>>}
    >>>
    >>>#content h2 {
    >>> font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
    >>> font-size: 100%;
    >>> font-weight: bold;
    >>> color: #000000;
    >>> background-color : transparent;
    >>>}
    >>>
    >>>#content p{
    >>> font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
    >>> font-size: 80%;
    >>> font-weight: normal;
    >>> color: #000000;
    >>> background-color : transparent;
    >>> line-height : 140%;
    >>>}
    >>>#logo{
    >>> position : absolute;
    >>> top : 16px;
    >>> left : 12px;
    >>> z-index : 50;
    >>> width: 443px;
    >>> height: 76px;
    >>>}
    >>>
    >>>#links{
    >>> position : absolute;
    >>> top : 20px;
    >>> right : 0;
    >>> text-align : right;
    >>> left: 391px;
    >>> width: 500px;
    >>> height: 80px;
    >>>}
    >>>
    >>>#bottom{
    >>> position: absolute;
    >>> bottom: 0;
    >>> right: 0;
    >>> text-align: center;
    >>> left: 18px;
    >>> top: 433px;
    >>> background-color: #FFFFCC;
    >>>}
    >>>
    >>><!--end code-->
    >>>
    >>>Amy ideas what I'm doing wrong???

    >>
    >>You didn't put all of these divs in a container, which
    >>means, that position:absolute on the footer div, is in
    >>respect to it's container, being the body, which isn't any
    >>higher than (or not even as high as) the viewport, being
    >>your browser's window.
    >>If you put all the divs in a container div, which you give a
    >>height in ems instead of px, the whole lot will expand with
    >>the text size.

    >
    > <snip>
    > Not sure what you mean...? Could you explain it simply and use examples
    > please??


    Let's say you have a box of 20px high, and 50 wide.
    The text inside of it, just about fits.
    Then you make the font larger. What will happen?
    You made all your divs with px heights and widths.
    So when the text gets larger, it just doesn't fit anymore.
    So it could go outside the box, or the box could expand.

    Your bottom div has position:absolute.
    It is positioned 0px from the bottom, 0px from the right,
    and exactly 433px from the top and 18px from the left.

    Let's say your browser window is exactly 434px high. And
    your bottom div is therefore only 1px high.
    How can it show the text that's inside of it?

    It will have to expand, or let the contents get out of the
    box. Probably the first.

    Now, if you would give a url to the page, I (and anyone
    else) might be able to see exactly what things you need to
    change, as just the CSS file isn't enough (at least for me).

    All I can guess now, is: get rid of position:absolute, at
    least for the bottom div, get rid of px, and see what happens.

    Instead of px you can use em, where 1em is (I think) the
    size of the font. That way, if the font gets twice as big,
    so does the container which has a width and/or height in em.

    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
    Els, Feb 20, 2004
    #12
  13. Neil Monk

    Neil Monk Guest

    "Els" <> wrote in message
    news:40368aef$0$41758$...
    >
    > Neil Monk wrote:
    >
    > > "Els" <> wrote in message
    > > news:4035e2f0$0$41755$...
    > >
    > >>Neil Monk wrote:
    > >>
    > >>>I'm sipmly trying to do the following:
    > >>>
    > >>>setup a page with 4 divs -
    > >>> 1) div id Logo (top right)
    > >>> 2) div id links (next to logo at the top, so call it top right)
    > >>> 3) div id main main part of page, in the middle
    > >>> 4) div id bottom at the bottom of the page below everything

    else.
    > >>>I've managed to do it, BUT, when altering the text size in IE6 to

    largest,
    > >>>the bottom div is overlayed on top on the main div.
    > >>>
    > >>>Here is the code from the CSS:
    > >>><!-- start code-->
    > >>>/* CSS Document */
    > >>>body{
    > >>> padding :0;
    > >>> margin :0;
    > >>>}
    > >>>#main{
    > >>> padding-top : 130px;
    > >>> padding-bottom : 30px;
    > >>> padding-left : 30px;
    > >>> padding-right : 30px;
    > >>>}
    > >>>
    > >>>#content h1 {
    > >>> font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
    > >>> font-size: 120%;
    > >>> font-weight: normal;
    > >>> color: #000000;
    > >>> background-color : transparent;
    > >>>}
    > >>>
    > >>>#content h2 {
    > >>> font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
    > >>> font-size: 100%;
    > >>> font-weight: bold;
    > >>> color: #000000;
    > >>> background-color : transparent;
    > >>>}
    > >>>
    > >>>#content p{
    > >>> font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
    > >>> font-size: 80%;
    > >>> font-weight: normal;
    > >>> color: #000000;
    > >>> background-color : transparent;
    > >>> line-height : 140%;
    > >>>}
    > >>>#logo{
    > >>> position : absolute;
    > >>> top : 16px;
    > >>> left : 12px;
    > >>> z-index : 50;
    > >>> width: 443px;
    > >>> height: 76px;
    > >>>}
    > >>>
    > >>>#links{
    > >>> position : absolute;
    > >>> top : 20px;
    > >>> right : 0;
    > >>> text-align : right;
    > >>> left: 391px;
    > >>> width: 500px;
    > >>> height: 80px;
    > >>>}
    > >>>
    > >>>#bottom{
    > >>> position: absolute;
    > >>> bottom: 0;
    > >>> right: 0;
    > >>> text-align: center;
    > >>> left: 18px;
    > >>> top: 433px;
    > >>> background-color: #FFFFCC;
    > >>>}
    > >>>
    > >>><!--end code-->
    > >>>
    > >>>Amy ideas what I'm doing wrong???
    > >>
    > >>You didn't put all of these divs in a container, which
    > >>means, that position:absolute on the footer div, is in
    > >>respect to it's container, being the body, which isn't any
    > >>higher than (or not even as high as) the viewport, being
    > >>your browser's window.
    > >>If you put all the divs in a container div, which you give a
    > >>height in ems instead of px, the whole lot will expand with
    > >>the text size.

    > >
    > > <snip>
    > > Not sure what you mean...? Could you explain it simply and use examples
    > > please??

    >
    > Let's say you have a box of 20px high, and 50 wide.
    > The text inside of it, just about fits.
    > Then you make the font larger. What will happen?
    > You made all your divs with px heights and widths.
    > So when the text gets larger, it just doesn't fit anymore.
    > So it could go outside the box, or the box could expand.
    >
    > Your bottom div has position:absolute.
    > It is positioned 0px from the bottom, 0px from the right,
    > and exactly 433px from the top and 18px from the left.
    >
    > Let's say your browser window is exactly 434px high. And
    > your bottom div is therefore only 1px high.
    > How can it show the text that's inside of it?
    >
    > It will have to expand, or let the contents get out of the
    > box. Probably the first.
    >
    > Now, if you would give a url to the page, I (and anyone
    > else) might be able to see exactly what things you need to
    > change, as just the CSS file isn't enough (at least for me).
    >
    > All I can guess now, is: get rid of position:absolute, at
    > least for the bottom div, get rid of px, and see what happens.
    >
    > Instead of px you can use em, where 1em is (I think) the
    > size of the font. That way, if the font gets twice as big,
    > so does the container which has a width and/or height in em.
    >
    > --
    > Els
    >
    > Mente humana é como pára-quedas; funciona melhor aberta.
    >

    http://www.neilmonk.com/dn/index.html
    http://www.neilmonk.com/dn/css.css

    --
    Neil
    Neil Monk, Feb 20, 2004
    #13
  14. Neil Monk

    Neil Monk Guest

    "Neil Monk" <neil.monk02@__REMOVE__NO__SPAM__blueyonder.co.uk> wrote in
    message news:02wZb.767$...
    >
    > "Els" <> wrote in message
    > news:40368aef$0$41758$...
    > >
    > > Neil Monk wrote:
    > >
    > > > "Els" <> wrote in message
    > > > news:4035e2f0$0$41755$...
    > > >
    > > >>Neil Monk wrote:
    > > >>
    > > >>>I'm sipmly trying to do the following:
    > > >>>
    > > >>>setup a page with 4 divs -
    > > >>> 1) div id Logo (top right)
    > > >>> 2) div id links (next to logo at the top, so call it top

    right)
    > > >>> 3) div id main main part of page, in the middle
    > > >>> 4) div id bottom at the bottom of the page below everything

    > else.
    > > >>>I've managed to do it, BUT, when altering the text size in IE6 to

    > largest,
    > > >>>the bottom div is overlayed on top on the main div.
    > > >>>
    > > >>>Here is the code from the CSS:
    > > >>><!-- start code-->
    > > >>>/* CSS Document */
    > > >>>body{
    > > >>> padding :0;
    > > >>> margin :0;
    > > >>>}
    > > >>>#main{
    > > >>> padding-top : 130px;
    > > >>> padding-bottom : 30px;
    > > >>> padding-left : 30px;
    > > >>> padding-right : 30px;
    > > >>>}
    > > >>>
    > > >>>#content h1 {
    > > >>> font-family: "Trebuchet MS", Georgia, "Times New Roman", Times,

    serif;
    > > >>> font-size: 120%;
    > > >>> font-weight: normal;
    > > >>> color: #000000;
    > > >>> background-color : transparent;
    > > >>>}
    > > >>>
    > > >>>#content h2 {
    > > >>> font-family: "Trebuchet MS", Georgia, "Times New Roman", Times,

    serif;
    > > >>> font-size: 100%;
    > > >>> font-weight: bold;
    > > >>> color: #000000;
    > > >>> background-color : transparent;
    > > >>>}
    > > >>>
    > > >>>#content p{
    > > >>> font-family: "Trebuchet MS", Georgia, "Times New Roman", Times,

    serif;
    > > >>> font-size: 80%;
    > > >>> font-weight: normal;
    > > >>> color: #000000;
    > > >>> background-color : transparent;
    > > >>> line-height : 140%;
    > > >>>}
    > > >>>#logo{
    > > >>> position : absolute;
    > > >>> top : 16px;
    > > >>> left : 12px;
    > > >>> z-index : 50;
    > > >>> width: 443px;
    > > >>> height: 76px;
    > > >>>}
    > > >>>
    > > >>>#links{
    > > >>> position : absolute;
    > > >>> top : 20px;
    > > >>> right : 0;
    > > >>> text-align : right;
    > > >>> left: 391px;
    > > >>> width: 500px;
    > > >>> height: 80px;
    > > >>>}
    > > >>>
    > > >>>#bottom{
    > > >>> position: absolute;
    > > >>> bottom: 0;
    > > >>> right: 0;
    > > >>> text-align: center;
    > > >>> left: 18px;
    > > >>> top: 433px;
    > > >>> background-color: #FFFFCC;
    > > >>>}
    > > >>>
    > > >>><!--end code-->
    > > >>>
    > > >>>Amy ideas what I'm doing wrong???
    > > >>
    > > >>You didn't put all of these divs in a container, which
    > > >>means, that position:absolute on the footer div, is in
    > > >>respect to it's container, being the body, which isn't any
    > > >>higher than (or not even as high as) the viewport, being
    > > >>your browser's window.
    > > >>If you put all the divs in a container div, which you give a
    > > >>height in ems instead of px, the whole lot will expand with
    > > >>the text size.
    > > >
    > > > <snip>
    > > > Not sure what you mean...? Could you explain it simply and use

    examples
    > > > please??

    > >
    > > Let's say you have a box of 20px high, and 50 wide.
    > > The text inside of it, just about fits.
    > > Then you make the font larger. What will happen?
    > > You made all your divs with px heights and widths.
    > > So when the text gets larger, it just doesn't fit anymore.
    > > So it could go outside the box, or the box could expand.
    > >
    > > Your bottom div has position:absolute.
    > > It is positioned 0px from the bottom, 0px from the right,
    > > and exactly 433px from the top and 18px from the left.
    > >
    > > Let's say your browser window is exactly 434px high. And
    > > your bottom div is therefore only 1px high.
    > > How can it show the text that's inside of it?
    > >
    > > It will have to expand, or let the contents get out of the
    > > box. Probably the first.
    > >
    > > Now, if you would give a url to the page, I (and anyone
    > > else) might be able to see exactly what things you need to
    > > change, as just the CSS file isn't enough (at least for me).
    > >
    > > All I can guess now, is: get rid of position:absolute, at
    > > least for the bottom div, get rid of px, and see what happens.
    > >
    > > Instead of px you can use em, where 1em is (I think) the
    > > size of the font. That way, if the font gets twice as big,
    > > so does the container which has a width and/or height in em.
    > >
    > > --
    > > Els
    > >
    > > Mente humana é como pára-quedas; funciona melhor aberta.
    > >

    > http://www.neilmonk.com/dn/index.html
    > http://www.neilmonk.com/dn/css.css
    >
    > --
    > Neil
    >
    >
    >

    Originally, the main div contained proper text, and the bottom div did not
    overlap it to start with. I had to quickly change that text because of my
    obligations under the UK's Official Secrets Act (its something for my work).
    --
    Neil
    Neil Monk, Feb 20, 2004
    #14
  15. Neil Monk

    Els Guest

    Neil Monk wrote:

    [snip]

    > http://www.neilmonk.com/dn/index.html
    > http://www.neilmonk.com/dn/css.css


    By putting the links table next to the logo, your page gets
    too wide. The site may be optimised for 1024x768 (after
    quite a bit more work of course ;-) ), but lots of people
    don't use that. And if they have their screens at 1024x768,
    they may have their browser windows open in smaller sizes.

    Nevertheless, if you want the logo left, and the links next
    to it, you can use position:absolute, (with only left and
    top values defined), but you can also use float:left, which
    will 'float' it to the side of the logo.

    The bottom div doesn't need any position:absolute, as you
    don't know the height of the content that's above it. With
    larger font size or smaller window, it will be higher.

    Change these things, and see what happens.
    And instead of using Dreamweaver, use notepad, or another
    text-editor and have a look at the specs
    http://www.w3.org/TR/REC-CSS2/ so you actually get an idea
    of what you are doing. Seems to me, that Dreamweaver made
    some code, which you don't understand.
    And check your page in more browsers than just IE6.0,
    because there you have a funny thing happening with the
    bottom div, as it is obeying only the top and left
    positions, but in Netscape, it obeys all four positions;
    top, left, right and bottom, which makes the bottom div
    rather large when I have my browser at full size.
    And also in Netscape, the links table is partly behind the
    logo, because you positioned it at 391px from the left,
    whereas the logo is already 456 wide. How IE gets it to be
    placed next to the logo, I don't know :)

    A good example of something that's quite strange, is your
    links style:
    #links{
    position : absolute;
    top : 20px;
    right : 0;
    text-align : right;
    left: 391px;
    width: 500px;
    height: 80px;
    }

    Apparently you want it to be positioned 20px from the top,
    and 0px from the right. This is not a problem.
    It's 500px wide. No problem. Neither is the height.
    But then you also want it 391px from the left.
    Now this can only be done in windows which are exactly 891px
    wide. That's not my window :)

    See what I mean?
    Have a look at the specs, use notepad and common sense, and
    things will look a lot better :)

    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
    Els, Feb 20, 2004
    #15
  16. Neil Monk

    Els Guest

    Els wrote:

    > Neil Monk wrote:
    >
    > but
    > you can also use float:left, which will 'float' it to the side of the logo.


    eh.. if you have the logo float:left as well, that is...

    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
    Els, Feb 20, 2004
    #16
  17. Neil Monk

    Neal Guest

    On Fri, 20 Feb 2004 23:34:20 +0100, Els <> wrote:

    > Instead of px you can use em, where 1em is (I think) the size of the
    > font. That way, if the font gets twice as big, so does the container
    > which has a width and/or height in em.
    >


    Unless the line wraps...
    Neal, Feb 20, 2004
    #17
  18. Neil Monk

    Els Guest

    Neal wrote:

    > On Fri, 20 Feb 2004 23:34:20 +0100, Els <> wrote:
    >
    >> Instead of px you can use em, where 1em is (I think) the size of the
    >> font. That way, if the font gets twice as big, so does the container
    >> which has a width and/or height in em.

    >
    > Unless the line wraps...


    And when it wraps, one line becomes two...
    And two lines take up more height than one...
    So the box has to expand in height, if not in width.

    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
    Els, Feb 20, 2004
    #18
  19. Neil Monk

    Neal Guest

    On Sat, 21 Feb 2004 00:25:57 +0100, Els <> wrote:

    >
    >
    > Neal wrote:
    >
    >> On Fri, 20 Feb 2004 23:34:20 +0100, Els <> wrote:
    >>
    >>> Instead of px you can use em, where 1em is (I think) the size of the
    >>> font. That way, if the font gets twice as big, so does the container
    >>> which has a width and/or height in em.

    >>
    >> Unless the line wraps...

    >
    > And when it wraps, one line becomes two...
    > And two lines take up more height than one...
    > So the box has to expand in height, if not in width.
    >


    True, actually. The box should expand unless you've set height on it in
    some restricting way with the CSS. That's where my brain was at there - if
    you set a height at 2em, and due to larger size the font now wraps more
    often, 2em might not be enough and you might get overflow. As I never set
    height because IE doesn't seem to like it anyway, I don't know how
    browsers will specifically react.
    Neal, Feb 20, 2004
    #19
  20. Neil Monk

    Els Guest

    Neal wrote:

    > On Sat, 21 Feb 2004 00:25:57 +0100, Els <> wrote:
    >>
    >> Neal wrote:
    >>
    >>> On Fri, 20 Feb 2004 23:34:20 +0100, Els <> wrote:
    >>>
    >>>> Instead of px you can use em, where 1em is (I think) the size of the
    >>>> font. That way, if the font gets twice as big, so does the container
    >>>> which has a width and/or height in em.
    >>>
    >>> Unless the line wraps...

    >>
    >> And when it wraps, one line becomes two...
    >> And two lines take up more height than one...
    >> So the box has to expand in height, if not in width.

    >
    > True, actually. The box should expand unless you've set height on it in
    > some restricting way with the CSS. That's where my brain was at there -
    > if you set a height at 2em, and due to larger size the font now wraps
    > more often, 2em might not be enough and you might get overflow.


    Correct; you have to make it as flexible as possible.
    If the width is also in ems, lines wouldn't have to wrap,
    but then you get the much hated horizontal scrollbar :)

    > As I never set height


    Before today you mean?

    > because IE doesn't seem to like it anyway, I don't know
    > how browsers will specifically react.


    IE just expands anyway. You can set a div to 1px height, and
    IE will just expand to hold the text.

    It's good to not set height, but sometimes you need it
    somewhere, even though I can't think of an example right now.

    But it's the position:absolute that messes up your page the
    most.

    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
    Els, Feb 20, 2004
    #20
    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. Some One
    Replies:
    5
    Views:
    798
    Toby A Inkster
    Aug 9, 2003
  2. Tamlyn Rhodes
    Replies:
    3
    Views:
    958
    Andy Dingley
    Feb 26, 2004
  3. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    726
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    177
    David Dorward
    Jun 1, 2005
  5. mscir
    Replies:
    3
    Views:
    296
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page