Archivlink: javarea.de Forum > (X)HTML & CSS (allgemein) > Ungewollte Verschachtelung
Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > Ungewollte Verschachtelung

Pages: [1]
geschrieben von royter am 22.04.2006 - 13:59
Hallo,

ich will, dass sich das Bild jeweils links von der Liste positioniert. Soweit so gut. Allerdings verschachtelt sich das jetzt alles zu einer Treppe. Clear:left hilt da nicht recht, mein IE dreht da volkommen durch zeigt ganze Textbausteine nicht mehr an.

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de">
<head>
<title>---</title>
<style type="text/css">
div#test ul {
list-style-type:none;
padding:0px 0px 0px 0px;
margin:0px 0px 30px 0px;
}
div#test .bild {
border-width:1px;
border-style:solid;
border-color:#000000;
padding:1px;
float:left; width:100px;
margin-right:20px;
}
</style>
</head>
<body>
<div id="test">
<img src="xxx.jpg" alt="zzz" class="bild"/>
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
<img src="yyy.jpg" alt="zzz" class="bild" />
<ul>
<li>text</li>
<li>text</li>
</ul>
<img src="zzz.jpg" alt="zzz" class="bild" />
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
</div>
</body>
</html>


Hat jemand einen Lösungsvorschlag für mich?

Danke für Hilfe!

Gruß,
royter

geschrieben von René am 22.04.2006 - 16:09
Hallo royter,

ich verstehe nicht warum du überhaupt das float: left verwendest. Lasse es weg und es sieht so aus wie du es willst.

Oder du zeigst mal die richtige Seite wo das drin ist falls z.B. die <ul>...</ul> oder was weis ich auf z.B. center steht und die Bilder aber dennoch linksbündig sein sollen würde ich die Bilder auch in ein div packen und das dann mit text-align: left; versehen.

<div style="text-align: left;"><img ... /></div>

geschrieben von royter am 22.04.2006 - 21:19
Hi,

wenn ich das float:left weglasse, ordnet sich das Bild bei mir über der Liste an! Dahingehend nützt mir ein div auch leider nichts, oder etwa doch

geschrieben von René am 22.04.2006 - 22:31
Wie ist es hiermit?

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 
49: 
50: 
51: 
52: 
53: 
54: 
55: 
56: 
57: 
58: 
59: 
60: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de">
<head>
<title>---</title>

<style type="text/css">
/* <![CDATA[ */
.test ul
{
	margin: 0px 0px 30px 0px;
	list-style-type: none;
	padding: 0px;
}

.test .bild
{
	border: 1px solid #000;
	margin-right: 20px;
	padding: 1px;
	height: 20px;
	width: 100px;
	float: left;
}
/* ]]> */
</style>

</head>
<body>

<div class="test">
  <img class="bild" src="xxx.jpg" alt="zzz" />

  <ul>
    <li>text</li>
    <li>text</li>
    <li>text</li>
  </ul>
</div>

<div class="test">
  <img class="bild" src="yyy.jpg" alt="zzz" />

  <ul>
    <li>text</li>
    <li>text</li>
  </ul>
</div>

<div class="test">
  <img class="bild" src="zzz.jpg" alt="zzz" />

  <ul>
    <li>text</li>
    <li>text</li>
    <li>text</li>
  </ul>
</div>

</body>
</html>

geschrieben von royter am 24.04.2006 - 19:41
Sorry, ich korriegiere mich, jetzt funktioniert es, danke!


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.