[xhtml] problem z div'ami Opcje

[HaRy]

mam duzy div wewnatrz ktorego znajduje sie kilka innych - chce zeby ten zewnetrzny stal sie tlem na tego co jest w srodku ale rozciaganie sie zawartosci nie powoduje rozciagania sie tego zewn. diva

Kod

<div id="tlo" style="background-color:FFFFFF>>



<div id="szpalta1> costam </div>

<div id="szpalta2> costam </div>

<div id="szpalta3> costam </div>



</div>

czy jest jakis sposob zeby div "tlo" objal swoim obszarem wewnetrzne divy ?

[Seth]

Wyedytuj temat i dodaj przedrostek w [ i ].
Te div'y chcesz miec pod soba czy obok siebie ?

[HaRy]

div'y te maja byc obok siebie.

problem dokladnie jest z http://chojnice.pl/new

chodzi o to, by to "niebieskawe" tlo "rozciagnelo" sie na wysykosc warstw, które w nim sa.[/url]

[Seth]

daj na dole (pod 3ma divami) jeden div z CSSem:

clear: both;

[HaRy]

niestety ... probowalem juz to, ale nic z tego

[Dominik]

dodaj

Kod

float:left

[HaRy]

hmm ... ale do czego?

[Seth]

Pojdzmy na skroty
http://www.inknoise.com/experimental/layoutomatic.php

[zalew]

dodaj

Kod

float:left

mam ten sam problem co hary i tez dodalem to i nic nie dalo... div w ktorym sa same divy nie ma wysokosci.... :/ dziwnie strasznie sie zachowuje.. jak sie wpisze jakas zawartosc poza do diva glownego to i tak rozciagnie sie tylko na wysokosc tej zawartosci... reszta divow contentowych jest przerozczysta :(

[Dominik]

hmm ... ale do czego?

[xml:1:62c1f3338c]<div id="szpalta1> costam </div>
<div id="szpalta2> costam </div>
<div id="szpalta3> costam </div>[/xml:1:62c1f3338c]

[zalew]

dominik moze jasniej.. wlasnie dodalem float do swoich conentow i tez nic mi z tego nie wyszlo...

[Dominik]

dominik moze jasniej.. wlasnie dodalem float do swoich conentow i tez nic mi z tego nie wyszlo...

No jak? Takie cos Ci nie dziala:
[xml:1:44f4b3e347]<div style="float:left;background-color:red"> costam </div>
<div style="float:left;background-color:green"> costam </div>
<div style="float:left;background-color:blue"> costam </div>[/xml:1:44f4b3e347]

[HaRy]

hmm ... no u mnie to nie dziala ... http://chojnice.pl/new

[zalew]

dominik zrobmy inaczej:

http://zalew.com/divtest/

popraw jak umiesz :)

#list to calosc czyli to co zaiwera te mniejsze - powinien miec gruba kreske nad i pod lista malych divov
.projects to klasa malych - pozycje wygenerowane dynamicznie, ale zapisalem tu statica dla latwej zabawy... maja ten sam szblon wiec ew. replace w edytorze nie bedzie robil problemu...

[Dominik]

#list to calosc czyli to co zaiwera te mniejsze - powinien miec gruba kreske nad i pod lista malych divov
.projects to klasa malych

A mozesz screena jeszcze dac, bo przyznam sie ze chyba nie rozumiem do konca jak to wszytko ma wygladac.

[zalew]

tak byc powinno
http://zalew.com/divtest/divtest.jpg (niska jakosc jpeg zeby szybko bylo)
a tak jest http://zalew.com/divtest/ :)

u mnie widac warstwe bo nacechowalem ja borderem dolnym i gornym, a haremu chodzi o tlo - problem ten sam... warstwa ktora jest 'matka' dla zbioru kilku (u mnie kilkunastu) innych warstw - nie rozciaga sie, zupelnie jakby te divy w srodku nie byly dla niej zawartoscia...
mozna inne rozwiazania wymyslac, ale przeciez chodzi o rozwiklanie zagadki ;)

[Dominik]

warstwa ktora jest 'matka' dla zbioru kilku (u mnie kilkunastu) innych warstw - nie rozciaga sie, zupelnie jakby te divy w srodku nie byly dla niej zawartoscia...

No tak, teraz dopiero zrozumialem chcecie zrobic imitacje tabeli w blokach... To i wcale sie nie dziwie dlaczego Wam nie wychodzi... bo tak sie nie robi
Szczegolnie u Ciebie nie wolno mieszac float z pozycjonowaniem.
Ale OK. Mam screena posratam sie podeslac inne rozwiazanie kore bedziee ygladac tak jak na screennie.

[zalew]

nie rozumiem czmeu nie wolno - wyjasnij :)
jako inne rozwiazanie mozna dac puste div'y na gorze i dole czy cos ale chcialem koniecznie tak :>
bede wieczorem chetnie zoabcze co wymodzisz ;D

[Dominik]

nie rozumiem czmeu nie wolno - wyjasnij

Bo blok ma inne wlasciwosci niz komorka (ewentualnie wiersz).

bede wieczorem chetnie zoabcze co wymodzisz ;D

Dzisiaj juz nie zrobie, odchodze od kompa, 10 godzin to za dlugo

[Seth]

Pojdzmy na skroty http://www.inknoise.com/experimental/layoutomatic.php

Tam jest narzedzie on-line do tworzenia bazy w divach do layoutu. Czy to za malo ?!

[zalew]

seth wybacz ale nie interesuje mnie narzedzie ktore za mnie pouklada divy... zrobie kazdy layout samemu, jak nie ta metoda to inna, po prostu trafilem na zagwostke i zastanawia mnie przyczyna nie dzialania i jej rozwiazanie.. nastepna rada bedzie 'zlec to komus'? :)
dziekuje za link ale nie skorzystam.. lubie miec napisane po swojemu..

[Seth]

zalew: doskonale Cie rozumiem ale zauwaz, ze patrzac na zrodlo masz obraz tego jak to ma wygladac.
No ale jezeli nie chesz gotowca to polecam ten tutorial
http://www.webreference.com/authoring/styl...ayout/advanced/

[Seth]

seth wybacz ale nie interesuje mnie narzedzie ktore za mnie pouklada divy... zrobie kazdy layout samemu, jak nie ta metoda to inna, po prostu trafilem na zagwostke i zastanawia mnie przyczyna nie dzialania i jej rozwiazanie.. nastepna rada bedzie 'zlec to komus'?

dominik zrobmy inaczej:

http://zalew.com/divtest/

popraw jak umiesz

Heh widze pewna nie konsekwencje... ale coz dzisiaj sie juz nie odzywam w tym temacie bo mam zly dzien ;P

[zalew]

seth czepiasz sie, zreszta tego sie spodziewalem... chyba mnie nie uwazasz za na tyle tepego ze nie potrafie zrobic takeigo layoutu? zapytalem o problem z ta konkretnie metoda... zrobienie paska o goru i dolu to jest tysiac sposobow .. zaciekawil mnie problem - dociekliwosc to chyba zaleta programisty/kodera...
masz zly dzien :)
pozdrawiam

[Seth]

Ok... sorki ktos napisal na forum keiedys... masz zly dzien - nie prowadz i nie odpowiadaj na posty ;D no ale ten drugi link powinien Ci pomoc

[zalew]

spoko,tx :)
pozdr

[Dominik]

CSS:

Kod

#gora { background-color:#D8DACD; position:absolute; left:5px; top:5px; width:500px; height:50px}

#srodek {position:absolute; left:5px; top:55px; background-color:#D8DACD; height:auto; width:500px;    

border-top: 8px solid #717171; border-bottom: 8px solid #717171;}

.male {float:left; width:33%}

.male, .jeden {border-bottom: 1px solid #688C92}

.jeden {float:right; width:34%;}

XHTML:[xml:1:c04cfdd4d0]<div id="gora">tu chyba jakis tekst</div>
<div id="srodek">
<div class="male">1</div>
<div class="male">2</div>
<div class="jeden">3</div>
<div class="male">1</div>
<div class="male">2</div>
<div class="jeden">3</div>
<div class="male">1</div>
<div class="male">2</div>
<div class="jeden">3</div>
<div class="male">1</div>
<div class="male">2</div>
<div class="jeden">3</div>
</div>[/xml:1:c04cfdd4d0]
Oczywiscie musisz troche pobawic sie w wyglad, zeby zaczelo wygladac tak samo.
Powyzej jeden ze sposobow "najlatwiejszy" to znaczy taki w ktorym nie trzeba sie bawic w "mierzenie". Jesli wymagasz czegos wiecej to obawiam sie ze trzeba bedzie sie pobawic w "pozycjonowanie" i w "mierzenie". Tego drugiego Ci nie podaje bo po pierwsze zawsze bedzie to inaczej (wiec prawdopodobienstwo ze akurat trafie w to co chcesz jest male) a po drugie jest to zmienne wiec trudno napisac cos co bedzie sie wraz z contentem musialo zmieniac. Jednak mysle ze sam z tym sobie poradzisz - bo sprowadza sie to do czegos na wzor ukladania puzzli. Ewentualnie sposob trzeci - fixed, ktory tez nie podaje bo IE tego nie obsluguje (mozna ewentualnie zastosowac JS ale chyba nie tedy droga....).