Problem mit Tabellenlayout
Luca
- design/layout
Hallo erstmal bin neu hier!
ich arbeite zurzeit ein meiner homepage und habe ein problem mit dem layout.
Ic habe eine kopf- und fußzeile (jeweils colspan="2") und in der mitte links das navi und rechts der text. das sollte dann eigentlich so aussehen:
-----Kopfzeile-----
N| Text
A| Text
V| Text
I| ...
-----Fußzeile------
das funzt auch super wenn ich viel text habe aber wenn ich nur 1-2 wörter habe sieht es dann so aus:
-----Kopfzeile-----
N| Text
A| ...
V|
I|
-----Fußzeile------
der text ist also verschoben...nicht in die mitte, auch nicht rechtsbündig oder sowas...keine ahnung woran das liegt. ich verwende kein padding oä. wenn ich den tabellenrand einblende ist der linke tabellenrand vom navi sehr weit weg von diesem (als wenn ich <td style="padding:"200px"> oder so verwenden würde)
Danke schon im voraus für eure hilfe
lg
Luca
Hallo,
hast du für Navi- und Inhalts-Zelle jeweils eine feste Breite vergeben? Ansonsten berechnet der Browser die Breite anhalt des jeweiligen Inhalts.
Zeig uns doch mal den Quellcode, den du für das Tabellengerüst verwendest.
Mathias
Hallo,
hast du für Navi- und Inhalts-Zelle jeweils eine feste Breite vergeben? Ansonsten berechnet der Browser die Breite anhalt des jeweiligen Inhalts.
Zeig uns doch mal den Quellcode, den du für das Tabellengerüst verwendest.
Ja eigentlich hab ich für das Navi eine Angabe gemacht -->
.navi {
float:left;
font-family:Kabel Ult Bt,Arial Black,Arial Black,Helvetica,sans-serif;
font-size:20px;
line-height:2em;
width:150px;
height:100%;
border-right:3px solid darkblue;
margin-right:2em;
margin-top:20px;
}
table {
color:#ffffff;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:13px;
}
p {
text-align:justify;
font-family:Verdana, Arial, Helvetica,sans-serif;
font-size:15px;
color:#ffffff;
}
(Habe jetz erstmal nur die wichtigen sachen aus dem Stylesheet kopiert...)
und hier die seite:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Seitentitel</title>
<link rel="stylesheet" type="text/css"
media="screen" href="designtable.css" />
</head>
<body>
<!--Tabellenanfang-->
<script language="JavaScript">
<!--
if (screen.availWidth >= 1650 ) {
document.write ('<table border="2" align="center" width="1000">');
} else if (screen.availWidth >= 1570 ) {
document.write ('<table border="0" align="center" width="920">');
} else if (screen.availWidth >= 1250 ) {
document.write ('<table border="0" align="center" width="860">');
} else if (screen.availWidth >= 1122 ) {
document.write ('<table border="0" align="center" width="820">');
} else if (screen.availWidth >= 994 ) {
document.write ('<table border="0" align="center" width="800">');
} else if (screen.availWidth >= 770 ) {
document.write ('<table border="0" align="center" width="750">');
}
//-->
</script>
<!--Kopfzeile-->
<tr><td colspan="2">
<div id="Kopfzeile">
<!--Sprachauswahl-->
<strong class="sprache"> Select your language
<script language="JavaScript">
<!--
function goto(form) {
var myindex=form.select1.selectedIndex
if (form.select1.options[myindex].value != "0") {
location=form.select1.options[myindex].value;}
}
-->
</script>
<form name="form1">
<select name="select1" onChange="goto(this.form)">
<option value="home.html">Deutsch (Home)</option>
<option selected value="0">English</option>
</select>
</form>
</strong>
<img src="Bilder/flaggen/degross.jpg" width="30" style="float:right; margin-right:10px; margin-top:3px;">
<!--Ende Sprachauswahl-->
<!--Kopfzeilentext-->
www.Muster.de <br />
Mustertext - Kopfzeile
<!--Ende Kopfzeilentext-->
</div>
</td></tr>
<!--Ende Kopfzeile-->
<!--Navigation-->
<tr><td valign="top">
<strong class="navi">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="biografie.html"><font color="yellow">Über
Mich</font></a></li>
<li><a href="tourdaten.html"> Termine</a></li>
<li><a href="bilder.html"> Galerie</a></li>
<li><a href="presse.html"> Presse</a></li>
<li><a href="videos.html"> Videos</a></li>
<li><a href="links.html"> Links</a></li>
<li><a href="kontakt.html"> Kontakt</a></li>
</ul>
</strong>
</td>
<!--Ende Navigation-->
<!--Textbereich-->
<td>
<script language="JavaScript">
<!--
if (screen.availHeight >= 1020 ) {
document.write ('<div style="overflow: auto; height:660px;">');
} else if (screen.availHeight >= 994 ) {
document.write ('<div style="overflow: auto; height:656px;">');
} else if (screen.availHeight >= 930 ) {
document.write ('<div style="overflow: auto; height:592px;">');
} else if (screen.availHeight >= 870 ) {
document.write ('<div style="overflow: auto; height:532px;">');
} else if (screen.availHeight >= 834 ) {
document.write ('<div style="overflow: auto; height:496px;">');
} else if (screen.availHeight >= 738 ) {
document.write ('<div style="overflow: auto; height:400px;">');
} else if (screen.availHeight >= 570 ) {
document.write ('<div style="overflow: auto; height:370px;">');
}
//-->
</script>
<h1>In work</h1>
<p>I'm still working on the English translation so it will be available soon...</p>
</div>
</td>
</tr>
<!--Ende des Textbereiches-->
<!--Fusszeile-->
<tr><td colspan="2">
<div id="Fusszeile">Made by Max Mustermann © 2009 <br />
<a href="Home.html">www.Muster.de</a> <a href="impressum.html">Impressum</a></div>
</td></tr>
<!--Ende Fusszeile-->
</table>
<!--Tabellenende-->
</body>
</html>
Ich habe ja die Breite der Tabelle auf 1000px gesetzt (bei einer availWidth von über 1650) muss ich dann auch noch dem Textbereich eine Breite zuweisen wenn ich dem Navi schon eine zugewiesen habe? Allerdings hab ich das schon probiert und wenn ich eine sehr große Breite angebe wird das width="1000" am Tabellenanfang einfach ignoriert und die Tabelle wird breiter... Soll ich dann also ausrechnen wie viel noch übrig bleibt und diese breite dann dem Textbereih zuordnen? 1000px-2em-scrollleiste??? das wär ein bisschen kompliziert
Wenn ich Javascript deaktiviert habe, lieferst du mir kaputtes HTML aus.
Ein <body> Element darf kein <tr> Element als Child haben.
Du solltest besser onload eine Klasse setzen, welche die gewünschte CSS Dimensionierung bereits vorgeschrieben hat.
Dadurch bleibst du in der Lage, dein HTML zu validieren.
mfg Beat
<?xml version="1.0" encoding="iso-8859-1"?>
Die XML-Deklaration solltest du weglassen, die bringt ältere IEs in den Quirksmode, was die Arbeit mit CSS erschwert.
<!--Tabellenanfang-->
<script language="JavaScript">
<!--
Die Auskommentierung von Scripten ist unnötig, du kannst einfach nur <script type="text/javascript"> schreiben (type- statt language-Attribut).
if (screen.availWidth >= 1650 ) {
document.write ('<table border="2" align="center" width="1000">');
Warum musst du hier zwingend JavaScript voraussetzen? Was passiert ohne JS? Kannst du das Layout nicht auch ohne JavaScript anpassungsfähig an die Browserbreite gestalten?
<tr><td valign="top">
<strong class="navi">
<ul>
Die Zelle (td-Element) sollte die Breite bekommen. Du kannst eine ID verwenden und diese dem td vergeben, z.B. <td id="navi">, dann mit #navi ansprechen.
strong darf ohnehin kein ul enthalten, das Element wird dann überflüssig. Fettschrift kannst du im CSS regeln, sofern nötig.
<li><a href="home.html">Home</a></li>
<li><a href="biografie.html"><font color="yellow">Über
Mich</font></a></li>
font?! Formatierungen solltest du über CSS regeln.
<script language="JavaScript">
<!--
if (screen.availHeight >= 1020 ) {
document.write ('<div style="overflow: auto; height:660px;">');
} else if (screen.availHeight >= 994 ) {
document.write ('<div style="overflow: auto; height:656px;">');
} else if (screen.availHeight >= 930 ) {
document.write ('<div style="overflow: auto; height:592px;">');
} else if (screen.availHeight >= 870 ) {
document.write ('<div style="overflow: auto; height:532px;">');
} else if (screen.availHeight >= 834 ) {
document.write ('<div style="overflow: auto; height:496px;">');
} else if (screen.availHeight >= 738 ) {
document.write ('<div style="overflow: auto; height:400px;">');
} else if (screen.availHeight >= 570 ) {
document.write ('<div style="overflow: auto; height:370px;">');
}
Warum beschränkst du hier die Höhe, willst du, dass das Layout immer auf einen Bildschirm passt?
Das ist sehr schwer zuverlässig umsetzbar. Die Abfrage von screen.availHeight ist eine der unzuverlässigsten Methoden. Du musst damit rechnen, dass bei manchen Benutzern trotzdem zwei Scrollbars angezeigt werden. Du müsstest eher die Viewport-Höhe auslesen.
<tr><td colspan="2">
<div id="Fusszeile">Made by Max Mustermann © 2009 <br />
<a href="Home.html">www.Muster.de</a> <a href="impressum.html">Impressum</a></div>
Das zusätzliche DIV ist unnötig.
Allgemein solltest du dich langsam mit CSS-Layout beschäftigen.
muss ich dann auch noch dem Textbereich eine Breite zuweisen wenn ich dem Navi schon eine zugewiesen habe?
Nein, das ist nicht nötig, aber achte wie gesagt darauf, dem td die Breite zuzuweisen.
Mathias
Hey erstmal danke für die Klasse Tipps! (bin ja auch erst 14 und Anfänger) Also ich hab die Seite jetzt überarbeitet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Titel der Seite</title>
<link rel="stylesheet" type="text/css"
media="screen" href="designtable.css" />
</head>
<body>
<!--Tabellenanfang-->
<script language="JavaScript">
if (screen.availWidth >= 1650 ) {
document.write ('<table border="0" align="center" width="1000">');
} else if (screen.availWidth >= 1570 ) {
document.write ('<table border="0" align="center" width="920">');
} else if (screen.availWidth >= 1250 ) {
document.write ('<table border="0" align="center" width="860">');
} else if (screen.availWidth >= 1122 ) {
document.write ('<table border="0" align="center" width="820">');
} else if (screen.availWidth >= 994 ) {
document.write ('<table border="0" align="center" width="800">');
} else if (screen.availWidth >= 770 ) {
document.write ('<table border="0" align="center" width="750">');
}
</script>
<!--Kopfzeile-->
<tr><td colspan="2">
<div id="Kopfzeile">
<!--Sprachauswahl-->
<strong class="sprache"> Select your language
<script language="JavaScript">
<!--
function goto(form) {
var myindex=form.select1.selectedIndex
if (form.select1.options[myindex].value != "0") {
location=form.select1.options[myindex].value;}
}
-->
</script>
<form name="form1">
<select name="select1" onChange="goto(this.form)">
<option value="home.html">Deutsch (Home)</option>
<option selected value="0">English</option>
</select>
</form>
</strong>
<img src="Bilder/flaggen/degross.jpg" width="30" style="float:right; margin-right:10px; margin-top:3px;">
<!--Ende Sprachauswahl-->
<!--Kopfzeilentext-->
www.Muster.de <br />
Max Mustermann - Kopfzeilentext
<!--Ende Kopfzeilentext-->
</div>
</td></tr>
<!--Ende Kopfzeile-->
<!--Navigation-->
<tr><td valign="top" id="navi">
<b>
<ul style="border-right:3px solid darkblue; padding-right:8px;">
<li><a href="home.html">Home</a></li>
<li><a href="biografie.html" style="color:yellow;">Über Mich</a></li>
<li><a href="tourdaten.html"> Termine</a></li>
<li><a href="bilder.html"> Galerie</a></li>
<li><a href="presse.html"> Presse</a></li>
<li><a href="videos.html"> Videos</a></li>
<li><a href="links.html"> Links</a></li>
<li><a href="kontakt.html"> Kontakt</a></li>
</ul>
</b>
</td>
<!--Ende Navigation-->
<!--Textbereich-->
<td>
<script type="text/javaScript">
if (screen.availHeight >= 1020 ) {
document.write ('<div style="overflow: auto; height:660px;">');
} else if (screen.availHeight >= 994 ) {
document.write ('<div style="overflow: auto; height:656px;">');
} else if (screen.availHeight >= 930 ) {
document.write ('<div style="overflow: auto; height:592px;">');
} else if (screen.availHeight >= 870 ) {
document.write ('<div style="overflow: auto; height:532px;">');
} else if (screen.availHeight >= 834 ) {
document.write ('<div style="overflow: auto; height:496px;">');
} else if (screen.availHeight >= 738 ) {
document.write ('<div style="overflow: auto; height:400px;">');
} else if (screen.availHeight >= 570 ) {
document.write ('<div style="overflow: auto; height:370px;">');
}
</script>
<noscript>
<div id="important">
<h1><span id="big">! </span> Javaskript deaktiviert</h1>
<p>Um diese Seite richtig anzeigen zu können, müssen sie in ihrem Browser Javascript aktivieren oder das Ausführen von Skripten auf dieser Seite zulassen.</p>
</div>
</noscript>
<h1>In work</h1>
<p>Hier der Text...</p>
</div>
</td>
</tr>
<!--Ende des Textbereiches-->
<!--Fusszeile-->
<tr>
<td colspan="2" id="Fusszeile">
Made by Max Mustermann © 2009 <br />
<a href="Home.html">www.Muster.de</a> <a href="impressum.html">Impressum</a>
</td>
</tr>
<!--Ende Fusszeile-->
</table>
<!--Tabellenende-->
</body>
</html>
so und hier das Stylesheet, vielleich gibts da ja auch noch was zu verbessern:-) :
#Kopfzeile {
background:url(bilder/kopfzeilenbg.png) repeat-x;
border-bottom:darkblue 3px solid;
color:white;
font-family:Kabel Ult Bt,Arial,Hevetica,sans-serif;
font-size:28px;
padding-bottom:5px;
padding-left:1em;
padding-right:5px;
text-align:left;
}
.sprache {
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:13px;
float:right;
}
form {
text-align:left;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:13px;
color:white;
}
select {
background:black;
color:white;
text-align:left;
width:100px;
}
body {
background:black url(bilder/DSC_0135klein.JPG) no-repeat;
background-attachment:scroll;
scrollbar-3dlight-color:#5B6874;
scrollbar-highlight-color:black;
scrollbar-face-color:#2F3D4D;
scrollbar-shadow-color:darkblue;
scrollbar-track-color:black;
scrollbar-darkshadow-color:#2D3848;
}
a:link {color:yellow; text-decoration:underline;}
a:visited {color:yellow; text-decoration:underline;}
a:focus {color:white; text-decoration:underline;}
a:hover {color:white; text-decoration:underline;}
a:active {color:white; text-decoration:underline;}
p {
text-align:justify;
font-family:Verdana, Arial, Helvetica,sans-serif;
font-size:15px;
color:#ffffff;
}
.galerie a:link {color:yellow; text-decoration:none;}
.galerie a:visited {color:yellow; text-decoration:none;}
.galerie a:focus {color:white; text-decoration:none;}
.galerie a:hover {color:white; text-decoration:none; border-left:2px solid yellow; border-top:2px solid yellow;}
.galerie a:active {color:white; text-decoration:none;}
h1 {
text-align:left;
font-family:Kabel Ult Bt,Arial Black,sans-serif;
font-size:32px;
color:#ffffff;
}
h2 {
font-size:20px;
font-family:Verdana,Arial,Helvetica,sans-serif;
color:#ffffff;
}
h3 {
font-size:16px;
font-family:Verdana,Arial,Helvetica,sans-serif;
color:#ffffff;
}
.liste {
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:13px;
color:#ffffff;
}
table {
color:#ffffff;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:13px;
}
#links a:link {color:yellow; text-decoration:underline; font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px;}
#links a:visited {color:yellow; text-decoration:underline; font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px;}
#links a:focus {color:white; text-decoration:underline; font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px;}
#links a:hover {color:white; text-decoration:underline; font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px;}
#links a:active {color:white; text-decoration:underline; font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px;}
hr {
color:darkblue;
}
#important {border:2px dotted red; width:400px; padding:10px;}
#big {font-size:45px; font-weight:bolder; color:red; font-family:Times New Roman, Arial, Helvetica, sans-serif;}
#navi {
font-family:Kabel Ult Bt,Arial Black,Arial Black,Helvetica,sans-serif;
font-size:20px;
line-height:2em;
width:193px;
padding-right:2em;
padding-top:20px;
}
#navi ul {list-style:none;}
#navi a:link { color:white; text-decoration:none; }
#navi a:visited { color:white; text-decoration:none; }
#navi a:focus { color:yellow; text-decoration:none; }
#navi a:hover { color:yellow; text-decoration:none; }
#navi a:active { font-size:19px; text-align:right; text-decoration:none; color:#ffd700; }
#unterpunkte {
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
line-height:1em;
color:white;
}
#unterpunkte a:link { color:white; text-decoration:none; }
#unterpunkte a:visited { color:white; text-decoration:none; }
#unterpunkte a:focus { color:yellow text-decoration:none; }
#unterpunkte a:hover { color:yellow; text-decoration:none; }
#unterpunkte a:active { color:yellow; font-size:11px; text-align:right; border:0px; text-decoration:none; }
#Fusszeile {
background:url(bilder/fuszeilenbg.png) repeat-x;
border-top:darkblue 3px solid;
width:100%;
color:white;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:13px;
padding-bottom:1px;
text-align:center;
padding-right:5px;
padding-left:5px;
margin-top:10px;
}
#Fusszeile a:link {color:white; text-decoration:none; }
#Fusszeile a:visited {color:white; text-decoration:none; }
#Fusszeile a:focus {color:yellow; text-decoration:none; }
#Fusszeile a:hover {color:yellow; text-decoration:underline; }
#Fusszeile a:active {color:yellow; text-decoration:none; }
gibt es einen entscheidenden Unterschied zwischen <script type=""> und <script language="">?? und zwischen "javascript" und "text/javascript" denn und kann ich die Auskommentierung von Skripten nicht stehen lassen (sicherheitsahlber wegen älteren Browsern??)
»»Warum musst du hier zwingend JavaScript voraussetzen? Was passiert ohne JS? Kannst du das Layout nicht auch ohne JavaScript anpassungsfähig an die Browserbreite gestalten?
Klar das kann ich, aber das problem ist wenn ich z.b. <...style="width:60%"> angebe, habe ich bei einer niedrigeren Auflöung eine total zusammengequetschte Seite. Für den Fall, dass jemand kein Javascript aktiviert haben sollte habe ich <noscript> eingefügt (dick und fett, rot unübersehbar siehe Stylesheet:-)).
»»Warum beschränkst du hier die Höhe, willst du, dass das Layout immer auf einen Bildschirm passt? Das ist sehr schwer zuverlässig umsetzbar. Die Abfrage von screen.availHeight ist eine der unzuverlässigsten Methoden. Du musst damit rechnen, dass bei manchen Benutzern trotzdem zwei Scrollbars angezeigt werden. Du müsstest eher die Viewport-Höhe auslesen.
Ja, das mit dem self.innerHeight hab ich alles schon durchgekaut und mir den Kopf darüber zerbrochen. Ich habe den Textbereich mit "overflow" gemacht, also brauche ich selbstverständlich auch "height". Dies wollte ich wie folgt lösen (nur im Prinzip!): <...style="overflow:auto; height:self.innerHeight-50px;" was ich nicht geschafft habe. Außerdem unterstützen ja auch nicht alle Browser (ältere) das innerHeight/Width Element, oder?
Falls mir jemand doch sagen kann wie meine Theorie mit "height:self.innerHeight-50px" funktionieren könnte wäre ich seehr dankbar.
»»Allgemein solltest du dich langsam mit CSS-Layout beschäftigen
Ich hatte meine komplette Seite schon auf CSS-Layout aber bin dann auf tabelle umgestiegen weil mir das "gegliederter" vorkam (float, inline usw. sind nicht so meine Sache)
@beat
»»Du solltest besser onload eine Klasse setzen, welche die gewünschte CSS Dimensionierung bereits vorgeschrieben hat. Dadurch bleibst du in der Lage, dein HTML zu validieren.
Sorry aber ich verstehe nur Bahnhof. Wäre ganz nett wenn du nur ganz kurz für Anfänger erklärst was du meinst.
Danke schon mal wieder im voraus! Luca