CSS - Replacing a simple HTML table

Bigus · May 5, 2004

Hi

[possible repost - didn't show up last time I posted it]

I want to do the equivalent of a 1-row, 2 column table in CSS, ie: a
coloured bar across the top of the web page with some text aligned to the
left of the bar and an image aligned to the right of the bar.

The tricky bit is that I want it so that if the user increases/decreases the
text size, using their browser, then the text and image remain vertically
centered on the bar.

The nearest I can get to this is with the code:

<div id="thebar">
Some text
<img src="myimage.jpg" width="50" height="30" border="0"
style="position:absolute;right:25px;" />
</div>

The bar expands and contracts with the text and so it remains centered,
however:

a) if you make the text larger the image stays at the top of the bar
b) if you make the text smaller the bar height becomes less than the height
of the image

Specifying a height to the bar stops it getting smaller than the image but
the text no longer vertically centres, and vertical-align: middle doesn't
seem to work in IE, so I cannot think of any solutions for both a) and b)

Any ideas?

Toby A Inkster · May 5, 2004

Bigus said:
The tricky bit is that I want it so that if the user increases/decreases the
text size, using their browser, then the text and image remain vertically
centered on the bar.

Try something like:

#thebar {
position: relative;
}

#thebar img {
position: absolute;
top: 50%;
right: 25px;
margin-top: -15px;
}

You could do similar for the text if it were a fixed font size.

KirstyH · May 5, 2004

Toby said:
Try something like:

#thebar {
position: relative;
}

I don't understand this. I thought that "relative" meant "relative to
the natural position of the element in the document flow". So why does
it make sense to position something relatively without specifying a
position?

Kirsty

Neal · May 5, 2004

I don't understand this. I thought that "relative" meant "relative to
the natural position of the element in the document flow". So why does
it make sense to position something relatively without specifying a
position?

A positioned element serves as a containing block for elements inside.
Elements not contained in a relative or absolute positioned element behave
according to the viewport. So by relative positioning a div, we can have
its contents floated and positioned relative to it instead.

Toby A Inkster · May 5, 2004

KirstyH said:
I don't understand this. I thought that "relative" meant "relative to
the natural position of the element in the document flow". So why does
it make sense to position something relatively without specifying a
position?

If you position an element relatively or absolutely it becomes what I
think the CSS specs call a "positioned element". Once you have a
positioned element, you can position absolute elements within it.

Example 1:
<body>
<div>
<span style="position:absolute;top:3px;left:8px;">x</span>
</div>
</body>

Example 2:
<body>
<div style="position:relative">
<span style="position:absolute;top:3px;left:8px;">x</span>
</div>
</body>

In example 1, the letter 'x' is positioned 3px down and 8px along from the
top left corner of <body>.

In example 2, the letter 'x' is positioned 3px down and 8px along from the
top left corner of the <div>.

Bigus · May 6, 2004

Toby A Inkster said:
Try something like:

#thebar {
position: relative;
}

#thebar img {
position: absolute;
top: 50%;
right: 25px;
margin-top: -15px;
}

You're a genius! Thank you.. I had to tweak the numbers a bit of course, but
it's worked and has taught me a couple of lessons on positioning.

Bigus

Bigus · May 6, 2004

Bigus said:
increases/decreases

You're a genius! Thank you.. I had to tweak the numbers a bit of course, but
it's worked and has taught me a couple of lessons on positioning.

hmmm.. just discovered it doesn't work properly in Opera. The effect in
Opera (7.23) is the same as IE/Mozilla if you removed the "top:50%;" part of
#thebar img

Bigus

Lauri Raittila · May 7, 2004

In said:
hmmm.. just discovered it doesn't work properly in Opera. The effect in
Opera (7.23) is the same as IE/Mozilla if you removed the "top:50%;" part of
#thebar img

URL?

See:
http://www.student.oulu.fi/~laurirai/www/css/middle(

Bigus · May 7, 2004

Lauri Raittila said:
URL?

I've uploaded it to:
http://www.creationfactor.net/css/

I'm also having problems with the bottom bar and the image there (especially
in IE where it moves half way down the page!). The test browsers I'm using
are IE6, Mozilla 1.6 and Opera 7.23.

See:
http://www.student.oulu.fi/~laurirai/www/css/middle(

That's a very useful page.

Bigus

Stuck with html and css	25	Dec 14, 2022
Need assistance finetuning HTML, CSS, Javascript - sticky header issue	3	Feb 25, 2022
Positioning CSS components	1	Nov 16, 2023
Only one table shows up with the information	2	Mar 29, 2023
Help with Visual Lightbox: Scripts	2	May 3, 2023
CSS Grid. Im having trouble containing a title an image and a button	1	Oct 25, 2022
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
HTML Aligning social media icons	2	Dec 6, 2020

CSS - Replacing a simple HTML table

Bigus

Toby A Inkster

KirstyH

Neal

Toby A Inkster

Bigus

Bigus

Lauri Raittila

Bigus

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads