Simple CSS layout question.

Discussion in 'HTML' started by Noozer, Mar 5, 2006.

  1. Noozer

    Noozer Guest

    I have a very simple CSS layout that I'm trying to make work. The idea of
    CSS makes perfect sense to me. Actually putting it into use in another
    story.

    I want my layout to be a simple 3x3 grid, similar to what a table would
    produce...

    First "cell" would be 12 pixels wide and 12 pixels high, with a background
    of the file "tl.gif".

    Second "cell" would be 24 pixels wide and 12 pixels high, with a background
    of the file "t.gif".

    Third "cell" would be 12 pixels wide and 12 pixels high, with a background
    of the file "tr.gif"

    ....and then a new line begins...

    Repeat for the next three cells

    ....and a new line begins...

    Repeat onces more for the last three cells.

    ....Now what if I wanted that second "cell" to be variable... becoming wide
    enough that the width of it, plus the 24 pixels of the first and third cell
    would be 100% of the container?
    Noozer, Mar 5, 2006
    #1
    1. Advertising

  2. Noozer

    dorayme Guest

    In article <X6KOf.108217$B94.38253@pd7tw3no>,
    "Noozer" <> wrote:

    > I have a very simple CSS layout that I'm trying to make work. The idea of
    > CSS makes perfect sense to me. Actually putting it into use in another
    > story.
    >
    > I want my layout to be a simple 3x3 grid, similar to what a table would
    > produce...
    >
    > First "cell" would be 12 pixels wide and 12 pixels high, with a background
    > of the file "tl.gif".
    >
    > Second "cell" would be 24 pixels wide and 12 pixels high, with a background
    > of the file "t.gif".
    >
    > Third "cell" would be 12 pixels wide and 12 pixels high, with a background
    > of the file "tr.gif"
    >
    > ...and then a new line begins...
    >
    > Repeat for the next three cells
    >
    > ...and a new line begins...
    >
    > Repeat onces more for the last three cells.
    >
    > ...Now what if I wanted that second "cell" to be variable... becoming wide
    > enough that the width of it, plus the 24 pixels of the first and third cell
    > would be 100% of the container?


    You could look at http://alistapart.com/articles/holygrail and
    sniff about the links further... or Google for CSS tutorials...

    --
    dorayme
    dorayme, Mar 5, 2006
    #2
    1. Advertising

  3. Noozer

    Noozer Guest

    > "Noozer" <> wrote:
    >
    >> I have a very simple CSS layout that I'm trying to make work. The idea of
    >> CSS makes perfect sense to me. Actually putting it into use in another
    >> story.
    >>
    >> I want my layout to be a simple 3x3 grid, similar to what a table would
    >> produce...


    <snip>

    > You could look at http://alistapart.com/articles/holygrail and
    > sniff about the links further... or Google for CSS tutorials...


    Believe me... I've read several tutorials and still, I can not figure out
    the logic of CSS.

    For example. To define the hieght and width of an element, it must be a
    block and not an inline. But if I do that, it starts a new line after the
    block, so I can't place block elements side by side.

    ...or... if I float a div left and a div right, the right one is lower than
    the left one.

    It's enough to make my head hurt.

    : (
    Noozer, Mar 6, 2006
    #3
  4. Noozer

    Wÿrm Guest

    "Noozer" <> kirjoitti
    viestissä:X6KOf.108217$B94.38253@pd7tw3no...

    <snip>

    > I want my layout to be a simple 3x3 grid, similar to what a table would
    > produce...


    What on earth are you trying to acomplish with that many "cells" exactly?

    Maybe you could explain or show some kinda image what you are trying to do,
    because it sounds very "messy" to have that many "cells". Almost like you
    would be trying just replace table and its structure with divs...
    Wÿrm, Mar 6, 2006
    #4
  5. Noozer

    Greg N. Guest

    Noozer wrote:


    > For example. To define the hieght and width of an element, it must be a
    > block and not an inline. But if I do that, it starts a new line after the
    > block, so I can't place block elements side by side.


    make the blocks that are supposed to be in a horizontal "display:inline;"

    > ..or... if I float a div left and a div right, the right one is lower than
    > the left one.


    Make sure your left and right floats have the same vertical margins and
    paddings etc. Then, place the left and right float immediately after
    one another in your source:

    <div... >left float</div>
    <div... >right float</div>
    <p>text....

    If they still don't not line up, let us have a look at your page.

    --
    Gregor mit dem Motorrad auf Reisen:
    http://hothaus.de/greg-tour/
    Greg N., Mar 6, 2006
    #5
  6. Noozer wrote:

    >>"Noozer" <> wrote:
    >>
    >>
    >>>I have a very simple CSS layout that I'm trying to make work. The idea of
    >>>CSS makes perfect sense to me. Actually putting it into use in another
    >>>story.
    >>>
    >>>I want my layout to be a simple 3x3 grid, similar to what a table would
    >>>produce...

    >
    >
    > <snip>
    >
    >>You could look at http://alistapart.com/articles/holygrail and
    >>sniff about the links further... or Google for CSS tutorials...

    >
    >
    > Believe me... I've read several tutorials and still, I can not figure out
    > the logic of CSS.
    >
    > For example. To define the hieght and width of an element, it must be a
    > block and not an inline. But if I do that, it starts a new line after the
    > block, so I can't place block elements side by side.


    Of course it must be a block (think box) to have width and height dims
    >
    > ..or... if I float a div left and a div right, the right one is lower than
    > the left one.


    That is do to your are floating incorrectly...if you are trying to
    produce below.

    +----+ +----+ +----+ +----+
    |1 | |2 | |3 | |4 |
    | | | | | | | |
    +----+ +----+ +----+ +----+

    ..squares {
    float: left;
    width: 5em;
    height: 5em;
    margin: .5em;
    border: 1px solid black;
    }

    <div class="squares">1</div>
    <div class="squares">2</div>
    <div class="squares">3</div>
    <div class="squares">4</div>


    >
    > It's enough to make my head hurt.
    >
    > : (
    >
    >



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Mar 6, 2006
    #6
  7. Noozer

    dorayme Guest

    In article <ohLOf.107564$sa3.58051@pd7tw1no>,
    "Noozer" <> wrote:

    > > "Noozer" <> wrote:
    > >
    > >> I have a very simple CSS layout that I'm trying to make work. The idea of
    > >> CSS makes perfect sense to me. Actually putting it into use in another
    > >> story.
    > >>
    > >> I want my layout to be a simple 3x3 grid, similar to what a table would
    > >> produce...

    >
    > <snip>
    >
    > > You could look at http://alistapart.com/articles/holygrail and
    > > sniff about the links further... or Google for CSS tutorials...

    >
    > Believe me... I've read several tutorials and still, I can not figure out
    > the logic of CSS.
    >
    > For example. To define the hieght and width of an element, it must be a
    > block and not an inline. But if I do that, it starts a new line after the
    > block, so I can't place block elements side by side.
    >
    > ..or... if I float a div left and a div right, the right one is lower than
    > the left one.
    >
    > It's enough to make my head hurt.
    >
    > : (


    I understand! But take it slowly. eg. when you "float a div left
    and a div right, the right one is lower than the left one" when
    your content for each are too big to fit in the window. But your
    content does not have to be too big (you can make it smaller, and
    I am talking esp. pics here. And you don't have to float the
    right one right, you can float not at all or float it left and
    set appropriate margins and padding. In a good browser like
    Firefox, you can have some control over stuff by using max-width
    and min-width. To stop yourself going crazy, do not use IE while
    learning. How to cope with IE is advanced CSS... Just a
    suggestion that might help you get you started.... I should talk!

    --
    dorayme
    dorayme, Mar 6, 2006
    #7
  8. Noozer

    Andy Dingley Guest

    Noozer wrote:
    > I have a very simple CSS layout that I'm trying to make work.


    Use a table. You're obviously trying to do rounded borders and this is
    the easiest way to attach your CSS (and thus the background slices) to
    where they're needed.

    Tables are bogus, but then so are rounded borders that need markup
    embedded in the HTML. Either ditch them (they're over-rated), wait for
    CSS 3 (which apparently just does them properly, with a border-radius
    property), or hold your nose and stick with the table. It's not
    _adding_ any bogosity to your page, so it doesn't really hurt.

    You _can_ do rounded borders with tables, but it requires so many
    <div>s that there's really little advantage to it.
    Andy Dingley, Mar 6, 2006
    #8
  9. Noozer

    Nik Coughlin Guest

    Noozer wrote:
    > I have a very simple CSS layout that I'm trying to make work. The
    > idea of CSS makes perfect sense to me. Actually putting it into use
    > in another story.
    >
    > I want my layout to be a simple 3x3 grid, similar to what a table
    > would produce...
    >
    > First "cell" would be 12 pixels wide and 12 pixels high, with a
    > background of the file "tl.gif".
    >
    > Second "cell" would be 24 pixels wide and 12 pixels high, with a
    > background of the file "t.gif".
    >
    > Third "cell" would be 12 pixels wide and 12 pixels high, with a
    > background of the file "tr.gif"
    >
    > ...and then a new line begins...
    >
    > Repeat for the next three cells
    >
    > ...and a new line begins...
    >
    > Repeat onces more for the last three cells.
    >
    > ...Now what if I wanted that second "cell" to be variable... becoming
    > wide enough that the width of it, plus the 24 pixels of the first and
    > third cell would be 100% of the container?


    http://www.nrkn.com/round/
    Nik Coughlin, Mar 6, 2006
    #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. Eric
    Replies:
    4
    Views:
    687
    clintonG
    Dec 24, 2004
  2. Guybrush Threepwood

    Table-based layout to CSS layout

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

    Css-Layout vs Table-Layout

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

Share This Page