[css][div] pozycjonowanie w płynnym szablonie, jak to zrobić? Opcje

[Dominik137]

Witam, mam problem z ułożeniem elementów na stronie. Chce zrobić płynny szablon.

[HTML] pobierz, plaintext 
body {
margin:0px;
background-color: #d9d9d5;
}
div.top {
height:100px;
overflow:hidden;
background-image: url('images/gradient.gif');
}
div.logo {
width:107px;
height:100px;
background-image: url('images/logo.gif');
background-repeat:no-repeat;
background-position:center;
}
 
div.menu {
float:left;
width:107px;
overflow: hidden;
position: relative;
}
ul.tekst_menu {
padding:5px;
text-align:center;
font-size:small;
font-family:Georgia;
color:green;
}
div.pages {
position:relative;
box-shadow: 0 0 10px 5px #6666ff;
border-left:1px solid #6666ff;
border-top:1px solid #6666ff;
border-bottom:1px solid #6666ff;
margin-left: 117px;
padding:5px;
height:100%;
background-color:#f7f7f6;
 
}
div.stopka {
position:absolute;
bottom:0px;
clear:both;
width:100%;
height:30px;
background-color: #d9d9d5;
text-align:center;
font-size:small;
font-family:"Times New Roman", serif;
color:#6666ff;
padding:3;
line-height:30px;
}
 
a:link {
color:grey;
}
a:visited {
color:grey;
}
a:hover {
color:green;
font-size:medium;
}
 
div.block {
position:absolute;
margin:5px;
height:70%;
top:0px;
width:50%;
border-width:1px;
border-style:solid;
background-color:#ededeb;
border-top-color:#6666ff;
border-left-color:#6666ff;
border-right-color:#333366;
border-bottom-color:#333366;
}
 
div#otwarte {
top:0px;
left:0px;
width: 49%;
}
div#szukane {
top:0px;
right:0px;
width: 49%;
}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
               <div class="top">
			<div class="logo"></div>
		</div>
 
		<div class="menu">
			<ul class="tekst_menu">
				<li><a href="#" onClick="zaladuj(\'home\'); return false">Home</a></li>
			</ul>
		</div>
 
		<div class="pages">
                             <div class="block" id="otwarte"></div>
                             <div class="block" id="szukane"></div>
		</div>
 
		<div class="stopka">
		? 2011.
		</div>
[HTML] pobierz, plaintext 

Problem dotyczy elementów w ?pages?. Chciałbym, aby ?pages? miało wysokość do stopki, (która powinna być na samym dole) o raz by w ?pages? znajdowały się dwa divy o szerokości 50% względem ?pages? i o wysokości do końca ?pages?. Div ?pages? nie mogę usunąć, pozostałe warstwy muszą znajdować się w nim. Mam nadzieje, że wytłumaczyłem to w miarę zrozumiale?co robie źle?

Ten post edytował Dominik137 26.06.2011, 14:49:44

[Sephirus]

Proponuje dla klasy "block" zrezygnować z ABSOLUTE a dać relative czy static i FLOAT na LEFT. Postawią się obok siebie z szerokością 50% "PAGES". Zaraz za nimi dałbym element typu

[HTML] pobierz, plaintext 
<div style="clear: both"></div>
[HTML] pobierz, plaintext 

w celu skasowania FLOATów i zachowania odpowiedniej wysokości "pages" względem "block".

Co do tego by "block" miało zawsze wysokość równą "pages" nie zależnie od ich zawartości to coś się robiło z MARGIN i z OVERFLOW ale nie pamiętam - zaraz poszukam (IMG:style_emoticons/default/wink.gif)

EDIT: Znalazłem (IMG:style_emoticons/default/wink.gif)

Tu masz przykład:

[HTML] pobierz, plaintext 
<div class="strona">
   <div class="lewy">...</div>
   <div class="prawy">...</div>
</div>
[HTML] pobierz, plaintext 

i CSS:

[CSS] pobierz, plaintext 
.strona {
   overflow:hidden;
}
 
.lewy, .prawy {
   padding-bottom:10000px;
   margin-bottom:-10000px;
   float:left;
   width:50%;
}
[CSS] pobierz, plaintext 

to taki tam trick (IMG:style_emoticons/default/wink.gif) jak Cię to bardziej interesuje zajrzyj tutaj

Ten post edytował Sephirus 28.06.2011, 19:54:17