...

View Full Version : Problem with wrapping



mr.hoax
05-17-2010, 06:59 PM
First od all, sorry for my language :)

So, this is my problem, as you can see in the picture

Black div layer is inside white div layer. and text is inside black layer.
But, white need to be bottom:0px; and text need to be in black layer, and black layer need to be bottom:70px;. Please help

This is my code:


.white {
background-color:#FFFFFF;
width: 650px;
height: 100%;
bottom: 0px;
position: absolute;
border-right-width: 2px;
border-left-width: 2px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #429bff;
border-left-color: #429bff;
margin-left: -325px;
top: 0px;
left:50%;
}
.black {
background-color:#000000;
color: #FFFFFF;
position: absolute;
width: 500px;
height: 100%;
bottom: 70px;
top: 170px;
left: 10px;

}

Excavator
05-17-2010, 07:20 PM
Hello mr.hoax,
Something like this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100% "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
}
.white {
width: 650px;
position: absolute;
top: 0;
bottom: 0;
left: 50%;
margin-left: -325px;
border: 2px solid #429bff;
border-top: none;
border-bottom: none;
background: #fff;
}
.black {
width: 500px;
position: absolute;
bottom: 70px;
left: 10px;
background: #000;
color: #fff;
}
</style>
</head>
<body>
<div class="white">
<div class="black">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<!--end .black--></div>
<!--end .white--></div>
</body>
</html>

mr.hoax
05-17-2010, 07:38 PM
no, does not work. if you add more text, text is going up. but my text must start on top: 170px; and end at bottom: 70px; but must expand white layer. and white layer must be bottom: 0px;

abduraooft
05-18-2010, 11:45 AM
Black div layer is inside white div layer. and text is inside black layer.
But, white need to be bottom:0px; and text need to be in black layer, and black layer need to be bottom:70px;. Please help Do you really need those absolute positions? Do you know the pitfalls of using them (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/) all over the page?

mr.hoax
05-18-2010, 01:33 PM
i don't know how to use that?! i'm troubling with this last 3 days and it's killing me. I'm want to learn, but i don't know how to make it, and i dont know what to google to solve my problem.

abduraooft
05-18-2010, 01:47 PM
Please post your html code aswell, or a link to your page would be much better.

mr.hoax
05-18-2010, 01:51 PM
#wrapper {
position: absolute;
width: 650px;
bottom: auto;
top: 0px;
left: 50%;
margin-left: -325px;
background-color:#FFFFFF;
border-right-width: 2px;
border-left-width: 2px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #429bff;
border-left-color: #429bff;

}
.sadrzaj {
position: relative;
width: 100%;
left: 10px;
width: 500px;
top: 30px;
margin-bottom: 100px;
background-color:#000000;
color: #FFFFFF;
}

ok, i solved, well part of it, but the worst part is that i don't know how is this working now. i accedentaly make this and it worked. i'm good for now, but i will make a new css when i cache some time. Thank you all for helping me.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum