Luca: Problem mit Tabellenlayout

Beitrag lesen

SELF-Forum

Problem mit Tabellenlayout

Luca
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln