converting from tables to css

[Dudely]

I want to be a good little author and use CSS.

Therefore, I'm attempting to convert my tables to the equivalent CSS.

Unfortunately, I can't reproduce the same results. Can someone take a
look at http://www.greengoldcapital.info/test/test.shtml and see if
you can tell me what I'm doing wrong?

What you see there is of course a mess at this point, as I've tried
numerous ways to get this done and left most of those trials intact in
the code.

THE PROBLEM is that I want the first (css style code) to look
identical to the second (table style code). I cannot for the life of
me get the text to align vertically in the middle of the background
image.

As you can see, I've tried adjusting the margins, the padding, and of
course using the vertical alignment directive.

While I can move the text to the right using margin-left, margin-top
has no affect whatsoever that I can see. Padding has no effect, nor
does vertical-alignment.

I've tried every possible combination I can think of, the text will
not move vertically no matter what I do. I'm out of ideas.

Any thoughts?

Thank you in advance!

[Els]

Dudely wrote:

I want to be a good little author and use CSS.

Therefore, I'm attempting to convert my tables to the equivalent CSS.

Unfortunately, I can't reproduce the same results. Can someone take a
look at http://www.greengoldcapital.info/test/test.shtml and see if
you can tell me what I'm doing wrong?

What you see there is of course a mess at this point, as I've tried
numerous ways to get this done and left most of those trials intact in
the code.

THE PROBLEM is that I want the first (css style code) to look
identical to the second (table style code). I cannot for the life of
me get the text to align vertically in the middle of the background
image.

As you can see, I've tried adjusting the margins, the padding, and of
course using the vertical alignment directive.

While I can move the text to the right using margin-left, margin-top
has no affect whatsoever that I can see. Padding has no effect, nor
does vertical-alignment.

I've tried every possible combination I can think of, the text will
not move vertically no matter what I do. I'm out of ideas.

Two options (well, there are more, but only two I'd want to suggest):
Either set a padding-top on the div. Be aware that padding is *added*
to height, so if the total height should remain 60px, you could use a
top padding of 20px, but then you must set the height to 40px, to add
up to 60px total, or, set the line-height on that span to 60px.

Please note though, that this might superficially convert your table
to a div, but will only get you into trouble later. Because, what
happens if the visitor decides he wants to see the text larger? By
giving the div an exact height of 60px, it won't stretch if you
enlarge the content.

To make a "CSS layout", you should first get rid of the tables in your
head IYSWIM. Think flexible, test what happens if visitors change
stuff like font-size, window size, etc.

Start with very simple pages, get to understand how things work, and
only then (this won't happen in one day!) try to mimic table layouts,
especially those that depend on image sizes.

Divs are very different in behaviour from tables, and the most
important difference might well be that they don't stretch beyond
whatever height you set them to. (except when viewed in IE5/6, but
that doesn't count ;-) )

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Counting Crows - Barely Out Of Tuesday

[Dudely]

On Mar 8, 3:36 pm, Els <els.aNOS...@ti scali.nlwrote:

Dudely wrote:

THE PROBLEM is that I want the first (css style code) to look
identical to the second (table style code). I cannot for the life of
me get the text to align vertically in the middle of the background
image.

As you can see, I've tried adjusting the margins, the padding, and of
course using the vertical alignment directive.

While I can move the text to the right using margin-left, margin-top
has no affect whatsoever that I can see. Padding has no effect, nor
does vertical-alignment.

I've tried every possible combination I can think of, the text will
not move vertically no matter what I do. I'm out of ideas.

Two options (well, there are more, but only two I'd want to suggest):
Either set a padding-top on the div. Be aware that padding is *added*
to height, so if the total height should remain 60px, you could use a
top padding of 20px, but then you must set the height to 40px, to add
up to 60px total, or, set the line-height on that span to 60px.

That works. I eliminated the span (I only put the span in because I
wasn't getting any results from manipulating the div) adjusted the top
and left padding and height to compensate, and it's very, very close
to the original table layout. Not exact, but good enough. What I
still don't understand is why "vertical-alignment: middle" did
absolutely nothing for me, as I would of expected that to be precisely
what I was aiming for.

Please note though, that this might superficially convert your table
to a div, but will only get you into trouble later. Because, what
happens if the visitor decides he wants to see the text larger? By
giving the div an exact height of 60px, it won't stretch if you
enlarge the content.

I'm kind of stuck between a rock and hard place. By setting it to
60px, the image IS being stretched so that I get the two-tone color
effect you should be seeing. Any other setting I've tried eliminates
the effect. Stretching the image vertically much beyond 60px makes
the image distorted as far as the colors are concerned giving too much
of a two-tone color effect. Unless you're viewing it at 60px, you're
getting an image I don't intend. Essentially you're seeing a green
image with a gold border. Stretching the image to 60px makes the gold
border stretch in a way I like. Much below or above 60px and you're
getting an effect I didn't intend. I don't know how to fix that.

Divs are very different in behaviour from tables, and the most
important difference might well be that they don't stretch beyond
whatever height you set them to. (except when viewed in IE5/6, but
that doesn't count ;-) )

It definitely has an interesting effect if I shrink the window down to
tiny. The table image stretches vertically (I don't like the
resulting image, but at least the text is still visible) whereas the
div... well, the text simply gets cut off. I suppose a poor image
with visible text is better than not being able to see the text, but I
don't know how to achieve that result with the div without losing the
original 60px stretched image for the "normal" case. i.e. full screen
viewing as intended.

[John Hosking]

Dudely wrote:

... Can someone take a
look at http://www.greengoldcapital.info/test/test.shtml and see if
you can tell me what I'm doing wrong?

>
THE PROBLEM is that I want the first (css style code) to look
identical to the second (table style code). I cannot for the life of
me get the text to align vertically in the middle of the background
image.

A partial answer from me, although Els knows of which she speaks; the
DIV alignments won't exactly duplicate tables (they _can_ do similar
things, but aren't identical).

Here's what you've got, trimmed by me to simplify the problem, then
bloated by me again to see what I'm doing, and edited by me to actually
do it:

<div style="border:5 px solid red; height: 60px;">
<span style="border:1 px solid yellow; position:absolu te;
top:25px;">Gree n Gold Capital</span>
</div>

<table border="5px" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td height="60px">G reen Gold Capital</td>
</tr>
</tbody>
</table>

Ignore or remove the borders if you want; they're there as my
visualization aid. I've added absolute positioning (slightly nasty) and
a fixed top value (twice as nasty) in units of px (four times as nasty).
Consider it a proof of concept. Consider also how quickly and easily it
breaks when the text is resized, or when the text is long but the
viewport is narrow. Which is what Els was saying.

--
John

[Els]

John Hosking wrote:

Dudely wrote:

>... Can someone take a
look at http://www.greengoldcapital.info/test/test.shtml and see if
you can tell me what I'm doing wrong?

>>
THE PROBLEM is that I want the first (css style code) to look
identical to the second (table style code). I cannot for the life of
me get the text to align vertically in the middle of the background
image.

A partial answer from me, although Els knows of which she speaks; the
DIV alignments won't exactly duplicate tables (they _can_ do similar
things, but aren't identical).

Here's what you've got, trimmed by me to simplify the problem, then
bloated by me again to see what I'm doing, and edited by me to actually
do it:

<div style="border:5 px solid red; height: 60px;">
<span style="border:1 px solid yellow; position:absolu te;
top:25px;">Gree n Gold Capital</span>
</div>

<table border="5px" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td height="60px">G reen Gold Capital</td>
</tr>
</tbody>
</table>

Ignore or remove the borders if you want; they're there as my
visualization aid. I've added absolute positioning (slightly nasty) and
a fixed top value (twice as nasty) in units of px (four times as nasty).
Consider it a proof of concept. Consider also how quickly and easily it
breaks when the text is resized, or when the text is long but the
viewport is narrow. Which is what Els was saying.

I also was saying that I didn't want to suggest other methods, and
this included the absolute positioning. The reason can be demonstrated
by using your example ;-) :

It is not likely that this example is the real actual webpage the OP
is trying to build. Which means that if he would use your code, and
place the div anywhere on the page but at the utter top, the span
would not end up in the right place at all.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Só Pra Contrariar - Minha Fantasia

[Els]

Dudely wrote:

>>I've tried every possible combination I can think of, the text will
not move vertically no matter what I do. I'm out of ideas.

Two options (well, there are more, but only two I'd want to suggest):
Either set a padding-top on the div. Be aware that padding is *added*
to height, so if the total height should remain 60px, you could use a
top padding of 20px, but then you must set the height to 40px, to add
up to 60px total, or, set the line-height on that span to 60px.

That works. I eliminated the span (I only put the span in because I
wasn't getting any results from manipulating the div) adjusted the top
and left padding and height to compensate, and it's very, very close
to the original table layout. Not exact, but good enough. What I
still don't understand is why "vertical-alignment: middle" did
absolutely nothing for me, as I would of expected that to be precisely
what I was aiming for.

Because vertical alignment is about the position of the letters within
their line-height. (except when set to table-cells, which is what you
are accustomed to)

>Please note though, that this might superficially convert your table
to a div, but will only get you into trouble later. Because, what
happens if the visitor decides he wants to see the text larger? By
giving the div an exact height of 60px, it won't stretch if you
enlarge the content.

I'm kind of stuck between a rock and hard place. By setting it to
60px, the image IS being stretched so that I get the two-tone color
effect you should be seeing. Any other setting I've tried eliminates
the effect. Stretching the image vertically much beyond 60px makes
the image distorted as far as the colors are concerned giving too much
of a two-tone color effect. Unless you're viewing it at 60px, you're
getting an image I don't intend. Essentially you're seeing a green
image with a gold border. Stretching the image to 60px makes the gold
border stretch in a way I like. Much below or above 60px and you're
getting an effect I didn't intend. I don't know how to fix that.

Fix it by thinking divs and forget tables. I never use an image that
has to be stretched, I make the image the way I want it before placing
it in HTML. This means my image would already be 60px high, and used
as a background, not foreground. Then, if the element would get higher
due to the content inside, I would either let the image repeat itself,
or I would set the background-color for that element to exactly the
same as the colour of the lowest pixel in the image. (Depending on the
image of course, but usually this latter method has my preference).

In your example, I'd say you want the text to always be on the
'middle' colour. Solution is to use two images. One for the top, one
for the bottom, and then solid background-color in the middle.
More complicated, but doable with nested divs. The text will always be
in the middle, the colours will always be as intended, only the middle
part may stretch with more or larger text or smaller horizontal space.

>Divs are very different in behaviour from tables, and the most
important difference might well be that they don't stretch beyond
whatever height you set them to. (except when viewed in IE5/6, but
that doesn't count ;-) )

It definitely has an interesting effect if I shrink the window down to
tiny. The table image stretches vertically (I don't like the
resulting image, but at least the text is still visible) whereas the
div... well, the text simply gets cut off.

Not in my Firefox and with the current version of your test example.
You've changed the original test case!

The div stretches. I did notice though, that you have set the height
of the div to 100%. This will be 100% of its parent, not of itself.
Keep this in mind when using divs like this on real pages ;-)

I suppose a poor image
with visible text is better than not being able to see the text, but I
don't know how to achieve that result with the div without losing the
original 60px stretched image for the "normal" case. i.e. full screen
viewing as intended.

By thinking differently, you won't need to achieve it (as you noticed
in the mean time :-) )
--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Só Pra Contrariar - Minha Fantasia

[Andy Dingley]

On 8 Mar, 23:06, "Dudely" <ab3...@gmail.c omwrote:

Therefore, I'm attempting to convert my tables to the equivalent CSS.

Unfortunately, I can't reproduce the same results.

Then use <table>. CSS and non-<tablemarkup is not a direct
replacement for <table>. There _are_ differences in behaviour,
particularly in how it responds to resizing and in how different
elements on a page behave in conjunction with each other. It's usually
thought that this is a _good_ thing, and why non-<tableCSS helps
achieve "fluid design".

However if you _insist_ on rigid grid-like behaviour, then you still
have to use <table (CSS' display:table*; property values aren't
widely supported, for enforcing grid-like behaviour on elements other
than <table>). You'll still be able to use CSS though, you just apply
it to HTML <table>s.

So stop worrying too much about making things look identical to the
original. You don't _want_ this, in nearly all cases. Take your
content and apply it to a fresh non-<tabledesign, don't insist on
doing it by stepwise refactoring from an old <tabledesign.

[Gus Richter]

Dudely wrote:

>

>>THE PROBLEM is
to get the text to align vertically in the middle of the background
image.

Have a go at this using nested divs:

<div style="backgrou nd-image:
url(http://www.greengoldcapital.info/ima...rge_hbar.jpg);
height: 60px;position:r elative;">
<div style="padding-left: 3px;position:ab solute;
top:50%;margin-top:-.6em;">
Green Gold Capital
</div>
</div>

The ParentDiv has the background image, the height is set to 60px (same
as your table cell height) and rel positioned so that the child's abs
positioning will be relative to the parent and not to the viewport.
The ChildDiv has the text, is abs positioned and top:50% positions the
text down so the top of the div (which is basically the top of the text)
is centered over the height of the child. In order to center the text,
it is moved up with margin-top:-.6em which approximates 50% height of
the font (ChildDiv). This works well even when the text is resized.

I'm kind of stuck between a rock and hard place. By setting it to
60px, the image IS being stretched so that I get the two-tone color
effect you should be seeing. Any other setting I've tried eliminates
the effect. Stretching the image vertically much beyond 60px makes
the image distorted as far as the colors are concerned giving too much
of a two-tone color effect. Unless you're viewing it at 60px, you're
getting an image I don't intend. Essentially you're seeing a green
image with a gold border. Stretching the image to 60px makes the gold
border stretch in a way I like. Much below or above 60px and you're
getting an effect I didn't intend. I don't know how to fix that.

Strange talk about the image stretching. The image is actually 120
pixels tall and by specifying a 60px height, we only get to see one half
of the image as a background. If the height is increased, we get to see
more of the image, but there is no image stretching at all.

--
Gus

[Ben C]

On 2007-03-09, Gus Richter <gu********@net scape.netwrote:

Dudely wrote:

>>

>>>THE PROBLEM is
to get the text to align vertically in the middle of the background
image.

Have a go at this using nested divs:

<div style="backgrou nd-image:
url(http://www.greengoldcapital.info/ima...rge_hbar.jpg);
height: 60px;position:r elative;">
<div style="padding-left: 3px;position:ab solute;
top:50%;margin-top:-.6em;">
Green Gold Capital
</div>
</div>

The ParentDiv has the background image, the height is set to 60px (same
as your table cell height) and rel positioned so that the child's abs
positioning will be relative to the parent and not to the viewport.
The ChildDiv has the text, is abs positioned and top:50% positions the
text down so the top of the div (which is basically the top of the text)
is centered over the height of the child. In order to center the text,
it is moved up with margin-top:-.6em which approximates 50% height of
the font (ChildDiv). This works well even when the text is resized.

Alternatively give the inner div

position: absolute;
height: 1.2em;
top: 0;
bottom: 0;
margin: auto 0;

which works out about the same, but the centering will remain correct if
the inner div has top and bottom padding or borders.

[Gus Richter]

Ben C wrote:

Alternatively give the inner div

position: absolute;
height: 1.2em;
top: 0;
bottom: 0;
margin: auto 0;

which works out about the same, but the centering will remain correct if
the inner div has top and bottom padding or borders.

Good stuff. I like that better, thank you.

--
Gus