Layout using CSS

Discussion in 'HTML' started by Nik Coughin, Jan 21, 2004.

  1. Nik Coughin

    Nik Coughin Guest

    Please consider this example:

    http://homepages.ihug.co.nz/~nrkn/example.png

    (a) is an image, a logo
    (b) is the same width as (d) (using spacer pngs... inelegant, but what the
    hell)
    (c) uses whatever room remains after (a), (b) and (d) have had their share.
    (d) is a number of navigation pngs, there can be 0 or more. The width of
    (d) and therefore (b) depends on the number of pngs (they are all 24px in
    width).

    Between the four of them they use 100% of the browser width.

    This is it presented as a table:

    http://homepages.ihug.co.nz/~nrkn/csstest/table.html

    Here is my attempt at doing it with CSS:

    http://homepages.ihug.co.nz/~nrkn/csstest/css.html

    How do I make it so that field (c) in the CSS takes up all of the available
    room?

    Is the way that I have done everything else valid? I mean practically, not
    literally. The W3 validator says that it is literally valid, which isn't
    always the same thing.

    I am aware that there are a number of issues with table.html, I threw it
    together quickly as an example and it works fine as such.
     
    Nik Coughin, Jan 21, 2004
    #1
    1. Advertising

  2. Nik Coughin

    brucie Guest

    brucie, Jan 21, 2004
    #2
    1. Advertising

  3. Nik Coughin

    Nik Coughin Guest

    brucie wrote:
    > in post: <news:CxmPb.18828$>
    > "Nik Coughin" <nrkn!no-spam!@woosh.co.nz> said:
    >
    >> http://homepages.ihug.co.nz/~nrkn/example.png

    >
    > not supported by IE
    >

    http://moreshit.bruciesusenetshit.info/dont-know-what-to-call-it-thingy.html

    Goddamn M$. I suppose they'll fix it when they fix png transparency. My
    site pretty much needs to look like this:

    http://homepages.ihug.co.nz/~nrkn/example2.png

    The same (a), (b), (c) and (d) as the former post. The reason I need (c) to
    fill the page out like that is so that the page title is centered above (h),
    the page content. (e), (f) and (g) are just some graphics that make it look
    like there is a subtle shadow between the navigation and the content (poorly
    represented here in grey). There are also some spacing-only divs, above and
    to the left of (e).

    It would just be so easy to do with tables, but I know it's wrong.

    Any suggestions would be extremely welcome.
     
    Nik Coughin, Jan 21, 2004
    #3
  4. Nik Coughin

    brucie Guest

    in post: <news:GGBPb.19540$>
    "Nik Coughin" <nrkn!no-spam!@woosh.co.nz> said:

    >>> http://homepages.ihug.co.nz/~nrkn/example.png


    >> not supported by IE

    > http://moreshit.bruciesusenetshit.info/dont-know-what-to-call-it-thingy.html


    > Goddamn M$.


    you could use css that IE does support:
    http://moreshit.bruciesusenetshit.info/dont-know-what-to-call-it-thingy-02.html

    but its not a good as the first method.

    > http://homepages.ihug.co.nz/~nrkn/example2.png
    > Any suggestions would be extremely welcome.


    very simple to achieve for modern browsers with the first method i used
    above. a bit more fiddling around so it works for ancient IE but still
    doable.

    if you want a demo you'll have to wait until i get back from shopping.

    --
    brucie - i usenet nude
     
    brucie, Jan 21, 2004
    #4
  5. Nik Coughin

    Nik Coughin Guest

    brucie wrote:
    > in post: <news:GGBPb.19540$>
    > "Nik Coughin" <nrkn!no-spam!@woosh.co.nz> said:
    >
    >>>> http://homepages.ihug.co.nz/~nrkn/example.png

    >
    >>> not supported by IE

    >>

    http://moreshit.bruciesusenetshit.info/dont-know-what-to-call-it-thingy.html
    >
    >> Goddamn M$.

    >
    > you could use css that IE does support:
    >

    http://moreshit.bruciesusenetshit.info/dont-know-what-to-call-it-thingy-02.html
    >
    > but its not a good as the first method.
    >
    >> http://homepages.ihug.co.nz/~nrkn/example2.png
    >> Any suggestions would be extremely welcome.

    >
    > very simple to achieve for modern browsers with the first method i
    > used above. a bit more fiddling around so it works for ancient IE but
    > still doable.
    >
    > if you want a demo you'll have to wait until i get back from shopping.


    I'll work with that in the mean time.

    Thanks heaps.
     
    Nik Coughin, Jan 21, 2004
    #5
  6. Nik Coughin

    brucie Guest

    brucie, Jan 22, 2004
    #6
  7. Nik Coughin

    steven Guest

    "brucie" <> wrote in message
    news:bun9is$hl1no$-berlin.de...
    > in post: <news:GGBPb.19540$>
    > "Nik Coughin" <nrkn!no-spam!@woosh.co.nz> said:
    >
    > > http://homepages.ihug.co.nz/~nrkn/example2.png

    >
    > http://moreshit.bruciesusenetshit.info/nik/
    >
    > i changed the "a page title" to center between the "a logo" and the
    > dinosaurs because it didn't look right centered with the content <div>
    >


    Hey, Brucie,
    did you already remove the page? We didn't even have the chance to have a
    glance...
     
    steven, Jan 23, 2004
    #7
  8. Nik Coughin

    brucie Guest

    in post: <news:UTeQb.2125$-ops.be>
    "steven" <> said:

    >> http://moreshit.bruciesusenetshit.info/nik/


    > did you already remove the page?


    yes

    > We didn't even have the chance to have a glance...


    it was nothing exciting anyway


    --
    brucie - i usenet nude
     
    brucie, Jan 23, 2004
    #8
  9. Nik Coughin

    steven Guest

    "brucie" <> wrote in message
    news:bus2sh$kv49g$-berlin.de...
    > in post: <news:UTeQb.2125$-ops.be>
    > "steven" <> said:
    >
    > >> http://moreshit.bruciesusenetshit.info/nik/

    >
    > > did you already remove the page?

    >
    > yes
    >
    > > We didn't even have the chance to have a glance...

    >
    > it was nothing exciting anyway
    >


    Maybe not, but it might have been interesting.
     
    steven, Jan 23, 2004
    #9
  10. Nik Coughin

    brucie Guest

    in post: <news:eHhQb.2380$-ops.be>
    "steven" <> said:

    >>> We didn't even have the chance to have a glance...


    >> it was nothing exciting anyway


    > Maybe not, but it might have been interesting.


    nope, just bog standard css.

    --
    brucie - i usenet nude
     
    brucie, Jan 23, 2004
    #10
    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. Eric
    Replies:
    4
    Views:
    793
    clintonG
    Dec 24, 2004
  2. Guybrush Threepwood

    Table-based layout to CSS layout

    Guybrush Threepwood, Jun 6, 2006, in forum: HTML
    Replies:
    20
    Views:
    1,056
  3. Replies:
    1
    Views:
    648
    John Timney \(MVP\)
    Jun 19, 2006
  4. Habib

    Css-Layout vs Table-Layout

    Habib, Jun 19, 2006, in forum: HTML
    Replies:
    15
    Views:
    1,060
    Wÿrm
    Jun 20, 2006
  5. Replies:
    29
    Views:
    944
    Ben C
    Mar 21, 2008
Loading...

Share This Page