Autor Zpráva
slovakCZ
Profil
Zdravim Vas,

resim mensi problem a predpokladam ze to vyresit asi ani bohuzel nejde... mam takovyto html kod:
<div class="box">
    <img src="obrazek.gif" width="100" height="100">
    <p> nejaky dlooouhatansky text</p>
</div>

A jde mi o to, abych zarovnal text vedle obrazku.. tedy pouziti float left... to by nebyl takovy problem, kdybych nadefinoval odstavci i obrazku sirku, ale problem je ten, ze u kazdeho clanku se sirka a vyska obrazku meni... kdyz dam obrazek do ostavce, tak docilim toho ze text bude obtekat a pote se zaradi pod obrazek, to bych nerat (viz druha pulka obrazku). Je tedy nejake reseni, jak vytvorit to, co jsem nakreslil na levou pulku obrazku, bez toho, aniz bych definoval sirky odstavce i obrazku?

Dekuji moc


a jeste ilustracni obr:
Miloš
Profil
div.box {position: relative;} /* neměníš souřadnice, ale vytváříš kontext pro pozicování vnořených prvků) */
div.box img: {position: absolute; top: 0; left: 0;} /* případně o kousek níž a o kousek doprava… */
div.box p {margin-left: 200px;} /* těch 200px je samozřejmě náhodná hodnota, příklad. Ve skutečnosti použij šířku obrázku + pár px navíc. */
Petr ZZZ
Profil
Aby text netekl dole pod obrázek, dá se obrázku přiřadit dostatečně velký spodní margin. Vytvořil bych v (externím) CSS skupinu nějak vhodně odstupňovaných spodních marginů a potom dle momentální potřeby přiřazoval obrázku ten nebo onen; např.:

.aaa { margin-bottom:0px;   }
.bbb { margin-bottom:50px;  }
.ccc { margin-bottom:100px; }
.ddd { margin-bottom:150px; }
.eee { margin-bottom:200px; }
.fff { margin-bottom:250px; }

.vlevo { float:left; }


Nevím, zda lze přiřadit spodní margin přímo obrázku, možná je nutno obrázek obalit do divu; to prostě vyzkoušíš:

<div class="ccc vlevo"><img src="obr.jpg" width="135" height="180" alt=" starý strom a kvetoucí louka plná kopretin "></div>
slovakCZ
Profil
Miloš:

dekuju moc :).. ale bohuzel to tak vyresit nemohu... jelikoz tech 200pc u div.box p je prave sirka obrazku, ktery je pokazde jiny.. jeho sirku sice dokazu pres php vypsat, takze bych to pote musel resit tak, ze tento styl bych vlozil primo do html a ne do css a tam bych vypisoval pomoci php sirku obrazku.. asi nejak takto:

<?php
echo "
   <div class=\"box\">
      <img src=\"".$obrazek."\" width=\"$sirkaobr\" height=\"$vyskaobr\" >
      <p style=\"margin-left:".$sirkaobr."\">Nejaky text</p>
   </div>
";
?>


takze toto reseni vlastne neni spatne, ale moc se mi nelibi ze budu vkladat css styly primo do php.. asi se na to vykaslu a vyresim to tak jak jsem kreslil na druhe polovine obrazku.. vzdyt on se svet nezhrouti kdyz budu text zarovnavat i pod obrazek :).....

ale urcite dekuju za ochotu, kdybych nemel promenne sirky obrazku tak bych to urcite pouzil ;)
slovakCZ
Profil
Petr ZZZ:
px navíc. */
>
>
Aby text netekl dole pod obrázek, dá se obrázku přiřadit dostatečně velký spodní margin. Vytvořil bych v (externím) CSS skupinu nějak vhodně odstupňovaných
to je samozrejme take reseni, ovsem nikdy nevim, jestli bude text dlouhy 100 znaku nebo 10 000 v tom odstavci... i kdyz teoreticky to se da pres PHP zjistit, kdyz bude znaku pres 500 tak vlozim class aaa.. kdyz pres 800 tak class bbb atd atd :)... to neni vubec spatna myslenka :)
Miloš
Profil
Použij vícenásobnou třídu:
<div class="box img001">
a odstavci pak (po výše uvedené globální definici) příslušný margin oprav:
.img001 p {margin-left: 185px;}
.img001 p {margin-left: 185px;}
.img002 p {margin-left: 165px;}
.img003 p {margin-left: 112px;}
.img004 p {margin-left: 202px;}
/* a tak dál */
slovakCZ
Profil
to jo, ale stejne jsem zavyslej na tom, nejdrive zjistit pomoci php jakou ma obrazek sirku a pote az pridelit tridu.. takze to je obdobne reseni jako od Petra ZZZ...
Petr ZZZ
Profil
Ještě dodatek:
Opravdové umění asi bude ošetřit to tak, aby nedělala neplechu případná změna velikosti písma na straně čtenáře, pokud bude písmo zadané v em (v pixelech bych ho nezadával; usnadnil by sis tím sice práci s layoutem, ale připravíš se o část čtenářů, kteří budou chtít velikost písma změnit a nepůjde jim to, pokud bude písmo v px).
slovakCZ
Profil
no jo, to me nenapadlo.. pismo standartne udavam v em.. no uvidim, jeste se s tim nejak pohraju a uz se ale vidim jak ve finale volim tu variantu kterou jsem nechtel :) proc si komplikovat zivot, ze :)
habendorf
Profil
Nějak mi to připomíná moji skoro 4 roky starou soutěž ;o).
Plaváček
Profil
habendorf:

Jen škoda, že tebou odkazované příklady nefungují, nemáš je někde v archivu?
habendorf
Profil
Plaváček:

Tak jsem to vyhrabal:
http://pokusy.1-webdesign.cz/odsazeni/
http://pokusy.1-webdesign.cz/odsazeni/index2.html
http://pokusy.1-webdesign.cz/odsazeni/index3.html

Nechce se mi teď po letech moc zkoumat co je co, tak ať se tím případný zájemce prohrabe sám ;o)
Miloš
Profil
habendorf:
Moc se mi ve zdrojáku líbilo tohle:
<img id="nevolte-socany"
<div id="nevolte-komouse">
habendorf
Profil
Miloš:

;o)
Gappa
Profil
Stejného efektu by se mělo dát dosáhnout tak, že obrázek se klasicky floatne a např. divu s tím, co má být "vedle toho, ale obrázek nemá obtékat" dát overflow: hidden a pro explorer 6/7 ještě zapnout hasLayout :-)
Camo
Profil
Ja som iba taká lama, ale aj sa chcem spýtať pre svoj pochop.
Napalo ma, že by sa to dalo riešiť cez dva bloky vedľa seba pričom JS - offsetwidth by zobral šírku obrázku a nastavil šírku textu. No a pre vypnutý JS by to obtekalo normálne pod obrázok.
Dalo by sa to takto riešiť?
Bubák
Profil
Camo:
No a pre vypnutý JS by to obtekalo normálne pod obrázok.
Myslím si, že vhodnější by bylo použít display: table-cell a teprve pro IE6 (a starší) tebou navržené javascriptové řešení. Takže normálně obtékaný obrázek by měli jenom uživatelé starých IE s vypnutým JS.

Ale nevím, jestli takové řešení nebude nakonec komplikovanější, než habendorfem odkázané.
Camo
Profil
Bubák:
Tak to už potom rovno tabuľku a pôjde to aj pri vypnutých štýloch, nie?
Starý dobrý tabuľkový layout ,-)

No a veď to čo napísal habendorf len s offsetwidth som myslel.

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: