CSS kép mellé és alá szöveg
2013-12-14T21:51:00+01:00
2013-12-14T23:26:22+01:00
2022-08-08T11:25:30+02:00
jancsiszog7
A képen szerintem jól látható, hogy mit szeretnék. Ezt meglehet oldani HTML-lel és CSS-sel, JS nélkül? A kép mellé és alá szöveg, hogy folyamatos legyen.

<div id="top-left-photo"><img/></div><div id="top-right-text" style="text-align: justify;">szöveg</div> <div id="bottom-text" style="clear: both; text-align: justify;">szöveg folytatás</div>

Eddig ilyen ötletem van, de ez dinamikus oldalaknál azért nem jó mert nem tudom hol kell levágni a szöveget, hogy mi kerüljön a top-right-text div-be a fotó mellé és mi az alatta elterülő bottom-text div-be. És még a böngészőfüggetlenség is probléma a betűtípusok miatt. Levágom a szöveget, hogy jól megjelenjen mondjuk egy Windows-on használható betűtípussal aztán ha valaki megnézi ugyanezt linuxon és nem lesz neki fent az adott font és már el is csúnyult az egész mert a kép mellett vagy rövid lesz a szöveg vagy hosszabb mint kéne. Van erre valami okosság?

Folyamatos szöveget szeretnék a kép mellé és alá mondhatni köré. Ez a lényeg. Ez szövegszerkesztőkben (writer/word) egyszerű feladat, de itt már nem annyira.

Remélem érthető és előre is köszönöm a tippeket!
Mutasd a teljes hozzászólást!
Csatolt állomány
Probald ki ezt a kodot. Ez igy azt csinalja amit szeretnel.
<div style="width: 200px; height: 100px; border: 1px solid black; overflow: hidden"> <img style="float:left" src="" width="50px" height="50px" border="1" />ide irj be egy hosszabb szoveget probakent majd, hogy lasd hogy hogyan uszik korbe a szoveg, de az is lehet, hogy mar ez a szoveg is eleg hosszu. </div>
Mutasd a teljes hozzászólást!

  • Nagyon szépen köszönöm! Ezt kerestem.



    Még annyit elárulnál, hogy hogyan tudnám azt megvalósítani, hogy a kép mellett ne egyből kezdődjön a szöveg hanem mondjuk 10 px-nyire? a szöveget betettem egy

    <p style="margin: 10px; padding 10 px; left: 10px;">ide irj be egy hosszabb szoveget probakent majd, hogy lasd hogy hogyan uszik korbe a szoveg, de az is lehet, hogy mar ez a szoveg is eleg hosszu.</p>

    de nem segít. Felül, alul és jobb oldalt meg van a távolság, de a kép mellett nincs meg így meg minden csak nem esztétikus.



    Update: elfogadtam a hsz-t megoldásként és megjelent a html kód. Ez bug vagy fejlesztés a prog.hu-n? Eddig nem tűnt fel ilyesmi. Csatolva a jelenség.
    Mutasd a teljes hozzászólást!
  • szerintem a képre kell tenni egy margin-right: 10px-et es akkor a kép jobb oldalátol 10px-el el fogja tolni a szöveget. Mondjuk nem szokás a képre stilust rakni, lehet persze de nem szokás. Ezert inkabb azt javaslom, hogy a képet tedd bele egy divbe es arra add meg azokat a stilusokat amiket a képre raktam. Ugyanaz lesz az eredmeny, de mégse a kép kapja a stilust hanem egy div. Ez csak formaság.

    Ha elfogadsz egy megoldast akkor normalis, hogy zold lesz es egybol beteszi a te nyitopostod ala, hogy egybol latszodjon melyik hozzáaszolas volt hasznos.
    Mutasd a teljes hozzászólást!
  • Már meg van a megoldás az img-nek kellett adni margót ahogy írtad. A kép meg lemaradt. Most csatolva. Az oké, hogy megjelenik alatta, de nem úgy mint forráskód hanem mint live html.
    Mutasd a teljes hozzászólást!
    Csatolt állomány
  • na ilyen képet még nem láttam bug sztem.
    Mutasd a teljes hozzászólást!
abcd