[css] wypośrodkowanie n-tego diva w td w pionie

0

Mam sobie komórki tabeli TD a w każdej 4 DIVy.
TD ma vertical-align ustawiony na top by 3 DIVy ułożone były na górze.
Czwarty div zawiera w sobie obrazek IMG.

Chciałbym, by ten obrazek był wyśrodkowany w pionie na całej pozostałej powierzchni TD. Obecnie przylepiony jest do górnych DIVów.
W sumie, to można pominąć czwarty DIV i wstawić tam IMG bezpośrednio - bez różnicy mi, byle działało.

Jak ułożyć style do uzyskania takiego efektu?

0

może vertical-align: middle/center dla tego czwartego diva pomoze. W sumie nigdy nie korzystałem z tej właściwości :)

Zajrzyj np. na chrome.pl - tam mają lay na divach, który jest wycentrowany w pionie i poziomie.

0

Albo line-height:100% czy tam w pikselach. Mi chyba tak dzialalo.

pozdrawiam
johny

0

Niestety, żadna z trzech wymienionych sugestii nic nie zmienia.
Tutaj jest dokładnie ten kod, który potrzebuję zmienić:
http://marooned.neostrada.pl/4prog/css/
druga fotka w poziomie doklejona jest do góry - chciałbym by była po środku wolnego miejsca [od diva z rozmiarem do konca komorki]

być moze pojawi się jeszcze kolejny div na samym dole [doklejony do spodu komorki] z jakims teksem

0

jak wiesz ile ci zostanie w pikselach to możesz zrobić chyba margin: restHei/2 0
// a w sumie margin: auto 0 może
// no nie działa, ale i tak używasz tabelek więc czemu sobie nie ułatwić ?

0

a moja sugestia - zrobić tabelkę :P mimo wszystko bym zagnieździł. kurde ciężka luta. da się wyrównać w FF i O ale wtedy się rozjeżdża w IE jak wyrównam w IE to się rozjeżdża w FF. Do bani rozwiązanie. Jak ja nie lubię divóv :/

0

to, że divy sux to wiadomo.. ale średnio widzę sto jeden tabelek dla stu obrazkow :-/
poczytałem riddle.. większość tego, co opisał próbowałem i jakoś nie udało mi się drgnąć obrazkiem nawet o pixel :/

poczekam jeszcze na jakieś pomysły, póki co jest jak jest [i tak mam jeszcze sporo innej roboty z galerią więc takie 'drobiazgi' mogą zostać na koniec]

0

Marroned -> a dlaczego 101 tabelek? :| jedną to załatw

teraz dopiero zauważyłem że się da :D

0

no ale jak jedna.. jedna mam globalna dla wszystkich miniaturek.. teraz rozwazamy wnetrze kazdej komorki tej tabeli
zrozumialem, ze chcesz wstawic mala tabelke w kazda komorke tej globalnej tabeli

0

ja rozumiem co ty chcesz zrobić. a nie możesz stosować rozwiązania żeby cztery wiersze tabeli na jedną miniaturę?i pozbyć się globalnego nie wiem czego? :>

<table>
  <tr>
      <td>
         opis 1
      </td>
      <td>
         opis2
      </td>
</tr>
</table>

i tak dalej później w drugim wierszu nie wiem coś tam a w trzecim obrazki

0

No ale tych miniaturek będzie dużo - nie jedna.
Dlatego trzymam je w tabelce [chciałem w divach by automatycznie wyświetlało się ich tyle w wierszu ile się zmieści, ale divy to koszmar i się nie dało].

I teraz każda komórka tej tabelki to Twój kod.. czyli dla 100 miniaturek mamy 1 tabelę ze 100 komórkami a w nich Twoją tabelkę z 4 komórkami.. razem 500 komórek i 101 tabel - omg.

0

daj mi chwilę zaraz ci skodze to co wymysliłem. żadnych 100 tabelek

trochę pokrętnie plik nazwałem ale co tam :P liczy się efekt. teraz pokolorwanie i wyrównanie chyba już sobei sam zrobisz?

http://www.jmail.pl/marooned/divy.html

0

o kurza stopa.. poniosło Cię nieco :D
Nie dość, że odpada generowanie strony w pętli [trzeba się będzie nieźle nagimnastykować] to każdy nowy wiersz miniaturek to nowa tabelka.

Przyznaję, że rozwiązanie jakieś jest - ale [bez obrazy].. od d**y strony :)

Pokombinuję jeszcze jednak z normalnym rozkładem [1 div lub 1 td na 1 obraz].. ale dzięki za pokazanie całkowicie innego podejścia - w życiu bym nie wymyślił takiego zakrętasa [green]

0

a udowodnic ci że da się to wygenerować w pętli? :>

tylko najpierw stwórz tablicę z tymi danymi a póxniej w forze i od 1 do x i+2 wyciągaj odpowiednie dane i tyle :P

chwila. chwila. jaki nowy wiersz miniaturek?

teraz wypada po cztery komórki na miniaturkę i masz jedną tabelkę

ja bym to tak zrobił.

0

No tak.. ale utwórz np. 3 rzędy po 5 miniaturek swoim sposobem ;)

0

http://users.dolinka.net.pl/~elmo/tmp/marooned/default.html
Jedyne ograniczenie to to, że miejsce na obrazek ma stałe wymiary (czyli maksymalne wymiary miniaturek.).

0
Marooned napisał(a)

Dlatego trzymam je w tabelce [chciałem w divach by automatycznie wyświetlało się ich tyle w wierszu ile się zmieści, ale divy to koszmar i się nie dało].

nie wiem, czy dobrze zalapalem o co chodzi, ale moze wystarczy te divy co maja sie prezenosic do nastepnych linijek dac float:left? Zrobilem cos takiego kiedys (na tabelkach, ale mozna zastosowac do div):
http://zamoy.tomkiewicz.hostings.pl/galeria_cat_5.htm

0
tomkiewicz napisał(a)

nie wiem, czy dobrze zalapalem o co chodzi, ale moze wystarczy te divy co maja sie prezenosic do nastepnych linijek dac float:left?
Tak też jest w mojej przeróbce, więc jeśli jest źle to obaj nie załapaliśmy :]

0
Marooned napisał(a)

No tak.. ale utwórz np. 3 rzędy po 5 miniaturek swoim sposobem ;)

a co za problem? :| bo nie rozumiem :D zwiększasz tylko licznik wypisywania z i + 2 na plus 5 i wszystko gra i trąbi.

Nie wiem gdzie widzisz problem

0

myślę że można by tu użyć tabelki jako diva, jedna komórka na zdjęcie i tyle, pamięci więcej nie powinno zajmować bo dla przeglądarki to chyba nadal jeden obiekt - użycie jako zastępcy diva przez niepełnosprawność standardów i przeglądarek

chociaż ja bym proponował użycie tutaj pojedynczych tabelek dla każdego zdjęcia, będą mogły się same rozmieszczać po x w rzędzie i nie będziesz musiał w pętli ich generować

polecam tu użycie tabelek bo walenie w divy wszystkiego co się (nie) rusza jest trochę maniactwem. Tabelki po coś powstały i nadal są w standardzie a bardziej odpowiedniego zastosowania dla nich niż tutaj już praktycznie nie ma

0

I tak też chyba zrobię.. coś a'la strona, którą podał tomkiewicz.
Tym sposobem upiekę 2 pieczenie na 1 ogniu:

  • autorozmieszczenie w poziomie
  • dowolność dopasowywania w pionie i poziomie dowolnej komórki

Choć rezygnowanie z autorozmieszczenia i umieszczenie wszystkiego w jednej wielkiej tabeli daje tę przewagę, że mam pewność, iż każde pole w danym rzędzie będzie tej samej wysokości nawet, gdyby jakiś opis jednej fotki był dłuższy..

Co do DIVów z float:left - to było moje pierwsze podejście.. ale jeśli jedno pole było by nawet o pixel wyższe, to wygląd strony staje się koszmarny.. jak zamek z klocków.

Dzięki za udział w dyskusji :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1