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>
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 ?
<div id="srodek">
<div id="srodek1"></div>
<div id="srodek2"></div>
<div id="srodek3"></div>
<div style='clear:both'></div>
</div>
O to chodzi?
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.
#srodek{
overflow: hidden;
}
#srodek1, #srodek2, #srodek3{
padding-bottom: 20000px;
margin-bottom: -20000px;
}
To powinno pomóc. Jeśli dobrze zrozumiałem. :)
to nie zadzialalo, dziwne rozwiazanie oO
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>
jeszcze raz daje linka
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
Ustaw tło dla #srodek (szerokie, z gradientami po bokach), potem zmien to tło tylko w #srodek2 (na to ciemniejsze).
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?
Wyglada, ze tutaj jest takie cus opisane