Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] Wyśrodkowywanie elementu diva, względem innego.
Forum PHP.pl > Forum > Przedszkole
Rewil
15.08.2010, 00:31:56
Potrzebuje wyśrodkować kilka elementów względem diva:"zawartosc_strony".
Gdy ustawie: margin:0 auto; dla niego po prostu nie do końca przesuwa to co potrzebuje, omija elementy z float'em.

http://rewil.pctk.pl/index2.html

Pokolorowałem divy żeby było jaśniejsze o co mi chodzi.
Jasny niebieski ma być wyśrodkowany na tle szarego, mocny niebieski (granatowy) ustawił sie tam gdzie potrzeba, omijając przycisk i właśnie owo jasne niebieskie pole. W woli ścisłości, niebieskie pole to 3 elementowy blok, który jest powielany.

Trochę kodu:
[HTML] pobierz, plaintext 
  1. body{
  2. 	background:url('../grafika/tlo.PNG') repeat-x;
  3. 	background-color: #0891bb;
  4. 	font-family:Arial;
  5. 	font-size: 11px;
  6. 	color:#f4f4f4;
  7. 	padding:0;
  8. 	margin:0;
  9. 	/*overflow-y: scroll;*/
  10. }
  11.  
  12. .zawartosc_strony{
  13. 	padding-left:30px;
  14. 	padding-right:30px;
  15. 	overflow:hidden;
  16. 	background:#cf2cf2;
  17. 	margin:0 auto;
  18. }
  19.  
  20. .obrazek{
  21. 	padding:10px;
  22. 	float:left;
  23. 	background:#2ccfff;
  24. 	margin:0 auto;
  25. }
  26.  
  27. .przycisk_chudy, .przycsik_chudy a:visited{
  28. 	background:url('../grafika/przycisk_chudy.PNG') center no-repeat;
  29. 	display:block;
  30. 	width:123px;
  31. 	height:33px;
  32. 	color:#fff;
  33. 	overflow:hidden;
  34. 	text-decoration:none;
  35. 	line-height:24px;
  36. 	text-align:center;
  37. 	float:left;
  38. }
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. 	<body>
  2. 		<div class="tresc_strony">
  3. 		<div class="tlo_poswiata">
  4.  
  5. 			<div class="szerokosc">
  6. 			<div class="zawartosc_strony">
  7. 					<div id="motto"></div>
  8. 					<div class="widok_miniatur">
  9. 						<div class="obrazek">
  10. 							<div class="obrazek_naglowek"><a href="#">Lakoiczny pokój</a></div>
  11. 							<div class="obrazek_sredni"></div>
  12. 							<a href="#"><img src="multimedia/264x168/1.png" alt="1.png" /></a>
  13.  
  14. 							<div class="obrazek_informacje">Zlecone przez: <span class="obrazek_status">GamingPL.com</span></div>
  15. 							<div class="obrazek_informacje">Wykonano: <span class="obrazek_status">Wykonanie CMS'a, pocięcie strony</span></div>
  16. 							<div class="obrazek_informacje">Status: <span class="obrazek_status">Online</span></div>
  17. 						</div>
  18. 						<div class="obrazek">
  19. 							<div class="obrazek_naglowek">Lakoiczny pokój</div>
  20.  
  21. 							<div class="obrazek_sredni"></div>
  22. 							<img src="multimedia/264x168/1.png" alt="1.png" />
  23. 							<div class="obrazek_informacje">Zlecone przez: <span class="obrazek_status">GamingPL.com</span></div>
  24. 							<div class="obrazek_informacje">Wykonano: <span class="obrazek_status">Wykonanie CMS'a, pocięcie strony</span></div>
  25. 							<div class="obrazek_informacje">Status: <span class="obrazek_status">Online</span></div>
  26. 						</div>
  27.  
  28. 						<div class="obrazek">
  29. 							<div class="obrazek_naglowek">Lakoiczny pokój</div>
  30. 							<div class="obrazek_sredni"></div>
  31. 							<img src="multimedia/264x168/1.png" alt="1.png" />
  32. 							<div class="obrazek_informacje">Zlecone przez: <span class="obrazek_status">GamingPL.com</span></div>
  33. 							<div class="obrazek_informacje">Wykonano: <span class="obrazek_status">Wykonanie CMS'a, pocięcie strony</span></div>
  34.  
  35. 							<div class="obrazek_informacje">Status: <span class="obrazek_status">Online</span></div>
  36. 						</div>
  37. 					</div>
  38. 					<a class="przycisk_chudy" href="#" alt="No co?">Pokaż wszystko</a>
  39. 			</div>
  40. 			</div>		
  41. 		</div>
  42. 		</div>
  43.  
  44. 	</body>
[HTML] pobierz, plaintext
Luneth
15.08.2010, 01:38:00
Ciekawy artykuł o pozycjonowaniu w css: http://kurs.browsehappy.pl/CSS/Position smile.gif
Rewil
15.08.2010, 22:58:52
Cytat(Luneth @ 15.08.2010, 02:38:00 ) *
Ciekawy artykuł o pozycjonowaniu w css: http://kurs.browsehappy.pl/CSS/Position smile.gif

No tak, niby się wydaje że to dość błahy problem. Ale w tym wypadku, to nie chodzi o to że po prostu nie umiem wyśrodkować elementu, tylko o środkowanie elementu z zbiorem divow z float:left;
Div "widok_miniatur" nie potrafi się dostosować do długości tych boxów. (Szary ma miec ta sama wielkosc, co div jasno-niebieski) przez co ten margin nie potrafi go wyśrodkować.
width:-moz-fit-content <- załatwił by sprawę, ale co z innymi przeglądarkami ;>?
Rymar
16.08.2010, 00:03:59
nie wiem czy dobrze zrozumiałem, ale jeśli chcesz mieć te 3 niebieskie divy mieć po środku tego szarego to po prostu daj mu padding-left: 25px; coś koło tego, a jak chcesz to rozwiązać dynamicznie to już założyłem kiedyś taki temat Temat: Div + float + IE, tylko problem jest taki, że nie działa pod IE6 i IE 7.
Rewil
16.08.2010, 00:18:28
No właśnie dynamikę, bo szerokość obliczoną mam że 888px ma mieć by zachować wycentrowanie. Ale nie wiem czy powinno się tak kodować podając dokładne wartości.
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.