01-02-2010, 05:08
Witam
mam problem z rościągnięciem "różowego diva" (img link)
http://img63.imageshack.us/img63/1718/13982518.jpg
mam wyśrodkowany kontener o ustalonej szerokości 980px
w środku kontenera mam bloki
chce aby jeden z tych bloków wychodził poza kontener i stykał się z lewą ścianą. Jak to zrobić Panowie?
chce aby div różowy miał wielkość 1100px i poleciał w lewą strone
tak aby przy większych rozdzielczościach ładnie się pokazywał
próbowałem pozycje relative ale strona się troche sypie pod IE
w Operze, FF jest ok. Proszę o pomoc.
kod
mam problem z rościągnięciem "różowego diva" (img link)
http://img63.imageshack.us/img63/1718/13982518.jpg
mam wyśrodkowany kontener o ustalonej szerokości 980px
w środku kontenera mam bloki
chce aby jeden z tych bloków wychodził poza kontener i stykał się z lewą ścianą. Jak to zrobić Panowie?
chce aby div różowy miał wielkość 1100px i poleciał w lewą strone
tak aby przy większych rozdzielczościach ładnie się pokazywał
próbowałem pozycje relative ale strona się troche sypie pod IE
w Operze, FF jest ok. Proszę o pomoc.
kod
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title</title>
<style type="text/css">
#kontener {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 980px;
}
body {
background-color: #23282b;
margin: 0px;
color: #FFF;
}
#top {
width: 100%;
height: 200px;
background-repeat: no-repeat;
background-color: #33CCCC;
}
#menu {
width: 100%;
height: 34px;
float: left;
}
#buttons {
width: 740px;
height: 34px;
float: right;
display: inline;
background-repeat: no-repeat;
background-position: 445px;
background-color: #FFCC00;
}
#content {
width: 700px;
height: 230px;
float: left;
overflow: visible;
}
#kwadrat {
float: left;
width: 30px;
height: 200px;
background-repeat: no-repeat;
background-position: center 15px;
margin-top: 22px;
}
#corobimy {
height: 224px;
width: 277px;
float: right;
color: #FFF;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
line-height: 20px;
background-repeat: no-repeat;
background-position: right -3px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #FFF;
}
#bg {
height: 70px;
width: 61px;
float: right;
position: relative;
display: block;
clear: right;
top: -35px;
right: 10px;
}
#main {
height: 300px;
width: 100%;
float: left;
clear: both;
}
#lewy {
float: left;
width: 700px;
height: auto;
}
#pasek {
height: 20px;
width: auto;
float: left;
text-align: right;
font-family: Tahoma, Geneva, sans-serif;
font-size: 15px;
color: #FFF;
font-weight: bold;
}
#tekst {
width: 500px;
height: auto;
float: right;
font-family: Tahoma, Geneva, sans-serif;
font-size: 11px;
text-align: justify;
overflow: visible;
margin-top: 20px;
padding-right: 10px;
padding-left: 2px;
}
#prace {
width: 280px;
float: left;
height: 200px;
}
#ostatnie-realizacje {
background-repeat: no-repeat;
height: 38px;
width: 184px;
float: right;
}
#prawy {
height: auto;
width: 280px;
float: right;
}
.blue {
color: #35b5ff;
}
.niebieski-kwadrat {
width: 5px;
}
ul, ul li {
display: block;
list-style: none;
margin: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
ul {
float: left;
}
ul li {
float: left;
height: 34px;
}
ul a:link, ul a:visited {
text-decoration: none;
display: block;
font-weight: bold;
color: #fff;
background-repeat: repeat-x;
background-position: center;
padding-right: 0px;
padding-bottom: 0px;
background-color: #036;
padding-top: 0px;
padding-left: 0px;
}
ul a:hover {
background-color: #800;
}
#photo {
width: 700px;
height: 224px;
background-repeat: no-repeat;
position: relative;
top: 0px;
overflow: visible;
float: left;
background-color: #FF3366;
}
#stopka {
background-repeat: repeat-x;
width: 100%;
height: 28px;
float: left;
margin-top: 10px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 10px;
color: #999;
padding-left: 5px;
padding-top: 45px;
background-color: #33CCFF;
}
#pas2 {
height: 194px;
width: 600px;
position: relative;
background-repeat: no-repeat;
top: 50px;
bottom: 0px;
overflow: visible;
float: left;
right: 220px;
}
.pink2 {
color: #FF3289;
}
</style>
</head>
<body>
<div id="kontener">
<div id="top">TOP</div>
<div id="menu">
<div id="buttons">menu
</div>
</div>
<div id="content">
<div id="photo"></div>
</div>
<div id="corobimy">
<div id="kwadrat"></div>
<br />
<br />
inny blok
</div>
<div id="main">
<div id="lewy">
<div id="pasek">aktualności</div>
<div id="tekst">
<p class="pink"><span class=
"pink2"><strong>miejsce na text</strong></span></p>
<p class="pink"> </p>
<p class="pink"> </p>
<p class="pink"> </p>
<p class="pink"> </p>
<p class="pink"> </p>
</div>
</div>
<div id="prawy">
<div id="ostatnie-realizacje">jakies info</div>
<div id="prace"></div>
</div>
</div>
<div id="stopka">stopka<strong></strong></div>
</div>
</body>
</html>
ale mysle ze w tym przypadku nie trzeba