spango skrev:
...
Och jag lyckades typ får önskvärd effekt... om jag lade in en i varje div, för divvarna kollapsade, eftersom de var tomma. Jag har dock gett mig fan på fixa det här på ett "riktigt" sätt. Är det någon som kan åstadkomma vad jag vill göra med enbart HTML+CSS (inga bilder) och utan fulhack (typ eller tomma kommentarer)?...
Divvarna kollapsar för att 100% höjd i det här fallet blir "auto" eftersom deras förälder inte har en höjd satt. :)
Endast AP element kan basera procent på värdet av en auto höjd. AP är alltid block så divvarna kan ersättas av inline element, t.ex. span, b, eller annat.
En lösning utifrån din kod är:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
ul{
margin:0;
padding:0;
}
li{
list-style:none;
position:relative;
margin-bottom:-1px;
border:1px solid;
padding-right:5em;
}
li div{
position:absolute;
top:-1px;
right:-1px;
border:1px solid;
width:1.2em;
height:100%;
}
li div div{
right:1.2em;
}
</style>
</head><body>
<h1>Somewhere</h1>
<h2>Place 1</h2>
<ul>
<li>Item 1, which really is rather long and spans more than a line and causes a line break<div><div><div><div></div></div></div></div></li>
<li>Item 2<div><div><div><div></div></div></div></div></li>
</ul>
<h2>Place 2</h2>
<ul>
<li>Item 3<div><div><div><div></div></div></div></div></li>
<li>Item 4, which really is rather long, too, and spans more than line and causes a line break<div><div><div><div></div></div></div></div></li>
</ul>
</body></html>
