table code -> css

N

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;
border: 1px solid red;
}
</style>

</head>
<body>
<table><td id="tableinner" valign="bottom">text</td></table>
</body>
</html>
 
B

Beauregard T. Shagnasty

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?
 
N

Neil Marshall

Beauregard said:
Quoth the raven named Neil Marshall:



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.
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.
 
B

Beauregard T. Shagnasty

Quoth the raven named Neil Marshall:

"some links in it" doesn't indicate there is an image.
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.
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.
 
N

Neil Marshall

Beauregard said:
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)
 
B

Beauregard T. Shagnasty

Quoth the raven named Neil Marshall:
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?
 
N

Neil Marshall

Beauregard said:
Quoth the raven named Neil Marshall:





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.
 
B

Beauregard T. Shagnasty

Quoth the raven named Neil Marshall:
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.
I'll let him know.


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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,766
Messages
2,569,569
Members
45,042
Latest member
icassiem

Latest Threads

Top