Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > CSS - Replacing a simple HTML table

Reply
Thread Tools

CSS - Replacing a simple HTML table

 
 
Bigus
Guest
Posts: n/a
 
      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


 
Reply With Quote
 
 
 
 
Toby A Inkster
Guest
Posts: n/a
 
      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

 
Reply With Quote
 
 
 
 
KirstyH
Guest
Posts: n/a
 
      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

 
Reply With Quote
 
Neal
Guest
Posts: n/a
 
      05-05-2004
On Wed, 05 May 2004 16:54:21 -0400, KirstyH <(E-Mail Removed)> 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.
 
Reply With Quote
 
Toby A Inkster
Guest
Posts: n/a
 
      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

 
Reply With Quote
 
Bigus
Guest
Posts: n/a
 
      05-06-2004
"Toby A Inkster" <(E-Mail Removed)> wrote in message
news(E-Mail Removed). ..
> 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


 
Reply With Quote
 
Bigus
Guest
Posts: n/a
 
      05-06-2004
"Bigus" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed) s.com...
> "Toby A Inkster" <(E-Mail Removed)> wrote in message
> news(E-Mail Removed). ..
> > 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



 
Reply With Quote
 
Lauri Raittila
Guest
Posts: n/a
 
      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ä
 
Reply With Quote
 
Bigus
Guest
Posts: n/a
 
      05-07-2004
"Lauri Raittila" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed) 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


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


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



Advertisments