centrowanie diva

[Hellz]

Teraz wlej do swojego przerobionego przykładu 100 akapitów tekstu. Gdy masz ustawione height, to div w FF i Operze się nie wydłuży Chodzi tutaj o minimalną wysokość, ale nie chcemy jej ograniczać. Tutaj jest cała istota przykładu, nie umieściłem tego w xhtml, bo wydawało mi się, że wspomniałem o tym w poście.

Edit: Tak to wyglądałoby u Ciebie https://www.toya.net.pl/~hellzt/demo/demo4.html.

Ten lay nie był przygotowywany od podstaw, jest to wycinek z czegoś o wiele bardziej skomplikowanego, chodzi o oddanie istoty min-height. Div content był stosowany w innym celu w pełnej wersji Jednak po co 3 razy używać margin: 0 auto; jak można zamknąć to w jednym divie i kontrolować w jednym miejscu ? Gdy np. zmienię zdanie i zamist do środka będę chciał wszystko dać np. na prawo to zmienię tylko tutaj.

Id jest stosowane wtedy, gdy element występuje na stronie tylko raz. Np. div z topem laya zawsze występuje tylko raz, więc styluję go poprzez id. Natomiast klasy są przydatne wtedy, gdy mamy kilka elementów o tym samym stylu np. komórek tabeli. To jest jedyna praktyczna różnica. Można wszystko zrobić przez class, ale dla mnie kod jest czytelniejszy wtedy, gdy unikalne elementy są stylowane przez id, a powtarzalne przez class.

[piotrek]

Hellz a naprawdę nie jest czytelniejszy taki zapis?

.middle { width: 747px; background:#ffff00; min-height: 400px; _height: 400px; margin: 0 auto; }

wciąż mamy jeden i ten sam zapis CSSa a strona wyświetla się poprawnie we wszystkich przeglądarkach

Może jest to (jakieś) hackowanie ale nie jest to dla mnie przygotowywanie drugiej wersji css dla osiągnięcia zgodności. Czekam na taki przykład gdzie się nie da załatwić jednym i tym samym zapisem CSS wszystkich trzech przeglądarek

przykłady:

https://temp.webwweb.pl/css/hellz.htm

https://temp.webwweb.pl/css/hellz_a.htm

https://temp.webwweb.pl/css/hellz2.htm

https://temp.webwweb.pl/css/hellz2_a.htm

jak można zamknąć to w jednym divie i kontrolować w jednym miejscu ?

i czekać aż za jednym zamachem wyświetli się cała strona zamiast pozwolić na błyskawiczne załadowanie się nagłówka przed np. ciężkim body a na koniec stopki? Czy aby nie działa to tak?

Gdy np. zmienię zdanie i zamist do środka będę chciał wszystko dać np. na prawo to zmienię tylko tutaj.

Słaby argument, wątpię abyś budował złożony serwis w HTML'u. Jak wiesz CSS pozwala na działanie zarówno arkusza z pliku zewnętrznego wraz ze stylami osadzonymi... w stylu osadzonym wprowadzasz po prostu wcześniej zdeklarowaną zmienną np. $float i po kłopocie - zmieniasz układ kiedy chcesz. To rozwiązanie pozwala nawet na to aby Internauta decydował czy chce mieć Twoją stronę wyświetlaną po lewej, centralnie czy po prawej w zależności od nastroju.

Id jest stosowane wtedy, gdy element występuje na stronie tylko raz[...]

wtedy też, jeśli używasz GetElementById funkcja ta ma więcej roboty

można wszystko zrobić przez class, ale dla mnie kod jest czytelniejszy

I tu koło się zamyka i wracamy tu do zapisu w postaci Xpx Xpx Xpx Xpx, do którego byłeś łaskaw się przyczepić. Zanim zrobisz to ponownie zauważ, że wiele stosowanych przez Ciebie rozwiązań inni uznają za bezsensowne lub nie do końca zasadne.

[Hellz]

Piotrze, muszę Cię zmartwić, ale twoja modyfikacja nie jest poprawna i validator wywala błąd. Natomiast sposób, który ja przedstawiam jest zgodny i ze standardami i z przeglądarkami i to jest taka subtelna różnica.

i czekać aż za jednym zamachem wyświetli się cała strona zamiast pozwolić na błyskawiczne załadowanie się nagłówka przed np. ciężkim body a na koniec stopki? Czy aby nie działa to tak?

Moim zdaniem nie ma to żadnego znaczenia, gdyż na współczesnym sprzęcie nie będzie to zupełnie odczuwalne. Nie mam ciężkich body, gdyż jest tam tylko i wyłącznie text, bez zbędnych pierdół.

Słaby argument, wątpię abyś budował złożony serwis w HTML'u.

Jasne że można, tylko tutaj jest ta subtelna różnica - Ty wrzucasz css w kod strony, a ja w plik css. Mój styl jest w cache przeglądarki, a twój jest ładowany za każdym razem i zżera transfer, łącze itp.

dzięki czemu jeśli używasz GetElementById ma funkcja ta ma więcej roboty

Nie pamiętam, kiedy po raz ostatni użyłem JavaScript w mojej stronie, prawdopodobnie było to ok 4 lata temu. Nie mam tego problemu

I tu koło się zamyka i wracamy tu do zapisu w postaci Xpx Xpx Xpx Xpx, do którego byłeś łaskaw się przyczepić. Zanim zrobisz to ponownie zauważ, że wiele stosowanych przez Ciebie rozwiązań inni uznają za bezsensowne lub nie do końca zasadne.

Piotrze, przejrzyj sobie różne przykłady w Internecie, książki o css i zobacz, jakie sposoby stosują sami twórcy html i css. Dlaczego np. Zeldman stosuje na swojej witrynie id ? Coś w tym musi być, nie sądzisz ?

Na koniec - spróbuj zrobić po swojemu takie rozwiązanie. Jak osiągniesz wszystkie założenia autorów będę pełen podziwu. https://www.brunildo.org/test/lrfc.html

[piotrek]

validator wywala błąd.

Wiem, widziałem ale nie spodziwam się większych problemów niz brak etykietki CSS VALID w związku z tym.

Ty wrzucasz css w kod strony

nie, generalnie staram się trzymać go w zewnętrznym pliku więc tu nie ma problemu. W https://demo.layout4.otwarty.pl jest to nieszczęście że CSS ładowany jest z bazy ale w nowej wersji skryptu otwarty.pl mini CSS jest już w osobnym pliku

Ty wrzucasz css w kod strony, a ja w plik css

jak wyżej, natomiast nic nie stoi na przeszkodzie łączenia klas z zewnętrznego pliku ze stylami osadzonymi np. w divach gdzie wartości deklarowane są np. w PHP albo JavaScript

Nie mam ciężkich body,

Ok, ale nie tylko sprzęt z którego oglądasz strony jest ważny, czasem przeciążony jest apache, czasem mysql. Ty nie masz ciężkiego body, ktoś inny ma i co wtedy?

Nie pamiętam, kiedy po raz ostatni użyłem JavaScript

A ja pamiętam, jeszcze wczoraj się bawiłem łączeniem JavaScript z możliwościami PHPowego GD. Coś wspaniałego.

Piotrze, przejrzyj sobie różne przykłady w Internecie[...]

Nie przekonasz mnie że jeśli coś działa poprawnie we wszystkich przeglądarkach należy z tego zrezygnować (owszem można poszukiwać rozwiązań) tylko dlatego że nie przechodzi poprawnej validacji

spróbuj zrobić po swojemu takie rozwiązanie

dobra, pod warunkiem że Ty sprawisz że tekst w DIVie będzie wycentrowany w pionie i będzie się validował i znajdziesz lepszą metodę na wyświetlanie topu w układzie: lewe bg inne | centralny np. obraz | prawe bg inne a wszystko miałoby się tak rozciągać jak w moich dwóch przyładach https://demo.otwarty.pl i https://demo.layout4.otwarty.pl

[Hellz]

Wiem, widziałem ale nie spodziwam się większych problemów niz brak etykietki CSS VALID w związku z tym.

Tak, tutaj się różnimy znacznie. Mnie chodzi o to, by robić strony poprawnie od strony kodu, jak i od strony merytorycznej - wykorzystywać elementy języka zgodnie z ich przeznaczeniem. Można przecież zrobić laya na tabelkach i poza brakiem etykietki też nie będzie żadnej różnicy. Mało tego, praktycznie wszystkie duże firmy webmasterskie tak robią, a gdy pokaże się im Css Zen Garden, to kopara w dół... Uważam, że warto się męczyć, choćby dla poczucia, że można zrobić stronę o idealnym kodzie. Poza tym, z dużym prawdopodobieństwem mogę przypuszczać, że następne wersje przeglądarek będą tak samo interpretować mój kod, a zatem oszczędzi mi to roboty w przyszłości.

jak wyżej, natomiast nic nie stoi na przeszkodzie łączenia klas z zewnętrznego pliku ze stylami osadzonymi np. w divach gdzie wartości deklarowane są np. w PHP albo JavaScript

Można, ale czy to jest dobre ? Korzysta z tego min. phpBB i strasznie mnie to denerwowało. Po co obciążać php dodatką robotą, skoro można coś zrobić raz na poziomie css i xhtml? Tutaj też mamy różne spojrzenia na tą sprawę.

A ja pamiętam, jeszcze wczoraj się bawiłem łączeniem JavaScript z możliwościami PHPowego GD. Coś wspaniałego.

I pewnie dlatego mamy tak różne podejścia do tematu Ja patrzę z perspektywy webmastera, gdy robię stronę. W momencie przygotowywania laya całość skryptu php jest już dawno przetestowana i ukończona. Oddzielam to od siebie, jak białko i żółtko przy robieniu ciasta

Nie przekonasz mnie że jeśli coś działa poprawnie we wszystkich przeglądarkach należy z tego zrezygnować (owszem można poszukiwać rozwiązań) tylko dlatego że nie przechodzi poprawnej validacji

Jak wyżej - inna filozofia robiebia stron. Jednak idąc dalej tym torem, po co się w ogóle męczyć w divy ? O wiele łatwiej i pewniej zrobić stronę na tabelach, a przy odpowiedniej ich konstrukcji można uzyskać prawie tak samo ciekawe efekty jak w wypadku div + css. Ja chcę tworzyć perfekcyjny, poprawny kod. Chyba na skutek programowania w php, gdzie nie można się pomylić nawet przecinkiem. Dlaczego mój kod html ma być błędny i zmuszać przeglądarki do swojej interpretacji błędu ?

dobra, pod warunkiem że Ty sprawisz że tekst w DIVie będzie wycentrowany w pionie i będzie się validował i znajdziesz lepszą metodę na wyświetlanie topu w układzie: lewe bg inne | centralny np. obraz | prawe bg inne a wszystko miałoby się tak rozciągać jak w moich dwóch przyładach https://demo.otwarty.pl i https://demo.layout4.otwarty.pl smile.gif

Jak będę miał wolną chwilę, to nie ma sprawy

Jednak sam podawałeś rozwiązanie pierwszego problemu jako przykład hacka Zamień wszystkie klasy korzystające np. z _position na * html body .klasa { position i będzie poprawnie działać i validować się

Wydaje mi się, że dalsze odbijanie piłeczki nie ma już sensu, bo poprostu różnimy się znacznie filozofią robienia stron www. Dzięki za dyskusję, pozdrawiam

[piotrek]

Przeglądałem serwis który podałeś wyżej - bardzo interesujący i napewno będzie źródłem wiedzy dla mnie i wielu osób czytających ten wątek.

Zamień wszystkie klasy korzystające np. z _position na * html body .klasa { position i będzie poprawnie działać i validować się

Od tego w sumie zaczęła się dyskusja więc pozwolę sobie zadać Ci jesze jedno pytanie: czy zabieg ten, będzie wg Twojego punktu widzenia robieniem drugiej wersji strony?

Dzięki za dyskusję

wzajemnie

[Hellz]

Od tego w sumie zaczęła się dyskusja więc pozwolę sobie zadać Ci jesze jedno pytanie: czy zabieg ten, będzie wg Twojego punktu widzenia robieniem drugiej wersji strony?

Tak, gdyż kod ma 2 wersje: normalną, dla przeglądarek poprawnie interpretujących większość CSS .klasa { kod } oraz wykorzystującą pewne właściwości IE, * html body .klasa { kod }. IE ignoruje pierwsze rozwiązanie, a pozostałe przeglądarki rozwiązanie drugie. Dlatego też uważam, że są to 2 wersje strony. Pozdrawiam

[piotrek]

Dlatego też uważam, że są to 2 wersje strony.

Dość dziwne jak na mój gust przekonanie, teraz ciekaw jestem jeszcze jednego czy to tylko Twoje zdanie czy stosowanie tego typu "tricków / hacków" w całej społeczności webmasterów nazywane jest budowaniem "dwóch wersji strony".