Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [css] Wyśrodkowywanie elementu diva, względem innego., margin:0 auto
Rewil
post 15.08.2010, 00:31:56
Post #1





Grupa: Zarejestrowani
Postów: 175
Pomógł: 0
Dołączył: 19.09.2009

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

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
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 4)
Luneth
post 15.08.2010, 01:38:00
Post #2





Grupa: Zarejestrowani
Postów: 95
Pomógł: 7
Dołączył: 16.07.2007
Skąd: Gorzów Wielkopolski

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

Ciekawy artykuł o pozycjonowaniu w css: http://kurs.browsehappy.pl/CSS/Position smile.gif


--------------------
"It's always darkest before the dawn."
Go to the top of the page
+Quote Post
Rewil
post 15.08.2010, 22:58:52
Post #3





Grupa: Zarejestrowani
Postów: 175
Pomógł: 0
Dołączył: 19.09.2009

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

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 ;>?
Go to the top of the page
+Quote Post
Rymar
post 16.08.2010, 00:03:59
Post #4





Grupa: Zarejestrowani
Postów: 33
Pomógł: 2
Dołączył: 18.09.2008

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

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.
Go to the top of the page
+Quote Post
Rewil
post 16.08.2010, 00:18:28
Post #5





Grupa: Zarejestrowani
Postów: 175
Pomógł: 0
Dołączył: 19.09.2009

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

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.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · 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 Wersja Lo-Fi Aktualny czas: 6.07.2025 - 23:41
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn