Tabellen: Inhalt ganz oben beginnen, nicht mittig zentrieren

Blatos · 28.03.2008, 16:11

Hallo,
ich habe es nun endlich geschafft, mich von Frames zu lösen. Dazu habe ich eine Tabelle erstellt: Rechts ist der Inhalt, links die Navigationsleiste. Das sieht dann so aus:
http://www.sonnen-system.de/sonnensystem/merkur.php
Nun entsteht aber das Problem, dass sich die Navigationsleiste immer mittig zentriert und nicht an der gleichen Position bleibt. Deutlich wird das, wenn z. B. http://www.sonnen-system.de/sonnensystem/erde.php besucht. Die Navigationsleiste befindet sich nun weiter unten.

Wie kann ich es machen, dass der Tabelleninhalt immer ganz oben steht?

Viele Grüße,
Blatos

MichaelM · 28.03.2008, 16:14

Du mußt der inneren Tabelle folgende Eigenschaft zuweisen

<td align="left" valign="top">

Hier ein Beispiel: Eine äußere Tabelle mit einer darin befindlichen Tabelle

HTML-Code:

<table width="80%" border="0" cellspacing="0" cellpadding="5">
  <tr>
    <td align="left" valign="top"><table width="29%" border="0" cellspacing="0" cellpadding="5">
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table>
    </td>
  </tr>
</table>

Und hier Dein Quelltext womit es funktionieren sollte:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Die Erde, Der Mond</title>
<style type="text/css">
<!--
body,td,th {
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
}
body {
	background-image: url(images/background.gif);
}
a:link {
	color: #FF9900;
}
a:visited {
	color: #FF9900;
}
a:hover {
	color: #FF6600;
}
a:active {
	color: #FF6600;
}
.Stil1 {
	font-size: x-small
}
-->
</style></head>

<body>
<table border="0">
  <tr>
    <td align="left" valign="top"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Navigation durch das Sonnensystem</title>
<style type="text/css">
<!--
body,td,th {
	color: #FFFFFF;
}
body {
	background-image: url(images/background.gif);
}
a:link {
	color: #FF6600;
}
a:hover {
	color: #FF9900;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_nbGroup(event, grpName) { //v6.0
  var i,img,nbArr,args=MM_nbGroup.arguments;
  if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
    } }
  } else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
      nbArr[nbArr.length] = img;
    }
  } else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) {
      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
  } else if (event == "down") {
    nbArr = document[grpName];
    if (nbArr)
      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
      nbArr[nbArr.length] = img;
  } }
}
//-->
</script>
</head>

<body onload="MM_preloadImages('images/navigation/mars2.jpg','images/navigation/merk2.jpg','images/navigation/venu2.jpg','images/navigation/erde2.jpg','images/navigation/plan2.jpg','images/navigation/jupi2.jpg','images/navigation/satu2.jpg','images/navigation/uran2.jpg','images/navigation/nept2.jpg','images/navigation/kuip2.jpg')">
<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td><a href="merkur.php" target="_top" onclick="MM_nbGroup('down','group1','Merkur','images/navigation/merk2.jpg',1)" onmouseover="MM_nbGroup('over','Merkur','images/navigation/merk2.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="http://www.traum-projekt.com/forum/images/navigation/merk1.jpg" alt="Merkur" name="Merkur" width="150" height="25" border="0" id="Merkur" onload="" /></a></td>
  </tr>
  <tr>
    <td><a href="venus.php" target="_top" onclick="MM_nbGroup('down','group1','Venus','images/navigation/venu2.jpg',1)" onmouseover="MM_nbGroup('over','Venus','images/navigation/venu2.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="http://www.traum-projekt.com/forum/images/navigation/venu1.jpg" alt="Venus" name="Venus" width="150" height="25" border="0" id="Venus" onload="" /></a></td>
  </tr>
  <tr>
    <td><a href="erde.php" target="_top" onclick="MM_nbGroup('down','group1','Erde','images/navigation/erde2.jpg',1)" onmouseover="MM_nbGroup('over','Erde','images/navigation/erde2.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="http://www.traum-projekt.com/forum/images/navigation/erde1.jpg" alt="Erde" name="Erde" width="150" height="25" border="0" id="Erde" onload="" /></a></td>
  </tr>
  <tr>
    <td><a href="mars.php" target="_top" onclick="MM_nbGroup('down','group1','Mars','images/navigation/mars2.jpg',1)" onmouseover="MM_nbGroup('over','Mars','images/navigation/mars2.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="http://www.traum-projekt.com/forum/images/navigation/mars1.jpg" alt="Mars" name="Mars" width="150" height="25" border="0" id="Mars" onload="" /></a></td>
  </tr>
  <tr>
    <td><a href="planetoidenguertel.php" target="_top" onclick="MM_nbGroup('down','group1','Planetoidenguertel','images/navigation/plan2.jpg',1)" onmouseover="MM_nbGroup('over','Planetoidenguertel','images/navigation/plan2.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="http://www.traum-projekt.com/forum/images/navigation/plan1.jpg" alt="Planetoidengürtel" name="Planetoidenguertel" width="150" height="25" border="0" id="Planetoidenguertel" onload="" /></a></td>
  </tr>
  <tr>
    <td><a href="jupiter.php" target="_top" onclick="MM_nbGroup('down','group1','Jupiter','images/navigation/jupi2.jpg',1)" onmouseover="MM_nbGroup('over','Jupiter','images/navigation/jupi2.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="http://www.traum-projekt.com/forum/images/navigation/jupi1.jpg" alt="Jupiter" name="Jupiter" width="150" height="25" border="0" id="Jupiter" onload="" /></a></td>
  </tr>
  <tr>
    <td><a href="saturn.php" target="_top" onclick="MM_nbGroup('down','group1','Saturn','images/navigation/satu2.jpg',1)" onmouseover="MM_nbGroup('over','Saturn','images/navigation/satu2.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="http://www.traum-projekt.com/forum/images/navigation/satu1.jpg" alt="Saturn" name="Saturn" width="150" height="25" border="0" id="Saturn" onload="" /></a></td>
  </tr>
  <tr>
    <td><a href="uranus.php" target="_top" onclick="MM_nbGroup('down','group1','Uranus','images/navigation/uran2.jpg',1)" onmouseover="MM_nbGroup('over','Uranus','images/navigation/uran2.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="http://www.traum-projekt.com/forum/images/navigation/uran1.jpg" alt="Uranus" name="Uranus" width="150" height="25" border="0" id="Uranus" onload="" /></a></td>
  </tr>
  <tr>
    <td><a href="neptun.php" target="_top" onclick="MM_nbGroup('down','group1','Neptun','images/navigation/nept2.jpg',1)" onmouseover="MM_nbGroup('over','Neptun','images/navigation/nept2.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="http://www.traum-projekt.com/forum/images/navigation/nept1.jpg" alt="Neptun" name="Neptun" width="150" height="25" border="0" id="Neptun" onload="" /></a></td>
  </tr>
  <tr>
    <td><a href="kuiperguertel.php" target="_top" onclick="MM_nbGroup('down','group1','Kuiperguertel','images/navigation/kuip2.jpg',1)" onmouseover="MM_nbGroup('over','Kuiperguertel','images/navigation/kuip2.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="http://www.traum-projekt.com/forum/images/navigation/kuip1.jpg" alt="Kuipergürtel" name="Kuiperguertel" width="150" height="25" border="0" id="Kuiperguertel" onload="" /></a></td>
  </tr>
</table>
<p align="left">	 <a href="http://www.sonnen-system.de/"><img src="http://www.traum-projekt.com/forum/images/navigation/startseite.jpg" alt="Zurück zur Startseite" width="100" height="25" border="0" /></a></p>
</body>
</html>
&nbsp;</td>
    <td><p align="justify">Die Erde ist der von der Sonne aus betrachtet dritte Planet im Sonnensystem. Ihre mittlere Entfernung von der Sonne beträgt 149,6 <img src="http://www.traum-projekt.com/forum/images/erde1.jpg" alt="Much of the information contained in this image came from a single remote-sensing device-NASA’s Moderate Resolution Imaging Spectroradiometer, or MODIS. Flying over 700 km above the Earth onboard the Terra satellite, MODIS provides an integrated tool for observing a variety of terrestrial, oceanic, and atmospheric features of the Earth. The land and coastal ocean portions of these images are based on surface observations collected from June through September 2001 and combined, or composited, every eight days to compensate for clouds that might block the sensor’s view of the surface on any single day. Two different types of ocean data were used in these images: shallow water true color data, and global ocean color (or chlorophyll) data. Topographic shading is based on the GTOPO 30 elevation dataset compiled by the U.S. Geological Survey’s EROS Data Center. MODIS observations of polar sea ice were combined with observations of Antarctica made by the National Oceanic and Atmospheric Administration’s AVHRR sensor—the Advanced Very High Resolution Radiometer. The cloud image is a composite of two days of imagery collected in visible light wavelengths and a third day of thermal infra-red imagery over the poles. Global city lights, derived from 9 months of observations from the Defense Meteorological Satellite Program, are superimposed on a darkened land surface map. (C) Nasa" width="300" height="300" align="right" />Mio. km. Im sonnennächsten Punkt ihrer Bahn, im Perihel (Anfang Januar), ist die Erde 147 Mio. km, im sonnenfernsten Punkt, im Aphel (Anfang Juli), 152 Mio. km von der Sonne entfernt. </p>
    <p align="justify">Wir auf der Erde bewegen uns ständig mit einer mittleren Geschwindigkeit von 29,8 km/s (über 100.000 km/h) fort. Diese Geschwindigkeit  ist in Sonnennähe etwas größer, in Sonnenferne etwas kleiner.</p>
    <p align="justify">Die Erde ist mit 12.742 Kilometer mittlerem Durchmesser der größte der vier terrestrischen (erdähnlichen) Planeten (Merkur, Venus, Erde, Mars).</p>
    <p align="justify">Die Oberfläche der Erde ist zu 71 Prozent von Ozeanen bedeckt, die restlichen 29   Prozent ragen als Landmassen unterschiedlich hoch aus den Ozeanen heraus. Die Atmosphäre besteht zum überwiegenden Teil aus Stickstoff   (78 Prozent) und Sauerstoff (21 Prozent), den Rest bilden Spurengase. Die   mittlere Temperatur an der Oberfläche liegt bei 15 Grad Celsius.</p>
    <p align="justify">Die Erde dreht sich in 23 Stunden und 56 Minuten einmal um ihre Achse. Diese   Zeitspanne wird Sterntag genannt (im Gegensatz zum Sonnentag, der die Drehung um die Sonne berücksichtigt). </p>
    <p align="justify"><strong>Mond:</strong></p>
    <p align="justify"><img src="http://www.traum-projekt.com/forum/images/erde2.jpg" alt="Photo taken of Refractor 103mm F/D20 Film fuji velvia 50. This illustration was made by Luc Viatour." width="200" height="273" align="left" />Erde und Erdmond (Durchmesser: ca. 3 500 km) sind enge kosmische Partner. Sie bewegen sich seit ihrer Entstehung           gemeinsam um die Sonne. Während die Erde der Planet des Lebens ist,           herrschen auf dem Mond Bedingungen, unter denen sich nicht einmal primitive           Einzeller entwickeln konnten. Der Mond           ist der einzige Himmelskörper außerhalb der Erde, den Menschen           bisher besuchten.</p>
    <p align="justify">Die Einwirkung des Mondes auf die Erde besteht in erster Linie in den Gezeiten; Einflüsse auf das Wetter sind nicht nachweisbar.</p>
    <p align="justify">Der Mond umläuft die Erde auf einer nahezu kreisförmigen  Ellipse in rund 27 Tagen und 8 Stunden. Er dreht sich dabei gleichzeitig einmal um seine eigene Achse. Dies hat eine bemerkenswerte Auswirkung: Von der Erde sieht man immer dieselbe Seite des Mondes.</p>
    <p align="justify">Da der Mond atmosphärelos ist, heizt sich das Mondgestein im Sonnenlicht bis auf   +120 Grad Celsius auf. In der vierzehntägigen Mondnacht sinkt die   Bodentemperatur bis zu -130 Grad ab.</p>
    <p align="justify">Charakteristisch für den Mond sind die Einschlagskrater, die vor etwa 4 Milliarden Jahren entstanden, als ein regelrechter Meteoritenhagel den Mond heimsuchte.</p>
    <p align="right" class="Stil1">Abb. 2: <a href="http://www.lucnix.be/main.php" target="_blank">Luc Viatour</a></p>
    <p>&nbsp;</p></td>
  </tr>
</table>
<p>&nbsp;</p>
</body>
</html>

Aber warum Du 2 DOCTYPES auf dieser Seite hast, kann ich nicht ganz nachvollziehen.

Blatos · 28.03.2008, 16:55

Vielen Dank für die ausführliche Antwort, ich habe es nun hinbekommen!

Die 2 Doctypes kann ich allerdings selbst nicht nachvollziehen, denn der Dreamweaver-Code sieht anders aus, ich habe dort lediglich stehen:

Code:

<? include ("navi.php"); ?>

Im Quelltext der Homepage wird statt dieser Zeile dann der ganze Inhalt der navi.php eingebunden. Ich hatte mir das ehrlichgesagt auch anders vorgestellt. Gibt es da andere Möglichkeiten? Wer macht das überhaupt? Dreamweaver oder der Webserver?

Rinaldo · 28.03.2008, 19:02

Zitat:

Zitat von Blatos

Wer macht das überhaupt? Dreamweaver oder der Webserver?

Du?

Dreamweaver macht eigentlich nicht solche Sachen aus Spaß, weil ihm gerade langweilig war

...

Schau Dir einfach mal die Datei navi.php an und entferne das überflüssige Zeugs.

Ob man das anders machen kann? Sicher, es gibt viele Möglichkeiten. Die für Dich vielleicht sogar komfortabelste: Nutze das umfangreiche Vorlagen-System von Dreamweaver.

Du erstellst das Layout Deiner Site und gibst noch bearbeitbare bzw. nicht bearbeitbare Bereiche an. Wenn Du jetzt z.B. an dem Layout etwas änderst, werden alle Seiten, die diese Vorlage nutzen, geändert.

Blatos · 29.03.2008, 15:09

Zitat:

Zitat von Rinaldo

Schau Dir einfach mal die Datei navi.php an und entferne das überflüssige Zeugs.

Okay, hab ich gemacht, nun müsste alles Überflüssige entfernt sein.

Vielen Dank!

Viele Grüße,
Fabian

Rinaldo · 29.03.2008, 16:42

Zitat:

Zitat von Blatos

nun müsste alles Überflüssige entfernt sein

Schon mal geprüft?

HTML-Code:

</tr>
</table>
<p align="left">&nbsp;</p>
</body>

</html>
&nbsp;</td>
...
..
.
<p>&nbsp;</p>
</body>
</html>

Blatos · 29.03.2008, 16:55

Hmm, ich verstehe nicht ganz, was du mit dem Code-Ausschnitt meinst. Die navi.php endet nach

Code:

</tr>
</table>
<p align="left">&nbsp;</p>
</body>

</html>

Rinaldo · 29.03.2008, 17:03

Sicher - aber da die Navi ja in eine andere Datei eingebettet wird, kommt es doch noch zu dem Fehler. Schau Dir einfach mal den Quelltext der Seite an, die Dein Browser vom Server lädt...

Blatos · 29.03.2008, 17:28

Danke für den Hinweis, ich habe nun noch aus der navi.php

Code:

<head>

sowie

Code:

<p align="left">&nbsp;</p>
</body>

</html>

entfernt.
Habe ich sonst noch was vergessen?

Boris · 30.03.2008, 09:47

Es darf pro HTML Seite nur einen <head> und einen <body> geben ... räum weiter auf

Blatos · 30.03.2008, 17:19

Vielen Dank für die Hinweise

Zitat:

Zitat von Boris

Es darf pro HTML Seite nur einen <head> und einen <body> geben ... räum weiter auf

Nun gibt es pro Seite nur ein <head>, <body>, </head>, </body>.

Gibt es sonst noch eine unkonforme Stelle?

Gruß,
Fabian