CSS - Replacing a simple HTML table

Discussion in 'HTML' started by Bigus, May 5, 2004.

  1. Bigus

    Bigus Guest

    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
    Bigus, May 5, 2004
    #1
    1. Advertising

  2. 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
    Toby A Inkster, May 5, 2004
    #2
    1. Advertising

  3. Bigus

    KirstyH Guest

    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
    KirstyH, May 5, 2004
    #3
  4. Bigus

    Neal Guest

    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.
    Neal, May 5, 2004
    #4
  5. 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
    Toby A Inkster, May 5, 2004
    #5
  6. Bigus

    Bigus Guest

    "Toby A Inkster" <> wrote in message
    news:p...
    > 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
    Bigus, May 6, 2004
    #6
  7. Bigus

    Bigus Guest

    "Bigus" <> wrote in message
    news:...
    > "Toby A Inkster" <> wrote in message
    > news:p...
    > > 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
    Bigus, May 6, 2004
    #7
  8. 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ä
    Lauri Raittila, May 7, 2004
    #8
  9. Bigus

    Bigus Guest

    "Lauri Raittila" <> wrote in message
    news:...
    > 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
    Bigus, May 7, 2004
    #9
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. mark | r
    Replies:
    1
    Views:
    66,152
    Steve Pugh
    Jan 6, 2004
  2. Paul F. Johnson

    Replacing a framed website with css

    Paul F. Johnson, Sep 24, 2004, in forum: HTML
    Replies:
    8
    Views:
    1,907
    Paul F. Johnson
    Sep 26, 2004
  3. Titus A Ducksass - AKA broken-record
    Replies:
    6
    Views:
    651
    Titus A Ducksass - AKA broken-record
    Nov 15, 2004
  4. vitay
    Replies:
    8
    Views:
    544
    Stan McCann
    Nov 9, 2006
  5. Rob Meade

    Replacing - and not Replacing...

    Rob Meade, Apr 5, 2005, in forum: ASP General
    Replies:
    5
    Views:
    274
    Chris Hohmann
    Apr 11, 2005
Loading...

Share This Page