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:
  1. <p>  
  2.      <img src="" alt="" />  
  3.      Szoveg Szoveg Szoveg Szoveg ...  
  4. </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:
  1. <p>  
  2. <img src=""> szöveg  
  3. </p>  
és feltételezve, hogy a képek mind ugyanolyan szélesek, megpróbálkozhatsz egy olyan megoldással, hogy:
  1. p {  
  2.  padding-right:210px; /* 200px képszélesség + 10px hely */  
  3. }  
  4.   
  5. img {  
  6.  float:right;  
  7.  margin-right:-210px;  
  8. }  
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:
  1. <div class="szerzo">  
  2.   
  3.   <h1><img src="konyvkepe" width="140" height="valtozo">   
  4.    Szerzo: Cim</h1>  
  5.   <p>konyvleiras</p>  
  6.   </div>  
Css:
  1. .szerzo{  
  2.  padding: 5 5;  
  3.  color: #765D45;   
  4.  font-size: 11px;  
  5.  font-family: Verdana, Arial, Helvetica, sans-serif;  
  6. }  
  7. .szerzo h1{  
  8.  padding: 5 5;  
  9.  color: #765D45;   
  10.  font-size: 13px;  
  11.  font-family: Verdana, Arial, Helvetica, sans-serif;  
  12. }  
  13. .szerzo img{  
  14.  margin-left: 0px;    
  15.  margin-top: 0px;    
  16.  margin-right: 10px;    
  17.  margin-bottom: 10px;    
  18.  float: left;  
  19. }  
Az egész meg itt van: www.maecenaskiado.hu