[css] problem z divami

0

Witam

zrobilem sobie szablon strony na divach.

#srodek1 {
	width:   		15px;
	height: 		800px;
	float:			left;
	background-image: 	url(gfx_12.gif);
}
#srodek2 {
	width:   		800px;
	float:			left;
	background-image: 	url(gfx_13.gif);
}
#srodek3 {
	width:   		15px;
	height: 		800px;
	float:			left;
	background-image: 	url(gfx_14.gif);
}

tutaj html :

 	      	   
<div id="srodek">
<div id="srodek1"></div>
<div id="srodek2"></div>
<div id="srodek3"></div>
</div>
0

no i tu sie zaczal problem...
chciualem zeby dlugosc strony byla zalezna od tekstu w 'srodek2'. Jednak 'srodek1' i 'srodek3' nie chca byc takiej samej dlugosc. Moze ktos pomoc ?

0
<div id="srodek">
  <div id="srodek1"></div>
  <div id="srodek2"></div> 
  <div id="srodek3"></div>
  <div style='clear:both'></div>
</div>

O to chodzi?

0

raczej nie o to. postaram sie to wyjasnic dokladniej.

mam 3 div lewy i prawy ( w ktorym sa tylko tla obrazkowe, powtarzajacy sie obrazek o szerokosci 15px i wysokosci 1px, obrazek powtarza tylko w pionie ) Div srodkowy zawiera newsy, menu i logowanie. Chce zrobic tak zeby dlugosc tych divow byla zalezna od tekstu w tym srodkowym a te boczne zeby mialy taka dlugosc jak ten srodkowy.

0

#srodek{
overflow: hidden;
}
#srodek1, #srodek2, #srodek3{
padding-bottom: 20000px;
margin-bottom: -20000px;
}

To powinno pomóc. Jeśli dobrze zrozumiałem. :)

0

to nie zadzialalo, dziwne rozwiazanie oO

Free Image Hosting at www.ImageShack.us

tutaj zalaczam kod:

body {
	background-color: 	#605F5F;
}
#Calosc {
	width:			830px;
	background-color: 	white;
	margin: 		auto;
}
#header1a {
	width:   		15px;
	height: 		22px;
	float:			left;
	background-image: 	url(gfx_01.gif);
}
#header2a {
	width:   		14px;
	height: 		22px;
	float:			left;
	background-image: 	url(gfx_02.gif);
}
#header3a {
	width:   		772px;
	height: 		22px;
	float:			left;
	background-image: 	url(gfx_03.gif);
}
#header4a {
	width:   		14px;
	height: 		22px;
	float:			left;
	background-image: 	url(gfx_04.gif);
}
#header5a {
	width:   		15px;
	height: 		22px;
	float:			left;
	background-image: 	url(gfx_05.gif);
}
#header1b {
	width:   		15px;
	height: 		121px;
	float:			left;
	background-image: 	url(gfx_06.gif);
}
#header2b {
	width:   		800px;
	height: 		121px;
	float:			left;
	background-image: 	url(gfx_07.gif);
}
#header3b {
	width:   		15px;
	height: 		121px;
	float:			left;
	background-image: 	url(gfx_08.gif);
}
#header1c {
	width:   		15px;
	height: 		4px;
	float:			left;
	background-image: 	url(gfx_09.gif);
}
#header2c {
	width:   		800px;
	height: 		4px;
	float:			left;
	background-image: 	url(gfx_10.gif);
}

#header3c {
	width:   		15px;
	height: 		4px;
	float:			left;
	background-image: 	url(gfx_11.gif);
}
#srodek1 {
	width:   		15px;
	height:			800px;
	float:			left;
	background-image: 	url(gfx_12.gif);
}
#srodek2 {
	width:   		800px;
	float:			left;
	background-image: 	url(gfx_13.gif);
}
#srodek3 {
	width:   		15px;
	height:			800px;
	float:			left;
	background-image: 	url(gfx_14.gif);
}
#srodek1b {
	width:   		15px;
	height: 		11px;
	float:			left;
	background-image: 	url(gfx_12a.gif);
}
#srodek2b {
	width:   		800px;
	height: 		11px;
	float:			left;
	background-image: 	url(gfx_13.gif);
}
#srodek3b {
	width:   		15px;
	height: 		11px;
	float:			left;
	background-image: 	url(gfx_14a.gif);
}
#stopka1 {
	width:   		15px;
	height: 		35px;
	float:			left;
	background-image: 	url(gfx_15.gif);
}
#stopka2 {
	width:   		800px;
	height: 		35px;
	float:			left;
	background-image: 	url(gfx_16.gif);
}
#stopka3 {
	width:   		15px;
	height: 		35px;
	float:			left;
	background-image: 	url(gfx_17.gif);
}

a tu html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title> Moja Strona Domowa </title>
		<link rel="Stylesheet" type="text/css" href="Pliki/Style.css"/>
		<link rel="Stylesheet" type="text/css" href="Pliki/Wyglad.css"/>
		<meta http-equiv="Content-Type" content="text/html;charset=windows-1250" />	
	</head>
	<body>
	      <div id="Calosc">
	      	   <div id="headera">
	      	   	 <div id="header1a"></div>
	      	   	 <div id="header2a"></div>
	      	   	 <div id="header3a"></div>
	      	   	 <div id="header4a"></div>
	      	   	 <div id="header5a"></div>
		   </div>
	      	   <div id="headerb">
	      	   	 <div id="header1b"></div>
	      	   	 <div id="header2b"></div>
	      	   	 <div id="header3b"></div>
		   </div>
	      	   <div id="headerc">
	      	   	 <div id="header1c"></div>
	      	   	 <div id="header2c"></div>
	      	   	 <div id="header3c"></div>
		   </div>
 	      	   <div id="srodek">
	      	   	 <div id="srodek1"></div>
	      	   	 <div id="srodek2">
			      		<div id="Menu">
				     	<div class="Naglowek1"></div>
					<div class="Naglowek_Logowanie">MENU</div>
				     	<div class="Naglowek3"></div>
					<div id="nav"><ul>	
					     		<li><a href="#czcionki.html">Strona Glowna</a></li>
							<li><a href="#tekst.html">O Mnie</a></li>
							<li><a href="#hobby.html">Moje Hobby</a></li>
							<li><a href="#tlo.html">Moje Projekty</a></li>
							<li><a href="#artykuly.html">Moje Artykuly</a></li>
							<li><a href="#marginesy.html">Historia</a></li>
							<li><a href="#marginesy.html">Linki</a></li>
							<li><a href="#obramowanie.html">Kontakt</a></li>
					     </ul>
					</div>
				  </div>
				  <div id="Tresc">
					<div class="Naglowek1"></div>
					<div class="Naglowek2">NEWS</div>
					<div class="Naglowek3"></div>
					<div class="text"><div class="Naglowek"><div class="Tytul">Tytul news'a: <a href="LOL1">Dodanie systemu news'ow w wersji 1.0</a></div><div class="Data">Data: 06.12.2007</div></div><p>Dziś </p><div class="Autor">Autor: <a href="kontakt.html">Marcin </a></div></div><div class="text"><div class="Naglowek"><div class="Tytul">Tytul news'a: <a href="LOL1">Ustawianie szablonu strony</a></div><div class="Data">Data: 05.12.2007</div></div><p>Chcialem .</p><div class="Autor">Autor: <a href="kontakt.html">Marcin </a></div></div><div class="text"><div class="Naglowek"><div class="Tytul">Tytul news'a: <a href="LOL1">Tworzenie Layout'a</a></div><div class="Data">Data: 04.12.2007</div></div><p>Kolejnym</p><div class="Autor">Autor: <a href="kontakt.html">Marcin </a></div></div><div class="text"><div class="Naglowek"><div class="Tytul">Tytul news'a: <a href="LOL1">Projekt Strony</a></div><div class="Data">Data: 03.12.2007</div></div><p>Utworzenie </p><div class="Autor">Autor: <a href="kontakt.html">Marcin </a></div></div> 
				  </div>
				  <div id="Form">
					 	     <div class="Naglowek1"></div>
						     <div class="Naglowek_Logowanie">LOGOWANIE</div>
						     <div class="Naglowek3"></div>
						     <div class="Logowanie"><br /><br />
				     		<form action="panel.php" method="POST"> 	Podaj Login:<br />
							<input class="Pole" type="text" id="Login" name="login" value="Login" /><br />
							Podaj Haslo:<br />
							<input class="Pole" type="password" name="haslo" value="Haslo" /><br />
							<input class="Przycisk" type="submit" value="Zaloguj" /> <input class="Przycisk" type="reset" value="Wyczysc" />
							</form>
							</div>
				</div>
					      	   	
				</div>
	      	   	 <div id="srodek3"></div>

		   </div>
 	      	   <div id="srodek2a">
	      	   	 <div id="srodek1b"></div>
	      	   	 <div id="srodek2b"></div>
	      	   	 <div id="srodek3b"></div>
		   </div>
 	      	   <div id="stopka">
	      	   	 <div id="stopka1"></div>
	      	   	 <div id="stopka2"></div>
	      	   	 <div id="stopka3"></div>
		   </div>
	      </div>
	</body>
</html>
0

Może i dziwne ale działa. U mnie ta to wygląda:

<div>
	<div class="naglowek"></div>
	<div class="srodek">
		<div class="menu"></div>
		<div class="glowna"></div>
	</div>	
	<div class="stopka"></div>
</div>

I dokładnie takimi stylami:

div.srodek {
	width: 100%;
	min-height:300px;
	height: auto;
	overflow:hidden;
}
div.menu {
	background-color:#3333FF;
	width: 28%;
	float: left;
	padding-bottom: 20000px;
	margin-bottom: -20000px;
}
div.glowna {
	background-color:#3333FF;
	width: 71%;
	float: right;
	padding-bottom: 20000px;
	margin-bottom: -20000px;
}

Wszystko załatwiam. Oba div'y (menu i główna) zawsze mają taką samą wysokość. I wynosi ona tyle ile miejsca potrzebuje większy div.

ps. llmucha i m00cha to cały czas ja. :P

0

Ustaw tło dla #srodek (szerokie, z gradientami po bokach), potem zmien to tło tylko w #srodek2 (na to ciemniejsze).

0
nav napisał(a)

Ustaw tło dla #srodek (szerokie, z gradientami po bokach), potem zmien to tło tylko w #srodek2 (na to ciemniejsze).

tak tylko ze chodzi mi o to zeby to jak najmniej wazylo, no ale sprobuje tak jak mowisz.

a moze ktos wie jak zrobic to tak jak mialem w zalozeniach?

1 użytkowników online, w tym zalogowanych: 0, gości: 1