Podpis pod zdjęciem

[colonna]

Jak wstawić podpisy pod zdjęciami wstawionymi w tekst na stronie? Wstawiłam
zdjęcia do tabeli i w drugim wierszu zrobiłam podpis. Wszystko jest fajnie,
ale tylko w IE. W innych przeglądarkach sprawa troszkę się knoci. Zdjęcia
(tabela) przesuwa się i to w każdej przeglądarce inaczej. Nie najlepiej to
wygląda. Jak dodać ten podpis, żeby w każdej przeglądarce strona wyglądała
tak samo. Musi być jakiś sposób, żeby zdjęcia nie wstawiać w tabeli, bo
pewnie przez to jest kłopot. Bardzo proszę o radę i to najlepiej prostą, bo
choć strona jest fajna i działa poprawnie, to jednak wciąż jestem
początkująca.

[eofek]

1. ostylowana lista wypunktowana, w ktorej w pierwszym <li> masz zdjecie w tabeli, w drugim <li>
podpis (hmm wlasnie to wymyslilem, cokolwiek egzotyczne rozwiazanie), styl li {list-style-type: none;}
(nie wyswietla wypunktowania) + odpowiednie wartosci w stylu dla display, padding i margin

2. div ze zdjeciem plus div z podpisem umieszczone jeden po drugim za pomoca pozycjonowania
(position: absolute albo relative w stylach) - trudniej, albo też za pomocą float: left (albo right) - to
prostsze. float powoduje "przyleganie" do krawedzi (prawej badz lewej, zalezy jaka nadasz wartosc).
jezeli div obejmujacy foto + podpis bedzie mial na przyklad 200px szerokosci, zdjecie 150 a podpis
50, podpis zmiesci sie obok zdjecia (150+50=200), jesli suma bedzie wieksza niz ten zewnetrzny div,
podpis spadnie pod zdjecie i wyrowna sie do tej samej krawedzi co zdjecie.

to tak na szybko z palca. ogolnie polecam znaczniki <div> ze stylami.

pierwsze linki z brzegu w celach edukacyjnych: www.glish.com/css/
www.mako4css.com/

[colonna]

No dzięki, dzięki... Aż przysiadłam. Coś mi mówi, że ten drugi sposób jest
jednak lepszy, aczkolwiek póki co mam średnie pojęcie o co chodzi, ale
spróbuję. Choć już pewnie nie dziś.

[eofek]

to nietrudne wbrew pozorom. <div id="unikalny_identyfikator">tresc</div> to odpowiednik komórki
tabeli - w tym sensie że jest kontenerkiem na treść. tyle, że w przeciwieństwie do tabeli, div'y się same
nie poukładają ;-) Możesz wielokrotnie zagnieżdżać jeden w drugim, tworząc jeden nadrzędny którego
pozycję względem przeglądarki uustawiasz np na wycentrowaną, a to wszystkie w środku
pozycjonujesz względem niego - np. wyrównane do lewej/prawej (float: left albo right) w arkuszach
stylów css. każdemu div przypisujesz id (unikalne) albo klasę (<div class="blabla">), a potem
przypisujesz odpowiednio styl:

#unikalny_identyfikator { /* "#" oznacza definicję klasy dla "id" */
/* tu style, a tak się komentuje w css */
float: left;
}

.blabla { /* tak się definiuje klasy */
...
}

wszystko znajdziesz w sieci, jeśli znasz angielski :)

[daniel.drozd]

Polecam zapoznać się jeszcze z atrybutem "clear", umożliwi on ustalenie oblewania
tekstem, lub przeniesienie do następnej linii, to tego można dodać "float".
Dzięki tym dwóm atrybutom CSS powinno uzyskać się żadany efekt.

[eofek]

o to to. moznaby wowczas na przyklad tak:

<div id="zewnetrzny_kontener">
<div id="foto">...</div>
<div id="konieclinii"></div>
<div id="podpis">...</div>
<div id="konieclinii"></div>
</div>

i style:

#foto {
float: left;
}
#podpis {
float: left;
}
#konieclinii {
clear: both;
}

efektem zastosowania diva id="konieclinii" jest wyłączenie (clear: both;) wyrównania do lewej, co
powoduje, że to co następuje po fotografii (bądź jakiejkolwiek innej treści w divie z id="foto") nie jest
wyświetlane "od razu za" tym obiektem.

na przykład