css2-Layout with relative positioning and using negative values

[Wilhelm Kutting]

Hi i like to make a complex layout with css.
All the content is inside a container div.

I like to get the following sequence without the css-layout:
logo
title
mainnav
content

i can only get the results when i use negative positioning.
Target browsers seem to have no problem with that.

Is this a good way or do i have a better possibility?

<div id="container" style="margin-left:auto ; marginauto-right: auto;
padding: 0px; width: 775px; font-family: Verdana, Arial, Helvetica,
sans-serif;
font-size: 80%;">
<div>
<div id="Layer1" style="position:relative; left:0px; top:0px;
width:230px; height:167px; z-index:1; background-image:
url(/img/main/pic-lo.jpg); layer-background-image:
url(/img/main/pic-lo.jpg); border: 1px none #000000;" align="left"></div>
<div id="Layer2" style="position:relative; left:143px; top:0px;
width:87px; height:200px; z-index:2; background-color: #FFCBCE;
layer-background-color: #FFCBCE; border: 1px none #000000;"></div>
<div id="Layer3" style="position:relative; left:143px; top:0px;
width:172px; height:90px; z-index:3; background-image:
url(/img/main/pic-txt.gif); layer-background-image:
url(/img/main/pic-txt.gif); border: 1px none #000000;"></div>
<div id="Layer4" style="position:relative; left:565px; top:-447px;
width:87px; height:71px; z-index:4"><img src="/img/logo-deswos.gif"
width="87" height="71" /></div>
</div>
<div id="title" style="position:absolute; left:314px; top:6px;
width:249px; height:110px; z-index:7">
<h1>Projekte in L&auml;ndern</h1>
</div>
<div id="mainnav" style="position:relative; left:0px; top:-350px;
width:130px; height:270px; z-index:8">navlist</div>
<div id="content" style="position:relative; left:325px; top:-360px;
width:340px; height:412px; z-index:5; background-color: #99FFCC;
layer-background-color: #99FFCC; border: 1px none #000000;">
<p><font class="normal">Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.</font></p>

</div>
<div id="Layer5" style="position:relative; left:492px; top:0px;
width:219px; height:90px; z-index:6"><img
src="/img/main/aktuelles-ru.jpg" width="262" height="160" /></div>

</div>

[Mark Tranchant]

Wilhelm Kutting wrote:

Hi i like to make a complex layout with css.
All the content is inside a container div.

I like to get the following sequence without the css-layout:
logo
title
mainnav
content

i can only get the results when i use negative positioning.
Target browsers seem to have no problem with that.

Is this a good way or do i have a better possibility?

<div id="container" style="margin-left:auto ; marginauto-right: auto;
padding: 0px; width: 775px; font-family: Verdana, Arial,
Helvetica, sans-serif;
font-size: 80%;">
So, you're forcing 775px width on me, as well as a font smaller than I
have chosen as my preference. Thanks a bunch.

What's marginauto-right?
<div>
<div id="Layer1" style="position:relative; left:0px; top:0px;
width:230px; height:167px; z-index:1; background-image:
url(/img/main/pic-lo.jpg); layer-background-image:
url(/img/main/pic-lo.jpg); border: 1px none #000000;" align="left"></div>
Layer1. Descriptive name - I like it. I don't see layer-background-image
in the CSS specs.
<div id="Layer2" style="position:relative; left:143px; top:0px;
width:87px; height:200px; z-index:2; background-color: #FFCBCE;
layer-background-color: #FFCBCE; border: 1px none #000000;"></div>
Layer2: another good name choice.
<div id="Layer3" style="position:relative; left:143px; top:0px;
width:172px; height:90px; z-index:3; background-image:
url(/img/main/pic-txt.gif); layer-background-image:
url(/img/main/pic-txt.gif); border: 1px none #000000;"></div>

Layer3: I didn't see that coming. I'm getting bored chasing this lot
through. My guess is that position: relative is confusing you. Please
post a URL so that we can take a look at what is happening using real
tools like Firefox's Web Developer Toolbar.

Make sure your code validates first.

--
Mark.
http://tranchant.plus.com/