ugrás a tartalomhoz

css tartalom törlése a kép alatt

tartalom · 2008. Ápr. 3. (Cs), 12.38
Sziasztok!

Egy gyors megoldást keresek: meglévő css+html oldalon a képeket körbefolyatva jelennek meg a szövegek. Most Ügyfél kitalála, hogy a szöveg csak a kép bal oldalán egy hosszú oszlopban jelenjen meg és ne a képet körbefolyva. A képeknek most nincs külön div-jük - felugró "ibox"-ban jelennek meg a szöveggel együtt -, és mivel elég sok anyagról van szó, nem szeretnék belenyúlni csak a meglévő css-be... Valami "clear: bottom" kéne, ha létezne... vagy mi is... ? :)
help
‹ Érték kinyerése JS-sel PARAM tagből save password XMLHttpRequest post használata esetén ›
 ■
1

padding

killroy · 2008. Ápr. 3. (Cs), 13.13
Én annyit tudok neked javasolni, hogy a képeknek állítsd be a padding-bottom tulajdonságát egy bizonyos értékre, mondjuk padding-bottom: 50px; és hagyd meg az eddigi float: left; tulajdonságot (gondolom így volt) így nem veszi körbe a szöveg a képet.

Egyébként vagy olyan tulajdonság hogy clear: bottom; de meg nem mondom neked mi a következménye. :)
2

nohát

tartalom · 2008. Ápr. 3. (Cs), 13.26
Paddingot / margót már állítgattam, de nem szép, mert nagyon változó a kép melletti szövegek hossza, és ha a leghosszabbhoz állítom, akkor scrollozni lehet a nagy fehérség felett, ha rövidebbhez, az meg még rosszabb :)
A clear: bottom-nak nálam semmilyen következménye nem látszott firefox alatt, és szeretnék persze egy olyan megoldást, ami mindenhol kb. ugyanazt eredményezi.
3

nemprobaltam...

ksgy · 2008. Ápr. 3. (Cs), 14.13
...de mi van akkor, ha a kepnek adsz egy margin-bottom: 500px-et, az egesz blokknak pedig egy overflow: hidden; + display: inline;-t?

gondolom valahogy igy epul fel a html:

<p>
     <img src="" alt="" />
     Szoveg Szoveg Szoveg Szoveg ...
</p>
Ha van JS az oldalon amugyis, akkor meg azzal a legegyszerubb (adott blokk elem magassaganak lekerdezese, minusz a kep magassaga+marginok, es ezt allitod be a kep margin-bottom-janak)
4

clear: bottom?

zila · 2008. Ápr. 4. (P), 15.26
A clear-nek nem csak left/right értéke lehet (+none, both, inherit) ?

szerk: megnéztem közben és jól emlékeztem:
http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-clear
5

padding

kerzo · 2008. Ápr. 5. (Szo), 23.43
Nos nekem sikerül rekonstruálnom a problémát és azt hiszem, hogy találtam is egy megoldást. Illetve kettőt, attól függően, hogy milyen formázás van a képen. De a lényeg mind a kettőnél ugyan az.

padding-bottom: 100%
margin-bottom: 100%

Nekem személy szerint a marginos jobban tetszik, mert akkor képnek meg lehet adni keretet és pl 2px-es paddinggal ki lehet emelni.
6

Esetleg

Jano · 2008. Ápr. 6. (V), 14.29
Feltételezve egy ilyen HTML kódot:

<p>
<img src=""> szöveg
</p>
és feltételezve, hogy a képek mind ugyanolyan szélesek, megpróbálkozhatsz egy olyan megoldással, hogy:

p {
 padding-right:210px; /* 200px képszélesség + 10px hely */
}

img {
 float:right;
 margin-right:-210px;
}
7

Szokásos: Link?

Fraki · 2008. Ápr. 6. (V), 17.59
Szokásos: Link? Minta a html-ből? A sok anyag azt jelenti, hogy a html-markup ezer példányban van meg?
8

kód

tartalom · 2008. Ápr. 20. (V), 14.25
Nagyon köszi az ötleteket és bocs a késői reagálásért (hirtelen elutaztam). Tényleg egyszerűbb, ha leírom, mi a helyzet :)

Html:
<div class="szerzo">

  <h1><img src="konyvkepe" width="140" height="valtozo"> 
   Szerzo: Cim</h1>
  <p>konyvleiras</p>
  </div>
Css:

.szerzo{
 padding: 5 5;
 color: #765D45; 
 font-size: 11px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}
.szerzo h1{
 padding: 5 5;
 color: #765D45; 
 font-size: 13px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}
.szerzo img{
 margin-left: 0px;  
 margin-top: 0px;  
 margin-right: 10px;  
 margin-bottom: 10px;  
 float: left;
}
Az egész meg itt van: www.maecenaskiado.hu