«

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?

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

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

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/

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

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

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.

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/