CSS - Replacing a simple HTML table

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

--
"When all around you are losing their heads, and you can keep yours,
it's just possible that you aren't grasping the situation"

Bigus

05-05-2004

Bigus wrote:

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

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?page=132

05-05-2004

Toby A Inkster wrote:
>
> 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

05-05-2004

On Wed, 05 May 2004 16:54:21 -0400, KirstyH <> wrote:

> Toby A Inkster wrote:
>>
>> 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?

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.

05-05-2004

KirstyH wrote:

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

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?page=132

05-06-2004

"Toby A Inkster" <> wrote in message
news

. ..
> Bigus wrote:
>
> > 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'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

05-06-2004

"Bigus" <> wrote in message
news: s.com...
> "Toby A Inkster" <> wrote in message
> news

. ..
> > Bigus wrote:
> >
> > > 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'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

05-07-2004

In article Bigus wrote:

> 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(

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä

05-07-2004

"Lauri Raittila" <> wrote in message
news: t...
> In article Bigus wrote:
>
> > 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?

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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS: a simple layout won't work in CSS	liketofindoutwhy@gmail.com	HTML	29	03-21-2008 03:46 PM
CSS table don't look like html TABLE	vitay	HTML	8	11-09-2006 05:56 PM
Replacing - and not Replacing...	Rob Meade	ASP General	5	04-11-2005 06:49 PM
CSS Layout question - how to duplicate a table layout with CSS	Eric	ASP .Net	4	12-24-2004 04:54 PM
confused - html validates, css validates but validate css from the html causes errors	Titus A Ducksass - AKA broken-record	HTML	6	11-15-2004 12:59 PM