Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] jak wysrodkowac div w css?
Forum PHP.pl > Forum > Przedszkole
lnn
3.03.2009, 15:20:39
mam problem, mam pociety layout i chcialbym zrobic zeby byla wysrodkowana i nie wiem jakiego uzyc atrybutu i ew. wartosci? (zdefiniowaane w CSSie)
drugi problem to taki ze chcialbym zeby nie pojawialy sie suwaki w mniejszej rozdzielczosci niz np 1024x1000 (jak zadeklarowana w ponizszym kodzie), jak to zrobic? jaka wartosc podac?
czy jesli wysrodkuje i jako dlugosc i szerokosc podam rzeczywiste wymiary grafiki to czy bedzie ok?
[HTML] pobierz, plaintext 
  1. div.Table_01 {
  2.     position:absolute;
  3.     left:0px;
  4.     top:0px;
  5.     width:1024px;
  6.     height:1000px;
  7. }
[HTML] pobierz, plaintext
Spawnm
3.03.2009, 15:22:40
wyśrodkujesz dając w css margin:0 auto;
wookieb
3.03.2009, 15:23:30
dla ie musi byc jeszcze dla elementu rodzica tego diva
Kod
text-align: center;
drzalek
3.03.2009, 15:24:16
Nie wiem jak tam wygląda cały kod ale środkuje się przy pomocy marginesów 
[HTML] pobierz, plaintext 
  1. div {margin: 0px auto 0px auto;}
[HTML] pobierz, plaintext


co do suwaków, to musisz dać trochę mniej niż 1024 i wtedy powinno być ok. Ja z reguły ustawiam na 950px
Spawnm
3.03.2009, 15:28:47
@drzalek->twój css robi to co mój i Wookieba tongue.gif
po co 2 razy dajesz 0 , dając raz deklarujesz na wszystkie ściany smile.gif
lnn
3.03.2009, 15:32:30
to ja moze wkleje caly kod bo mi cos sie nie wysrodkowuje winksmiley.jpg
chodzi o to ze myslalem ze glowny div bedzie mi srodkowal cala strone (inne divy zawarte w glownym)
[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2.  
  3. </style>
  4.  
  5. </head>
  6. <body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
  7.  
  8. <div class="Table_01" align="center">
  9.     <div class="sdp-22022009-02">
  10.         <img src="images/sdp_22022009_02.jpg" width="513" height="71" alt="">
  11.     </div>
  12.     <div class="sdp-22022009-05">
  13.         <img src="images/sdp_22022009_05.jpg" width="788" height="219" alt="">
  14.     </div>
  15.     <div class="sdp-22022009-06">
  16.         <img src="images/sdp_22022009_06.gif" width="187" height="45" alt="">
  17.     </div>
  18.     <div class="sdp-22022009-08">
  19.         <img src="images/sdp_22022009_08.gif" width="187" height="44" alt="">
  20.     </div>
  21.     <div class="sdp-22022009-09">
  22.         <img src="images/sdp_22022009_09.gif" width="187" height="43" alt="">
  23.     </div>
  24.     <div class="sdp-22022009-10">
  25.         <img src="images/sdp_22022009_10.gif" width="187" height="44" alt="">
  26.     </div>
  27.     <div class="sdp-22022009-11">
  28.         <img src="images/sdp_22022009_11.gif" width="187" height="44" alt="">
  29.     </div>
  30.     <div class="sdp-22022009-14">
  31.         <img src="images/sdp_22022009_14.gif" width="319" height="26" alt="">
  32.     </div>
  33.     <div class="sdp-22022009-17">
  34.         <img src="images/sdp_22022009_17.gif" width="321" height="26" alt="">
  35.     </div>
  36.     <div class="sdp-22022009-21">
  37.         <img src="images/sdp_22022009_21.jpg" width="83" height="83" alt="">
  38.     </div>
  39.     <div class="sdp-22022009-24">
  40.         <img src="images/sdp_22022009_24.gif" width="319" height="26" alt="">
  41.     </div>
  42.     <div class="sdp-22022009-26">
  43.         <img src="images/sdp_22022009_26.gif" width="321" height="26" alt="">
  44.     </div>
  45.     <div class="sdp-22022009-28">
  46.         <img src="images/sdp_22022009_28.gif" width="321" height="26" alt="">
  47.     </div>
  48.     <div class="sdp-22022009-33">
  49.         <img src="images/sdp_22022009_33.jpg" width="83" height="83" alt="">
  50.     </div>
  51.     <div class="sdp-22022009-36">
  52.         <img src="images/sdp_22022009_36.jpg" width="83" height="82" alt="">
  53.     </div>
  54.     <div class="sdp-22022009-39">
  55.         <img src="images/sdp_22022009_39.jpg" width="83" height="83" alt="">
  56.     </div>
  57.     <div style="position: absolute; width: 648px; height: 100px; z-index: 1; left: 24px; top: 351px" id="layer1">
  58.         bla bla bla</div>
  59. </div>
[HTML] pobierz, plaintext

z gory przepraszam za moje ciemniactwo, ale ucze sie i cos stanalem na tym winksmiley.jpg
sowiq
3.03.2009, 15:39:34
No to albo position: absolute, albo chcesz wyśrodkować. Dla div.Table_01 usuń pozycjonowanie, a ustaw tylko width i marginesy jak Ci odpisali koledzy powyżej.
lnn
3.03.2009, 15:48:11
ale to sa poszczegolne elementy lay'a i jak wezme do kazdego oddzielnego diva srodkowanie to mi sie wszystko do srodka zwija ;/
czy jest cos takiego jak div nadrzedny ktory to steruje pozycja wszystkich pozostalych jakby subdivów?
sowiq
3.03.2009, 15:55:20 
[HTML] pobierz, plaintext 
  1. <div style="width: 300px; height: 300px; margin: 0 auto; background-color: #ff0; border: 1px solid #000;">
  2. <div style="width: 100px; height: 100px; background-color: #f00;">drugi div</div>
  3. </div>
[HTML] pobierz, plaintext

Przeanalizuj, dojdź do wniosków i nie zadawaj pytań zanim nie sprawdzisz rozwiązania, które dostałeś na tacy.
lnn
3.03.2009, 16:22:18
ni cholery mi nie wychodzi, jest taki motyw ze grafika ma 950px, i albo musi pozostac na swoim miejscu czyli po lewej stronie, albo przy zmniejszeniu rozdzielczosci ekranu do 1024x768 pojawia sie suwak
jesli biore wysrodkowywanie to nie przesuwa mi sie grafika w divach tylko jedynie text ktory okala glowny div 
[HTML] pobierz, plaintext 
  1. div.Table_01 {
  2.     position:absolute;
  3.     top:0px;
  4.     left: 12.5%;
  5.     width:950px;
  6.     height:650px;
  7. }
[HTML] pobierz, plaintext
Spawnm
3.03.2009, 16:24:10
wywal position : absolute i przeczytaj wszystkie posty z tego tematu.
sowiq
3.03.2009, 16:30:01
Cytat(sowiq @ 3.03.2009, 15:39:34 ) *
No to albo position: absolute, albo chcesz wyśrodkować. Dla div.Table_01 usuń pozycjonowanie, a ustaw tylko width i marginesy jak Ci odpisali koledzy powyżej.


CZYTAJ UWAŻNIE!
lnn
3.03.2009, 16:33:54
problem tkwi w tym ze mam dwa obrazy obok siebie i nie da sie ich wypozycjonowac bez position:absolute; bo inaczej pojawia sie kazda pod soba
sowiq
3.03.2009, 16:44:00
Zadałeś pytanie jak wyśrodkować div - dostałeś pełną odpowiedź.
Proponuję, żebyś jednak pokazał swój kod HTML, CSS i napisał dokładnie co chcesz osiągnąć, bo na forum php.pl przestały ostatnio działać szklane kule.

Cytat(lnn @ 3.03.2009, 16:33:54 ) *
problem tkwi w tym ze mam dwa obrazy obok siebie i nie da sie ich wypozycjonowac bez position:absolute; bo inaczej pojawia sie kazda pod soba
Ale Ty chyba chcesz ustawić div'a, a nie obrazki? Przynajmniej tak napisałeś.
lnn
3.03.2009, 17:46:11
od razu przyznaje sie ze kod jest wygenerowany w photoshopie ja go chcialem zmodyfikowac pod moje oczekiwania

otoz mam taki lay:

znajduje sie on po lewej stronie strony:

chcialbym zeby sie znalazl po srodku niezaleznie od rozdzielczosci ekranu

oto kod: http://transel.net/lenart/forum/kod.txt (bo sie nie zmiescil w tresci winksmiley.jpg
erix
3.03.2009, 18:06:18
Cytat
od razu przyznaje sie ze kod jest wygenerowany w photoshopie ja go chcialem zmodyfikowac pod moje oczekiwania

Przerób go od razu, bo potem będą tylko problemy.

Ale w Twoim wypadku, wrzuć całość w kontener, ustaw mu position: relative i wyśrodkuj właśnie ten kontener.
drzalek
3.03.2009, 21:15:39
Cytat(Spawnm @ 3.03.2009, 15:28:47 ) *
@drzalek->twój css robi to co mój i Wookieba tongue.gif
po co 2 razy dajesz 0 , dając raz deklarujesz na wszystkie ściany smile.gif


Heh wiem, po pierwsze pisałem posta wtedy kiedy Wy (mniej więcej), a po drugie ja tak daję najczęściej smile.gif
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.