Veraltetes Tabellendesign überarbeiten

Nadidz · 22.08.2009, 13:36

Hallo liebe Profis,
ich habe heute mal wieder überlegt, wie es eigentlich funktionieren soll, eine Homepage nur mit DIV-Container zu gestalten und irgendwie ist mir ein kleines Licht dabei aufgegangen. Meine private Homepage habe ich ja noch mit Tabellen aufgebaut, aber diese Technik ist ja veraltet, wie ich das jetzt so mitbekommen habe und viele haben mir auch schon gesagt, dass ich es mal mit DIV-Container versuchen soll. Aber irgendwie weiß ich halt nicht so richtig, wie ich das anstellen soll. Könnt ihr mir das vllt erklären oder kennt ihr vllt eine gute Website, auf der das gut erklärt ist??

Ich könnte mir das nur irgendwie so vorstellen, dass man zum Beispiel links einen DIV-Container erstellt und eine bestimmte Breite und Höhe festlegt und dann erstellt man eine Navigation, welche diesem Container zugeordnet wird und daneben erstellt man noch einen Container für den Inhalt und ordnet halt den Inhalt diesem Container zu. Aber ich weiß ja nicht, ob ich mit meinen Vorstellungen richtig liege^^

LG Nadidz

splasch · 22.08.2009, 14:32

Das ist ganz einfach. Schau auf die Webseite: http://www.stichpunkt.de/css/bereiche.html

Dort findest ein paar Css Layout Beispiele je mit erklärung.

Mfg Splasch

Nadidz · 22.08.2009, 15:14

Danke für den Link. Ich werde mir das ganze mal angucken.

Nadidz · 22.08.2009, 17:27

Ich denke ich bekomme das mit den DIV-Container hin, aber bevor ich damit anfange, habe ich jetzt noch eine Frage, die mir gerade eingefallen ist.

In irgendeinem Thread hat mir Disler mal etwas davon gesagt, dass man zum Beispiel eine Datei erstellt mit dem Inhalt der Navigation, also die einzelnen Punkte. Und wenn man nun eine Änderung in der Navigation vornehmen will, braucht man dies nur in der Datei tun, also so ähnlich wie in einer externen CSS-Datei. Wie stellt man das nun an? Denn es wäre schon eine Erleichterung, da brauch ich nicht in über 30 Seiten eine Änderung vornehmen^^

splasch · 22.08.2009, 17:39

Das hat dann schon nix mehr mit html/css zu tun sowas ist dann nur über eine Programmier Sprache möglich. Für Web php,asp,perl,java unsw.

Mfg Splasch

Nadidz · 22.08.2009, 17:55

Oke, ich habe mal bei Google geschaut und mir das ganze auch mal angeguckt, wie man das mit PHP gestalten kann und für mich sieht das ganze schwer aus, da ich mich mit PHP nicht auskenne.

Habe mich jetzt schon eine weile um PHP gedrückt, aber irgendwann muss ich es ja mal lernen^^

Nico · 25.08.2009, 13:26

Ist doch nicht so schwer.

Ist nur ein Platzhalter für die Datei die du einbinden willst, zum beispiel "navi.html" wo die navigation drin is. da wo sie rankommt schreibst du einfach:

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

Und da wird dann jedesmal navi.html eingebunden

Mehr brauchst du auch kaum wissen..

ist immer nach dem schema.

<?php include("nadidz-ist-toll.html"); ?>

Auf die Art und weiße kannst du auch Header, Footer, Logos und was weiß ich auslagern.

Gruß

Nadidz · 25.08.2009, 16:32

Okeee, dass habe ich echt nicht gewusst, da wird das bestimmt eine Beschreibung, von einer Navigation sein, die komplett aus PHP besteht, die ich gefunden habe.

Danke für den Tipp Nico!!

Werde das dann mal testen, wenn mein richtiger PC wieder geht^^

Nico · 26.08.2009, 12:32

Noch ein kleines Beispiel.

Vorher:

index.html

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Nadidz' Testpage</title>
</head>
<body>
<div id="header">
...logo krimskrams...
</div>
<div id="navi">
...navi krimskrams...
</div>
<div id="content">
Inhalt
</div>
<div id="footer">
...footer krimskrams...
</div>
</body>
</html>

Nachher:

index.html

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Nadidz' Testpage</title>
</head>
<body>
<?php include("header.html"); ?>
 <?php include("navi.html"); ?>
 <div id="content">
 Inhalt
 </div>
 <?php include("footer.html"); ?>
</body>
</html>

header.html

HTML-Code:

<div id="header">
 ...logo krimskrams...
 </div>

navi.html

HTML-Code:

<div id="navi">
 ...navi krimskrams...
 </div>

footer.html

HTML-Code:

<div id="footer">
 ...footer krimskrams...
 </div>

Ich glaub aber du hast es jetz verstanden ^^

Nadidz · 26.08.2009, 12:51

Yo cool, Danke für die Beispiele^^

Ich glaube auch, dass ich es jetzt verstanden habe^^
Aber ich mache erstmal die Navi und dann wenn ich das endlich mit meinem Monitor geregelt habe, werde ich mich auch um das andere kümmern, da es nicht schön ist, den ganzen Tag mit einem 15" Röhrenmonitor oder so zu arbeiten xD

LG

Sie betrachten gerade: Veraltetes Tabellendesign überarbeiten

tabellen design