Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS]Środkowanie div
Teppic
post
Post #1





Grupa: Zarejestrowani
Postów: 44
Pomógł: 0
Dołączył: 12.09.2008

Ostrzeżenie: (0%)
-----


Mój plik z css:
  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. }


A to plik index.php:

  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>


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;).

Ten post edytował Teppic 30.03.2012, 10:12:08
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
!*!
post
Post #2





Grupa: Zarejestrowani
Postów: 4 298
Pomógł: 447
Dołączył: 16.11.2006

Ostrzeżenie: (0%)
-----


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.

Ten post edytował !*! 30.03.2012, 10:15:34
Go to the top of the page
+Quote Post
Sky_walker
post
Post #3





Grupa: Zarejestrowani
Postów: 214
Pomógł: 23
Dołączył: 26.09.2005

Ostrzeżenie: (0%)
-----


Cytat(!*! @ 30.03.2012, 10:13:15 ) *
3. ewentualnie display:table.

? (IMG:style_emoticons/default/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 ;)

Ten post edytował Sky_walker 30.03.2012, 10:21:27
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 9.10.2025 - 17:50