| Autor | Zpráva | ||
|---|---|---|---|
| slovakCZ Profil |
#1 · Zasláno: 9. 12. 2009, 22:29:27 · Upravil/a: slovakCZ
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 |
#2 · Zasláno: 9. 12. 2009, 23:13:59
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 |
#3 · Zasláno: 9. 12. 2009, 23:34:15 · Upravil/a: Petr ZZZ
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 |
#4 · Zasláno: 9. 12. 2009, 23:37:08 · Upravil/a: slovakCZ
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 |
#5 · Zasláno: 9. 12. 2009, 23:41:11
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 |
#6 · Zasláno: 9. 12. 2009, 23:44:58 · Upravil/a: Miloš
Použij vícenásobnou třídu:
<div class="box img001"> .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 |
#7 · Zasláno: 9. 12. 2009, 23:54:52
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 |
#8 · Zasláno: 10. 12. 2009, 00:00:29 · Upravil/a: Petr ZZZ
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 |
#9 · Zasláno: 10. 12. 2009, 00:38:34
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 |
#10 · Zasláno: 10. 12. 2009, 01:50:40
Nějak mi to připomíná moji skoro 4 roky starou soutěž ;o).
|
||
| Plaváček Profil |
#11 · Zasláno: 10. 12. 2009, 06:33:05
habendorf:
Jen škoda, že tebou odkazované příklady nefungují, nemáš je někde v archivu? |
||
| habendorf Profil |
#12 · Zasláno: 10. 12. 2009, 09:15:23
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 |
#13 · Zasláno: 10. 12. 2009, 09:28:21
habendorf:
Moc se mi ve zdrojáku líbilo tohle: <img id="nevolte-socany" <div id="nevolte-komouse"> |
||
| habendorf Profil |
#14 · Zasláno: 10. 12. 2009, 09:38:00
Miloš:
;o) |
||
| Gappa Profil |
#15 · Zasláno: 10. 12. 2009, 20:32:24
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 |
#16 · Zasláno: 12. 12. 2009, 10:21:32
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 |
#17 · Zasláno: 12. 12. 2009, 21:02:59
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 |
#18 · Zasláno: 12. 12. 2009, 21:46:20 · Upravil/a: Camo
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. |
||
|
Časová prodleva: 14 let
|
|||
0