Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Centrowanie dwóch rzędów divów
SpiderPL
post
Post #1





Grupa: Zarejestrowani
Postów: 13
Pomógł: 0
Dołączył: 19.09.2003
Skąd: Ostrów Wlkp.

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

Mam problem z wycentrowaniem divów. Mam dwa rzędy divów i nie jestem w stanie przewidzieć ile ich będzie, czy będzie ich 10, czy może 7 albo 8, albo może tylko 1 albo 3. Chciałbym je wycentrować tak, aby wyglądało to jak na rysunku nr 2, a wychodzi mi jak na rysunku nr 1. Próbowałem już umieszczać je w <div style="text-align:center"> ale to nic nie pomaga. Każdy z divów ma parametr float:left. Męczę się z tym już bardzo długo, szukałem w Googlach ale nic nie znalazłem.

(IMG:http://img223.imageshack.us/img223/8261/zrzut125zx3.png)
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 6)
Lion_87
post
Post #2





Grupa: Zarejestrowani
Postów: 850
Pomógł: 120
Dołączył: 15.02.2007
Skąd: Łódź

Ostrzeżenie: (10%)
X----

Może spróbuj każdy rząd DIVow zamykać w DIVie ze stylem margin:0px auto;
Go to the top of the page
+Quote Post
deeper
post
Post #3





Grupa: Zarejestrowani
Postów: 11
Pomógł: 1
Dołączył: 18.04.2004
Skąd: Gdansk

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

Moze w ten sposob:
[HTML] pobierz, plaintext 
  1. <div style="text-align: center;">
  2.   <div style="display: inline; width: 100px; height: 100px;"> </div>
  3.   <div style="display: inline; width: 100px; height: 100px;"> </div>
  4.   <div style="display: inline; width: 100px; height: 100px;"> </div>
  5.   <div style="display: inline; width: 100px; height: 100px;"> </div>
  6.   <div style="display: inline; width: 100px; height: 100px;"> </div>
  7.   <div style="display: inline; width: 100px; height: 100px;"> </div>
  8.   <div style="display: inline; width: 100px; height: 100px;"> </div>
  9. </div>
[HTML] pobierz, plaintext


Powinno zadzilac.
Niezaleznie od ilosci beda sie ladnie centrowaly jak trzeba

Ten post edytował deeper 4.02.2009, 18:02:15
Go to the top of the page
+Quote Post
SpiderPL
post
Post #4





Grupa: Zarejestrowani
Postów: 13
Pomógł: 0
Dołączył: 19.09.2003
Skąd: Ostrów Wlkp.

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

Wielkie dzięki! O to mi właśnie chodziło! Brakowało "display: inline". Bałem się, że to coś gorszego i że wewnątrz tych divów, które miały być centrowane coś nie gra.
Klikam "Pomógł" i raz jeszcze wielkie dzięki!

Hmm... Działa to w IE, ale Firefox wyświetla mi puste pola. Zerknij na to pod Firefoxem:

[HTML] pobierz, plaintext 
  1. <html>
  2. <head></head>
  3. <body>
  4. <div style="width: 500px; text-align: center">
  5.    <div style="display: inline; width: 120px; height: 90px; background: url(http://i0006.photobucket.com/albums/0006/pbhomepage/Pink%20Panther/th_plainfilmstripcopy-1.jpg) no-repeat; background-position: center center; margin: 3px"></div>
  6.    <div style="display: inline; width: 120px; height: 90px; background: url(http://i0006.photobucket.com/albums/0006/pbhomepage/Pink%20Panther/th_plainfilmstripcopy-1.jpg) no-repeat; background-position: center center; margin: 3px"></div>
  7.    <div style="display: inline; width: 120px; height: 90px; background: url(http://i0006.photobucket.com/albums/0006/pbhomepage/Pink%20Panther/th_plainfilmstripcopy-1.jpg) no-repeat; background-position: center center; margin: 3px"></div>
  8.    <div style="display: inline; width: 120px; height: 90px; background: url(http://i0006.photobucket.com/albums/0006/pbhomepage/Pink%20Panther/th_plainfilmstripcopy-1.jpg) no-repeat; background-position: center center; margin: 3px"></div>
  9.    <div style="display: inline; width: 120px; height: 90px; background: url(http://i0006.photobucket.com/albums/0006/pbhomepage/Pink%20Panther/th_plainfilmstripcopy-1.jpg) no-repeat; background-position: center center; margin: 3px"></div>
  10. </div>
  11. </body></html>
[HTML] pobierz, plaintext


Bez "display: inline" było dobrze i pod IE i pod Firefoxem, tylko że się nie centrowało.
Go to the top of the page
+Quote Post
deeper
post
Post #5





Grupa: Zarejestrowani
Postów: 11
Pomógł: 1
Dołączył: 18.04.2004
Skąd: Gdansk

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

Hmm, no tak wyswietla inline.
ale:
[HTML] pobierz, plaintext 
  1. <div style="width:800px; height: 500px; text-align: center;">
  2.   <div style=" margin: 10px; display: inline; ">
  3.     <img src="http://i0006.photobucket.com/albums/0006/pbhomepage/Pink%20Panther/th_plainfilmstripcopy-1.jpg" alt="">
  4.   </div>
  5.   <div style=" margin: 10px; display: inline; ">
  6.     <img src="http://i0006.photobucket.com/albums/0006/pbhomepage/Pink%20Panther/th_plainfilmstripcopy-1.jpg" alt="">
  7.   </div>
  8.   <div style=" margin: 10px; display: inline; ">
  9.     <img src="http://i0006.photobucket.com/albums/0006/pbhomepage/Pink%20Panther/th_plainfilmstripcopy-1.jpg" alt="">
  10.   </div>
  11. </div>
[HTML] pobierz, plaintext


To dziala. Ale nie zawsze sie chce img miec w srodku.

Z tego co widzialem to juz wiele osob mialo problemy z takimi ustawieniami... i pytaja po forach.
Jak cos wymysle to dam znac
Go to the top of the page
+Quote Post
SpiderPL
post
Post #6





Grupa: Zarejestrowani
Postów: 13
Pomógł: 0
Dołączył: 19.09.2003
Skąd: Ostrów Wlkp.

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

Właśnie na tym problem polega, że chciałem wewnątrz tych divów umieścić zdjęcia, żeby były w ten sposób wykadrowane. Poradzę sobie z tym w inny sposób, bo po prostu przytnę je odpowiednio w PHP przez GD Library, ale nie daje mi spokoju fakt, że nie wiem jak to zrobić inaczej, po prostu w CSS, bo jeśli zechcę załadować to przycięte w CSS zdjęcie na tej samej stronie, jeszcze w innym miejscu, ale tym razem już bez przycięcia, to będę musiał załadować dwa obrazki, zamiast tylko jednego. Tak czy inaczej pomogłeś mi, bo podane przez Ciebie ustawienie divów działa. Jak coś wymyślisz to napisz, bo może ktoś z tego jeszcze skorzysta.
Go to the top of the page
+Quote Post
deeper
post
Post #7





Grupa: Zarejestrowani
Postów: 11
Pomógł: 1
Dołączył: 18.04.2004
Skąd: Gdansk

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

Chcesz wykadrowac zdjecie ?

Sprawdz:
http://www.w3schools.com/CSS/pr_pos_clip.asp

Swoja droga trzeba pamietac ze ladujesz cale zdjecie, co wplywa na wage strony i czas ladowania. Jak jest wiecej zdjec to ma znaczenie.
Ja bym tworzyl miniatury. No ale jak tam kto uwaza.

Ten post edytował deeper 6.02.2009, 14:30:09
Go to the top of the page
+Quote Post
« Następny starszy · CSS · 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 · Linearny+ · Przełącz na: Drzewo

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

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