Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [css] Centrowanie DIVa w pionie
kamiseq
post
Post #1





Grupa: Zarejestrowani
Postów: 139
Pomógł: 0
Dołączył: 12.07.2005
Skąd: krakow

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

centrowanie w poziomie jest proste text-align: center w body{} i margin: 0 auto;w glownym divie.

a jak zrobic zeby ten div wycentrowalo w pionie, gdy np dajemy pelny ekran.
margin: auto auto; nie dziala:|


i podobne pytanko jak wycentrowac zawartosc takiego diva w pionie, bo valign mi jkaos nie dzialal i chyba nie jest to zgdne ze sztuka.

dzieki za rady, bo nigdzie nic nie moge znalesc: (IMG:http://forum.php.pl/style_emoticons/default/guitar.gif) ]
Go to the top of the page
+Quote Post
mariuszn3
post
Post #2





Grupa: Zarejestrowani
Postów: 352
Pomógł: 0
Dołączył: 22.01.2006

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

Jedyny uniwersalny sposób to emulowanie tablicy poprzez css:

html:
Kod
<div id="jeden" class="valign-wrapper">
   <div id="dwa" class="valign">
   </div>
</div>

Css:
Kod
.valign-wrapper {
   height:100%;
   width:100%;
   display:table;
}
.valign {
   margin:0 auto;    
   display:table-cell;
   vertical-align:middle;
}


W powyższym przypadku wycentrujemy div#dwa w div#jeden
Go to the top of the page
+Quote Post
TomASS
post
Post #3





Grupa: Zarejestrowani
Postów: 1 660
Pomógł: 13
Dołączył: 9.06.2004
Skąd: Wrocław i okolice

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

Autorowi chyba chodziło o wycentrowanie w pionie. A kod:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. </head>
  4. <style>
  5. html, body {
  6.   height:100%
  7. }
  8. .valign-wrapper {
  9.   height:100%;
  10.   width:100%;
  11.   display:table;
  12.   background: Maroon;
  13. }
  14. .valign {
  15.   margin:0 auto; 
  16.   display:table-cell;
  17.   vertical-align:middle;
  18.   background: Yellow;
  19. }
  20. </style>
  21. <body>
  22. <div id="jeden" class="valign-wrapper">
  23.    zewnatrz
  24.   <div id="dwa" class="valign">
  25.   srodek
  26.   </div>
  27. </div>
  28. </body>
  29. </html>
[HTML] pobierz, plaintext

Niestety tego nie robi :/ Może coś źle wpisuje?

Jedyny pomysł jaki mi przychodzi to wycentrwanie tego za pomocą JS:
[HTML] pobierz, plaintext 
  1. <html>
  2. <script type="text/javascript">
  3. function $(id) {
  4.     return document.getElementById(id);
  5. }
  6.  
  7. function InitLoading(){
  8.  l = $("Loading");
  9.  l.style.width="180";
  10.  l.style.height="60";
  11.  l.style.top = ((screen.height-parseInt(l.style.height))/2)-160;
  12.  l.style.left = (screen.width-parseInt(l.style.width))/2;
  13. }
  14.  
  15.  
  16. </script>
  17. <style type="text/css">
  18. #Loading{
  19.    background: White;
  20.    font-size: 34px;
  21.    border: 1px solid #C1C8D0;
  22.    position: absolute;
  23. }
  24. </style>
  25.  
  26. <body onLoad="InitLoading()">
  27. <div id="Loading">Loading...</div>
  28. </body>
  29. </html>
[HTML] pobierz, plaintext

Mam nadzieję, że da się zrobić to za pomocą styli, ponieważ moje rozwiązanie nie będzie działać przy wyłączonym JS :/
Go to the top of the page
+Quote Post
dr_bonzo
post
Post #4





Grupa: Przyjaciele php.pl
Postów: 5 724
Pomógł: 259
Dołączył: 13.04.2004
Skąd: N/A

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

Przenioslem topic do Po stronie przegladarki > CSS, gdzie jego miejsce
Go to the top of the page
+Quote Post
mariuszn3
post
Post #5





Grupa: Zarejestrowani
Postów: 352
Pomógł: 0
Dołączył: 22.01.2006

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

Cytat(TomASS @ 2006-03-05 13:05:48)
Autorowi chyba chodziło o wycentrowanie w pionie. A kod:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. </head>
  4. <style>
  5. html, body {
  6.   height:100%
  7. }
  8. .valign-wrapper {
  9.   height:100%;
  10.   width:100%;
  11.   display:table;
  12.   background: Maroon;
  13. }
  14. .valign {
  15.   margin:0 auto; 
  16.   display:table-cell;
  17.   vertical-align:middle;
  18.   background: Yellow;
  19. }
  20. </style>
  21. <body>
  22. <div id="jeden" class="valign-wrapper">
  23.    zewnatrz
  24.   <div id="dwa" class="valign">
  25.   srodek
  26.   </div>
  27. </div>
  28. </body>
  29. </html>
[HTML] pobierz, plaintext

Niestety tego nie robi :/ Może coś źle wpisuje?

To działa.. ale tylko w jedynych słusznych przeglądarkach ;-)
Aby zadziałało w internet explorerze faktycznie trzeba użyć javascriptu..
ale można go wsadzić poprzez expression do css'a:
Kod
.valign {
  margin:0 auto;    
  display:table-cell;
  vertical-align:middle;
  margin-top:expression((x=document.documentElement.clientHeight-this.scrollHeight)>0?x/2+'px':0);

}


Działający przykład (wzięty z posta na webesteem forum) można znaleźć tutaj.

Ten post edytował mariuszn3 5.03.2006, 14:32:06
Go to the top of the page
+Quote Post
gekon
post
Post #6





Grupa: Zarejestrowani
Postów: 614
Pomógł: 7
Dołączył: 10.11.2003
Skąd: Rzeszów/Kraków

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

Było: http://forum.php.pl/index.php?showtopic=29143
Go to the top of the page
+Quote Post
TomASS
post
Post #7





Grupa: Zarejestrowani
Postów: 1 660
Pomógł: 13
Dołączył: 9.06.2004
Skąd: Wrocław i okolice

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

Cytat
To działa.. ale tylko w jedynych słusznych przeglądarkach ;-)
Aby zadziałało w internet explorerze faktycznie trzeba użyć javascriptu..


(IMG:http://forum.php.pl/style_emoticons/default/smile.gif) czyli akurat większość użytkowników miała by z tym problem, ponieważ ok 71% ludzi używa IE (zobacz).
Pewnie troszkę lepiej sprawa ma się z JS.

Cytat
Kod
.valign {
margin:0 auto;
display:table-cell;
vertical-align:middle;
margin-top:expression((x=document.documentElement.clientHeight-this.scrollHeight)>0?x/2+'px':0);

}

Walidatorowi CSS nie za bardzo się to podoba (popatrz)

Cytat
Działający przykład (wzięty z posta na webesteem forum) można znaleźć tutaj.

Na prawde świetny link! Działa pod IE, Operą i FF, czyli u ponad 93% ludzi. Dzięki (IMG:http://forum.php.pl/style_emoticons/default/party.gif)
Go to the top of the page
+Quote Post
kamiseq
post
Post #8





Grupa: Zarejestrowani
Postów: 139
Pomógł: 0
Dołączył: 12.07.2005
Skąd: krakow

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

dzieki:]
Go to the top of the page
+Quote Post
gekon
post
Post #9





Grupa: Zarejestrowani
Postów: 614
Pomógł: 7
Dołączył: 10.11.2003
Skąd: Rzeszów/Kraków

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

Nie rozumiem dlaczego stosujecie JS tam gdzie wystarczy użyć CSSa. Link podałem wyżej, a w nim rozwiąznie podał revyag.
Go to the top of the page
+Quote Post
TomASS
post
Post #10





Grupa: Zarejestrowani
Postów: 1 660
Pomógł: 13
Dołączył: 9.06.2004
Skąd: Wrocław i okolice

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

Cytat(gekon @ 2006-03-05 17:08:31)
Nie rozumiem dlaczego stosujecie JS tam gdzie wystarczy użyć CSSa. Link podałem wyżej, a w nim rozwiąznie podał revyag.

Bo wydaje mi się, że kod Revyaga:
Kod
<style type="text/css">
#middle{
   position:absolute;
   width:400px;
   height:300px;
   margin-left:-200px;
   margin-top:-150px;
   left:50%;
   top:50%;
}
</style>

Nie zadziała tak jak kamiseq chciał:
Cytat
a jak zrobic zeby ten div wycentrowalo w pionie, gdy np dajemy pelny ekran.


Rozwiązanie Pana Revyaga jest poprawne, ale pod warunkiem niezmieniania wielkości okienka. Odpal stronę podaną przezmariuszn3, i zmień wielkość okienka. I czy to co napisał Rev będzie tak działać?
Go to the top of the page
+Quote Post
mariuszn3
post
Post #11





Grupa: Zarejestrowani
Postów: 352
Pomógł: 0
Dołączył: 22.01.2006

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

Cytat
czyli akurat większość użytkowników miała by z tym problem, ponieważ ok 71% ludzi używa IE (zobacz).
Pewnie troszkę lepiej sprawa ma się z JS.

Na szczęśćie ok. 99.5% użytkowników IE ma włączoną obsługę javascript (to z moich statystyk) ;-)

Cytat
Walidatorowi CSS nie za bardzo się to podoba (popatrz)

Myślę, że walidowanie w w3c css'a pisanego pod IE trąci absurdem.

Cytat
Nie rozumiem dlaczego stosujecie JS tam gdzie wystarczy użyć CSSa. Link podałem wyżej, a w nim rozwiąznie podał revyag.

Rozwiązanie Revyaga jest bardzo ograniczone, chociażby poprzez narzucenie konkretnych wymiarów elementowi.

Ten post edytował mariuszn3 5.03.2006, 18:14:14
Go to the top of the page
+Quote Post
« Następny starszy · CSS · 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: Standardowy · Przełącz na: 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 - 16:03
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn