Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Środkowanie div
Forum PHP.pl > Forum > Przedszkole
Teppic
30.03.2012, 09:56:52
Mój plik z css:
[PHP] pobierz, plaintext 
  1. *{
  2. margin: 0;
  3. padding: 0;
  4. }
  5.  
  6. html body{
  7. background-color:white;
  8. text-align:center;
  9. margin:0 auto;
  10. }
  11.  
  12. .gora{
  13. border: 2px solid red;
  14. margin: 0 auto;
  15. height: 60px;
  16. width: 300px;
  17. }
  18.  
  19.  
  20. .dol{
  21. border: 2px solid red;
  22. height: 60px;
  23. width: 300px;
  24. }
[PHP] pobierz, plaintext


A to plik index.php:

[PHP] pobierz, plaintext 
  1. <html><head>
  2. <link rel="stylesheet" type="text/css" href="index.css" />
  3. </head>
  4.  
  5. <body>
  6.  
  7. <div class="gora"></div>
  8.  
  9. <div class="dol"></div>
  10.  
  11.  
  12.  
  13. </body>
  14. </html>
[PHP] pobierz, plaintext


W czym problem? Otóż Opera nie środkuje mi diva o nazwie "dol", czyli po prostu ignoruje "text-align" w znaczniku "body". IE8 wszystko cacy!

Tak, wiem muszę nadać parametr "margin: 0 auto" divowi "dol" aby byl na srodku, ale... Ja chcę aby ten dolny div miał powiedzmy margines górny o szerokosci np. 100px a dolny o szerokości 10px. I po zawodach;).

Znalzalem metodę by uzyć dyrektywy "dispalay: inline-block" dla diva "dol" by zostal srodkowany metodą "text-align" ale jestem dociekliwy i chcę wiedzieć czy istnieje bardziej "ładna" metoda;).

No i jeszcze bardziej "brutalny" sposób to danie trzeciego niewidzialnego diva między tym "gora" i "dol" o szerokosci jaka chcę;P

A może istnieje "piękniejszy" sposób?

P.S> Uczę się tego CSS bo chcę to znac na perfekt ale zaczynam tęsknić za czasami tabelek;).
Sky_walker
30.03.2012, 10:00:57
margin: 100px auto 10px auto;

i po problemie smile.gif
(kolejność: góra, prawy, dolny, lewy margines)
phpion
30.03.2012, 10:01:22
Proszę poprawić temat wątku na lepiej opisujący problem. W przeciwnym razie zostanie on zamknięty.
usb2.0
30.03.2012, 10:02:40
e moze pamięć mnie mysli ale każda przeglądarka poza IE, nie wyśrodkuje diva 'dol' , uzywając text-align:center ?
!*!
30.03.2012, 10:13:15
1. text-align jest tylko do tekstu, jak sama nazwa wskazuje
2. użyj position aboslute i relative. http://jsfiddle.net/N4zcH/1/
3. ewentualnie display:table.
Teppic
30.03.2012, 10:16:37
Cytat(Sky_walker @ 30.03.2012, 10:00:57 ) *
margin: 100px auto 10px auto;

i po problemie smile.gif
(kolejność: góra, prawy, dolny, lewy margines)


Nie wiedziałem o tym, serio. Zaraz sprawdzę czy działa. Ahh aż wstyd się przyznać, że człowiek tego nie wie;P

usb2.0: Mi Opera środkuje diva metodą "text-align" ale trzeba mu nadac parametr "display: inline-block" tudzież samo "inline".

Kolejne pytanie: Co zrobić by ten dociekliwy IE własciwie interpretował "border" i nie wliczał go do parametru "width" i "height" bloku?
Sky_walker
30.03.2012, 10:17:56
Cytat(!*! @ 30.03.2012, 10:13:15 ) *
3. ewentualnie display:table.

? arrowheadsmiley.png ?
może po prostu poradźmy mu, żeby zrobił layout na tabelach?

Cytat(Teppic @ 30.03.2012, 10:16:37 ) *
Kolejne pytanie: Co zrobić by ten dociekliwy IE własciwie interpretował "border" i nie wliczał go do parametru "width" i "height" bloku?

Niestety, z tym nie da się nic zrobić. Możesz pokombinować conieco dodając np. jeden div obejmujący ten z borderem i dla niego ustawiać atrybuty
dbając o to, żeby div z borderem wypełniał całość diva obejmującego (np. width: auto; jeśli div obejmujący ma ustawioną szerokość na stałe, a wysokośc zależy od zawartości).
Mam nadzieję, że nie namieszałem za bardzo ;)
!*!
30.03.2012, 10:19:19
Cytat(Teppic @ 30.03.2012, 11:16:37 ) *
usb2.0: Mi Opera środkuje diva metodą "text-align" ale trzeba mu nadac parametr "display: inline-block" tudzież samo "inline".

Skoro zamieniasz go na coś co jest liniowe, a tekst jest, to trudno żeby było inaczej.

Cytat(Teppic @ 30.03.2012, 11:16:37 ) *
Kolejne pytanie: Co zrobić by ten dociekliwy IE własciwie interpretował "border" i nie wliczał go do parametru "width" i "height" bloku?


Komentarz warunkowy dla IE z inną wartością dla width i height

Cytat(Sky_walker)
może po prostu poradźmy mu, żeby zrobił layout na tabelach?


A co jest złego w budowie szablonu przy użyciu display:table? Po to został wymyślony ten parametr.
Sky_walker
30.03.2012, 10:25:11
Cytat(!*! @ 30.03.2012, 10:19:19 ) *
A co jest złego w budowie szablonu przy użyciu display:table? Po to został wymyślony ten parametr.

Display: table został wymyślony do budowy szablonów.
Zaraz spadnę z krzesła.
To tak jakby powiedzieć, że font-weight: bold; został wymyślony do pogrubiania tekstu przy pomocy <em>

Layout budujemy na blokach, nie tabelach zbudowanych z bloków o zmienionych właściowościach.
!*!
30.03.2012, 10:29:30
Cytat(Sky_walker @ 30.03.2012, 11:25:11 ) *
Display: table został wymyślony do budowy szablonów.
Zaraz spadnę z krzesła.
To tak jakby powiedzieć, że font-weight: bold; został wymyślony do pogrubiania tekstu przy pomocy <em>

Layout budujemy na blokach, nie tabelach zbudowanych z bloków o zmienionych właściowościach.


Podstaw sobie poduszkę, bo będzie bolało. A div z tym parametrem to już nie blok? Jak niby chcesz zrobić np. kilka div obok siebie aby miały tą samą wysokość? float + js? I do czego niby używasz display:table?
Teppic
30.03.2012, 10:32:39
A czy można użyć do cięcia layoutu tabel a nie tych stwarzających problemy "div"? Czasami mam wrażenie, że webmasterzy traktują tabele jak zło konieczne, i naprawdę tego nie rozumiem. Przeciez tabelki to fantastyczna ucieczka od dociekliwego IE;P
!*!
30.03.2012, 10:34:48
Tabele są używane do prezentacji danych tabelarycznych i tylko w tym przypadku powinny być wykorzystywane. Szablony robimy na div, które mogą zachowywać się jak tabele (display: table), ale nie mają z nimi nic wspólnego.
Teppic
30.03.2012, 10:39:41
O display:table poczytam troche bo nigdy tego nie uzywalem. Position: absolute i relative też muszę sobie przyswoic bo nie widzialem potrzeby uzywać tego atrybutu.

Co do display: inline-block to nie ma się co kłócić... przeciez ten parametr pozwala jednoczesnie wysrodkowac grupę divów i umiescic je jeden obok drugiego. "Floatów" nie wysrodkujemy jesli się nie mylę;P
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.