PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Problem mit Tabelle und automatischer Höhe

mf_2
2006-09-23, 15:51:59
Hallo,

Ich habe ein Problem. Ich verwende eine unsichtbare Tabelle als Gerüst für ein Homepagedesign. Das hat bei meiner privaten HP auch ganz gut geklappt. Nun habe ich aber ein sehr spezielles Problem, welches ich nicht lösen kann.
Folgende Tabelle will ich realisieren (die px-Zahlen sind die Abmessungen der Höhe der Zellen):



________________________
| | |
| 182px | 83px |
| |_____________|
| | |
|_________| auto |
| | |
| auto | |
| | |
| | |
|_________|_____________|
| | |
| 22px | 22px |
|_________|_____________|



Folgenden Code habe ich genommen um das zu verwirklichen:


.........

<TABLE border=0 cellpadding=0 cellspacing=0 style="width:100%;"><tr valign=top>
<td style="width:63px;height:100%;">
<TABLE border=0 cellpadding=0 cellspacing=0 style="width:100%"><TR><TD style="width:100%;height:182px;" class="abackgroundidtwo">182px</TD></TR>
<TR><TD style="width:100%;height:auto;" class="abackgroundidtwo2">auto</TD></TR><TR><TD style="width:100%;height:22px;" class="abackgroundidtwo3">22px</TD></TR></TABLE>

</td>
<td style="width:230px;height:100%;">

<TABLE border=0 cellpadding=0 cellspacing=0 style="width:100%"><TR valign=top><TD style="width:100%;height:83px;" class="backgroundidtwo">&nbsp;<BR>&nbsp;<BR><B>Search by starting letter</B></TD></TR>
<TR><TD style="width:100%;height:auto;" class="backgroundidtwo2">A B C<BR>D E F<BR>G H I<BR>J K L<BR>M N O<BR>P Q R<BR>S T U<BR>V W X<BR>Y Z 0-9<BR></TD></TR><TR><TD style="width:100%;height:22px;" class="backgroundidtwo3">22px</TD></TR></TABLE>

</td></tr></table>

........




Ich weiss, dass die Namen für die Klassen nicht soooo wahnsinnig sinnvoll sind, aber das Design ist ja noch lange nicht fertig.
Die klassen geben den einzelnen Zellen nur einen passenden Hintergrund.

Das Problem ist nun, dass nicht beide Tabellen die komplette Höhe der übergeordneten Tabellenzelle ausfüllen.

Das kommt nämlich dabei raus:
http://mf2server.gotdns.org/pics/3dc/tab-prob.png


Wenn ich den alpabetischen Index weglasse, dann ist das Problem seitenverkehrt (sprich: Die rechte Tabelle ist zu kurz).
Wie behebe ich das?
Könnt ihr mir da weiterhelfen?
Es ist wirklich dringend!! Ich verzweifle hier noch.
mithrandir
2006-09-24, 13:25:36
Sehr schlechter Stil, was das Lesen mühsam macht. Zumindest solltest du dich etwas an den Standard richten:
http://validator.w3.org

Zu deinem Problem. Am einfachsten erscheint mir, die beiden Sub-Tabellen einfach eine Höhe von 100% zu geben:
<table cellpadding="0" cellspacing="0" style="width: 100%; height: 100%;">
DanMan
2006-09-24, 16:36:43
Das Layout macht man auch nicht mit Tabellen (einer muss es ja sagen).
mf_2
2006-09-24, 22:18:50
Mit was könnte ich das Layout denn dann machen? DIV-Elemente haben irgendwie noch schlechter funktioniert. Ich werde morgen aber mal die Lösung von mithrandir ausprobieren.
Tommes
2006-09-24, 22:28:56
Warum brauchst du dafür:

http://mf2server.gotdns.org/pics/3dc/tab-prob.png

Eigentlich eine (zwei) Tabelle mit 2 Spalten und 3 Zeilen?

Und wie es anders geht? So:

<html>
<head>
<style>
<!--

#search {
background: #96CAE0;
border: 1px solid #ACA9B0;
width: 265px;
min-height: 204px;
float: left;
}

#search ul {
list-style-type: none;
width: 60px;
padding: 0;

}

#search ul li {
float: left;
width: 20px;
}

-->
</style>
</head>
<body>

<div id="search">
<h3>Search by starting letter</h3>

<ul>
<li>A</li><li>B</li><li>C</li>
<li>A</li><li>B</li><li>C</li>
<li>A</li><li>B</li><li>C</li>
<li>A</li><li>B</li><li>C</li>
<li>A</li><li>B</li><li>C</li>
<li>A</li><li>B</li><li>C</li>
<li>A</li><li>B</li><li>C</li>
<li>A</li><li>B</li><li>C</li>
</ul>
</div>

</body>
</html>

Statt der BG Farbe vll. ein halbtransparentes PNG.
DanMan
2006-09-25, 15:25:53
Der Semantik zuliebe sollte man dafür aber auch eine geordnete Liste nehmen. Schließlich hat das Alphabet eine fest definierte Reihenfolge.
Tommes
2006-09-25, 16:48:41
Hey das war ja nur eben fast & dirty, verbessern kann man daran noch 'ne Menge :)