nicht angemeldet
ul li Ausrichtungsproblem
Mein Ziel ist es eine Liste auszugeben, das der Texte rechts steht und das Bild links.
Nur steht der Text nun unterhalb des Bildes auf der linken Seite. Ich habe das gefühl, je mehr ich versuche es zu verbessern, desto grösser wird das Schlammasel.
In einem anderen Beitrag wurde der Code bei http://jsfiddle.net/ hinterlegt, was ich auch gemacht habe, um das ganze besser darzustellen:
http://jsfiddle.net/zka4zp54/1/
PS: Das Bild ist dann in dem DIV Container
* {
margin: 0;
padding: 0;
border:0;
list-style: none;
}
ul:first-child{
margin-bottom:40px;
float:left;
width:100%;
position:relative;
}
ul ul li:first-child{
border-bottom: 1px solid #C0C0C0;
}
ul ul {
margin-bottom:20px;
background:#ff0000;
}
li div{
width:37%;
margin-right:3%;
margin-bottom:20px;
border: 1px solid #C0C0C0;
height:100px;
}
li div .zoom{
width:20px;
height:20px;
background: url("pic.jpg") no-repeat;
position:absolute;
bottom:0;
right:0;
}
ul ul ul{
width:60%;
margin-left:40%;
background:#c0c0c0;
vertical-align: top;
display: inline-block;
}
ul ul ul .titel{
font-weight:bold;
color: #009E9A;
padding:0 0 2px 2px;
margin-bottom:10px;
border-bottom:0;
}
ul ul ul a{
background:#009E9A;
padding:4px 15px 5px 15px;
text-decoration: none;
font-weight:bold;
color:#fff;
font-size: 12px;
}
<ul>
<li>
<ul>
<li>
<div></div>
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li>
<div></div>
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li>
<div></div>
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
</li>
</ul>
</li>
</ul>
-
-
Danke qx
so klappt es. Nur wenn ich eine Tabelle in ein LI stecke, sprengt es mein CSS. Ich habe den Fehler auch gefunden. Es handelt sich um die Länge des Inhaltes zwischen
td /td
den es werden keine Umbrüche gemacht...
* { margin: 0; padding: 0; border:0; list-style: none; } ul { vertical-align: top; } ul ul ul { vertical-align: top; display: inline-block; } ul ul li div { width:27%; height: 100px; border: 1px solid #C0C0C0; display: inline-block; margin-right:3%; margin-bottom:20px; }<ul> <li> <ul> <li> <div></div> <ul> <li>text</li> <li>text</li> <li>text</li> <li>text</li> <li> <table> <tr> <td>Test</td> <td style="word-wrap:break-word;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.. </td> </tr> </table> </li> </ul> </li> </ul> </li> <li> <ul> <li> <div></div> <ul> <li>text</li> <li>text</li> <li>text</li> <li>text</li> <li>text</li> </ul> </li> </ul> </li> <li> <ul> <li> <div></div> <ul> <li>text</li> <li>text</li> <li>text</li> <li>text</li> <li>text</li> </ul> </li> </ul> </li> </ul>-
Hallo Andrea,
mir ein Rätsel, weswegen es bei einem Beispiel so kompliziert sein soll?
Weniger Code, dafür mit Klassenbezeichner führt zum gewünschten Ergebniss: jsfiddle
gruesse qx
-
-