centrowanie diva

[zYm3N]

Pod IE ramka na przyciskach nie jest równomierna: pod przyciskiem jest cieńsza niż nad. Pod ff jest dobrze.

Mały błąd? Fakt, ale ile jest w większych serwisach....

Na IE powstało bardzo dużo hacków. zresztą na inne przeglądarki też.. No cóż, tabelki mimo, że nienowoczesne, to raczej wszędzie działają tak samo ;>

pzdr.

[qwertyuiop]

czy da sie wycentrowac diva, ale samego diva bo <div align="center"> centruje tez tekst.

jest jakis sposob na wycentrowanie tylko diva ?

moze blache pytanie ale z css dopiero zaczynam

div {

width:780px;

margin-left:auto;

margin-right:auto;

text-align:left;

}

powinno zadzialc

[piotrek]

Powyższy przykład to grzech śmiertelny wysyłania XHTML 1.1 jako "text/html"

dzięki za info, dopiero zaczynam zabawę z xhtml

Poza tym widzę, że nie raczej nie pisałeś tego z palca

a niby po czym to widzisz?

[zYm3N]

Poza tym widzę, że nie raczej nie pisałeś tego z palca

a niby po czym to widzisz?

Szklana "kólka" (bo koło, kolisty) :>

[Hellz]

Bo kto z palca wpisze coś takiego:

padding: 0px 0px 0px 0px;

margin: 0px 0px 0px 0px;

zamiast

margin: 0; padding: 0;

Piotrek, poprostu, tak jak słusznie zauważyłeś, dopiero zaczynasz zabawę z xhtml, dlatego jeszcze mogłeś nie spotkać hardkorowych przykładów, kiedy stosowanie haków jest niezbędne. Tyle

Ps. Dodam jeszcze, że w innych miejsach kodu używałeś margin: 0; , stąd mój wniosek o działaniu jakiegoś programu mieszającego

[piotrek]

Bo kto z palca wpisze coś takiego: padding: 0px 0px 0px 0px;

ja, i napewno masa innych osób, które prowadzą spore ilości testów z odpychaniem czy odstępami i nie chce im się pisać z palca tak:

padding-top: 0px;

padding-right: 0px;

padding-bottom: 0px;

padding-left: 0px;

w innych miejsach kodu używałeś margin: 0; , stąd mój wniosek

dzięki za dawkę śmiechu na noc

[Hellz]

Piotrek, muszę Cię chyba uświadomić

padding: 0px 0px 0px 0px;

to to samo, co

padding: 0;

W tym kodzie używałeś najkrótszego i chyba najbardziej prawidłowego sposobu, oraz tego, który albo jest wynikiem działania jakiegoś programu, albo jest objawem masochizmu Pozdrawiam

[piotrek]

jest objawem masochizmu

oczywiście, jeśli chce się zmienić tylko jedną, dwie wartości aby dokonać zman w wyglądzie to wpisywanie na chybił trafił wartości w Xpx Xpx Xpx Xpx dla kogoś kto nie potrafi spamiętać kierunków będzie masochizmem... również pozdrawiam

P.S. Ty piszesz o jednym (efekcie końcowym zoptymalizowanego kodu CSS) a ja o drugim (czyli wygodzie w prowadzeniu prac nad layoutem)... więc daruj sobie proszę sarkastyczne uświadamiania bo są zbędne

[zero3]

dla kogoś kto nie potrafi spamiętać kierunków

otóż to ja dłubię w css od dawna ale wciąż nie potrafię zapamiętać kolejności

z pomocą przychodzi zwykle htmldog

[Hellz]

Łatwo zapamiętać - pierwsze jest od 'top', a potem zgodnie z kierunkiem wskazówek zegara

P.S. Ty piszesz o jednym (efekcie końcowym zoptymalizowanego kodu CSS) a ja o drugim (czyli wygodzie w prowadzeniu prac nad layoutem)... więc daruj sobie proszę sarkastyczne uświadamiania bo są zbędne

Piotrek, sam podałeś link do tej strony jako przykład. Poza tym uważam, że o wiele czytelniej jest, gdy od razu, z odległości metra od monitora widać, że margin dla danego diva jest równy 0, a nie 0px 0px 0px 0px. Dla mnie czytelny kod jest podstawą podczas pracy przy jakimkolwiek layu czy skrypcie php, można oczywiście pisać sobie więcej i jeżeli jest to dla Ciebie pomocne, to proszę bardzo. Jeżeli moje "sarkastyczne uświadamianie" - napisane z przymróżeniem oka, tak bardzo Cię zabolały, to wybacz. Być może jest to efekt twojej wypowiedzi w temacie, w którym jeszcze Ci trochę brakuje do mistrzostwa, a pisanej w tonie "wszystko wiem i wcale że nie". Pozdrawiam

[piotrek]

Ciekawe z której wypowiedzi wziąłeś to "wszystko wiem"... ale jeśli czyjeś odmienne zdanie właśnie tak interpretujesz to nic Ci na to nie poradzę.

Zauważ że moje "wcale że nie" tyczy się Twojego ogólnego stwierdzenia, że trzeba przyzwyczaić się do robienia dwóch wersji strony a to daleko odbiega od prawdy. Choćby strona https://demo.otwarty.pl w lauoucie "night motion" gdzie nie ma żadnej różnicy pomiędzy FF, Opera a IE. Strona https://demo.layout4.otwarty.pl/ z mojej winy różni się tylko 1 pixelowym odstępem ramki dolnej kategorii w IE a Operą i FF co zauważył zYm3N.

Ok, sa to proste layouty, nie przeczę (choć ich nie widziałem) że poziom skomplikowania Twoich projektów (że musisz mieć te dwie wersje strony aby wyświetlała się poprawnie w FF, Opera i IE) stoi na daleko bardziej zaawansowanym poziomie niż te przykładowe dwa moje.

Wracając do sedna ile takich projektów layoutów wymaga dwóch wersji strony 1%? gdzie po prostu nie da się inaczej - Hellz to są tylko wyjątki.

P.S. Jeśli układ strony ma być uzależniony od wielkości otwartego okna (czego unikam jak ognia) zawsze możesz dodać wyciąganie wielkości tegóż otwartego okna za pomocą javascript, stosownie przeliczać i przekazywać je do width i heigth poszczególnych tabel, divów, paragrafów...

Nie rozumiem też po co męczysz się samemu z zagadnieniem skoro możesz pokazać przykład konkretnego elementu stwarzającego Ci problem, to może ktoś na forum znajdzie na niego rozwiązanie czy hack

[Hellz]

Zauważ że moje "wcale że nie" tyczy się Twojego ogólnego stwierdzenia, że trzeba przyzwyczaić się do robienia dwóch wersji strony a to daleko odbiega od prawdy.

Nie zgodzę się. Sam w swojej stronie nieświadomie użyłeś jednej z technik, która zresztą była powodem założenia tego tematu. Użycie text-align: center; dla body w kombinacji z margin: 0 auto; to nic innego, jak zrobienie dwóch wersji dla różnych przeglądarek. IE 6.0, FF i Opera poradziłyby sobie bez text-align: center; ale nie IE 5.5 i musisz zrobić drugą wersję css, jednak tym razem tego nie ukrywasz, gdyż akurat to rozwiązanie nie przeszkadza innym przeglądarkom.

Bardzo częstym przykładem zastosowania hacka jest min-height. Masz stronę, i potrzebujesz, żeby jej częśc zawierająca text miała przynajmniej np. 400px wysokości. Niestety, IE nie obsługuje min-height, więc jest konieczne zastosowanie hacka. Nie sposób obejść tego inaczej. Nie jest to jakiś superwydumany przykład tylko wzięty z codziennej praktyki webmasterskiej. Jestem gotów się założyć, że zdecydowanie więcej, niż 1% witryn zbudowanych na css i xhtml używa takiego rozwiązania.

Mówisz o możliwości przeliczania dzięki Javie - ok, ale jeżeli jakaś przeglądarka ma ją wyłączoną, to co wtedy ? Lay się posypie, czy... przygotujesz drugą wersję strony, na wypadek gdyby java nie działała ?

Możemy ciągnąć tą dyskusję w nieskończoność, jednak nadal będę obstawał przy swoim i jako osoba mająca prawdopodobnie nieco większe doświadczenie w robieniu layów na xhtml i css uważam, że stosowanie różnych trików jest nieodłącznym elementem tej zabawy. Oczywiście da się bez nich zrobić stronę.. można także zrobić samochód bez migaczy, bo po co mu one... jak będzie jeździł tylko po prostej drodze bez zakrętów ?

[piotrek]

przygotujesz drugą wersję strony, na wypadek gdyby java nie działała ?

Nie wiem, nie spotakałem sie z takim problemem, ale raczej pójdę na łatwiznę i przygotuję detekcję javascript i alert o braku możliwości wyświetlenia strony. Jesli Internaucie będzie zależało na zobaczeniu treści uruchomi javascript.

Masz stronę, i potrzebujesz, żeby jej częśc zawierająca text miała przynajmniej np. 400px wysokości. Niestety, IE nie obsługuje min-height, więc jest konieczne zastosowanie hacka.

Nie rozumiem, ale IE obsługuje height:400px i nie przeszkadza jej obecność min-height:400px, pokaż konkrenty przykład żebym zrozumiał.

ale nie IE 5.5

Nie przesadzajmy z tym dostosowywaniem się wstecz. Jeśli bardzo zależy Ci na danym projekcie dasz alert - "aby strona wyświetlała się poprawnie pobierz i zainstaluj najnowszą wersja przeglądarki IE, albo lepiej pobierz i zainstaluj FF", jeśli Internaucie bedzie bardzo zależało aby obejrzeć Twoją treść zastosowałby się do Twojej sugestii instalacji nowej wersji szczególnie jeśli dopiszesz że nowe wersje sa poprawione.

że stosowanie różnych trików jest nieodłącznym elementem tej zabawy.

ale co do tego nie mam wątpliwości, a w necie dostępnych jest sporo tricków i hacków pozwalających na zastosowanie jednego jednego arkusza css i uzyskanie strony identycznie wyglądającej w FF, Opera i IE bo o tym przecież jest ten wątek, prawda?

[Hellz]

Widzisz, może się tutaj nieco różnimy. Ja wolę pobluźnić jak szewc 2 dni (jak robię laya często włączam muzę na 70% mocy, żeby rodzina nie słuchała tych wiązanek ), ale za to wiem, że zdecydowana większość internautów, nawet te 4,3% korzystające z IE 5.x będzie miała komfort oglądania strony. Alert oczywiście jest rozwiązaniem, ale mnie, jako użytkownika nic bardziej nie złości, jak konieczność dodatkowego instalowania czegokolwiek lub nie możność skorzystania z jakiejś witryny, bo wchodzę pod FF pod Linuxem, a twórca olał tą grupę osób...

Teraz na przykładzie, jak wygląda min-height.

https://www.toya.net.pl/~hellzt/demo/demo1.html - tak wygląda zastosowanie haka, aby było ok pod 3 wiodącymi przeglądarkami, chodzi o to, by div miał przynajmniej 400px wysokości, a przy tym mógł się dowolnie wydłużać, wraz z wlaniem contentu

https://www.toya.net.pl/~hellzt/demo/demo2.html - unikamy właśnie takiej sytuacji, czyli zwężenia diva gdy contentu jest za mało

https://www.toya.net.pl/~hellzt/demo/demo3.html - rozwiązanie zgodne ze standardami, jednak nie obsługiwane przez IE, na FF i Operze będzie wyglądało poprawnie. Dlatego istnieje konieczność zastosowania hacka, jak w pierwszym przykładzie.

[piotrek]

Wybacz ale dalej nie rozumiem, zrobiłem ten sam przykład strony z takim zapisem CSS który przynajmniej dla mnie jest o niebo czytelniejszy - https://temp.webwweb.pl/css/hellz.htm - czy ta strona różni się czymś w FF, IE i Opera?

Chyba wiem w czym problem - być może polega on na tym ze to co Ty uważasz za hack albo trick ja przyjmuję za coś całkowicie naturalnego... z czego korzysta się codziennie w celu osiągnięcia podstawowego "cross browser display" czy jak mu tam.

moim zdaniem hacki, tricki i inne czary mary zaczynają się np. tu https://www.jakpsatweb.cz/css/css-vertical-...r-solution.html

P.S. 1 Tu jest jeszcze jeden przykład: https://temp.webwweb.pl/css/hellz2.htm w którym pozbyłem się klasy content, doświadczenie z ładowania się stron zbudowanych na tabelach, gdzie powinno się unikać zamykania całości w jedną dużą tabelę, sugeruje aby w przypadku divów robić analogicznie jesli nie ma innych specjalnych wymagań.

P.S. 2. wytlumacz mi jeszcze co przemawia za używaniem id zamiast class? i jaki tu ma za sens stosowanie min-height skoro trzy omawiane przeglądarki rozumieją height: ? chętnie zobacze problem na bardziej złożonym przykładzie

P.S. 3

Widzisz, może się tutaj nieco różnimy. Ja wolę pobluźnić jak szewc 2 dni

widzisz, a ja wolę pieprznąć daną robotą w kąt na dwa dni aby siąść do niej potem z nowymi pomysłami i zapałem

P.S. 4 sorka za aż tyle P.S. ów