Forum PHP.pl > [CSS] Div w środku wysokości

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS] Div w środku wysokości

aeaeae

5.06.2011, 14:22:20

[CSS] pobierz, plaintext 
html,body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  background-color:black;
}
#t{
  width:100%;
  height:50%;
  margin:0 0 -250px;
}
#c{
  width:828px;
  height:500px;
  margin:0 auto;
  padding:0 36px;
  background-color:white;
}
[CSS] pobierz, plaintext

[HTML] pobierz, plaintext 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="t"></div>
    <div id="c">tekst</div>
  </body>
</html>
[HTML] pobierz, plaintext

Chciałbym zrobić diva w środku wysokości (tak jak powyższy kod), z tym żeby się nie chował po zmniejszeniu okna przeglądarki (gdy się zwęzi okno to nie można zobaczyć całego - tekst się chowa ponad okno ...).

Niedowiarek

5.06.2011, 15:31:03

Nie rozumiem, jak to się "chowa"? Wyjeżdża poza DIV'a, czy zasłania go inny DIV?

aeaeae

5.06.2011, 18:17:16

Jeśli np. zwinę sobie okno przeglądarki do wysokości 100px (na oko) to 50% z tego to będzie 50px. Ponieważ margines dolny to -250px, to ten element, który jest na środku schowa mi się u góry. Tak jakby dać pozycjonowanie -200px.

W każdym razie już sobie poradziłem. Znalazłem trochę w google i zmodyfikowałem tak, że na całej stronie jest tabela z jednym td i do tego td wrzucam diva, który ma być na środku dodając vertical-align:middle. Sorry, że męczyłem, ale temat do zamknięcia.

modern-web

5.06.2011, 18:26:04

Dodam tylko, że nie projektuje się stron na tabelach - niezbyt przyjazne dla pozycjonowania.
Tabele (table, tr, td) służą do danych np. statystycznych, które bez tabeli wyglądają żałośnie.
Ten znacznik nie powinien stanowić struktury - fundamentu strony...

Pozdrawiam.

aeaeae

5.06.2011, 18:31:24

Może, skoro już tak dodajesz, to dodaj lepsze rozwiązanie.

No tak, cała zawartość strony w jednym td.

Nie znam się na pozycjonowaniu, ale myślę, że te kilka słów kluczowych, które podam, będą tak celne, że to w zupełności wystarczy ...

modern-web

5.06.2011, 18:33:16

Ustaw wartości na `sztywno` a nie w %.
Wtedy niezależnie od wielkości okna DIV powinien zachować się tak samo.

aeaeae

5.06.2011, 18:39:02

Dzięki, ale ja bym wolał zmianę rozwiązania a nie zmianę problemu.

modern-web

5.06.2011, 18:43:31

Musiałbym zrobić kilka testów, w praktyce najlepiej poszukać rozwiązania ale szczerze mówiąc nie chce mi się... Nigdy nie lubiłem CSS ze względu na jakże znany problem z odpowiednim usadowieniem divów + kompatybilność z większością przeglądarek. Najgorsza część roboty...

erix

6.06.2011, 13:50:14

Ale kto Wam broni korzystać z display: table-* w definicji stylów? Semantycznie nie jest tabelą, ale zachowaniem via CSS już jest i idzie dużo łatwiej z "rozciąganiem" i pozycjonowaniem w osi pionowej.

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.