Einfaches HTML, das weit weg erscheint?

Question

Ich kann nicht für das Leben von mir herauszufinden, warum mein Tisch so ausgeht.

alt text http://i39.tinypic.com/af7cco.png

HTML:

<div id="items"> 
    <div class="category"><h1>Apparel</h1></div> 
    <div class="list-product"> 
    <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
    <tr> 
     <td width="50" align="center" style="padding-right: 5px;"> 
     <img height="30" src="/images/products/none.jpg" /> 
     </td> 
     <td> 
     <img style="padding: 0 3px 0 0;" src="/images/icons/flag_red.png" /> 
     </td> 
     <td valign="middle"> 
     <strong>Test Product</strong><br /> 
     <span style="color: #777;">This has a short description.</span> 
     </td> 
    </tr> 
    </table> 
    </div> 
    ... and the other table here 
</div> 

CSS: versuchen

div#items 
{ 
width: 400px; 
} 

div.category 
{ 
padding: 7px 13px; 
background: #f0f0f0; 
color: #101010; 
font-size: 20px; 
border-bottom: 1px solid #d0d0d0; 
} 

.list-product 
{ 
border-bottom: 1px solid #ddd; 
font-size: 12px; 
padding: 10px; 
} 

Answer 1

Um Petes Antwort hinzuzufügen, und das CSS anstelle von Inline-Präsentations-Markup zu verwenden, möchten Sie vielleicht versuchen, vertical-align: middle zu dem CSS für die Tabellenzellen hinzuzufügen.

Als ein nachträglicher Einfall, möchten Sie vielleicht einen line-height: 100px (oder wie hoch Ihr Bild ist, plus ein wenig padding), um Ihre CSS für die Zellen hinzufügen, um die Bilder enthalten, und line-height: 50px (50% der line-height angeben von die Bildzellen) für die Zellen, die beschreibenden Text enthalten, bin ich mir nicht sicher, ob es funktioniert, aber es funktioniert manchmal, um Text zu zentrieren, wenn vertical-align nicht tut.

Answer 2

Might will ein valign auf den TD-Tags Die Bilder und Texte sollten aufgereiht werden. Valign = "Mitte" für alle von ihnen.

Answer 3

Verwenden Sie eine feste Breite für Ihre Tabelle und jedes td-Tag. Sie haben die Breite der Tabelle auf 100% und eine feste Breite auf dem ersten Tag festgelegt. Das zweite und das dritte Tag-Tag passen sich basierend auf dem Inhalt innerhalb der Tag-Tags an, um die 100% -Breite des Tabellen-Tags zu füllen.

Answer 4

versuchen Sie, vorübergehend einen Rahmen zur Tabelle hinzuzufügen, damit Sie sehen können, wo das Bild und der Text in ihren jeweiligen tds ausgerichtet werden. Müssen Sie auch einen Bereich für den Beschreibungstext verwenden?

Answer 5

Welcher Browser? Ich kopierte Ihren HTML-Code (fügte html & body-Tags hinzu), kopierte Ihren CSS-Code (fügte kopf & Style-Tags hinzu), und die vertikale Ausrichtung ist genau - stimmt nicht mit dem Problem in Ihrem Bild überein.

Versuchen Sie, verschiedenen Elementen einen Rahmen hinzuzufügen, um zu sehen, ob das die Verrückten erhellt. Und stellen Sie sicher, dass Sie keine Tippfehler zwischen Ihrem Code und dem hier eingefügten Code haben.

Answer 6

Verwenden Sie eine CSS-Reset-Datei? Das sieht für mich wie eine CSS-Sache aus. Vielleicht Zeilenhöhe?

Ich bin mir nicht sicher, dass es wichtig ist, aber ich würde von der Verwendung der Pause und Spanne, um Überschrift und Absatz-Tags verwenden und dann nur diese Stile.

<td valign="middle"> 
    <h2>Test Product</h2> 
    <p>This has a short description.</p> 
    </td>