Supportnet / Forum / Webseiten/HTML
Neuanfang - neue Standards, bessere Methoden
Frage
Hallo alle zusammen,
ich bin in den letzten Jahren in Richtung serverseitiger Scriptsprachen abgedriftet. Habe HTML zwar nicht verlernt, dennoch habe ich mir nicht die Mühe gemacht, mich in neue Standards einzuarbeiten.
Zum Beispiel gehöre ich noch zu den Leuten, die Tabellen zur Seitengestaltung nutzen. Da ich gerne autarke Seiten entwickle, welche sich überall darstellen lassen und nicht nur im InternetExplorer, bin ich mit dieser Methode immer gut gefahren.
Aber jetzt wird es Zeit für was frisches. Etwas neu zu erlernen ist ja immer etwas anderes, als das bisherig gelernte als falsch abzustempeln und sein Wissen "umzubiegen". Aus diesem Grund werde ich aus SelfHTML nicht schlau.
Ich brauche ein Design, welches ich bei meiner alten Methode wie folgt gestaltet hätte:
[code]
<html>
<head>
<title>Test</title>
</head>
<body>
[b]
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr><td colspan="2" width="600" height="100">Logo</td></tr>
<tr><td width="150">
Menüpunkt 1<br>
Menüpunkt 2<br>
Menüpunkt 3<br>
</td><td width="450">
Inhalt/Content
</td></tr>
</table>
[/b]
</body>
</html>
[/code]
Das ist ein Beispiel, dass ich gerade aus dem Kopf auf die schnelle abgetippt habe. Ich kann Dinge am besten verstehen, wenn ich sie an etwas Praktischem vergleichen kann.
Jetzt frage ich mich:
wie mache ich es "richtig"? Ich habe mir oft anhören müssen, dass die Tabellentechnik nicht dafür gedacht ist und dass es bessere Möglichkeiten gibt. Leider bekomme ich immer nur die Kommentare zu hören und nie ein Beispiel, wie es denn richtig geht...
Das obige Beispiel ist recht einfach gehalten. Ich wäre dankbar, wenn mir das jemand zurechtbiegen könnte, damit es dem aktuellen Browser-Standard entspricht, ohne, dass sich das Design verändert und damit es auf allen gängigen Browsern (IE, Firefox, Opera) korrekt dargestellt wird.
Ich hab mich schon bei meinen sonstigen Quellen umgeschaut, aber leider ohne Erfolg.
Frohe Ostern!
Soundi
Antwort 1 von Ravetti
Wenn ich mit dem Dreamweaver auf die Schnelle die Tabelle in Ebenen konvertiere sieht das so aus:
Lässt sich natürlich noch verschlanken, ist aber vielleicht ein Anfang.
Ravetti
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="Layer1" style="position: absolute; left: 10px; top: 15px; width: 600px; height: 100px; z-index: 1; vertical-align: middle">Logo</div>
<div id="Layer2" style="position: absolute; left: 10px; top: 115px; width: 150px; height: 57px; z-index: 2">Menüpunkt 1<br>
Menüpunkt 2<br>
Menüpunkt 3</div>
<div id="Layer3" style="position: absolute; left: 160px; top: 115px; width: 450px; height: 57px; z-index: 3; vertical-align: middle">Inhalt/Content</div>
</body>
</html> Lässt sich natürlich noch verschlanken, ist aber vielleicht ein Anfang.
Ravetti
Antwort 2 von derpfleger.
@ Soundi::
auf http://css.maxdesign.com.au/ gibt es zB einige schöne Anleitungen, wie du mit CSS deine Menus gestaltest.
Auf http://www.css4you.de/wslayout1/index.html findest du ein schönes Kapitel über "Layout ohne Tabellen" mit Beispielen für deine Frage oben.
Problematisch wird immer die Browser-Abwärts-Kompatibilität sein. Da muss man sich fragen, wer auf die Seite kommt, wie wichtig ist einem die "absolute" Kompatibilität?
Es lohnt sich aber allemal, sich diese Seiten mal anzuschauen.
Gruss Heiko
auf http://css.maxdesign.com.au/ gibt es zB einige schöne Anleitungen, wie du mit CSS deine Menus gestaltest.
Auf http://www.css4you.de/wslayout1/index.html findest du ein schönes Kapitel über "Layout ohne Tabellen" mit Beispielen für deine Frage oben.
Problematisch wird immer die Browser-Abwärts-Kompatibilität sein. Da muss man sich fragen, wer auf die Seite kommt, wie wichtig ist einem die "absolute" Kompatibilität?
Es lohnt sich aber allemal, sich diese Seiten mal anzuschauen.
Gruss Heiko
Antwort 3 von Soundi
@Ravetti
Danke für das Beispiel. Das scheint dann wohl eine alternative Möglichkeit zu Tabellen zu sein.
@derpfleger.
Auch Dir ein großes Danke. Ich will nicht voreilig sein, aber Dein zweiter Link scheint mir echt eine Alternative zu SelfHTML zu sein (was die Seitenstruktur/-gestaltung anbelangt).
Das hilft mir jetzt sehr weiter.
Danke euch beiden!
Soundi
Danke für das Beispiel. Das scheint dann wohl eine alternative Möglichkeit zu Tabellen zu sein.
@derpfleger.
Auch Dir ein großes Danke. Ich will nicht voreilig sein, aber Dein zweiter Link scheint mir echt eine Alternative zu SelfHTML zu sein (was die Seitenstruktur/-gestaltung anbelangt).
Das hilft mir jetzt sehr weiter.
Danke euch beiden!
Soundi