Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: Kuva menee boksin yli

Quantal [02.06.2013 19:23:11]

#

Tämä tuntuu piinavan usein: CSS:llä luotuun boksiin laitettu kuva menee "boksin yli", eli boksi ei veny kuvan mukaan jos teksti tai muu elementti ei ole kuvaa pidempi ja venyttämässä sitä kuvan puolesta.

Onko jotain yleistä virhettä, jonka teen kun kuva ei venytä boksia?

Macro [02.06.2013 20:54:55]

#

Jos kuvalla on esimerkiksi float-arvo, sen isäntäelementti ei veny kuvan mukaan. Toisaalta olet voinut rajoittaa laatikon koon johonkin tiettyyn arvoon, jolloin se ei voi edes venyä.

Quantal [03.06.2013 00:14:52]

#

Joo eli jos kuvalle ei anna align/float-arvoa, se toimii oikein mutta niiden kanssa ei. Miten sitten sen saa toimimaan, jos haluan laittaa kuvan oikealle ja tekstin rivittymään vasemmalle?

Metabolix [03.06.2013 00:22:37]

#

Laita kuvan jälkeen elementti, jolla on sopiva clear-tyyli. Usein tähän sopii pseudoelementti #boksi:after.

#boksi:after {
	clear: right;
}

Quantal [03.06.2013 13:28:40]

#

Ei toimi. Ei mitään muutosta.

Edit: Onnistun tekemään vain tämän muutoksen, eli alla oleva boksi väistyy kuvan tieltä, mutta ylempi boksi, jossa kuva on, ei veny kuvan mittaiseksi. http://reference.sitepoint.com/css/floatclear

Metabolix [03.06.2013 14:54:52]

#

#boksi:after {
	display: block;
	content: '';
	clear: right;
}

Quantal [05.06.2013 14:35:38]

#

No nyt toimii! Kiitos!

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta