Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS] Centrowanie bloków w pionie i poziomie
phpoint
post
Post #1





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 18.08.2008

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

Witam,
Czy istnieje jakiś sposób wycentrowania bloków w pionie i w poziomie uniwersalnie dla FF, Opery, IE6 i IE7?

W googlach znalazłem 2 tutoriale ale niestety one nie działają...
http://www.google.pl/url?sa=t&source=w...h8Uz-rBjVu27g5Q

http://www.google.pl/url?sa=t&source=w...qDyfaVrwZw06Xyw
Go to the top of the page
+Quote Post
wookieb
post
Post #2





Grupa: Moderatorzy
Postów: 8 989
Pomógł: 1550
Dołączył: 8.08.2008
Skąd: Słupsk/Gdańsk
W poziomie
Kod
body
{
text-align: center;
}

div
{
width: 300px;
margin: 0 auto;
}

html
Kod
<body>
    <div></div>
</body>


Warunki działania kodu to
element pozycjonowany nie moze miec float: left, badz right. Musi mieć okresloną szerokość.

W pionie działa tylko na elementach typu inline (PRZECIEZ TO PISZE W TYCH LINKACH CO PODAŁES!) i to tylko w takich elementach ktore sa komorka tabeli (lub maja taki display ale to nei dziala na kazdej przegladarce)
jezeli chcesz wypozycjonowac diva musisz uzyc js. Można też php ale nie zawsze masz ku temu wszystkie parametry.

Ten post edytował wookieb 29.08.2008, 11:31:09


--------------------
9marshals.com, Fantastyka, Parser bbcode ( UPDATE 1.2 ), Kalkulator wielkości informatycznych
Go to the top of the page
+Quote Post
phpoint
post
Post #3





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 18.08.2008

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

Pod koniec 2 tutoriala masz link http://riddle.pl/-/xhtml/css-centering/vert-03.html
Odpal go pod ie7 jak widać centrowanie w pionie nie działa. Chodzi i o wycentrowanie w pionie i poziomie diva z komunikatem. Ok poszukam tutoriala jak to zorbic w JS, no chyba że masz jakiś pod ręką.
Go to the top of the page
+Quote Post
wookieb
post
Post #4





Grupa: Moderatorzy
Postów: 8 989
Pomógł: 1550
Dołączył: 8.08.2008
Skąd: Słupsk/Gdańsk
Kod
function centruj(element)
{
element.style.position='absolute';

element.style.top=(element.parentNode.offsetHeight-element.offsetHeight)/2+'px';
}


--------------------
9marshals.com, Fantastyka, Parser bbcode ( UPDATE 1.2 ), Kalkulator wielkości informatycznych
Go to the top of the page
+Quote Post
phpoint
post
Post #5





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 18.08.2008

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

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  2.  <html xmlns="http://www.w3.org/1999/xhtml"> 
  3.  <head> 
  4.  <title>Middle</title> 
  5.  <style type="text/css"> 
  6.  html, body { 
  7.    padding:0; 
  8.    margin:0; 
  9.    height:100%; 
  10.    width:100%; 
  11.  } 
  12.  html { 
  13.    display:table; 
  14.  } 
  15.  body { 
  16.    display:table-cell; 
  17.    vertical-align:middle; 
  18.    text-align:center; 
  19.  } 
  20.  #middle { 
  21.    width:400px; 
  22.    margin:0 auto; 
  23.    border:1px solid black; 
  24.  } 
  25.  * html #middle { 
  26.    position:absolute; 
  27.    top:expression((x=(document.documentElement.offsetHeight-this.offsetHeight)/2)<0?0:x+'px'); 
  28.    left:50%; 
  29.    margin-left:-200px; /* połowa szerokosci warstwy */ 
  30.  } 
  31.  </style> 
  32.  </head> 
  33.  <body xml:lang="pl"> 
  34.    <div id="middle">jakis napis</div> 
  35.  </body> 
  36.  </html>
[HTML] pobierz, plaintext
znalazlem cos takiego, ale w IE7 tez sie wysypuje
Go to the top of the page
+Quote Post
wookieb
post
Post #6





Grupa: Moderatorzy
Postów: 8 989
Pomógł: 1550
Dołączył: 8.08.2008
Skąd: Słupsk/Gdańsk
Kod z podanego linku działa jeżeli zamienisz
Kod
<!--[if lte IE 6]>

na
Kod
<!--[if lte IE 7]>


--------------------
9marshals.com, Fantastyka, Parser bbcode ( UPDATE 1.2 ), Kalkulator wielkości informatycznych
Go to the top of the page
+Quote Post
vokiel
post
Post #7





Grupa: Zarejestrowani
Postów: 2 592
Pomógł: 445
Dołączył: 12.03.2007

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

Te centrowanie działa we wszystkich przeglądarkach, w jakich sprawdzałem: css_template_11


--------------------
"It's in our hands... It always was..." | It's in my hands: blog.vokiel.com... It always be...
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: 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: 21.08.2025 - 10:25
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn