✔ <td> Höhe macht Probleme

Status
Nicht offen für weitere Antworten.
S

Skyway

Grünschnabel
Hallo!

Ich versuche seit 2 Tagen meine Tabelle auf die von mir gewünschte Größe zu trimmen. Ich schaffe es leider nicht. Muss auch dazu sagen, dass ich rin Anfänger in Sachen HTML und CSS bin.

Also folgendes funktioniert nicht:
Die Felder in denen Artikelnummer, Preis und AGB steht sollten 23Px hoch.
Und AGB sollte in der mittig zentriert sein.
Und das Ganze sollte auch nicht mehr verrutschen können!

Hier der verwaiste Link: http: //home.pages.at/benzinbruder/Te...tabelle-3.html

Weiß jemand von euch Rat Ich bin am verzweifeln.

Bittebitte helft mir!
Mit Dank im Voraus
Gruss
Robert


[editpost by mod]
 
Der Grund für die vertikale Ausdehnung der Tabellenzellen sind zum einen die h1-h4-Elemente (Überschriften 1. - 4.Ordnung), die im Textfluss einen Absatz zum nachfolgenden Element erzeugen, und zum anderen die allgemeine padding:10px -Angabe, die für alle vier Seiten eines Elements gilt.

Der überarbeitete HTML- u. CSS-Code stellt die entsprechenden Tabellenzellen mit der gewünschten Höhe dar:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>

<style type="text/css"><!--
body, td {font: italic small-caps bold  1em/1.5 verdana, sans-serif;}
td {font-style:normal; font-weight:normal; vertical-align:top;}
td.agb {vertical-align:middle;}
 p.h1 {color:#7B7F60; font-weight:bold; font-size:13px; padding:0; padding-left:10px; margin: 0;}
 p.pad {padding-left:50px;}
 p.h2 {color:#000000; font-weight:bold; font-size:12px; text-align:justify; padding:0; padding-left:10px; margin:0;}
 p.h3 {color:#666666; font-size:12px; text-align:justify; padding:0; padding-left:10px; margin:0;}
 p.h4 {color:#ffffff; font-size:12px; text-align:center; padding:0; padding-left:10px; margin:0;}
}
//--></style>

</head>
<body>

<table bgcolor="#7B7F60" cellspacing="0" cellpadding="0" border="0">
          <tr>
            <td colspan="7" width="834" height="5"><img src="s-pacer.gif" width="834" height="5" border="0"></td>
                          </tr><tr>
                            <td rowspan="5" width="5"><img src="s-pacer.gif" width="5" border="0" alt=""></td>
                                    <td bgcolor="#ffffff" width="206" height="23"><p class="h1 pad">Artikelnr. 301</p></td>
                                            <td rowspan="5" width="4"><img src="s-pacer.gif" width="4" border="0"></td>
                                    <td bgcolor="#E0E9DF" rowspan="3" width="404"><p class="h2">Artikelbeschreibung in Deutsch</p></td>
                            <td rowspan="5"width="4"><img src="s-pacer.gif" width="4" border="0"></td>
                    <td bgcolor="#E0E9DF" width="206" height="23"><p class="h1">Preis: 21,-Euro</p></td>
            <td rowspan="5" width="5"><img src="s-pacer.gif" width="5" border="0"></td>
          </tr><tr>
<td width="206" height="4"><img src="s-pacer.gif" width="206" height="4" border="0"></td>
    <td width="206" height="4"><img src="s-pacer.gif" width="206" height="4" border="0"></td>
                  </tr><tr>
                    <td bgcolor="#ffffff" rowspan="3" width="206" height="85"><img src="IMG_1000.JPG" width="100" height="75"><img src="IMG_1001.JPG" width="100" height="75"></td>
                            <td bgcolor="#E0E9DF" rowspan="2" width="206"><p class="h3">Zustandsbeschreibung</p></td>
                                          </tr><tr>
                                            <td bgcolor="#E0E9DF" width="404"><p class="h3">Text in English</p></td>
                                          </tr><tr>
                            <td bgcolor="#E0E9DF" width="404" height="25"><p class="h3">Für folgende Modelle: Pacer Sedan, Pacer Wagon, AMC Gremlin R6</p><p>&nbsp;</p></td>
                    <td bgcolor="#E0E9DF" width="206" height="27"><p class="h3">Versand nur mit Spedition</p></td>
            </tr><tr>
    <td class="agb" width="834" height="23" colspan="7"><p class="h4">AGB.</p></td>
  </tr>
</table>

</body>
</html>
 
Wow! Danke Michael!

Meine Probleme wurden gelöst, nur sind jetzt die Felder in der Mitte nicht mehr in der richtigen Größe.

"Artikelbeschrteibung" muß 58px hoch sein und die darunter 27 und 25px.

Glaubst kriegt man das auch noch hin?

Danke für Deine Hilfe! Ich hofe Du weißt auch noch in der Angelegenheit eine Lösung.

Danke und Gruss
Robert
 
Wird die Höhe der Zelle 'Artikelbeschreibung' auf 58 Pixel gesetzt, streckt es wieder die beiden äußeren Zellen (Artikel-Nr., Preis) in der Vertikalen auseinander.
 
Gibt es eine Möglichkeit die mittleren Felder in meiner Wunschhöhe zu gestalten, oder ist es aussichtslos in der Form?
 
Ich habe mal ein alternatives CSS-Layout erstellt, das alle gewünschten Höhen zulässt ;)

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
body {font: italic small-caps bold 12px verdana, sans-serif;}
div {font-style:normal; font-weight:normal;}
p {padding:0; padding-left:10px; margin: 0;}

div.wrapper
{
width: 850px;
margin: 0 auto;
background: #7B7F60;
}

div.leftCol
{
float:left;
width: 206px;
margin: 5px;
}

* html div.leftCol
{
margin: 5px 5px 5px 3px;
}

div.artikelnr
{
background: #ffffff;
line-height: 23px;
text-align: center;
color:#7B7F60;
font-weight:bold;
}

div.grafik
{
background: #ffffff;
text-align: center;
height: 85px;
margin-top: 5px;
}

div.rightCol
{
float:right;
width: 206px;
margin: 5px;
}

* html div.rightCol
{
margin: 5px 3px 5px 5px;
}

div.preis
{
background: #e0e9df;
margin: 0;
line-height: 23px;
color:#7B7F60;
font-weight:bold;
}

div.zustandsbeschreibung
{
background: #e0e9df;
margin-top: 5px;
height: 31px;
color:#666666;
}

div.versand
{
background: #e0e9df;
margin: 0;
height: 54px;
color:#666666;
}

div.centerCol
{
float: left;
width: 418px;
}

div.artikelbeschreibung
{
background: #e0e9df;
margin: 5px 0 0 0;
height: 58px;
font-weight: bold;
}

div.artikelbeschreibung p
{
padding-top: 5px;
}

div.englisch
{
background: #e0e9df;
height: 27px;
color:#666666;
}

div.modelle
{
background: #e0e9df;
height: 27px;
color:#666666;
}

div.clear
{
clear:left;
height: 0;
font-size: 0;
margin: 0;
padding: 0;
}

div.footer
{
line-height: 23px;
text-align: center;
color: #ffffff;
}
-->
</style>

</head>
<body>

<div class="wrapper">

     <div class="leftCol">
          <div class="artikelnr"><p>Artikelnr. 301</p></div>
          <div class="grafik"><img src="IMG_1000.JPG" width="100" height="75"><img src="IMG_1001.JPG" width="100" height="75"></div>
     </div>

     <div class="centerCol">
          <div class="artikelbeschreibung"><p>Artikelbeschreibung in Deutsch</p></div>
          <div class="englisch"><p>Text in English</p></div>
          <div class="modelle"><p>Für folgende Modelle: Pacer Sedan, Pacer Wagon, AMC Gremlin R6</p></div>
     </div>

     <div class="rightCol">
          <div class="preis"><p>Preis: 21,-Euro</p></div>
          <div class="zustandsbeschreibung"><p>Zustandsbeschreibung</p></div>
          <div class="versand"><p>Versand nur mit Spedition</p></div>
     </div>

     <div class="clear">&nbsp;</div>

     <div class="footer">AGB.</div>

</div>

</body>
</html>
 
Waaaahnsin!!
Danke schön!!

Habe eigentlich nicht erwartet, daß Du die ganze Arbeit für mich machst.

Ich verneige mich und sage herzlichen Dank!:)

Gruss aus Wien
Robert
 
Gern geschehen.

Das Erstellen des CSS-Modells war dann doch einfacher und ging schneller, als nach einer möglichen Lösung in der Tabellenkonstruktion zu suchen ;)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück