table code -> css

Discussion in 'HTML' started by Neil Marshall, Feb 18, 2004.

  1. Someone I know asked me how to achieve this effect with div's and css
    and I can't figure it out, maybe you guys can. He has a header at the
    top of his page with some links in it. When the user increases the font
    size in their browser, the text drops down below the header because it's
    taking up too much space. It would look much better if the text used
    the space available above it though.

    What I tried to do was create a div inside of a div, where the inner one
    is aligned to the bottom and then the text is placed in that, but I
    couldn't get it to work.

    Here is code that works, but it's a table. (Just increase/decrease your
    font sizes and you'll see that the bottom doesn't move.

    <html>
    <head>
    <style>
    #tableinner {
    height: 150px;
    border: 1px solid red;
    }
    </style>

    </head>
    <body>
    <table><td id="tableinner" valign="bottom">text</td></table>
    </body>
    </html>
     
    Neil Marshall, Feb 18, 2004
    #1
    1. Advertising

  2. Quoth the raven named Neil Marshall:

    > Someone I know asked me how to achieve this effect with div's and css
    > and I can't figure it out, maybe you guys can. He has a header at the
    > top of his page with some links in it. When the user increases the font
    > size in their browser, the text drops down below the header because it's
    > taking up too much space. It would look much better if the text used
    > the space available above it though.
    >
    > What I tried to do was create a div inside of a div, where the inner one
    > is aligned to the bottom and then the text is placed in that, but I
    > couldn't get it to work.
    >
    > Here is code that works, but it's a table. (Just increase/decrease your
    > font sizes and you'll see that the bottom doesn't move.
    >
    > <html>
    > <head>
    > <style>
    > #tableinner {
    > height: 150px;


    Change the height to some number of em instead of px. Say about 5em.

    > border: 1px solid red;
    > }
    > </style>
    >
    > </head>
    > <body>
    > <table><td id="tableinner" valign="bottom">text</td></table>
    > </body>
    > </html>


    Why the valign?

    --
    -bts
    -This space intentionally left blank.
     
    Beauregard T. Shagnasty, Feb 18, 2004
    #2
    1. Advertising

  3. Beauregard T. Shagnasty wrote:

    > Quoth the raven named Neil Marshall:
    >
    >> Someone I know asked me how to achieve this effect with div's and css
    >> and I can't figure it out, maybe you guys can. He has a header at
    >> the top of his page with some links in it. When the user increases
    >> the font size in their browser, the text drops down below the header
    >> because it's taking up too much space. It would look much better if
    >> the text used the space available above it though.
    >>
    >> What I tried to do was create a div inside of a div, where the inner
    >> one is aligned to the bottom and then the text is placed in that, but
    >> I couldn't get it to work.
    >>
    >> Here is code that works, but it's a table. (Just increase/decrease
    >> your font sizes and you'll see that the bottom doesn't move.
    >>
    >> <html>
    >> <head>
    >> <style>
    >> #tableinner {
    >> height: 150px;

    >
    >
    > Change the height to some number of em instead of px. Say about 5em.


    That will increase the size of the header, which is something I don't
    want to do. It's an image and it can't stretch and still look good.

    >
    >> border: 1px solid red;
    >> }
    >> </style>
    >>
    >> </head>
    >> <body>
    >> <table><td id="tableinner" valign="bottom">text</td></table>
    >> </body>
    >> </html>

    >
    >
    > Why the valign?
    >

    To align the text by it's base, not the top like it normally does. That
    way when the text size is increased, it stays put and the text goes up.
     
    Neil Marshall, Feb 18, 2004
    #3
  4. Quoth the raven named Neil Marshall:

    > Beauregard T. Shagnasty wrote:
    >
    >> Quoth the raven named Neil Marshall:
    >>
    >>> Someone I know asked me how to achieve this effect with div's and css
    >>> and I can't figure it out, maybe you guys can. He has a header at
    >>> the top of his page with some links in it. When the user increases


    "some links in it" doesn't indicate there is an image.

    >>> the font size in their browser, the text drops down below the header
    >>> because it's taking up too much space. It would look much better if
    >>> the text used the space available above it though.
    >>>
    >>> What I tried to do was create a div inside of a div, where the inner
    >>> one is aligned to the bottom and then the text is placed in that, but
    >>> I couldn't get it to work.
    >>>
    >>> Here is code that works, but it's a table. (Just increase/decrease
    >>> your font sizes and you'll see that the bottom doesn't move.
    >>>
    >>> <html>
    >>> <head>
    >>> <style>
    >>> #tableinner {
    >>> height: 150px;

    >>
    >> Change the height to some number of em instead of px. Say about 5em.

    >
    > That will increase the size of the header, which is something I don't
    > want to do. It's an image and it can't stretch and still look good.


    So, what value of em would suffice? 3em? 2em? If you use em instead
    of px, [generally] the container will grow along with the content when
    a resize is done, which your original post seemed to be asking about.
    See above about links.

    >>> border: 1px solid red;
    >>> }
    >>> </style>
    >>>
    >>> </head>
    >>> <body>
    >>> <table><td id="tableinner" valign="bottom">text</td></table>
    >>> </body>
    >>> </html>

    >>
    >> Why the valign?
    >>

    > To align the text by it's base, not the top like it normally does. That
    > way when the text size is increased, it stays put and the text goes up.


    Do you have this page online somewhere? A URL would help with any
    further advice. Thanks.

    --
    -bts
    -This space intentionally left blank.
     
    Beauregard T. Shagnasty, Feb 18, 2004
    #4
  5. Beauregard T. Shagnasty wrote:

    >
    > Do you have this page online somewhere? A URL would help with any
    > further advice. Thanks.
    >

    It's not my site so I'm weary about posting the link... here it is though
    http://dev.digitalview.com/

    Notice the
    . home . contact us . about us .

    When you increase the font size it drops out of the blue. He wants it
    to go up instead of down. (Yes I know you can make the blue bar contain
    the text, but that isn't how he wants to do it)
     
    Neil Marshall, Feb 19, 2004
    #5
  6. Quoth the raven named Neil Marshall:

    > Beauregard T. Shagnasty wrote:
    >
    >> Do you have this page online somewhere? A URL would help with any
    >> further advice. Thanks.
    >>

    > It's not my site so I'm weary about posting the link... here it is
    > though http://dev.digitalview.com/
    >
    > Notice the
    > . home . contact us . about us .
    >
    > When you increase the font size it drops out of the blue. He wants
    > it to go up instead of down. (Yes I know you can make the blue bar
    > contain the text, but that isn't how he wants to do it)


    After a read through the css, about the only advice I could give would
    be to change the height of #header and #headerbg from px to a small
    value of em, else it will not expand.

    Actually, I don't think you need the height on any but #header. The
    #headerbg {width: 800px} causes a horizontal scrollbar with a browser
    at 800x600.

    Not everyone has Flash. Your main page is a large empty white area for
    me. I hope there wasn't anything important there... :-(

    Does anyone know if Google indexes Flash movies?

    --
    -bts
    -This space intentionally left blank.
     
    Beauregard T. Shagnasty, Feb 19, 2004
    #6
  7. Beauregard T. Shagnasty wrote:

    > Quoth the raven named Neil Marshall:
    >
    >> Beauregard T. Shagnasty wrote:
    >>
    >>> Do you have this page online somewhere? A URL would help with any
    >>> further advice. Thanks.
    >>>

    >> It's not my site so I'm weary about posting the link... here it is
    >> though http://dev.digitalview.com/
    >>
    >> Notice the

    >
    > > . home . contact us . about us .

    >
    >>
    >> When you increase the font size it drops out of the blue. He wants
    >> it to go up instead of down. (Yes I know you can make the blue bar
    >> contain the text, but that isn't how he wants to do it)

    >
    >
    > After a read through the css, about the only advice I could give would
    > be to change the height of #header and #headerbg from px to a small
    > value of em, else it will not expand.


    px's expand when I zoom text... I bet you're using IE.

    > Actually, I don't think you need the height on any but #header. The
    > #headerbg {width: 800px} causes a horizontal scrollbar with a browser
    > at 800x600.


    I'll let him know.

    >
    > Not everyone has Flash. Your main page is a large empty white area for
    > me. I hope there wasn't anything important there... :-(


    It's not my page. I just help the guy making it. I have flash click to
    view so I see a large box of white myself. It has 2 buttons used to
    navigate to other sections of the site. He should have code in there
    that I gave him to display 3 links if the flash doesn't load. I wonder
    if he took it out.

    >
    > Does anyone know if Google indexes Flash movies?


    Don't think it does.
     
    Neil Marshall, Feb 19, 2004
    #7
  8. Quoth the raven named Neil Marshall:

    > Beauregard T. Shagnasty wrote:
    >>
    >> After a read through the css, about the only advice I could give would
    >> be to change the height of #header and #headerbg from px to a small
    >> value of em, else it will not expand.

    >
    > px's expand when I zoom text... I bet you're using IE.


    No, never. Well, except to test pages when someone asks for a crit.
    <g> I normally use Firebird/fox or Opera.

    >> Actually, I don't think you need the height on any but #header. The
    >> #headerbg {width: 800px} causes a horizontal scrollbar with a browser
    >> at 800x600.

    >
    > I'll let him know.
    >
    >> Not everyone has Flash. Your main page is a large empty white area for
    >> me. I hope there wasn't anything important there... :-(

    >
    > It's not my page. I just help the guy making it.


    Ok, /the/ page. :)

    > I have flash click to
    > view so I see a large box of white myself. It has 2 buttons used to
    > navigate to other sections of the site. He should have code in there
    > that I gave him to display 3 links if the flash doesn't load. I wonder
    > if he took it out.


    Would appear that he has.

    --
    -bts
    -This space intentionally left blank.
     
    Beauregard T. Shagnasty, Feb 19, 2004
    #8
    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. David Williams
    Replies:
    2
    Views:
    1,133
    Jacob Yang [MSFT]
    Aug 12, 2003
  2. Eric
    Replies:
    4
    Views:
    728
    clintonG
    Dec 24, 2004
  3. Rio
    Replies:
    4
    Views:
    1,198
  4. Replies:
    3
    Views:
    904
    richard
    Sep 24, 2006
  5. vitay
    Replies:
    8
    Views:
    550
    Stan McCann
    Nov 9, 2006
Loading...

Share This Page