Forum PHP.pl > [xhtml] Wyrównanie w pionie do dołu.

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [xhtml] Wyrównanie w pionie do dołu.

Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML

hzl_91

6.01.2007, 10:56:06

Witam. Dzisiaj budując swój them na DIV 'ach napotkałem problem tzn. kiedy chcąc żeby tekst był wyrównany do dołu w jednym z divów nie mogłem tego uzyskać żadną metodą. Nie wiem, czemu. Obniżał się, ale nie do końca.

To mój kod css:

Cytat

#top_table_login {
border: 0px;
width: 100%;
height: 50%;
vertical-align: bottom;
}

Dlaczego nie wyrównuje do dołu?

hzl_91

6.01.2007, 13:24:59

Ale ja nie chce centrowania. Tylko żeby mieć tekst u dołu komórki.

cadavre

6.01.2007, 13:53:35

[HTML] pobierz, plaintext 
p.komunikat {
  height: 10em;
  display:table;
  vertical-align:middle;
 }
[HTML] pobierz, plaintext

Masz przykład. Przenosisz tylko do swojego kodu i zamiast middle dajesz bottom. Gotowe.

hzl_91

6.01.2007, 13:59:35

Nie działa. Zrobiłęm tak:

[HTML] pobierz, plaintext 
#top_table_login {
border: 0px;
width: 100%;
height: 50%;
display:table;
vertical-align:bottom;
}
[HTML] pobierz, plaintext

cadavre

6.01.2007, 14:10:03

O ile się nie mylę element nadrzędny (ten który zawiera diva) powinien mieć display:table;, a ten który ma być wyśrodkowany display:table-cell;. Tak jak tutaj: http://riddle.pl/-/xhtml/css-centering/vert-03.html z tym, że bottom.

hzl_91

6.01.2007, 15:42:37

Element div:

[HTML] pobierz, plaintext 
<!-- Top table -->
<div id="top_table">
	<div id="top_table_title">
		<h1>Site title</h1>
		<h2>You little text about You site.</h2>
	</div>
	<div id="top_table_login">
		<h3><a href="login/logout.html">Wyloguj [ <b>hzl_91</b> ]</a> | <a href="ucp.html">Twoje konto</a></h3>
	</div>
</div>
<!-- End top table -->
[HTML] pobierz, plaintext

CSS:

Cytat

#top_table {
border: 0px;
margin: auto;
padding: 0;
background: url(images/top.jpg) repeat-x;
width: 100%;
height: 166px;
}
#top_table_title {
border: 0px;
width: 100%;
height: 50%;
text-align: left;
}
#top_table_login {
border: 0px;
width: 100%;
height: 50%;
display:table;
vertical-align:bottom;
}

I co tu jest źle?

Pomocy!

cadavre

6.01.2007, 18:42:11

Masz dwa elementy w jednym divie i tylko jednego chcesz umieścić na dole? Nie da się tak.

Zrób:

[HTML] pobierz, plaintext 
<div id="top_table">
<div id="top_table_title">
<h1>Site title</h1>
<h2>You little text about You site.</h2>
</div>
</div>
<div id="other_div"
<div id="top_table_login">
<h3><a href="login/logout.html">Wyloguj [ <b>hzl_91</b> ]</a> | <a href="ucp.html">Twoje konto</a></h3>
</div>
</div>
[HTML] pobierz, plaintext

i CSS:

[HTML] pobierz, plaintext 
#top_table {
border: 0px;
margin: auto;
padding: 0;
background: url(images/top.jpg) repeat-x;
width: 100%;
height: 166px;
}
#top_table_title {
border: 0px;
width: 100%;
height: 50%;
text-align: left;
}
#other_div {
height:100%;
display:table;
}
#top_table_login {
border: 0px;
width: 100%;
height: 50%;
display:table-cell;
vertical-align:bottom;
}
[HTML] pobierz, plaintext

EDIT: Tylko naturalnie sobie atrybut height dla #other_div wpisz odpowiedni.

pieto

19.10.2007, 17:34:27

W IE - ne działa - jakas rada ?

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.