470,636 Members | 1,493 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,636 developers. It's quick & easy.

css2-Layout with relative positioning and using negative values

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>
Jul 20 '05 #1
1 5214
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/
Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by Neil Zanella | last post: by
14 posts views Thread by Michael Bulatovich | last post: by
8 posts views Thread by Franck | last post: by
2 posts views Thread by Jan Roland Eriksson | last post: by
2 posts views Thread by Xah Lee | last post: by
2 posts views Thread by David E. Ross | last post: by
4 posts views Thread by maya | last post: by
1 post views Thread by Jean Pierre Daviau | last post: by
1 post views Thread by Korara | last post: by
???
reply views Thread by Stoney L | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.