Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> kwadraciki float:left
kr27
post
Post #1





Grupa: Zarejestrowani
Postów: 27
Pomógł: 0
Dołączył: 20.03.2007

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

Witam.
Mam następujące kwadraciki na stronie:

CODE
<div style="border:solid 1px red;padding:20px;width:600px">

<div style="width:30;height:30;float:left;border:solid 1px red">1</div>
<div style="width:30;height:30;float:left;border:solid 1px red">2</div>
<div style="width:30;height:30;float:left;border:solid 1px red">3</div>
<div style="width:30;height:30;float:left;border:solid 1px red">4</div>
<div style="width:30;height:30;float:left;border:solid 1px red">5</div>
<div style="clear:both"></div>

</div>


Czy jest mozliwosc, aby kwadraty w DIV glownym byly wycentrowane (a
nie zaczynaly sie od lewej)? DIV glowny bedzie mial zawsze 600px,
natomiat ilosc wewnetrzych kwadracikow bedzie rozna.

Pozdrawiam i dziekuje z gory
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 6)
.radex
post
Post #2





Grupa: Zarejestrowani
Postów: 1 657
Pomógł: 125
Dołączył: 29.04.2006

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

daj do tego głównego div'a class="main"

no i tak:

Kod
.main div{
margin: 0 auto;
}

.main{

width: 600px;
}


--------------------
blog | Tadam — minutnik do Pomodoro na Maka :)
Go to the top of the page
+Quote Post
kr27
post
Post #3





Grupa: Zarejestrowani
Postów: 27
Pomógł: 0
Dołączył: 20.03.2007

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

Niestety to rozwiązanie nie działa (sprawdzałem w IE, FF i Opera). Pozdrawiam
Go to the top of the page
+Quote Post
piter2k1
post
Post #4





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 6.02.2007

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

Dopisz do głównego DIV-a:

text-align: center;
Go to the top of the page
+Quote Post
Kisiol_Ent
post
Post #5





Grupa: Zarejestrowani
Postów: 146
Pomógł: 0
Dołączył: 15.01.2007

Ostrzeżenie: (60%)
XXX-- 

[HTML] pobierz, plaintext 
  1. <div style="border:solid 1px red;padding:20px;width:600px">
  2.  
  3.   <div style="margin: 0 auto; background-color: green; display: table;">
  4.  
  5.     <div style="width:35;height:30;border:solid 1px red; display: table-cell;">1</div>
  6.     <div style="width:30;height:30;border:solid 1px gray; display: table-cell;">2</div>
  7.     <div style="width:30;height:30;border:solid 1px red; display: table-cell;">3</div>
  8.     <div style="width:50;height:30;border:solid 1px blue; display: table-cell;">4</div>
  9.     <div style="width:30;height:30;border:solid 1px yellow; display: table-cell;">5</div>
  10.  
  11.     <div style="clear:both"></div>
  12.  
  13.   </div>
  14.  
  15. </div>
  16.  
  17. <!-- (C) 2007 by Kisiol_Ent. -->
  18. <!-- Jezel chcesz uzywac tego kodu chtml musisz dodac ten komentarz! -->
  19. <!-- jezeli komentarz ci niepotrzebny oplac abonament roczny 10 zl i mozesz -->
  20. <!-- sie pozbyc tego komentarza -->
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
kr27
post
Post #6





Grupa: Zarejestrowani
Postów: 27
Pomógł: 0
Dołączył: 20.03.2007

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

Ale niestety rozwiązanie Kisiol_Ent`a w IE nie działa sad.gif
Chyba bede musiał zamiast DIV display: table dać zwykla tabele

Ten post edytował kr27 14.09.2007, 16:09:53
Go to the top of the page
+Quote Post
gekon
post
Post #7





Grupa: Zarejestrowani
Postów: 614
Pomógł: 7
Dołączył: 10.11.2003
Skąd: Rzeszów/Kraków

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

Teoretycznie tak:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html lang="pl">
  3. <head>
  4. 	<title>CSS</title>
  5. 	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6. 	<style type="text/css">
  7. 		#main { border: 1px solid #FF0000; padding: 20px; width: 600px; background-color: #00F000;
  8. 		/*mozesz to usunac jezeli nie chcesz zbye byl wysrodkowany*/
  9. 		margin: 0 auto;
  10. 		}
  11. 		ul { list-style: none; margin: 0 auto; padding: 0; text-align: center; }
  12. 		li { display: inline; padding: 0.5em; margin: 0 0.5em; border:1px solid #FF0000; }
  13. 	</style>
  14. </head>
  15. <body>
  16. 	<div id="main">
  17. 		<ul>
  18. 			<li>1</li>
  19. 			<li>2</li>
  20. 			<li>3</li>
  21. 			<li>4</li>			
  22. 		</ul>		
  23. 	</div>
  24. </body>
  25. </html>
[HTML] pobierz, plaintext


ale nie wiem dokładnie do czego jest Ci to potrzebne, więc nie mogę wymyślić niczego lepszego.


--------------------
Pokaż kod = Pokaż CAŁY kod, najlepiej działający na jakimś serwerze.
Fanatycy | glazar.info | semantyka | HTML i XHTML FAQ
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 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: 21.08.2025 - 04:59
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn