Zaleznosci miedzy elementami div

[Gość]

witam
mecze sie z tym probleme juz kawal czasu i nie moge znalezc rozwiazania, w jaki sposob uzaleznic wysokosc jednego diva od drugiego
div#all
{
width: 779px;
margin: auto;
background-color: #EAEAEA;
border-bottom-color:#990000;
border-right: none;
border-left: none;
}

oraz

div#srodek
{
width: 428px;
border: 2px dotted #FFFFFF;
position:absolute;
margin: 200px 200px 0 130px;
}

tak wyglada css a umieszczenie divow jest takie:

<div id="all">
<div id="srodek">
.......
</div>
</div>

problem polega na tym, jak zmusic div#all zeby mial dlugosc taka jak div#srodek, bo w takiej postaci jak jest dluzszy tekst w div#srodek to wystaje on poza div#all. bez ustwienia na sztywno height dla div#all jest niewidoczny wogle

co trzeba ustawic zeby mialy taka sama dlugosc ale zmieniajaca sie w zaleznosci od ilosci tekstu w div#srodek???

[Zajec]

Zrezygnuj z absolutnego pozycjonowania?

[blitz]

ale wtedy rozleci mi sie uklad strony

[Zajec]

Kolejny co myśli, że każdy ma tu zaczarowaną kulę do wróżenia, brr.

adres strony

[blitz]

sorki juz podaje
http://www.ols.vectranet.pl/~blitz/proj ... zasady_gry

chodzi o to ze to niebieskie tlo nie rozciaga sie razem z tym pomaranczowym i czy jest jakis sposob zeby to naprawic?

[Zajec]

Bo widzisz, trochę źle pojąłeś istotę XHTML. Nie chodzi tu o to, aby co do px ustawiać absolutnie elementy. Należy je raczej elegancko układać jeden po drugim, zalecając im jakieś konkretne ułożenie.

Na początek wyrzuć position: absolute z #logo - zostanie Ci wtedy:

Kod: Zaznacz cały

div#logo {height: 100px;}

Potem wykasuj 100px górnego marginesu dla #banner i #dane. Otrzymasz:

Kod: Zaznacz cały

div#banner {position: absolute; width: 579px; height: 90px; background-color:#85A4CC; margin: 0;}
div#dane {height: 90px; background-color:#8FCC84; margin: 0 0 0 579px; padding: 0; position: absolute; width: 198px;}

Teraz wyrzuć position:absolute z #banner i z #dane, wywal ich boczne marginesy oraz nadaj float. Otrzymasz:

Kod: Zaznacz cały

div#banner {float: left; width: 579px; height: 90px; background-color:#85A4CC; margin: 0; }
div#dane {float: right; width: 198px; height: 90px; background-color:#8FCC84; margin: 0; }

Jak zrobisz tyle daj znać, a pomogę z resztą. Nie chcę robić tego dla siebie nie mając pewności, że zostanie wykorzystane

[blitz]

ok
poprawione, stronka ta sama co wczesniej

[Zajec]

OK, a co z tym niebieskim polem, nad menu i treścią? Planujesz je w przyszłości zagospodarować jakoś? Bo nie wiem czy wstawiać Ci dam div'a zapasowego czy nie

[blitz]

tak to niebieskie pole bedzie zagosopdarowane, logo prawdopodobnie

[Zajec]

OK, u siebie już wszystko przerobiłem, teraz to tylko zastosować


Przed <div id="linki"> dodaj taki kod:

Kod: Zaznacz cały

<div id="miejsce">logo</div>

<div id="right">
   Lorem ipsum
   <div id="kalendarz"></div>
   <div id="tabela">tabela ligi</div>
   <div id="wmpd"><a href="http://www.wmpd.com.pl" target="_blank"><img src="wmpd.gif" alt="Glówny sponsor" /></a></div>
   <div id="osw"><a href="http://www.osw.olsztyn.pl" target="_blank"><img border="0" src="szkola.gif" alt="Olsztynska Wyzsza Szkola" /></a></div>
   <div id="polsport"><a href="http://www.polsport-tours.pl" target="_blank"><img border="0" src="polsport.gif" alt="Polsport" /></a></div>
</div>

Całą lewą część (czyli linki, linki2, xhtml,css) obejmij dodatkowym div'em <div id="left">


Z końca strony wyrzuć wszystkie te kalendarz, tabela, wmpd, osw, polsport (bo przeniosłeś je wyżej)


Do CSS dodaj 3 linijki, oraz zedytuj #srodek:

Kod: Zaznacz cały

#miejsce { clear: both; float: left; background: white; width: 560px; height: 150px; }
#right { float: right; background: yellow; width: 215px; }
#left { clear: left; float: left; width: 100px; background: cyan; }
#srodek { float: left; width: 428px; /*background-image: url(bg_02.jpg);*/  /*border: 2px dotted #FFFFFF;*/ background-color: #CC6600;border-left: 2px solid #000099; border-right: 2px solid #000099;}

Zrób sobie na wszelki wypadek kopię obecnego pliku i nawet jeśli moje zmiany coś popsują, to podejdź do tego spokojnie i zostaw ten szablon zepsutym. Jutro wejdę i go poprawię.

[blitz]

wprowadzilem poprawki, troszke sie popsulo, ale zostawilem zebys zobaczyl jak teraz wyglada

[radek.kaba]

Validator prawdę Ci powie
- masz niedomkniętego diva.

[blitz]

Validator prawdę Ci powie
- masz niedomkniętego diva.

dzieki za wskazowke ale niestety nie to jest powodem, bo po naprawieniu nadal jest zle

[Zajec]

Dobrze jest Zapomniałeś tylko dodać

Kod: Zaznacz cały

<div id="miejsce">miejsce</div>

przed otworzeniem <div id="right">.


Jak wstawisz ten div we wskazane miejsce to pozbądź się jeszcze absolute z #linki, #linki2, #xhtml, #css, #kalendarz, #tabela, #wmpd, #osw, #polsport oraz usuń im te kosmiecznej wielkości marginesy


Reszta to już będzie tylko dopasowanie szerokości odpowiednich.

[blitz]

juz prawie dobrze, pozostaly tylko jeszcze 2 problemy, jeden to w sumie ten glowny tzn. zobacz ze niebieskie tlo elementu div#all nie wydluza sie razem z elementem div#srodek, teraz ma przypisana stala wartosc height zebys mogl zobaczyc, ale jak dam auto to znika wogle to tlo, i to jest glowny problem jak to naprawic, a 2 to stopka teraz dziwnie sie uklada

[Zajec]

1) Nie umieszcaj stopki wewnątrz <center>

2) Zmień CSS stopki, tak aby miała
clear: both;
oraz dodaj jaj marginesy
margin: 0 auto;

3) Umieść stopkę wewnątrz div'a "all"

4) Usuń definicję height z #all


Końcówka kodu po zmianie powinna wyglądać tak:

Kod: Zaznacz cały

<p>* Coraz częściej w rugby grają kobiety i dziewczęta. Także w Polsce pojawiły się chętne do podjęcia treningów w tej długo uznawanej za typowo męską dyscyplinie sportu. W odmianie siedmioosobowej od kilku lat rozgrywane są już Mistrzostwa Kraju, a w poprzednim roku dziewczyny zainaugurowały występy na arenie europejskiej.</p>
</div>


<div id="stopka">Copyrights 2005 &copy; Rugby Olsztyn designed by Radoslaw. Hosted by ... All rights reserved</div>

</div>

</body>

[blitz]

dzieki wielkie juz wszystko jest oka