ugrás a tartalomhoz

2 oszlopba rendezés

sEEcher · 2011. Jún. 28. (K), 10.56
Sziasztok!

Ha már volt téma az oldalon, akkor bocsi, hogy újat indítok, de nem találtam ilyesmit. A problémám a következő: Szeretném az oldalamon található hírek szövegét két oszlopba rendezni úgy, hogy a jobb oldali oszlop tetején egy kép legyen. Erre találtam a column-count CSS tulajdonságot, ami szépen két oszlopba rendezi, viszont a kép elhelyezésének problémáját nem tudom megoldani.

http://androbit.org/news.php?readmore=2435

Valami ilyesmi formában, csak a szövegnek is két oszlopban kellene lennie. Szerintem értitek, hogy mire gondolok.

A válaszotokat és a segítségeteket előre is köszönöm!
 
1

Nem tudom, a column-count

bb0072 · 2011. Jún. 28. (K), 12.40
Nem tudom, a column-count mennyire cross-browser, ilyesmit megbízhatóan egymás mellé float-olt divekkel szokás csinálni. A kép elhelyezés problémáját nem értem. Hol akadtál meg? Odaraksz egy képet, akkor az ott van, nem?
2

...

sEEcher · 2011. Jún. 28. (K), 13.00
-webkit/-moz előtaggal ki lehet egészíteni a column-countot. A probléma az, hogy a szöveg folyamatos és nehéz lenne belőni, hogy pontosan hol a fele és mikortól kezdődne a második div. Arról nem is beszélve, hogy cikkeként ezt végigjátszani maga a borzalom, amit csak tetéz a kép változó magassága. A column-count ezt a problémát orvosolná, ugyanis magától megtalálja a szöveg felét belekalkulálva a kép magasságát is.
3

Most már jobban értem a

bb0072 · 2011. Jún. 28. (K), 14.06
Most már jobban értem a problémát. Hát ez nem igazán triviális dolog html-ben, mivel ez leginkább a print formázásokra hasonlít, és abban a html nem túl erős.

Mi történik akkor, ha a column-count-al csinálod, a képet pedig a legelső karakter elé rakod align="right"-al, vagy float:right-al?
4

...

sEEcher · 2011. Jún. 28. (K), 14.13
Marad az első oszlopban jobbra zárva.
5

JS megoldás

gabesz666 · 2011. Jún. 28. (K), 18.05
Egy olyan JS megoldás jutott eszembe, hogy létrehozol egy div-et, belepakolod a teljes tartalmat, képestül, majd lekéred a magasságát. Ezt elosztod 2-vel, így megkapod egy oszlop magasságát. Létrehozol két div-et (float-olva egymás mellé) és törlöd az előbb létrehozottat, majd ezután feldarabolod a szöveget pl. szavanként, amit addig illesztesz be az első div-be, amíg a scrollbar meg nem jelenik. Amint megjelenik, megkapod az első oszlop tartalmát, ezután már csak annyi dolgod van, hogy beilleszted a képet a másik div-be, plusz a fennmaradó szövegrészt. És ez cross-browser megoldás is! Kikapcsolat javascript esetén meg fallbacknek maradhat a column-count, illetve az 1 div-es (oszlopos) megoldás.
6

Okés asszem értem, de nem

lordfren · 2011. Júl. 1. (P), 08.15
Okés asszem értem, de nem biztos.

Ha csak nyers html és css megoldást keresel akkor a legjobb ha floatolsz.

float left és right.

És a két div végére beteszel egy div -et aminek a lényege, hogy clear:both tulajdonsággal bír és fix szélességgel, ami pontosan akkora mint a 2 oszlopot befogadó div mérete. Így akármelyik oszlop nagyobb az letolja ezt a divet és egyben letolja a footeredet is.


remélem segített.
7

...

sEEcher · 2011. Júl. 1. (P), 12.23
Jól látod, jó lenne html/css megoldás. A megoldásodat lennél kedves egy egyszerű példával szemléltetni, mert a szövegből nem igazán értem, mit merre kellene tennem. Köszi előre is!
8

Wz nem tudi hogy jó, mert nem

lordfren · 2011. Júl. 4. (H), 09.26
Wz nem tudi hogy jó, mert nem teljesen értem a problémád :D


De a következő a lényeg a szöveget befogod egy
<p></p>
tag közé, és utána a p tagnad adsz egy szélességet (width) és az egészet lebegteted (float)

Elméletben ez így működik.