| 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: 13 let
|
|||
0