Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Samo rozciągające się divy
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
Tho
Chcę by były wstawiane automatycznie, oboksiebie(dopłuki nie przekroczy ich łączna szerokość 900 px) i by same się rozciągały wprost proporcjonalnie do tekstu wewnątrz nich.

Jak np tutaj, takie kolumny, tylko więcej i nie na określony z góry rozmiar a samo rozciągające. Wiem że bardzo łatwo można załatwić to przez table, ale czy to będzie poprawne?
erix
Semantycznie nie, ale przez CSS możesz nadać wyświetlanie tabelkowe elementom.
Tho
Ale właśnie, jak to zrobić bez zbędnego bałaganu w kodzie?
Sephirus
Jeżeli chodzi Ci o to by te dwa bloki po prostu miały zawsze tą samą wysokość równą sobie niezależnie od tego w którym content jest dłuższy to można zrobić taki trick w css.

Przykład:

  1. <div style="overflow:hidden;">
  2. <div style="width:500px; float:left; padding-bottom:10000px; margin-bottom:-10000px">
  3. ...
  4. </div>
  5. <div style="width:300px; float:left; padding-bottom:10000px; margin-bottom:-10000px">
  6. ...
  7. </div>
  8. </div>


Kontener, w którym są kolumny musi mieć overflow na hidden żeby nie pokazywał nie potrzebnie tych 10K pikseli ;P I na czym to polega? Proste dajesz kolumnom padding dolny na 10K pikseli więc je o tyle przedłużasz, potem dajesz im margin dolny na tyle samo na minusie. Są dłuższe ale padding i margin się nawzajem znoszą i kontener wtedy ustala swoją wysokość na wysokość najdłuższej kolumny. A że te paddingi w kolumnach je przedłużają wygląda to tak jakby zawsze miały tą samo wysokość niezależnie od tego, która jest dłuższa i ile ich jest wink.gif

HTH! wink.gif
kilab
Tak z ciekawości zapytam. A jeśli wysokość strony przekroczyłaby 10k px? Profilaktycznie ustawić na 30k px lub więcej?
!*!
Nie. Kolega Sephirus uczy złych nawyków których nie powinno się nigdy stosować. A efekt można uzyskać tak http://jsfiddle.net/Q48Bv/
Sephirus
@up Może i uczę złych nawyków ale fakt faktem one działają wink.gif I nie trzeba do tego używać HTML5 bo nie każdy go jeszcze używa - poza tym zmiana typu wyświetlania elementu na "tabelkowy" też chyba super nawykiem nie jest wink.gif
!*!
Cytat(Sephirus @ 27.08.2011, 15:31:28 ) *
I nie trzeba do tego używać HTML5 bo nie każdy go jeszcze używa


To niech zacznie wink.gif poza tym nie pisałem, że trzeba użyć html5, podałem link z przykładem bo sam w nim pracuje i nie widzę problemu ,aby zamienić to na div jak już tak bardzo ktoś jest antyhtml5. http://jsfiddle.net/Q48Bv/1/

Cytat(Sephirus @ 27.08.2011, 15:31:28 ) *
poza tym zmiana typu wyświetlania elementu na "tabelkowy" też chyba super nawykiem nie jest wink.gif


Dlaczego? Niby od czego one są? Mylisz pojęcia i masz dziwne skłonności z cyklu "tabela, imitujące tabele == fe". Jak chcesz wyświetlić dane tabelaryczne to też nie użyjesz tabel bo kiedyś słyszałeś że są one "fe" odnośnie budowy szablonu i przełożyłeś to na wszytko? biggrin.gif
Sephirus
Przede wszystkim - jeżeli choć troszkę w tym siedzisz to wiesz doskonale co to jest chociażby otarcie o kompatybilność przeglądarek na różnych systemach itd... to powinieneś wiedzieć, że chciał-nie chciał są jeszcze ludzie na tej planecie, którzy używają przeglądarek, w których zmiana display na jakiś element tabelkowy po prostu nie działa... Nie jestem przeciwnikiem tabelek i doskonale wiem o co Ci chodzi z tym ich nie lubieniem smile.gif Jeżeli robisz coś dla siebie lub pracujesz w firmie , w której non-stop klepie się to samo lub po prostu idziesz za każdą nowością jaka się pojawi w dziedzinie HTML i masz w nosie "starych użytkowników" na których można zarobić to w twoja sprawa smile.gif Niestety w realnym świecie jak się samemu projektuje i wykonuje się w firmie projekty na cały świat zarabiające jakąś normalną kasę to - wierz mi - liczy się to by temu 0,00001% użytkownikom, którzy używają np. IE 6 czy 7 (to nie mit - tego się jeszcze używa) dać szanse w pełni skorzystać z tego co robimy bo mamy z tego kasę smile.gif

Tak w ogóle to postaraj się też w życiu kierować jakimiś zasadami smile.gif skoro nie masz swoich przestrzegaj tych z forum wink.gif I szanuj wszystkich jego użytkowników. Bo twój arogancki ton (choćbyś był ode mnie 20 lat starszy w co baardzo wątpie) wskazuje na narcyza w wieku 15 lat wink.gif

Musisz też zrozumieć to, że jak ktoś w tym siedzi naprawdę długo to ma też nawyki związane z używaniem metod/haczyków/tricków, które kiedyś były konieczne aby wszystko zawsze i wszędzie wyglądało i działało tak samo ;P

P.S. Przedstawiona przeze mnie metoda nie jest oczywiście wymyślona przeze mnie smile.gif Wymyślił i opisał ją ktoś, kto zna się na tym 100 razy lepiej od nas obu razem wziętych - może z nim podyskutujesz wink.gif zapytaj wujka Google smile.gif

Pozdrawiam smile.gif

Rid
I tutaj Sephirus ma rację -tylko najnowsze przeglądarki poprawnie obsługują HTML5 np.IE9 czy firefox od 4.0 wzwyż, ie8 i ,firefox 3.5 już nie.
Nie każdy ma ochotę instalować nowsze przeglądarki ze względu na przyzwyczajenia lub na wymagania sprzętowe-niektórzy po prostu mają słabsze komputery i używają starsze przeglądarki-czy takie osoby należy olewaćquestionmark.gif?Sądzę, że nie.
Poza tym,rzesze ludzi korzysta z telefonów komórkowych,do przeglądania stron a nie wszystkie telefony wspierają tą technologię,tak więc też pooglądane.
!*!
Jeśli już wspierałbym przeglądarki które tego nie obsługują, w tym wypadku IE6 i IE7 to użyłbym dla nich expressions, W porównaniu do Twojej metody, exp. jest nieinwazyjne i również można zapisać je w css. A na necie jest kilka przykładów z ich wykorzystaniem. pierwszy lepszy

Nie ma znaczenia CZY używasz metod/haczyków/tricków tylko JAK ich używasz i czy nie są one inwazyjne.

Rid - przeczytaj jeszcze raz co zostało napisane w tym temacie, a później porównaj to z tym co napisałeś.
Sephirus
OK tu się z Tobą w pełni zgadzam - to jest najlepsze chyba rozwiązanie. Co do inwazyjności to zależy od konkretnego rozwiązania aplikacji, w której jakiś pomysł ma być użyty. Ludzie na forum pytają o coś, szukają pomocy ale w 99,9% przypadków nie wiesz naprawdę do czego im to i jak mają zamiar to zastosować. "Pomocni" dzielą się swoją wiedzą, pokazują różne opcje rozwiązania danego problemu. Ja podałem A, Ty podałeś B itd.. itp.. to już do tego co pytał należy wybór optymalnej dla jego potrzeb opcji - nie podoba mi się jedynie czasem ton niektórych wypowiedzi okazujący coś nietaktownego dla kogoś kto próbuje komuś jednak pomóc :/

Wydaje mi się, że to kończy temat wink.gif !*! - respect wink.gif
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.