Witam, chciałbym zrobić coś takiego:




Tak aby na samej górze zrobić div (kolor czerwony) o wymiarach np. 200x800 a w nim mniejsze divy (logo, strefa logowania) tak aby pozycje okreslac na podstawie diva czerwonego a nie calego obszaru jaki mamy dostepny na monitorze... w kodzie mam te wszyskie elementy w czerwonym divie ale takie komendy jak top, left nie dzialaja do diva czerwonego tylko do calego ekranu.


chodzi o witryne www.zpodziemia.pl. jak sie ma rozdzielczosc 1152x864 to wyswietla sie dobrze.. a jak ustawie wieksza to sie rozjezdza wszystko...

wczesniej pisalem na tabelkach wszystko a teraz chce przepisac na divach noi mam maly problem...

[PHP] pobierz, plaintext 
body {margin: 0px;padding: 0px;background-color: #000000;}
#bloki{background-image: url(../gfx/bg.jpg);height: 324px;}
#top{height: 200px;width:  800px; margin: 3px auto;}
#menu{height: 50px;width:  800px;border:0px;padding: 0;}
#strefa_szukania{
float: right;
position:relative;
top: 95px;}
#center{
position:relative;
top:0px;
width:800px;
height:auto;
margin-left:auto;
margin-right:auto;
background-color: #ffffff;}
#menu_szare{
width:100%;
height:60px;
text-align:center;
background-color: #353535;}
#menu_dzialy{
margin-top:7px;
width:500px;
float:left;
}
#dodajform{
margin-top:20px;
width:300px;
float:right;
}
 
#statystyki{
font-family: verdana;
font-size: 10px;
color: white;
left: 30px;
top: 25px;
position: relative;
}
 
/* czcionki */
 
.bialy{font-family: Verdana;font-size:10px;color:#ffffff;}
.szary{font-family: Verdana;font-size:10px;color:gray;}
 
.bez{text-decoration:none;}
 
.pomaranczowy{
color: orange;
}
.czerwony{
color: red;
text-decoration: none;
}
.zielony{
color: green;
text-decoration: none;
}
 
 
/* select */
 
.select{
background-color: rgb(255, 255, 255);
font-size: 10pt;
width: 120px; 
height: 20px;
border: 1px inset rgb(0, 0, 0);
}
.szukaj{
background-color: rgb(255, 255, 255); font-size: 7pt; width: 80px; height: 16px; border: 1px inset rgb(0, 0, 0);
}
 
/* button */
 
.button{
color: rgb(255, 255, 255); background-color: rgb(255, 0, 0); font-size: 7pt; font-weight: bold; width: 80px; height: 20px; border-style: none;}
.button2{
color: rgb(255, 255, 255); background-color: rgb(51, 51, 51); font-size: 7pt; font-weight: bold; width: 80px; height: 17px; border-style: none;}
[PHP] pobierz, plaintext 

[PHP] pobierz, plaintext 
<div id="bloki">
	<div id="top">
		<div id="menu">
 
<ul>
<li><a href="#">Portal</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Poczta</a></li>
</ul>
 
		</div>
 
<img src="gfx/logo_nowe.png">
 
 
<div id="strefa_szukania">
<form name="szukaj" method="post" action="../wyniki_szukania.php">
<img src="gfx/firefox_logo.png"> 
<img src="gfx/chrome_logo.png"> 
<img src="gfx/opera_logo.png"> 
<img src="gfx/ie_logo.png">
<input name="search" value="Szukaj albumu..." class="szukaj" onblur="if(this.value == '') {this.value=this.defaultValue}" onfocus="if(this.value=='' || this.value == this.defaultValue) this.value=''" type="test">
<input name="Submit" value="Szukaj" type="submit" class="button2">
</form>
</div>
<div id="statystyki">
<?php echo "<b>".$z['ziomki']."</b>";?> ziomków, <span class="zielony"><b><?php echo "".$a['albumy']."</b>"; ?></span> / <span class="czerwony"><?php echo "<b>".$as['albumy_as']."</b>"; ?></span> albumów, <?php echo "<b>".$s['sklady']."</b>"; ?> składów, <?php echo "<b>$komentarze</b> komentarzy, <b>$foty</b>"; ?> zdjęć</div>
 
</div>
<div id="baner">
 
   sdadsdsdasdasds
 
	</div>        
</div> 
 
<div id="center">
	<div id="menu_szare">
		<div id="menu_dzialy">
					<span class="bialy"><b>zpodziemia.pl:</b></span> <a href="../albumy.php" class="bez">
					<span class="bialy">albumy</span></a> <a href="../grupy.php" class="bez">
					<span class="bialy">grupy</span></a> <a href="../wytwornie.php" class="bez">
					<span class="bialy">wytwórnie</span></a> <a href="../spolecznosc.php" class="bez">
					<span class="bialy">społeczno?ć</span></a> <a href="../break-dance/" class="bez">
					<span class="bialy">break-dance</span></a> <a href="../graffiti/" class="bez">
					<span class="bialy">graffiti</span></a> <a href="../forum/" class="bez">
					<span class="bialy">forum</span></a> <br> <a href="../koncerty.php" class="bez">
					<span class="bialy">koncerty</span></a> <a href="../sample.php" class="bez">
					<span class="bialy">sample</span></a> 
					<span class="szary">bity</span> 
					<span class="szary">mp3</span> 
					<span class="szary">sklep 24h</span> 
					<span class="szary">katalog www</span> 
					<span class="szary">statystyki</span> <a href="../sponsoring.php" class="bez">
					<span class="bialy">sponsoring</span></a> <a href="/redakcja/" class="bez">
					<span class="bialy">redakcja</span></a> <br>
		</div>
		<div id="dodajform">	
<form>
 
<select class="select" name="list">
<option value="../graffiti/dodaj_graffiti.php">graffiti
</option><option value="../dodaj_koncert.php">koncert
</option><option value="../albumy/dodaj.php">album hip-hop
</option><option value="../dodaj_grupe.php">grupę hip-hop
</option><option value="../breakdance.php#dodaj_grupe">grupę break-dance
</option><option value="../graffiti/index.php#dodaj_crew">graffiti crew
 
</option></select>
 
<input value="+ Dodaj" onclick="top.location.href=this.form.list.options[this.form.list.selectedIndex].valu
e" class="button" type="BUTTON">
</form>
	</div>
	</div>
[PHP] pobierz, plaintext 

Obczaj sobie to.

[HTML] pobierz, plaintext 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#czerwony{
	width: 800px;
	height: 200px;
	border: 1px solid red;
}
 
#logo{
	margin: 20px;
	width: 200px;
	height: 100px;
	border: 1px solid green;
	float: left;
}
 
#logowanie{
	width: 300px;
	height: 50px;
	border: 1px solid pink;
	margin: 10px;
	float: right;
}
 
#szukaj{
	width: 300px;
	height: 50px;
	border: 1px solid green;
	float: right;
	margin: 30px;
}
 
 
</style>
</head>
 
<body>
<div id="czerwony">
	<div id="logo"></div>
    <div id="logowanie"></div>
    <div id="szukaj"></div>
</div>
</body>
</html>
[HTML] pobierz, plaintext 

Zdecydowanie prościej będzie w CSS dla owego czerwonego DIV-a dodać position: relative. Wtedy wszystko co będzie wewnątrz i będzie miało ustawione position: absolute będzie sie odnosić do rodzica a nie do ekranu.