Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [W3C] Jak wysrodkowac strone zgodnie z walidatorem ?
Forum PHP.pl > Forum > Po stronie przeglądarki
free
Stosuje dotychczas kod z HTML 4.01:
  1. <div align="center"> ... </div>

Ale przy XHTMLu jest to błędne podejście jak więc prawidłowo wyśrodkować ?
gekon
Nie ma różnicy czy HTML czy XHTML - i tak jest źle. Ważne czy Strict czy Transitional. http://riddle.jogger.pl/2006/04/19/wszystk...trowaniu-w-css/
tommy4
style="margin: 0 auto;"
barat
Cytat(tommy4 @ 29.05.2007, 17:24:05 ) *
style="margin: 0 auto;"

Oprócz margin na auto (jak top i bottom chcesz mieć jakieś inne to chodzi o to, że margin-left i margin-right musisz ustawić na auto) musisz jeszcze zrobić mały trick dla przeglądarki Bill'a smile.gif
Dla body ustaw text-align: center (w CSS) a dla głównej warstwy 9kontenera) text:align:left (czy jaki tam cchesz).
Po prostu IE centruje DIV-y po text-align smile.gif
ano
Identyczny problem jest poruszany w FAQ'u!
Temat: CSS i XHTML Najczesciej zadawane pytania
punkt 2.
barat
Ale nie było info o tym co dodałem (text-align:center dla ułomnego Internet Explorer'a) smile.gif
babejsza
Nie trzeba stosować text-align: center aby wyśrodkować div'a dla IE. Wystarczy samo margin: 0 auto;
revyag
@babejsza - mylisz się. Trzeba. Centrując kontener dla body musi być ustawione text-align:center.
gekon
W Standarts Mode nie musi, w Quirks Mode musi. Myślę, że dyskusja wyczerpana.
babejsza
@revyag - tak jak napisał @gekon, więc się nie myliłem. Podałem pół prawdy, ale celowo bo nie widzę potrzeby stosowania Transistional w jakimkolwiek projekcie, co prowadzi do konkluzji, którą napisałem już w poprzednim poście, czyli NIE TRZEBA stosować text-align: center.
revyag
Przyznaję że nie sprawdziłem tego.
Ale w kwestii sprostowania, chodzi o to że jeśli coś będziesz miał coś przed doctype, albo nie będzie go, wtedy strona się nie wycentruje pod ie.
Natomiast w przeciwnym wypadku, to czy jest strict czy trasitional nie ma znaczenia bo i tak będzie wycentrowana.
babejsza
hmmm, z punktu widzenia moich przeglądarek winksmiley.jpg poniższy kod wszędzie wygląda tak samo. I bez znaczenia jest tu czy doctype będzie

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html lang="pl">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. body, div, p, img, h1, h2, h3, h4, ul, li {padding: 0; margin: 0; border: none}
  8. div {width: 300px; margin: 0 auto; border: 1px solid #000}
  9. </style>
  10. </head>
  11. <body>
  12. <p>aaa</p>
  13. <div>test</div>
  14. <p>bbb</p>
  15. </body>
  16. </html>


I powie Ci, że sam jestem lekko tym zaskoczony, bo wcześniej byłem przekonany że tak jak pisał @gekon w QM nie może to działać. Co do czegoś przed doctype to przecież umieszczanie czegoś w prologu jest niezgodne ze specyfikacją i nie ma tu znaczenia czy będzie to w QM czy nie.

Ciągle jestem zaskoczony tym, że w QM margin: 0 auto mi działa. Why? Dałbym sobie wcześniej rękę odjąć za to iż to nie było możliwe ... smile.gif
Zajec
Cytat(revyag @ 30.05.2007, 18:58:11 ) *
Przyznaję że nie sprawdziłem tego.
Ale w kwestii sprostowania, chodzi o to że jeśli coś będziesz miał coś przed doctype, albo nie będzie go, wtedy strona się nie wycentruje pod ie.
Natomiast w przeciwnym wypadku, to czy jest strict czy trasitional nie ma znaczenia bo i tak będzie wycentrowana.

Jak nie będzie poprawnego DOCTYPE to i tak się wszysto posypie (width, height, border, margin, padding)
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.