nicht angemeldet
Lieber Daniel_,
Du verwendest eine Tabelle, um Deine Seite visuell zu strukturieren. Das ist wahrscheinlich Dein Hauptproblem. Soweit ich mich erinnere vergrößert der Internet-Explorer die Breite der Tabelle gerne einmal, wenn der Inhalt darin anscheinend mehr Platz braucht. Und wahrscheinlich ist genau das Dein Problem.
Genau hier versuchst Du eigentlich etwas unmögliches. Du verlangst, dass in einer Tabellenzeile (die eigentlich eine durchgehend gleiche Höhe hat!) eine Zelle sich gigantisch nach unten ausdehnen soll, während alle anderen Zellen ihre 40px Höhe beibehalten. Von der Idee einer Tabelle her ist das ein gigantischer Unsinn. Dass der IE sich hier weitestgehend an Deine Vorgaben hält, ist eigentlich bemerkenswert!
Ich habe im IE auf der Seite
einmal folgenden Code in die Adresszeile eingegeben, um zu testen, ob meine Vermutung sich bestätigt: javascript:alert(document.getElementsByTagName("table")[0].getElementsByTagName("tr")[1].getElementsbyTagName("td")[2].innerHTML);
Prompt wird Dein DIV-Element mit dem ganzen Seiteninhalt durch ein kurzes Wort "test" ersetzt und prompt schnalzt auch Dein "Navigation"-Feld in seine gewollten Ausmaße zurück.
Fazit: Deine Layouttabelle ist absolut nicht das geeignete Mittel, um das von Dir gewünschte Layout zu erreichen. Du möchtest Dich eingehender mit [ref:self812;css/layouts.htm@title=CSS-basierten Layouts] beschäftigen.
Dazu möchtest Du Dich darum kümmern, dass Dein Code semantischer wird. Was soll dieses "semanitsch" nun bedeuten? Das bedeutet, dass Du für die Inhalte genau die HTML-Elemente wählst, die die Natur dieser Inhalte am treffendsten wiedergeben. Zum Beispiel ist eine Navigation eine Liste (<ul> oder gar <ol>) von Links (<li>-Elemente). Du machst das bisher anders.
Weitergehend möchte ich Dir empfehlen, noch strenger zu trennen, ob ein Bild nun ein Inhaltselement (Grafik zur Veranschaulichung, Foto) ist, oder nur ein "Designelement" zur Ausschmückung Deines Layouts. In diesem Zusammenhang sind die rötlichen Quadrate vor Deinen Links eben keine <img>-Elemente, sondern Hintergrundbilder, die Du Deinen Links verpassen kannst. Im Falle einer [ref:self812;css/layouts/navigationsleisten.htm@title=sinnvoll erstellten Navigation] kannst Du die Hintergrundbilder den <li>-Elementen verpassen.
Wie Du nun Deine "Kästen" in Reih' und Glied bringst, das können wir hier gerne wieder diskutieren, wenn Du Deine Seiten-Struktur umgemodelt hast. Ich mache hier für Dich einmal den Anfang, basierend auf dem Code der Seite test.php. Code ist im "Anhang"... weiter bin ich in der kurzen Zeit jetzt nicht gekommen.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="description" content="Die Startseite des MTV Borsum">
<meta name="keywords" content="MTV, MTV Borsum, Aktuelles">
<meta name="author" content="Daniel Lodahl">
<title>MTV Eintracht Borsum: Home</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" href="favicon.ico">
<style type="text/css">
/*
Dieser Code gehört in eine externe CSS-Datei!
Die Pfade zu Hintergrundbildern müssen dann entsprechend
relativ zu dieser Datei sein...
*/
body {
margin: 0px;
padding: 0px;
background: #ffffff;
font-family: Arial, sans-serif;
}
#seite {
overflow: hidden;
margin: 0px;
padding: 0px;
background: url(http://www.mtv-borsum.de/ogrein/images/layout/4.jpg) right repeat-y;
}
#header {
margin: 0px;
padding: 0px;
height: 90px;
background: url(http://www.mtv-borsum.de/ogrein/images/layout/header_back.jpg) repeat-x;
}
#header span {
float: right;
width: 199px;
height: 90px;
background: url(http://www.mtv-borsum.de/ogrein/images/layout/headers/home.jpg) no-repeat;
}
#header #logo {
float: left;
width: 479px;
height: 90px;
background: url(http://www.mtv-borsum.de/ogrein/images/layout/logo.jpg) no-repeat;
}
#inhalt {
border: 1px solid transparent;
border-right: none;
margin: 0px 0px 0px 200px;
padding: 0px 36px 0px 0px;
background: url(http://www.mtv-borsum.de/ogrein/images/layout/2.jpg) right top no-repeat;
}
#navi {
width: 196px;
height: 100%;
position: absolute;
top: 90px;
left: 0px;
font-size: 80%;
background: #ffdcec url(http://www.mtv-borsum.de/ogrein/images/layout/1.jpg) right top no-repeat;
}
#navi h2 {
margin: 0;
padding: 0px 0px 0px 1px;
height: 40px;
background: url(http://www.mtv-borsum.de/ogrein/images/layout/navigation.jpg) left top no-repeat;
font-size: 1px;
color: #d77d7c;
}
#navi ul {
position: relative;
top: -40px;
margin: 40px 0px 0px 0px;
padding: 2px 41px 0px 5px;
list-style: none;
background: url(http://www.mtv-borsum.de/ogrein/images/layout/3.jpg) right repeat-y;
}
#navi ul li {
padding: 3px 0px;
}
#navi ul li form,
#navi ul li ul {
position: static;
margin: 0px auto;
padding: 1px 0px;
border: 1px solid #8a8a8a;
background: #ffffff;
}
#navi ul li ul li {
padding: 0px 0px 0px 25px;
background: url(http://www.mtv-borsum.de/ogrein/images/layout/navdot.jpg) 9px center no-repeat;
}
#navi ul li ul li a {
text-decoration: none;
color: #d30505;
}
#navi ul li ul li a:hover {
text-decoration: underline;
color: #ff8080;
}
#navi ul li form p {
margin: 0px;
padding: 1px;
text-align: right;
}
#navi ul li form label {
float: left;
}
#footer {
position: relative;
bottom: 0px;
width: 100%;
height: 30px;
background: url(http://www.mtv-borsum.de/ogrein/images/layout/footer_back.jpg) repeat-x;
}
#footer span {
float: right;
height: 30px;
width: 200px;
background: url(http://www.mtv-borsum.de/ogrein/images/layout/footer.jpg) no-repeat;
}
</style>
<!--[if IE]>
<style type="text/css">
/* Für den IE... Auch das hier in eine externe Datei auslagern! */
#navi ul li ul {
margin: 0px;
}
</style>
<![endif]-->
</head>
<body>
<div id="seite">
<div id="header"><span id="logo"></span><span></span></div>
<div id="inhalt">
<h1>Überschrift</h1>
<p>Text...</p>
<p>
aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
aaa<br>
</p>
</div>
<div id="navi">
<h2>Navigation</h2>
<ul>
<li>Allgemein
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Trainingszeiten</a></li>
<li><a href="#">Gallerie</a></li>
</ul>
</li>
<li>Abteilungen
<ul>
<li><a href="#">Judo/Ju-Jutsu</a></li>
<li><a href="#">Leichtathletik</a></li>
<li><a href="#">Seniorensport</a></li>
<li><a href="#">Tennis</a></li>
<li><a href="#">Turnen</a></li>
<li><a href="#">Volleyball</a></li>
<li><a href="#">Wandern</a></li>
</ul>
<li>Über uns
<ul>
<li><a href="#">Vorstand</a></li>
<li><a href="#">Übungsleiter</a></li>
<li><a href="#">Formulare</a></li>
<li><a href="#">Impressum</a></li>
</ul>
</li>
<li>Member
<form action="index.php" method="post">
<p><label for="lg_name">Name: </label><input name="lg_name" id="lg_name" type="text" size="10" maxlength="20"></p>
<p><label for="lg_pass">Kennwort: </label><input name="lg_pass" id="lg_pass" type="password" size="10" maxlength="20"></p>
<p><input type="submit" id="einloggen" value="Einloggen"></p>
</form>
</li>
</ul>
</div>
<div id="footer"><span></span></div>
</div>
</body>
</html>
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
Auge