obrazki jako elementy dodane w polu html

[asmith]

Dodałem zdjęcia w polu kod html w następujący sposób:
<img src=anderson.blox.pl/resource/wawka2.jpg border=”0” align="right"
width="250px" />
<img src=anderson.blox.pl/resource/hknight2.jpg border=”0”
align="right" width="250px" />
w firefoksie pokazują się, zgodnie z oczekiwaniem, pod zakładkami, ustawione
równo jedno pod drugim. Problem jest natomiast w operze i IE (wersja 7) -
zdjęcia nakładają się na siebie.
Próbowałem oddzielać wpisy <br>, ale nic nie pomogło.
Czy ktoś już przerabiał ten problem i może mi pomóc?

[sgk]

Spróbuj je wszystkie ująć w kod:
<div style="width: 250px;"> tutaj kody obrazków </div>.

A z nich usuń deklaracje align="right" i width="250px"

Może pomoże

[asmith]

Wielkie dzięki za kierunek - wydaje się dobry.
Zdjęcia we wszystkich przeglądarkach ustawiają się teraz jedno pod drugim.
Niestety pojawiają się między nimi wąski przerwy i są dosunięte do lewej strony
ekranu.
Próbowałem wrzucić do div moje parametry w ten sposób:
<div style="width: 250px;" border=”0” align="right">
ale nie działa ani tak, ani jeśli oddzielam ;
masz może pomysł jak to dopracować?
PS
czy ; jest konieczne w style="width: 250px;", czy wystarczy samo px?
pozdrawiam,

[sgk]

Bez analizy i ingerencji w cały CSS działania będą tylko "protezą".

Po pierwsze zapis <div style="width: 250px;" border=”0” align="right"> jest
błędny - border=”0” align="right" są zbędne.

Po drugie spróbuj zastosować taki kod (bez własnych dodatków)

<div style="width: 250px; float: right; text-align: center;>

tutaj kody obrazków bez tego align="right"
ale z border = "0"
btw: muszą być takie wielkie?

</div>
<div style="clear: both;"></div>

(...)Reszta rzeczy, w tym wstążka Rospudy (...)

I opowiedz o efektach

[asmith]

Dzięki za nowe wskazówki - poznałem nowe elementy i powalczyłem moją tradycyjną
metodą prób i błędów. O ile w CSS udawało mi się coś zrobić na logikę (html to
dla mnie absolutna nowość) to tu efekty są mizerne.
Firefox: układ zdjęć ok, ale pojawiają się wąskie odstępy między zdjęciami i
minimalnie zachodzi na szeroką szpaltę
IE: ładnie bez odstępów, ale zdjęcia uparcie przyklejają się do lewego brzegu
ekranu
Opera: odstęp między zdjęciami, a do tego pierwsze zdjęcie w ogóle gdzieś się
chowa (

Czy możemy pójść w kierunku radykalnych działań w CSS?
Będę wdzięczny za cierpliwość.
Zależy mi na tym układzie z fotkami z lewej, bo oprócz ciekawego tła planuję
pododawać do nich linki (jak lepiej opanuję temat)

[sgk]

Niestety nie mam czasu na prześledzenie CSSa.
W zamian proponuję inne rozwiązanie, rzekłbym tradycyjne - ujmij poszczególne
zdjęcia w tabelę, powinno nie być tak wrażliwe na przeglądarki:

<table class="tblzdj" border="0">
<tr><td> link do zdjecia 1 </td></tr>
<tr><td> link do zdjecia 2 </td></tr>
<tr><td> link do zdjecia itd... </td></tr>
</table>

Dodanie definicji class="" daje Ci możliwość dopracowania wyglądu tablicy i
zawartych w niej elementów za pomocą CSS dla .tblzdj {} i podobiektów.

[sgk]

Zapomniałem dopisać, że sprawdziłem to poprzednie rozwiązanie z <div ...
float...> na IE6, IE7, FX1, FX2, O9 i wszędzie jest OK za wyjątkiem małych
przerw między zdjęciami...

[asmith]

Hmmm, ciekawe dlaczego tobie się dobrze wyświetlało... Czyżbym, pomimo usilnych
starań i testowania różnych wariantów wciąż robił jakieś składniowe lub
interpunkcyjne błędy...
W tych przeglądarkach otwierałeś mojego bloga czy własny przykład?

W każdym razie to rozwiązanie z tabelą zadziałało. Pozostały tylko te odstępy
między zdjęciami. Sprawdziłem, że border nie ma na to wpływu, bo dotyczy ramki
dookoła całej tabeli...

I jeszcze jeden szczegół - musiałem dodać align right i pierwsza linia wygląda tak:
<table class="tblzdj" border="0" align="right">
pozdrawiam,
PS. nie siedziałem nad tym całą noc

[sgk]

Heh, podziwiam Twoje umiłowanie dla align="right"

W sprawie odstępów między zdjęciami masz dwa wyjścia: albo własne eksperymenty z
CSS (padding/margin dla table/td/img/a) albo szybkie dodanie do definicji tabeli
argumentów cellpadding="0" cellspacing="0" za wspomnianym align=...

[asmith]

Podaję ostatnie wyniki moich testów
border mogę wyrzucić
align musi być, bo uciekają zdjęcia w lewo (FF2)
rezultat w IE7 jest idealny, w FF2 i O9.02 między zdjeciami widać wąski pasek tła
kod wygląda teraz tak:
<table class="tblzdj" cellpadding="0" cellspacing="0" align="right">
<tr><td><img src=anderson.blox.pl/resource/wawka2.jpg /></td></tr>
<tr><td><img src=anderson.blox.pl/resource/hknight2.jpg /></td></tr>
<tr><td><img src=anderson.blox.pl/resource/sh6.jpg /></td></tr></table>

jeśli masz jeszcze jakiś pomysł na te przedziałki to bardzo proszę, jeśli nie,
to i tak wielkie dzięki za cierpliwość