Autor Zpráva
Petr
Profil *
Dobry den,

uz druhy den se snazim jak do CSS prepsat nasledujici konstrukci:

<table border="0">
<tr>
<td width="90" height="180">
<img src="hmm.jpg" width="90" height="180" border="0" alt="hmm">
</td>
<td valign="bottom" width="180" height="180">
Hmm, toto by melo byt u dolniho rohu obrazku
</td>
</tr>
</table>

Pisu to ted narychlo z hlavy. Snad z toho pochopite co to ma delat. Snazim se to prepsat do CSS bez pouziti tabulek. Muzete mi prosim poradit jak nato? Jsem asi uplne bylby ale uz dak nevim.
Zkousel jsem toto:

<div class="vlevo" >
<image src="hmm.jpg" alt="hmmm" border="0" width="90" height="180">
<div class="meno">
hmm toto bohuzel nejde.
</div>
</div>
styly.css:
.vlevo {
float:left;
position:absolute; left: 10px; top: 10px;
}

.meno {
font-size: 22px;
font-family: sans-serif;
font-weight : bold;
position:absolute; bottom: -5px; left: 130px;
}

Bohuzel dalsi text na strance se mi porad pise pod ten obrazek a ne az za nej. Uz fakt nevim jak dal.
Dekuji za jakoukoliv radu.

Petr
Petr Weida
Profil
tomu dalšímu textu v CSS nastavte:

clear:both

viz: http://www.jakpsatweb.cz/css/clear.html
Petr
Profil *
Dekuji za radu ale bohuzel mi to nefunguje.
Pod obrazkem mam seznam delany pomoci dt a dd.
V CSS mam toto:

dt {
font-family: Arial;
line-height:20%;
font-size:10pt;
font-weight: bold;
color: Black;
clear: both;
}

dd {
font-family:Arial;
line-height:20%;
font-size:10pt;
color:black;
clear: both;
}

Zkousel jsem si nadefonovat .seznam a udelat to pomoci <div class="seznam"> ..... </div> ale bez efektu.
Pouzivam Mozillu 1.7.2. Sedim v Linuxu takze to IE nemohu vyzkouset.

Nevite, prosim, proc to nefunguje?
Diky!

Petr
Yuhů
Profil
Původní problém (resp. tedy zadání) naprosto chápu. Valign=bottom. Jasně.

Tak to je v CSS na mašli. Doporučuju zůstat u tabulek. CSS, i když je opěvováno, si s tímhle nijak efektivně neporadí.

Tedy... řeknu to jinak: pokud znáte rozměry prvků, můžete si to všechno napozicovat na přesná místa. Pokud ale rozměry neznáte, tak se to dá jenom různě hackovat. Dá se zkusit můj+ravenův postup s display:table-cell
http://www.jakpsatweb.cz/css/css-vertikalni-centrovani.html
akorát se to místo na střed dá cpát na spodek.

Pokud rozměry znáte, tak si celou oblast uzavřete do divu se zadanými rozměry a s position: relative. To position: relative určí počátek souřadného systému, odkud se budou počítat pozice vnořených prvků.

Ty zadané rozměry něčemu, co nemá absolutní pozici, zase zaručí to, že následující obsah bude dole až pod tím. Třeba ty definice, to už je jedno. Clearování při absolutní pozici opravdu nefunguje.

Musíte si uvědomit následující věc: pokud nějakému prvku dáte position: absolute, prvek se vyjme z toku dokumentu a následující obsah se chová tak, jako by tam ten absolutní prvek vůbec nebyl. Proto se to všechno překrývá.

Takže řešení je tabulka nebo uzavírací relativní div s nastavenou aspoň výškou.

<vzdech proč="jen tak mimochodem">Ach jo. Opravdu by se mi hodilo clearování pro absolutní pozice!</vzdech>
Toto téma je uzamčeno. Odpověď nelze zaslat.