block element layout - how?

[waste]

hello there. i am asking for a little help with creating layout like
this:

13px 500px 13px
..------------------------------------------------------------.
| | | | | | 13px
|----+----------------+ center area. +----------------+----|
| | empty space. | main website | empty space. | |
| | height and | window. | height and | |
| | width depends | | width depends | |
| | on the center | | on the center | |
| | area. | | area. | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
|----+----------------+ +----------------+----|
| | | | | |13px
'------------------------------------------------------------'

\--------------------------. .----------------------------/
\/
100% width

i was trying many of possibilities, trying to solve it for all evening
but with no luck... ;(
always some part of it is wrong (in IE almost always). if someone could
spare his free time and take a look on this i would be really really
grateful.

regards.

[Els]

waste wrote:

hello there. i am asking for a little help with creating layout like
this:

13px 500px 13px
.------------------------------------------------------------.
| | | | | | 13px
|----+----------------+ center area. +----------------+----|
| | empty space. | main website | empty space. | |
| | height and | window. | height and | |
| | width depends | | width depends | |
| | on the center | | on the center | |
| | area. | | area. | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
|----+----------------+ +----------------+----|
| | | | | |13px
'------------------------------------------------------------'

\--------------------------. .----------------------------/
\/
100% width

i was trying many of possibilities, trying to solve it for all evening
but with no luck... ;(
always some part of it is wrong (in IE almost always). if someone could
spare his free time and take a look on this i would be really really
grateful.

What you want wrt to the width is no problem:

html:
<div id="container">
<div id="page">
Your actual page content here
</div>
</div>

css:
body{
margin:0;
padding:13px;
}
#container{
text-align:center; /* for Win-IE5 */
}
#page{
width:500px;
margin:0 auto;
text-align:left; /* countering the value above */
}

What you want in height isn't that easy: at the top it's simple, but
to make all pages stop at 13px from the bottom, regardless of the
height of the content or the height of the browser window is
impossible imo. There are ways to get pages to extend till the bottom
of the window when they're too short, but not reliably cross browser,
and I don't think I've come across a way to include a 13px empty space
at the bottom yet. (not tried very hard though)

Just give it up and start thinking in web pages instead of rectangular
boxes with margins.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Jim Moe]

waste wrote:

hello there. i am asking for a little help with creating layout like
this:

It's a basic 3 column layout. What, specifically, have you tried? And
and URL showing your best efforts would help a lot.
--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Gus Richter]

waste wrote:

hello there. i am asking for a little help with creating layout like
this:

Just float the left stuff, left and float the right stuff, right and
allow the center stuff to flow between the two.

--
Gus

[waste]

no. it is not simple three column layout. there would be no problem if
it would be.
here you can find my last efforts, all I need now is two vertical lines
to the left and right, just to close the frame around main content
"window". note that you cannot simply use an background property
because it will interfere with frame corners...

height has no matter in my layout. frame should always end with content
"window".

somebody?

[waste]

> Just give it up and start thinking in web pages instead of

rectangular boxes with margins.

and who told you that height is 100% of the screen? height has no
matter, it is content "window" dependent.

[waste]

oops, i forgot to paste a link ;)
here it is: http://marti.presents.pl/test/

[Els]

waste wrote:

Just give it up and start thinking in web pages instead of
rectangular boxes with margins.

and who told you that height is 100% of the screen? height has no
matter, it is content "window" dependent.

Who said anything about screen? AFAICS I didn't mention the word at
all. If you mean "who told you that height is 100% of the viewport",
then okay, my bad. Your example doesn't explicitly say it, it just
looked like you wanted 13px margin at the bottom, and I assumed you
didn't want more, nor less than 13px.

Not sure what you mean by 'content "window"', but if you mean that
height in your example isn't relevant, than just go with the stuff I
gave you, and you'll be fine.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Dr. Feelgood - She's Got Her Eyes On You

[Els]

waste wrote:

oops, i forgot to paste a link ;)
here it is: http://marti.presents.pl/test/

Looks very complicated when looking at the source - if only I could
figure out what you really want...

Do you want the left and right 'sidebars' to be without that
background? Do you want a plain and simple black border around both
sidebars? Do you want 13px margin between the sidebars and the side of
the viewport? Why are you using four divs for the corners? Not to get
the black borders I hope?

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Dr. Feelgood - Blues Jam - Oil City Sheiks

[kchayka]

waste wrote:

http://marti.presents.pl/test/

You made it a lot more complicated than it needs to be. How about:
<URL:http://kchayka.c-net.us/test/html/waste.html>

Adjust colors and backgrounds to taste.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[waste]

I have provided a screenshot to show how it should looks like. please
open http://marti.presents.pl/test/ once again.

yes, it is complicated, but i have no other ideas how to paste few
background images in one DIV... and I need it because there is no
simple solution to make a frame similar to mine when there is no
constant width and height given.

[waste]

hello there. you have obviously not looked very carefully at my example
;)
in your example borders are fat and it is placed exactly when content
layer ends - well it is just an ordinary border after all. in mine -
frame is 3px thick and it is a little "inside" to optically look like
being placed under the content layer.

please open my link once again. i've pasted a screenshot now to show
how I wanted it to look like.

[waste]

it won't be OK, because in your solution you have missed the 13px
"stripes" and "squares" inside. I need them to make something like
"internal frame" (check my test webpage
http://marti.presents.pl/test/). I'm not an author of this project and
I know it can turn out impossible to make, nonetheless I'd like to try
it.

[Els]

First things first, right?
Here goes:
Please, quote relevant bits of messages when you reply to them!
waste wrote:

Then:

I have provided a screenshot to show how it should looks like. please
open http://marti.presents.pl/test/ once again.

yes, it is complicated,
No, it isn't at all. Really.
but i have no other ideas how to paste few
background images in one DIV...
You only need two background images. Black borders come with the html,
no need for images.
and I need it because there is no
simple solution to make a frame similar to mine when there is no
constant width and height given.

Look:
http://here.locusmeus.com/temp/waste.html

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Els]

Els wrote:

First things first, right?
Here goes:
Please, quote relevant bits of messages when you reply to them!
waste wrote:

Then:

I have provided a screenshot to show how it should looks like. please
open http://marti.presents.pl/test/ once again.

yes, it is complicated,

No, it isn't at all. Really.

but i have no other ideas how to paste few
background images in one DIV...

You only need two background images. Black borders come with the html,
no need for images.

and I need it because there is no
simple solution to make a frame similar to mine when there is no
constant width and height given.

Look:
http://here.locusmeus.com/temp/waste.html

Okay, I see that IE doesn't want to accept the negative margin, so
here's another version, with only one extra trick div, no extra
background images, works in IE, Firefox and Opera:

http://here.locusmeus.com/temp/waste-ie.html

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[kchayka]

waste wrote:

hello there. you have obviously not looked very carefully at my example
;)
Hello there. You have obviously not read the parts about adjusting the
background, etc. as you see fit. You want to be spoon-fed?

Seems you also have not read the part about proper quoting in usenet,
and using that abomination called google groups.
<URL:http://www.safalra.com/special/googlegroupsreply/>
in your example borders are fat
In your ASCII drawing, you specified a 13px frame, which is what I made
them. If you don't like them, make them smaller.
and it is placed exactly when content
layer ends
I don't know what this means. If you mean the content top and bottom
borders are in line with the frame, then yeah. That's what your drawing
showed. Adjust the negative margins to whatever value suits your fancy.
- well it is just an ordinary border after all. in mine -
frame is 3px thick and it is a little "inside" to optically look like
being placed under the content layer.
Did you even bother looking at the code to see what it was doing, or do
you still want to be spoon fed the answer? All you'd have to do is
adjust the borders, margins and backgrounds, and it would be exactly
what you want. Gee whiz, use a little imagination and initiative, will ya?
please open my link once again. i've pasted a screenshot now to show
how I wanted it to look like.

Now please take some time to learn from the examples given you instead
of expecting people to just hand the answers over. I don't think I'll
waste any more time on you.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[waste]

you are my hero, this is exactly what i wanted to get. ;)
thank you, thank you, thank you. i have to study that code carefully -
i wish i'd have more time for it.

once again thanks, and i am going to check it.

[Els]

waste wrote:

you are my hero, this is exactly what i wanted to get. ;)
thank you, thank you, thank you. i have to study that code carefully -
i wish i'd have more time for it.

once again thanks, and i am going to check it.

You're welcome - please show your gratitude by quoting relevant parts
of messages you reply to? You never know if you'll need help another
time, and non-quoters do eventually (or sometimes at once) end up in
the killfiles of the knowledgeable..

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[waste]

Els wrote:
"You're welcome - please show your gratitude by quoting relevant parts
of messages you reply to? You never know if you'll need help another
time, and non-quoters do eventually (or sometimes at once) end up in
the killfiles of the knowledgeable.."

--------------------

sorry for that but I have to use google website system as I am not at
home and far away from my precious news reader. I have no option to
paste text as a quote and when writting a message I can't even tell how
it will looks like.
anyway, I won't write a word from now on as my problem is solved.
thanks!

[Els]

waste wrote:

Els wrote: "You're welcome - please show your gratitude by quoting relevant parts
of messages you reply to? You never know if you'll need help another
time, and non-quoters do eventually (or sometimes at once) end up in
the killfiles of the knowledgeable.."

--------------------

sorry for that but I have to use google website system
That isn't a problem, this link shows you how to easily quote with
googlegroups 'system':
http://www.safalra.com/special/googlegroupsreply/
as I am not at
home and far away from my precious news reader. I have no option to
paste text as a quote and when writting a message I can't even tell how
it will looks like.
See above ;-)
anyway, I won't write a word from now on as my problem is solved.

*This* problem is solved - you have no idea about future problems -
believe me, they'll come <g>

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Emerson, Lake & Palmer - Lucky Man