Autor Zpráva
Joan
Profil
Zdravím, prosím o radu, jak zkombinovat dva níže uvedené způsoby dohromady, aby se ve výsledku zobrazil stínovaný obrázek s několikaslovným popiskem kousek nad obrázkem:

1) samotný stínovaný obrázek umím (z www.interval.cz):

<style type="text/css">
.stin {padding: 0; position: relative; background: #bbb; border: solid #ddd 1px; margin: 2em 2em;}
.karticka {position: relative; top: -5px; left: -5px; background: white; border: solid #555 1px; padding: 5px;}
.karticka img {border: solid #bbb 1px;}
.obrazek {width: 335px;}
</style>

<div class="vpravo">
<div class="stin obrazek">
  <div class="karticka">
<IMG src="obrazky/obrazek.jpg" width=320 height=240 alt="První fotky našeho...">
</div>
</div>
</div>


2) nestínovaný obrázek s popiskem taky (podle knihy CSS pro zelenáče):
<style type="text/css">
p.obrazek.obtekany {float: right; max-width: 320px;}
p.obrazek.obtekany img {display: block; margin: 0 auto 0.5em}
p.obrazek img {display: block; margin: 0.5em auto 0; border: 1px solid black;}
p.obrazek {color: #777; text-align: center; font-size: 80%;}
</style>

<p class="obrazek obtekany"><img src="obrazky/obrazek.jpg" alt="První fotky našeho..." />První fotka našeho pejska........</p>


Samostatně jednotlivé způsoby fungují, ale nemůžu přijít na to, jak zkombinovat ty třídy... A taky abych obrázky mohla dávat jak napravo, tak nalevo.
Děkuji předem :-)

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: