Siatka obrazków w html

Witam szukam skryptu na siatkę obrazków chodzi mi o coś takiego :

fsdf.png

php for, if; html table,tr,td,img …

No zrobiłem tabelę ale tekścik pod obrazkiem mi ją sypie i wszystko jest krzywo bo teksty mają różne długości…

Poza tym chciał bym to jeszcze osadzić na obrazku w stylu css co miało by wyglądać tak :

fsdfv.png

Tylko jak to zrobić ?

Możesz to zrobić w ten sposób co Ci napisał athei.

Zrób tabele, wiersze i kolumny zrób na stałą szerokość i nie będzie problemu.

No właśnie za bardzo tego nie zrozumiałem…

Może napisze ktoś jedna linnię ?

To oczywiście nie da Ci efektu będziesz musiał trochę pogłówkować:

| Tutaj ten obrazek + tekst (Chociaż nie wyjdzie Ci to tym kodem, bo będziesz musiał trochę pogłówkować | |

[/code]

No ale z czym masz konkretnie problem?

-czy może liczysz na gotowca?

Mam już zrobioną tabele i w niej obrazki i pod nimi podpisy ale wszystko jest krzywo po tabela bierze pod uwagę długość podpisu i mi ją naciąga.

Aktualnie mam taki kod:

Clown Killer 2 ![freaky_fun.jpg](flash_game/icon/freaky_fun.jpg)

Przecież jest oczywiste, że jak się coś nie mieści to rozciąga.

Możesz zablokować tabelę, to nie będzie się nic rozciągało wtedy. Dla tabeli daj styl table-layout:fixed;

No albo zmniejsz liczbę kolumn i zwiększ ich wymiary - tak by otrzymać większe komórki, w których się wszystko pomieści.

Czyli zamiast jak teraz 7 daj 5 na wiersz

…albo zmniejsz czcionkę dla opisu :stuck_out_tongue:

A co zrobić aby każda z tych komórek tabeli była na jakimś obrazku który miał by być tłem :

fsdfv.png

Myślałem że wtedy by było ładnie i by komórki się nie rozciągały po te tło było by całą wielkością komórki tak aby każda była taka sama ? ?

Edit:

Może by dać odnośnik do css i w css coś takiego :

#obrazek li a:hover { background:#111; background:url(images/xxx.png) left top repeat-x; color:white;}

oczywiście background, z tym że nie jak wyżej, tylko dla TD, no i bez powtarzania repeat.

Zrobiłem tak ale nie działa :

kod html: (pierwsza komórka tabeli)

clownkiler2.jpg freaky_fun.jpg

A co ma Twój css do kodu html tego co umieściłeś? Bo w CSS jest odwołanie do naciśnietego odnośnika w li…

Pokaż css dla tych elementów, bo nie bedziemy robić css CI od podstaw…

Zacznę od pojedynczego elementu jak umieścić ten obrazek z tekstem na tym 2 obrazku ??

Za pomocą css…

To co jest na A mam w html i mam obrazek B który ma być tłem dla A i chcę to zrobić w css aby otrzymać efekt z obrazka C.

beztytuumjp.png

Kod tabeli z 1 elementem :

clownkiler2.jpg[/code] Kod css:

[code].flashimage { float: right; width: 93px; background: #000 url(‘images/flashimage.png’) top no-repeat; text-align: center; }

#galeria td {

    width: 93px; height: 93px;

    background: #000 url('images/flashimage.png') 0 0 no-repeat;

    text-align: center;

}


#galeria td img { 

border: 0;

margin:0 auto;

padding: 4px;

}

| clownkiler2.jpg |

Właśnie o to mi chodziło :slight_smile:

Wszystko działa tylko co dopisać w css aby element na tym obrazku wyśrodkowywał się nie tylko w poziomi ale także w pionie ?

Aktualnie wygląda tak: fdsfsdx.png

kod.css

.flashimage {

    width: 70px; height: 70px;

    background: #000 url('images/flashimage.png') 0 0 no-repeat;

    text-align: center;

}

Nie mam jak sprawdzić ale chyba:

text-valign: middle

Źle mnie zrozumiałeś nie chodzi o wyśrodkowanie komórki ale o wyśrodkowanie obrazka na tle w css.

Nic w tabeli po prostu mam obrazek z tekstem do niego zrobiłem tło ten zielony kwadrat w css i chce to wyśrodkować w tym kwadracie w pionie bo jest wyśrodkowane w poziomie. ??

kod css co mam dopisać :

.flashimage {

    width: 70px; height: 70px;

    background: #000 url('images/flashimage.png') 0 0 no-repeat;

    text-align: center;


}

Dodane 04.02.2010 (Cz) 13:12 – EDIT JUŻ PO PROBLEMIE WYSTARCZAŁO DODAĆ

.flashimage img { margin-top:7px;}