Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS] jak wysrodkowac div w css?
lnn
post
Post #1





Grupa: Zarejestrowani
Postów: 361
Pomógł: 11
Dołączył: 17.12.2008
Skąd: LU

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

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
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 16)
Spawnm
post
Post #2





Grupa: Moderatorzy
Postów: 4 069
Pomógł: 497
Dołączył: 11.05.2007
Skąd: Warszawa
wyśrodkujesz dając w css margin:0 auto;
Go to the top of the page
+Quote Post
wookieb
post
Post #3





Grupa: Moderatorzy
Postów: 8 989
Pomógł: 1550
Dołączył: 8.08.2008
Skąd: Słupsk/Gdańsk
dla ie musi byc jeszcze dla elementu rodzica tego diva
Kod
text-align: center;


Ten post edytował wookieb 3.03.2009, 15:31:11
Go to the top of the page
+Quote Post
drzalek
post
Post #4





Grupa: Zarejestrowani
Postów: 170
Pomógł: 18
Dołączył: 6.03.2007

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

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
Go to the top of the page
+Quote Post
Spawnm
post
Post #5





Grupa: Moderatorzy
Postów: 4 069
Pomógł: 497
Dołączył: 11.05.2007
Skąd: Warszawa
@drzalek->twój css robi to co mój i Wookieba (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)
po co 2 razy dajesz 0 , dając raz deklarujesz na wszystkie ściany (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
lnn
post
Post #6





Grupa: Zarejestrowani
Postów: 361
Pomógł: 11
Dołączył: 17.12.2008
Skąd: LU

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

to ja moze wkleje caly kod bo mi cos sie nie wysrodkowuje (IMG:http://forum.php.pl/style_emoticons/default/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 (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

Ten post edytował lnn 3.03.2009, 15:33:10
Go to the top of the page
+Quote Post
sowiq
post
Post #7





Grupa: Zarejestrowani
Postów: 1 890
Pomógł: 339
Dołączył: 14.12.2006
Skąd: Warszawa

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

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.

Ten post edytował sowiq 3.03.2009, 15:40:12
Go to the top of the page
+Quote Post
lnn
post
Post #8





Grupa: Zarejestrowani
Postów: 361
Pomógł: 11
Dołączył: 17.12.2008
Skąd: LU

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

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?
Go to the top of the page
+Quote Post
sowiq
post
Post #9





Grupa: Zarejestrowani
Postów: 1 890
Pomógł: 339
Dołączył: 14.12.2006
Skąd: Warszawa

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

[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.
Go to the top of the page
+Quote Post
lnn
post
Post #10





Grupa: Zarejestrowani
Postów: 361
Pomógł: 11
Dołączył: 17.12.2008
Skąd: LU

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

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
Go to the top of the page
+Quote Post
Spawnm
post
Post #11





Grupa: Moderatorzy
Postów: 4 069
Pomógł: 497
Dołączył: 11.05.2007
Skąd: Warszawa
wywal position : absolute i przeczytaj wszystkie posty z tego tematu.
Go to the top of the page
+Quote Post
sowiq
post
Post #12





Grupa: Zarejestrowani
Postów: 1 890
Pomógł: 339
Dołączył: 14.12.2006
Skąd: Warszawa

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

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!
Go to the top of the page
+Quote Post
lnn
post
Post #13





Grupa: Zarejestrowani
Postów: 361
Pomógł: 11
Dołączył: 17.12.2008
Skąd: LU

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

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
Go to the top of the page
+Quote Post
sowiq
post
Post #14





Grupa: Zarejestrowani
Postów: 1 890
Pomógł: 339
Dołączył: 14.12.2006
Skąd: Warszawa

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

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ś.

Ten post edytował sowiq 3.03.2009, 16:45:14
Go to the top of the page
+Quote Post
lnn
post
Post #15





Grupa: Zarejestrowani
Postów: 361
Pomógł: 11
Dołączył: 17.12.2008
Skąd: LU

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

od razu przyznaje sie ze kod jest wygenerowany w photoshopie ja go chcialem zmodyfikowac pod moje oczekiwania

otoz mam taki lay:
(IMG:http://transel.net/lenart/forum/01.jpg)
znajduje sie on po lewej stronie strony:
(IMG:http://transel.net/lenart/forum/02.jpg)
chcialbym zeby sie znalazl po srodku niezaleznie od rozdzielczosci ekranu
(IMG:http://transel.net/lenart/forum/03.jpg)
oto kod: http://transel.net/lenart/forum/kod.txt (bo sie nie zmiescil w tresci (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

Ten post edytował lnn 3.03.2009, 17:50:38
Go to the top of the page
+Quote Post
erix
post
Post #16





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
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.
Go to the top of the page
+Quote Post
drzalek
post
Post #17





Grupa: Zarejestrowani
Postów: 170
Pomógł: 18
Dołączył: 6.03.2007

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

Cytat(Spawnm @ 3.03.2009, 15:28:47 ) *
@drzalek->twój css robi to co mój i Wookieba (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)
po co 2 razy dajesz 0 , dając raz deklarujesz na wszystkie ściany (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)


Heh wiem, po pierwsze pisałem posta wtedy kiedy Wy (mniej więcej), a po drugie ja tak daję najczęściej (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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