räume mal zuerst deinen Quältext auf!!!

[Felix Riesterer]

Lieber Florian,

ich empfinde diesen HTML-Quelltext als enorm aufgebläht und semantisch fragwürdig. Oder wie würdest Du Dir diesen Ausschnitt semantisch erklären:

<li>  
    Im weiteren Schritt [...] Als Posteingangsserver <b>imap.xxxxxxxxx</b> und als Postausgangsserver <b>smtp.xxxxxxxxx</b> eintragen und wieder auf &quot;Weiter&quot; klicken.<br><br>  
    <div class="picture">  
     <img src="images/Image3.gif" width="503" height="385" border="0"><hr>  
     Server einrichten  
    </div><br><br><br>  
</li>

Die physikalische Auszeichnung (soll heißen: auf optische Wirkung ausgerichtet) mit <b>-Elementen ist in dem Moment nicht mehr sinnvoll, wo Dir CSS zur Verfügung steht. Da Du Klassen einsetzen kannst, solltest Du die <b>-Elemente durch <span>-Elemente ersetzen, die im Klassennamen eine inhaltliche Bedeutung tragen und über deren Rulesets Du dann das Aussehen steuern kannst.

Warum hat Du in Deinen Listenelementen am Ende zwei aufeinanderfolgende <br>-Elemente? Wenn Du einen Abstand zum folgenden Element brauchst, dann nimm doch (schon wieder!) CSS! Dazu ist es da! Gib dann halt Deiner <ol> eine Klasse, über die Du die <li>s steuern kannst!

Mein Vorschlag:
CSS:

ol#anleitung { /* was immer Du der OL geben willst */ }  
ol#anleitung li { margin-bottom: 2em; width:520px; }  
ol#anleitung span.markiert { font-weight: bold; color: #666666; }  
div.illustration-links { display: block, float: left; margin-right: 10px; border:1px solid blue; padding:5px; width:520px; text-align: center; }  
div.illustration-rechts { display: block, float: right; margin-left: 10px; border:1px solid blue; padding:5px; width:520px; text-align: center; }

HTML:

<ol id="anleitung">  
   <li>  
      Im weiteren Schritt [...] Als Posteingangsserver <span>imap.xxxxxxxxx</span> und als Postausgangsserver <span>smtp.xxxxxxxxx</span> eintragen und wieder auf &quot;Weiter&quot; klicken.  
      <div class="illustration-rechts">  
         <img src="images/Image3.gif" />  
         Server einrichten  
      </div>  
</li>

Jedenfalls so ist Dein Code extrem aufgebläht und teilweise sinnfrei.

Liebe Grüße aus Ellwangen,

Felix Riesterer.