Kép-szöveg körbefuttatás probléma

Archívum 2006-2018.11.09 sablonok-grafikak
#1

Automatikusan körbefuttatódnak a szövegek a képeim körül valamilyen okból kifolyólag. Itt látható.





Próbáltam igazítani jobbra-blara, minden képet raktam új bekezdésbe, de bármit csinálok, ez marad így.











A CSS-emben így néz ki az idevonatkozó rész:



Code:

/* image styles */

img.left {

float: left;

margin: 0 15px 10px 0;

}

img.right {

float: right;

margin: 0 0 10px 15px;

}

img.centered {

display: block;

margin: 10px auto;

}

img.border {

padding: 2px;

border: 1px solid #999;

}





Próbáltam, hogy törlöm a float: left-et, de az sem segített :)





Ezt hogy lehetne megoldani? Gondolom valami tökegyszerű kétklikkes megoldás, csak én nem jövök rá :P
#2

Nem is az a baj, hogy a képek “float:left” - hanem hogy az utánuk következő darab (post meta) is ‘odaúszik’…





Én ezt próbálnám:





.post p.single-postmeta {





background: #f0f0f0;





border-top: 1px solid #e0e0e0;





border-bottom: 1px solid #e0e0e0;





color: #999;





padding: 10px;





margin: 20px 0;





clear: both;





}





Amit hozzáadtam, az az utolsó sor - clear: both;

#3

nem is az a baj, amit moshu mondd, hanem az, hogy én is lorem ipsumot használok a saját tesztblogomon, és ott kijavítottam ezt a problémát, de hiába bújom napok óta, nem találom hogy hol és mit csináltam hogy jó legyen!!! :o

#4

moshu: nem csak a post meta csúszik oda, hanem defaultból leftre floatolja a képet, bármit is állítok, csak épp ilyen postot linkeltem :slight_smile: Pl. ha csak egy képet rakok egy postba, ami nem olyan széles, mint a main column (vagy mineve annak, ahol a postok vannak :)), akkor pl. az előző post is felcsúszik mellé :S











De mindenesetre ez a clear:both a postmeta esetében működik, szal nagy thx! A kép igazításokat meg NextGen Galleryvel meg tudom oldani, de azért macerásabb ezért galériákat csinálni, mintsem csak odadobni a képet…

#5

Közben úgy néz ki, hogy sikerült megoldani, most hogy volt türelmem nekiesni. Legalábbis így működik:











A CSS-ben itt:



Code:

.post p.postmetadata a:hover { text-decoration: underline; color: #666; }

div#content-article img, div#content-article img a {

float: left;

border: 1px solid #e0e0e0;

margin: 5px 10px 5px 0;

padding: 4px;

text-decoration: none;

background: #fff;

}





Kikommenteztem a float left-et valamint





Code:

.post {}

.post h2, .post h2 a {

text-transform: uppercase;

font: normal normal bold 1em/1.5em Constantia, "Palatino Linotype", Palatino, Georgia, serif;

border-bottom: 1px solid #999;

color: #333;

margin: 4px 0;

padding: 4px 0;

text-decoration: none;

clear: both;

}





ide is került egy clear:both, és így működik (enélkül ha csak egy kép van a post-ban, és floatolom mondjuk balra, következő post-ot is felúsztatja mellé)





Most már csak azt furcsállom, hogy ha nincs align, akkor aláhúzza a kép-linket, mintha standard link lenne, pedig a CSS-ben a img-nél is ott van, hogy text-decoration: none. Vagy ez mindig ilyen volt? :D
#6

Hát az “úsztatás” (float) az már csak ilyen - és ez alapfokú CSS-tudomány…





Ha egy elem (div, img, akármi) float-olva van, és NEM tölti ki vízszintesen a rendelkezésre álló teret, akkor bármi, ami utána jön (szöveg, kép, egyé ÉS befér a fennmaradó űrbe, akkor az oda fog menni/csúszni/felúszni.





Ezért kell a clear: semlegesíti a float-olást és a következő elem nem úszik fel.