Simple CSS layout question.

N

Noozer

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?
 
D

dorayme

Noozer said:
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...
 
N

Noozer

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.

: (
 
W

Wÿrm

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

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

Greg N.

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

Jonathan N. Little

Noozer said:
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>
It's enough to make my head hurt.

: (
 
D

dorayme

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.

: ([/QUOTE]

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!
 
A

Andy Dingley

Noozer said:
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.
 
N

Nik Coughlin

Noozer said:
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/
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top