nicht angemeldet
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>