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

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
- Teppic   [CSS]Środkowanie div   30.03.2012, 09:56:52
- - Sky_walker   margin: 100px auto 10px auto; i po problemie (ko...   30.03.2012, 10:00:57
|- - Teppic   Cytat(Sky_walker @ 30.03.2012, 10:00...   30.03.2012, 10:16:37
|- - !*!   Cytat(Teppic @ 30.03.2012, 11:16:37 )...   30.03.2012, 10:19:19
|- - Sky_walker   Cytat(!*! @ 30.03.2012, 10:19...   30.03.2012, 10:25:11
|- - !*!   Cytat(Sky_walker @ 30.03.2012, 11:25...   30.03.2012, 10:29:30
- - phpion   Proszę poprawić temat wątku na lepiej opisujący pr...   30.03.2012, 10:01:22
- - usb2.0   e moze pamięć mnie mysli ale każda przeglądarka po...   30.03.2012, 10:02:40
- - !*!   1. text-align jest tylko do tekstu, jak sama nazwa...   30.03.2012, 10:13:15
|- - Sky_walker   Cytat(!*! @ 30.03.2012, 10:13...   30.03.2012, 10:17:56
- - Teppic   A czy można użyć do cięcia layoutu tabel a nie tyc...   30.03.2012, 10:32:39
- - !*!   Tabele są używane do prezentacji danych tabelarycz...   30.03.2012, 10:34:48
- - Teppic   O display:table poczytam troche bo nigdy tego nie ...   30.03.2012, 10:39:41

« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 11.10.2025 - 17:43
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn