Autor | Zpráva | ||
---|---|---|---|
jirka2 Profil * |
#1 · Zasláno: 18. 5. 2012, 09:14:06 · Upravil/a: jirka2
Ahoj,
mám takovýto kód: <!DOCTYPE html> <html lang="cs"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>TEST</title> <style type="text/css"> .obrazek { width: 100px; height: 100px; float: left; border: solid 1px black; margin-right: 40px; } </style> </head> <body> <img class="obrazek" src="cosi.jpg" alt="test"> <ul> <li>aaaaaaaaaaaaaaaaa <li>aaaaaaaaaaaaaaaaa <li>aaaaaaaaaaaaaaaaa <li>aaaaaaaaaaaaaaaaa <li>aaaaaaaaaaaaaaaaa <li>aaaaaaaaaaaaaaaaa <li>aaaaaaaaaaaaaaaaa <li>aaaaaaaaaaaaaaaaa <li>aaaaaaaaaaaaaaaaa <li>aaaaaaaaaaaaaaaaa <li>aaaaaaaaaaaaaaaaa <li>aaaaaaaaaaaaaaaaa </ul> </body> </html> Jen doplnění, místo obrázku může být i DIV a stále se to chybně zobrazuje v IE9. <div class="obrazek"></div> |
||
greeny Profil |
Pomohlo mi:
do stylu: div.test {float: left;} <div class="test"><!-- zde odrážky --></div> |
||
jirka2 Profil * |
#3 · Zasláno: 18. 5. 2012, 09:42:12
greeny:
Jenže teď spodní <li> neobtékají obrazek, jsou vertikálně zarovnané a vlevo dole je pak zbytečná mezera. Zde můj kód: <!DOCTYPE html> <html lang="cs"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>TEST</title> <style type="text/css"> .obrazek { width: 100px; height: 100px; float: left; border: solid 1px black; margin-right: 40px; } .test { float: left; } </style> </head> <body> <div class="obrazek"></div> <div class="test"> <ul> <li>aaaaaaaaaaaaaaaaa <li>aaaaaaaaaaaaaaaaa <li>aaaaaaaaaaaaaaaaa <li>aaaaaaaaaaaaaaaaa <li>aaaaaaaaaaaaaaaaa <li>aaaaaaaaaaaaaaaaa <li>aaaaaaaaaaaaaaaaa <li>aaaaaaaaaaaaaaaaa <li>aaaaaaaaaaaaaaaaa <li>aaaaaaaaaaaaaaaaa <li>aaaaaaaaaaaaaaaaa <li>aaaaaaaaaaaaaaaaa </ul> </div> </body> </html> |
||
Plaváček Profil |
#4 · Zasláno: 18. 5. 2012, 09:54:55
jirka2
Nevím přesně, jak si představuješ výsledný vzhled, ale mohlo by pomoci: ul {list-style:inside} Případně, aby to vypadalo lépe, zrušíš margin-right u obrázku a nastavíš margin-left: 140px pro UL. |
||
jirka2 Profil * |
#5 · Zasláno: 18. 5. 2012, 10:03:33 · Upravil/a: jirka2
Plaváček:
BINGO, list-style-position:inside; pomohlo. Zase jsem se něčemu přiučil, díky za pomoc!jirka2: Jenom když text v <li> je do více řádků, tak to není uplně pěkné. Ale pořád je to lepší než to bylo! |
||
Plaváček Profil |
#6 · Zasláno: 18. 5. 2012, 12:15:47
jirka2:
I to lze vyřešit - ostatně dobrou praxí je odrážky vyrábět obrázkem na pozadí. Bez kontextu umístění na konkrétní stránce se ale těžko radí. |
||
Časová prodleva: 12 let
|
0