nicht angemeldet
Probleme mit 100%-Höhe
Hi community,
Ich weiß, daß man Tabellen für das Layout nicht verwenden soll, aber ich habe als Vorgabe, das Design auf 100% Höhe zu bringen. Weil oben noch eine Navigationsleiste hinsoll, bleibt mir nur ein Tabellenlayout übrig.
Das Problem ist nun, daß die Höhenangaben für die Tabellenzellen nicht berücksichtigt werden.
Bei wenig Inhalt verlängert der IE auch die obere Tabellenzeile, was er aber nicht soll, denn ich habe hier die Höhe auf 4.7em festgelegt. erst, wenn die Seite scrollbar wird, verschwindet dieser Abstand. :-(
Ich habe testweise der Zelle, in der die Navi steckt, einen roten Hintergrund gegeben, damit man es besser sehen kann.
Wie bekomme ich denn nun die obere Tabellenzeile genausohoch, wie im CSS angegeben?
liebe Grüsse Samira
PS: Ich komme im Moment leider nicht auf meinen Server, deshalb poste ich den Quellcode.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML>
<HEAD> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <STYLE type="text/css"> <!-- html, body { height: 100%;
} body { margin: 0; padding: 0; font-family : Verdana, sans-serif; font-size:12px; }
/* Aussentabelle */ table { height: 100%; width: 100%; padding: 0px; }
td { vertical-align: top; background-color: #ddd; color :#006; padding: 0; }
/* Links der oberen Navigation */ a:link, a:visited, a:hover, a:active { FONT: bold 14px Verdana, sans-serif; text-decoration:none; display:block; height: 100%; line-height:1.5em; border:1px solid transparent; }
a:link, a:visited { color: white; background-color: green; border:1px solid transparent; }
a:hover { color: white; background-color:#D2EC53; border:1px solid green; }
a.aktuell:link, a.aktuell:visited { color:#006; background-color:#D2EC53; border:1px solid green; }
a.aktuell:link:hover, a.aktuell:visited:hover { color:#fff; background-color:#D2EC53; border:1px solid green; }
/* obere Navigation */ table table { background-color:#eee; background-image:url(bg-blau.jpg); width:100%; border: 0.3em ridge #ccc; }
table table td { text-align:center; BACKGROUND-COLOR: green; padding:0; height:2em; }
/* linke Navigaton */ a.left:link, a.left:visited, a.left:hover { FONT: bold 16px Verdana, sans-serif; width:100%; line-height:1.6em; padding-left:5px; TEXT-DECORATION: none; margin-top:2px; DISPLAY: BLOCK; }
a.left:link, a.left:visited { COLOR: white; BACKGROUND-COLOR: green; }
a.left:hover { COLOR: green; BACKGROUND-COLOR: #D2EC53; border:1px solid green; }
h4 { font-size: 12px; font-style: italic; font-variant: small-caps; color: #069}
.info-rechts { margin-left:-15px; margin-top:11px; }
- html .info-rechts { margin-left:22px; margin-top:-22px; } --> </STYLE>
</head>
<body>
<TABLE cellspacing="0"> <tr valign="top"> <TD colspan="3" style="height: 4.7em; background-color:red;"> <TABLE cellspacing="1" > <COLGROUP width="25%" span="4"> </COLGROUP> <TR> <TD nowrap><a href="#">Home</a></TD> <TD nowrap><a href="#">Service</A></TD> <TD nowrap ><a href="#" class="aktuell">Jobs</A></TD> <TD style="vertical-align: middle;" rowspan="2"> <DIV> <SELECT size="1" name="suche"> <OPTION value="1 ">Gehe zu </OPTION> <OPTION value="3 ">Jobs </OPTION> <OPTION value="9 ">Bewerbung </OPTION> <OPTION value="17 ">Weiterbildung </OPTION> <OPTION value="22 ">Impressum </OPTION> </SELECT> <INPUT type="submit" value="Go" valign="absmiddle"> </DIV> </TD> </TR>
<TR > <TD nowrap><a href="#">link-4</a></A></TD> <TD nowrap><a href="#">link-5</a></A></TD> <TD nowrap><a href="#">link-6</a></A></TD> </TR> </TABLE> </td> </tr>
<!-- linken Balken --> <TR> <TD style="width:180px; vertical-align:top; "> <DIV style=" width:100% "> <IMG src="bild_aktuell.jpg" width="180" height="80" alt="Bild"> <P style="margin-top:33px;" > <A href="#" class="left"> link-3a</A> <A href="#" class="left"> link-3b</A> <A href="#" class="left"> link-3c</A> <A href="#" class="left"> Dienstleistungen</A> </DIV> </TD>
<!-- Inhaltsteil --> <TD style="background-color: white; border:1px solid navy;
vertical-align:top;"> <DIV style="padding:5px;"> <h2>hier ein Blindtext</h2> <P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras porttitor. Ut onummy vestibulum arcu.</P> <p>text<p>text<p>text </DIV> </TD>
<!-- rechten Balken --> <TD style="width:210px; vertical-align:top;"> <DIV style="margin-top:2px; margin-left:0; "> <H4>Kontakt</H4> <HR style="margin-left:0; width:80%; height:2px; "> <UL class="info-rechts" > <LI>Allgemeine Fragen richten Sie bitte an <A class=textlink href="mailto:x@x.de">job@abc.de</A> </LI> </UL> </DIV> </TD>
</TR> </TABLE>
</BODY> </HTML>
-
Hallo Samira,
Ich weiß, daß man Tabellen für das Layout nicht verwenden soll, aber ich habe als Vorgabe, das Design auf 100% Höhe zu bringen. Weil oben noch eine Navigationsleiste hinsoll, bleibt mir nur ein Tabellenlayout übrig.
auch per CSS kann es klappen ein XHTML Tableless Layout mit min-height 100% zu realisieren.
Wie bekomme ich denn nun die obere Tabellenzeile genausohoch, wie im CSS angegeben?
Wahrscheinlich mußt du die Tabellen anders verschachteln. Bei deinem Beispiel zieht der IE die äussere Tabelle bei 100% Höhe gleichmäßig auf und verteilt den verfügbaren Platz; hast du schonmal im Archiv, 99 oder 00, geschaut?
Grüsse
Cyx23
-
auch per CSS kann es klappen ein XHTML Tableless Layout mit min-height 100% zu realisieren.
Das hilft mir leider nicht viel weiter, denn das Design würde dann nicht nur aus einer Box bestehen, sondern aus 4 Boxen.
(oben, rechts, links und mitte)Schau dir den Code doch mal im Browser an.
Mozilla zeigt es richtig an.
Das geht nicht ohne eine Tabelle.Gruß
Samira
-