Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] wyrownanie elementu w pionie do dolu
Forum PHP.pl > Forum > Po stronie przeglądarki
shycat
Witam, mam taki kodzik:

  1.  
  2. td
  3. {
  4. width:500px
  5. }
  6.  
  7. p
  8. {
  9. questionmark.gif
  10. }
  11.  
  12. ...<td>
  13.  
  14. Jakas krotka wiadomosc
  15.  
  16. <p>pokaz wiecej</p>
  17.  
  18. </td>...


jakich atrybutow mam uzyc dla <p>, aby to bylo w podanym w przykladzie <td> wyrownane w pionie do samego dolu?
krowal
Cytat(shycat @ 10.03.2011, 11:16:59 ) *
Witam, mam taki kodzik:

  1. td{
  2. width:500px;
  3. vertical-align: bottom;
  4. }


jakich atrybutow mam uzyc dla <p>, aby to bylo w podanym w przykladzie <td> wyrownane w pionie do samego dolu?

Dla td: vertical-align: bottom;
shycat
Krowal, jasne... szkoda, ze masz problem z czytaniem, ze zrozumieniem... nie chce umiescic na dole calej zawartosci <td> ... na dole chce umiescic tylko i wylacznie obiekt <p> (ale nie jego zawartosc tylko CALY obiekt)
krowal
A no to insza inszość, można mniej więcej w taki sposób:
  1. td div{
  2. border: 1px solid #000;
  3. height: 500px;
  4. position:relative;
  5. }
  6. p{
  7. position:absolute;
  8. bottom:0px;
  9. }
  10. <tr>
  11. <td>
  12. <div>
  13. jakiś tekst
  14. <p>dupa</p>
  15. </div>
  16. </td>
  17. </tr>

Jest jeszcze kilka innych sposobów. Ale jak będziesz się dąsał jak pięciolatek to raczej nikt Ci ich nie przedstawi smile.gif
shycat
Nie kolego, na nikogo sie nie dasam, tylko mam uczulenie na "forumowe" nabijanie postow, ale niemily byc nie chcialem wink.gif

Twoje rozwiazanie dziala, ale... jezeli "jakiegoś tekstu" jest za duzo, czyli zajmuje on wiele linii i pod wzgledem wysokosci ma wiecej niz (w tym przypadku) 500 px to po prostu tekst z <p> nachodzi na nasz tekst z <div> ... jakis inny pomysl? wink.gif
krowal
Skoro td masz na 500px to znaczy że ciągle ma taki sam wymiar (tak wynika z pierwszego postu). Jeśli tak nie jest to trzeba było o tym wspomnieć (kolego wypominający innym brak umiejętności czytania ze zrozumieniem).
  1. td{
  2. border: 1px solid #000;
  3. height: 500px;
  4. }
  5. div{
  6. height:100%;
  7. position:relative;
  8. background-color:#f1f1f1;
  9. }
  10. p{
  11. position:absolute;
  12. bottom:0px;
  13. }
  14. <tr>
  15. <td>
  16. <div>
  17. jakiś tekst
  18. <p>dupa</p>
  19. </div>
  20. </td>
  21. </tr>

A zanim zarzucisz komuś nabijanie postów (nawet w myślach) to zerknij na jego posty, ich treść, ilość i datę rejestracji użytkownika.
shycat
Jasne, TD, ma "ustalona" wielkosc na 500px, ale jest to niejako wielkosc minimalna... nic nie pisalem o tym, ze ta wielkosc nie moze ulec zmianie - to tylko Twoje domysly ;-)

ps. nowa wersja Twojego kodu tez nie dziala... szkoda, ze nie sprawdziles, zanim umiesciles go tutaj
krowal
U mnie to tak wygląda http://www.screencast.com/users/luk.kowals...4f-d8d3a60fd6bb
Sprawdzane na Chrome, FF i Opera.
shycat
zgadza sie... u mnie tez... napisalem wczesniej

"Twoje rozwiazanie dziala, ale... jezeli "jakiegoś tekstu" jest za duzo, czyli zajmuje on wiele linii i pod wzgledem wysokosci ma wiecej niz (w tym przypadku) 500 px to po prostu tekst z <p> nachodzi na nasz tekst z <div> ... jakis inny pomysl?"


No i niestety ten sam problem co wczesniej - wiecej tekstu = nachodzenie <p> na ten "jakis tekst"

nikt inny nie ma zadnych pomyslow? wink.gif
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.