Forum PHP.pl > kwadraciki float:left

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

kr27

14.09.2007, 12:08:47

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

.radex

14.09.2007, 13:03:41

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

no i tak:

Kod

.main div{
margin: 0 auto;
}

.main{

width: 600px;
}

kr27

14.09.2007, 13:13:17

Niestety to rozwiązanie nie działa (sprawdzałem w IE, FF i Opera). Pozdrawiam

piter2k1

14.09.2007, 13:19:20

Dopisz do głównego DIV-a:

text-align: center;

Kisiol_Ent

14.09.2007, 14:26:22

[HTML] pobierz, plaintext 
<div style="border:solid 1px red;padding:20px;width:600px">
 
  <div style="margin: 0 auto; background-color: green; display: table;">
 
    <div style="width:35;height:30;border:solid 1px red; display: table-cell;">1</div>
    <div style="width:30;height:30;border:solid 1px gray; display: table-cell;">2</div>
    <div style="width:30;height:30;border:solid 1px red; display: table-cell;">3</div>
    <div style="width:50;height:30;border:solid 1px blue; display: table-cell;">4</div>
    <div style="width:30;height:30;border:solid 1px yellow; display: table-cell;">5</div>
 
    <div style="clear:both"></div>
 
  </div>
 
</div>
 
<!-- (C) 2007 by Kisiol_Ent. -->
<!-- Jezel chcesz uzywac tego kodu chtml musisz dodac ten komentarz! -->
<!-- jezeli komentarz ci niepotrzebny oplac abonament roczny 10 zl i mozesz -->
<!-- sie pozbyc tego komentarza -->
[HTML] pobierz, plaintext

kr27

14.09.2007, 16:07:35

Ale niestety rozwiązanie Kisiol_Ent`a w IE nie działa

Chyba bede musiał zamiast DIV display: table dać zwykla tabele

gekon

14.09.2007, 22:58:21

Teoretycznie tak:

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

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

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.