Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [xhtml] problem z div'ami
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
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:
Cytat
clear: both;
HaRy
niestety ... probowalem juz to, ale nic z tego sad.gif
Dominik
dodaj
Kod
float:left
HaRy
hmm ... ale do czego?
Seth
Pojdzmy na skroty winksmiley.jpg
http://www.inknoise.com/experimental/layoutomatic.php
zalew
Cytat
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
Cytat
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
Cytat
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
Cytat
#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
Cytat
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 winksmiley.jpg
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
Cytat
nie rozumiem czmeu nie wolno - wyjasnij smile.gif

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

Cytat
bede wieczorem chetnie zoabcze co wymodzisz ;D

Dzisiaj juz nie zrobie, odchodze od kompa, 10 godzin to za dlugo winksmiley.jpg
Seth
Cytat

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 smile.gif
http://www.webreference.com/authoring/styl...ayout/advanced/
Seth
Cytat
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'? smile.gif

Cytat
dominik zrobmy inaczej:

http://zalew.com/divtest/

popraw jak umiesz smile.gif

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 winksmiley.jpg ktos napisal na forum keiedys... masz zly dzien - nie prowadz i nie odpowiadaj na posty ;D no ale ten drugi link powinien Ci pomoc smile.gif
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....).
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.