Overlapping and offset layers

Is it possible in CSS

[korkus2000]

Ok say I have three elements on the page. 2 images and a content area. I want to lay them out something like this:

//-------------
//¦-----------¦
//¦-----------¦
//¦-Picture---¦------------
//¦-----------¦Content_that¦
//¦-----------¦flows_around¦
//-------------all_of_the__¦
/////¦pictures,_but_has_no_¦
/////¦breaks_in_it_like_____¦
/////¦tables_would_create._¦
/////¦If_it_is_possible_____¦
/////¦then_what___------------
/////¦browsers____¦----------¦
/////¦support it?__¦----------¦
/////-------------¦-Picture--¦
////////////////////¦----------¦
////////////////////¦----------¦
////////////////////------------

Lets just say my CSS is less than steller. I use it for basic styles but have never really gotten into positioning so if this is easy forgive my ignorence. ;)

[Nick_W]

Hi Korkus,

Looks like Floating Your Images [w3.org] would be the ticket here.

Basically it goes like this:

<p><img src="img.jpg" class="imgleft" alt="" />blah de blah blah blah</p>

then in your css:

.imgleft {
float: left;
margin: 10px; /* so it's not right up against the text */
}

It's a neat way to do it and it's very easy. The above link goes into the finer points ;)

Browsers? -- I think even NN4 supprots it, just off to check...

Nick

[korkus2000]

Thanks nick I knew you would have an answer.
What kind of browser support does it have?

Also it looks like it won't allow the float to go beyound the container. I want the image to basically intersect the left margin of the content in the middle. Make any sense?

[Nick_W]

Buggy in nn4 and early IE's but on the whole, pretty good.

Nice browser support bookmark here for you: CSS Browser Support Chart [westciv.com]

Nick

[korkus2000]

Would I just float the content also in the container to get the intersection?

[Nick_W]

er.... You have one image going right and one left. Is that correct?

Nick

[korkus2000]

Yes but the top image would be lined up with the left margin of the content in the middle and the oppisite for the bottom.

[Nick_W]

Okay, this is confusing but I think I see what you mean.

If you use the imgleft rule above then that image should sit 10px in from the most left side of your content. To change that do this:

.imgleft {
float: left;
margin: 10px 10px 10px 0px; /* Top, right, bottom, left */
}

That uses the shorthand to set each margin seperately.

On the botom img you would need a new class of 'imgright'

.imgright {
float: right;
margin: 10px 0px 10px 10px;
}

and your html might look like this:

<p><img src="img.jpg" class="imgleft" alt="" />This image will be in the left corner of the container.</p>
<p>some middle content here....</p>
<p><img src="img.jpg" class="imgright" alt="" />And this image should be at the right edge of your container near the bottom.</p>

Is that getting you nearer your goal?

Nick

[korkus2000]

I think what I am saying is
.imgright {
float: right;
margin: 10px 10px 10px -50px;
}

To make the image start before the content. A lot more. I want to see half of the image before I see content looking from the left. I want the left top corner of the content to be square in the middle of the image so it overlaps. I don't know how to explain this. Sorry Nick.

[holly]

To make the image start before the content. A lot more. I want to see half of the image before I see content looking from the left. I want the left top corner of the content to be square in the middle of the image so it overlaps. I don't know how to explain this.

Sounds to me like you could do one of two things. [and by the way this content explanation does not have it floating around the top left image but overlapping into it, if I am reading your most recent post correctly?]

Way number 1:
Place that top image in the background of the body
body{
margin:0;
color: #000; background-color: #fff;/*or whatever page colors you wish for text and background*/
background-image: url(pathToImage/TopLeftCornerImage.jpg);
background-position: top left;
background-attachment: fixed;} or scroll if you want it to move with the page text.

Now content, let's think of it in a box. And you may have to experiment with this just a bit. Say your image is 400px high by 300 pixels wide, then try this.
.contentbox{
margin-top: 200px;/*half the height of the image.*/
margin-left: 150px;/*half the width of the image.*/
color: #000;/*you will need to make the text color a visible one over the image area*/
background-color: transparent;/*this allows the bg to be invisible and the image to show through*/
}

bottom image could easily be floated right as Nick offered up. Try placing the image tag for this float near the final paragraph and move it around in the content a bit to place it where you would like it to go.
===

OPTION 2 = Absolute Positioning Models
Other option and this works very well.
Download the FREE, Small, and Fun Absolute position editing tool from Price Media.
* Cascade DTP [Windows] [price-media.demon.co.uk] *
Play with it a bit and experiment. Though Absolute positioning does not allow for much in the way of resizing, it is another alternative for page design. It outputs your layout to html, very clean html and all the CSS, with a few adjustments you can have xhtml. I have used this tool numerous times to get some really nice experimental layouts and overlaps of areas - That validate and are also backwards compatible, cross browser, and fairly accessible.
Screenshot of Cascade DTP [price-media.demon.co.uk]

holly

[Nick_W]

Can you post the code longhairedgenius?

Nick

[Longhaired Genius]

Inspired by korkus2000's evocative ascii art I was determined to get this done. It turned out to be not too difficult.

Here's the stripped-down html:

<body>
<div class="layout">
<img class="leftimage" src="" width="128" height="124" alt="">

<p class="top-p"><!-- Top paragraph goes here --></p>

<p><!-- copy goes here --></p>

<img class="rightimage" src="" width="118" height="128" alt="">

<p><!-- copy goes here --></p>
</div>
</body>

Here's the css:

body {
color: #000000;
background: #ffffff;
}
.layout {
color: inherit;
background: #afd5f9;
padding: 1em 1em 1em 1em;
float: left;
width: 95%;
}
.layout .top-p {
margin: 4em 3em 1em 3em;
}
.layout p {
margin: 0 3em 1em 3em;
}
.layout img {
margin: 10px;
}
.leftimage {
float: left;
}
.rightimage {
float: right;
}

• The main div (.layout) is floated so that floated elements within it will not overlap its border

• The margin is achieved by giving a big margin to each paragraph...

• This means that the top paragraph has to have its own class with a big top margin

• The images are simply floated left and right but must be outside the paragraphs in the html

• The position of the bottom image is determined by the bottom paragraph, so if the bottom paragraph is too long the image won't overlap the bottom border as intended
  

[turk182]

I think this page [stopdesign.com] may interest you. It's about Wired News redesign and extensively use of XHTML/CCS in all their site. Among other things, they talk about CSS positioning: multiple columns, relative width...

...Wired News is about to take a long overdue step into the land of Web standards. We hope others are encouraged to follow as we help push the Web to a higher ground.

[edited by: Nick_W at 9:19 pm (utc) on Dec. 9, 2002]

[SuzyUK]

Korkus...did you get this solved yet?

If I've understood you correctly you want a column of text in the middle of the page (straight margins?)

with a picture "sticking out" top left and bottom right, and center column aligned left & right with the "centre line" of the sticking out pictures,

if is so and still unsolved..let me know before I go writing screeds of code :)

Suzy

[korkus2000]

Thanks Suzy. I still haven't tried the solutions yet. I am pretty swamped. I will try them and report back. Thanks everyone for the help.