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