Bild von Liste umfliessen lassen

[Alex73]

Hallo,

ich brauch mal eure Hilfe. Ich bin zur Zeit dabei meiner Website ein neues Design zu verpassen. Und wenn ich schon dabei bin, wollte ich auch den Code ein wenig verbessern. Derzeit hab ich Probleme mit folgender Seite.

Ich will also rechts drei Bilder haben und links davon Text, wobei der Text neben Bild 2 und 3 eigentlich eine Liste darstellt. Bisher hab ich das mit Tabellen recht unsauber gelöst. Soll man ja aber nicht. Also hab ich versucht mit float und Listen zu arbeiten. Das Ergebnis seht ihr hier Test. Ist natürlich nur ein Teil des Codes, aber das Problem ist sichtbar. Das umfliessen klappt also nur mit dem ersten Listeneintrag.

Das Problem konnte ich lösen, indem ich erst die beiden Listen erstellen lasse und zum Schluß die Divs mit den Bildern mit position:relative an den richtigen Ort schiebe. Sieht zwar gut aus, unschöner Nebeneffekt ist aber, dass ich dann am Ende der Webseite viel leeren Raum habe.

Also hab ich es mit position:absolute versucht. Der leere Raum ist dann zwar weg und die Bilder werden auch schön umflossen. Wenn ich aber im Firefox mit der Schriftgröße variere, verschieben sich die Bilder nicht analog zum Text. Das war bei position:relativ nicht der Fall. Jetzt bin ich mit meinem Latein am Ende. Hat jemand Tipps wie ich das Ganze sauber löse? Bin ich vielleicht auf dem ganz falschen Weg?

Danke und Grüße
Alex

hier noch der massgebliche Code der CSS

ul, li {  
margin: 0;  
padding: 0;  
}  
  
li.innen {  
   display: inline;  
   float: left;  
   width: 6%;  
   font: 1.1em  Verdana;  
   margin: 0 3em 1.5em 0;  
}  
  
li.aussen {  
   display: inline;  
   float: left;  
   width: 85%;  
   font: 1.1em  Verdana;  
   padding: 0;  
   margin: 0 0 1.5em 0;  
}  
  
li.clr {  
   display: inline;  
   margin: 0;  
   padding: 0;  
   width: 1px;  
 }  
  
br.clr {  
   clear: left;  
   width: 1px;  
   font-size:1px;  
   margin: 0;  
   padding: 0;  
   overflow:hidden;  
 }

[Felix Riesterer]

Lieber Alex73,

Das Ergebnis seht ihr hier Test.

korrigiere Deine Dokumentstruktur so, dass sie einen Sinn ergibt. Es ist momentan ein Mischmasch von willkürlich (nämlich ihrem Aussehen nach) gewählten HTML-Elementen. Da hast Du mit CSS dann kaum noch den Überblick.

Meine Empfehlung:

<h1>Über mich</h1>  
<p>Der Text über warum ich Radsportler bin.</p>  
<h2>Mein Fuhrpark</h2>  
<ul>  
    <li>  
        <img class="illustration-rechts" src="sommerbike.jpg" alt="Mein Sommerbike" />  
        Das ist mein Sommer-Bike.  
    </li>  
    <li>  
        <img class="illustration-rechts" src="winterbike.jpg" alt="Mein Winterbike" />  
        Das ist mein Winter-Bike.  
    </li>  
</ul>

Wenn Du das hast, dann sehen wir weiter.

Liebe Grüße,

Felix Riesterer.

[Alex73]

Hallo Felix,

danke erstmal dass du dir das überhaupt angeschaut hast. Ich werd versuchen das heute abend mal umzusetzen und meld mich dann wieder.

Grüße Alex

[alex73]

Hi Felix,

hab es jetzt mal überarbeitet und gleich noch einen Tipp von dir aus dem Jahr 2006 befolgt. Das Ergebnis sieht ganz gut aus: Testseite
Jedenfalls im Firefox. Der IE6 schreibt mir lediglich das Wort Kurbel links neben das Bild, dann kommt viel Freiraum und dann der Rest der Liste schön in zwei Spalten.

Hier der Teil der CSS

  
ul, li {  
list-style-type:none;  
margin: 0;  
padding: 0;  
}  
  
li.spalte1 {  
   float:left;  
   width: 6em;  
   font: 1.1em  Verdana;  
   margin: 0 0 0.5em 0;  
}  
  
li.spalte2 {  
   width: 30em;  
   font: 1.1em  Verdana;  
   margin: 0 0 0.5em 0;  
}

Ich hatte das irgendwie auch mal mit nur einer class für beide spalten. Auf der Seite der Schule die du 2006 verlinkt hast, ist das auch so. Habs dann aber nicht mehr hingekriegt.
Sieht das jetzt insgesamt besser aus? Mal noch ne ganz allgemeine Frage: Sollte man wirklich jede Art von Formatierung in der CSS haben. Also selbst Formatierungen die nur einmal vorkommen nicht direkt in die html-Datei schreiben, sondern mit class, id etc. und dann in der css definieren?

Grüße
Alex

[alex73]

Ok, hab den IE-Fehler gefunden. Meine Spaltenbreite war einfach zu groß!