[xhtml] Wyrównanie w pionie do dołu. Opcje

[hzl_91]

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:

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

Dlaczego nie wyrównuje do dołu?

Ten post edytował hzl_91 6.01.2007, 11:01:39

[hzl_91]

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

[cadavre]

[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]

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]

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]

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:

#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!

Ten post edytował hzl_91 6.01.2007, 14:15:04

[cadavre]

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.

Ten post edytował cadavre 6.01.2007, 18:44:16

[pieto]

W IE - ne działa - jakas rada ?