nicht angemeldet
Tabellenlayout mit DIVs und CSS realisieren
Hallo,
ich möchte das "Tabellenlayout" von
http://www.uni-muenster.de/Physik/AP/Purwins/Welcome-de.html
http://www.uni-muenster.de/Physik/AP/Purwins/Forschen-de.html
ohne Tabellen realisieren, also Kopf, Fuß, Navigation links und Inhalt rechts. Meine Frage: geht das überhaupt?
Meine bisherigen Versuche waren nicht gerade von Erfolg gekrönt:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>Arbeitsgruppe Purwins</title>
<style type="text/css">
html {
margin:0px;padding:0px;
}
body {
margin:0px;padding:0px;
}
div {
margin:0px;padding:0px;
}
#Kopf {
width:100%;height:90px;background-color:blue;
}
#Mitte {
width:100%;height:100%;border:2px solid black;
}
#Nav {
width:190px;height:100%;background-color:red;float:left;
}
#Inhalt {
margin-left:190px;background-color:green;
}
#Fuss {
width:100%;height:60px;background-color:blue;
}
</style>
</head>
<body>
<div id="Kopf">Kopfzeile</div>
<div id="Mitte">
<div id="Nav">
<ul>
<li>Link</li>
<li>Link</li>
</ul>
</div>
<div id="Inhalt">
...
</div>
</div>
<div id="Fuss">Fusszeile</div>
</body>
</html>
Online unter:
http://www.uni-muenster.de/Physik/AP/Purwins/DIV.html
sieht sowohl unter IE als auch unter MOZ (unterschiedlich) schlimm aus.
Mit absolut positionierten DIVs habe ich auch keine guten Erfahrungen gemacht, da ich nicht weiß, wie viel Platz ich für den Inhalt brauche und width:100% / height:100% sich offensichtlich auf die Fenstergröße, nicht aber auf die Seitengröße bezieht.
Nun meine Frage: geht das überhaupt, und wenn ja, wie bzw. wo finde ich Tipps?
Gruß, Jürgen
-
Hallo Jürgen,
ich möchte das "Tabellenlayout" von
http://www.uni-muenster.de/Physik/AP/Purwins/Welcome-de.html
http://www.uni-muenster.de/Physik/AP/Purwins/Forschen-de.html
ohne Tabellen realisieren, also Kopf, Fuß, Navigation links und Inhalt rechts. Meine Frage: geht das überhaupt?Nun meine Frage: geht das überhaupt, und wenn ja, wie bzw. wo finde ich Tipps?
schau Dich doch mal hier um:
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.htmlUnd dann gab's zu dem Thema auch hier [pref:t=68933&m=396142] noch viele nützliche Links.
Gruß aus Köln-Ehrenfeld,
Elya
--
"Alle mal an die Nase fassen, und zwar an die eigene": http://forum.de.selfhtml.org/archiv/2003/9/57903/#m324482
_____________
Wikipedia: Die freie Enzyklopädie http://de.wikipedia.org-
Hallo Elya,
danke für den Tipp. Hinter dem Thread hatte ich garnicht so viele Links vermutet, die auch mein Problem behandeln. Ich bin jetzt bei folgender Lösung:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>Arbeitsgruppe Purwins</title>
<style type="text/css">
html {
margin:0px;padding:0px;
}
body {
margin:0px;padding:0px;
}
div {
margin:0px;padding:0px;border:1px solid black;
}
#Kopf {
width:100%;height:90px;background-color:blue;
}
#Nav {
width:190px;float:left;background-color:red;
}
#Inhalt {
margin-left:190px;background-color:green;
}
#Fuss {
width:100%;height:60px;clear:both;background-color:blue;
}
</style>
</head>
<!--Idee: Problem mit Hintergrundfarbe über Hintergrundbild lösen-->
<body>
<div id="Kopf">Kopfzeile</div>
<div id="Nav">
<ul>
<li>Link</li>
<li>Link</li>
</ul>
</div>
<div id="Inhalt">
...
</div>
<div id="Fuss">Fusszeile</div>
</body>
</html>Allerdings bin ich immer noch nicht so ganz zufrieden:
Wenn der Inhalt zu breit ist, bekommt im MOZ und im Opera nicht alles die Hintergrundfarbe. Der Teil, der horizontal hereingescrollt wird, hat einen weißen Hintergrund. (siehe: http://www.uni-muenster.de/Physik/AP/Purwins/DIV.html. Weiß da jemand Abhilfe?
Gruß, Jürgen
-
Hallo Jürgen,
Allerdings bin ich immer noch nicht so ganz zufrieden:
Wenn der Inhalt zu breit ist, bekommt im MOZ und im Opera nicht alles die Hintergrundfarbe. Der Teil, der horizontal hereingescrollt wird, hat einen weißen Hintergrund. (siehe: http://www.uni-muenster.de/Physik/AP/Purwins/DIV.html. Weiß da jemand Abhilfe?
Deinen Ansatz, mit Hintergrundbild und Hintergrundfarbe, und zwar von divs und body, zu spielen, halte ich für richtig - Dein Szenario der "Überbreite" jedoch für nicht realistisch. Du hast hier ein einzelnes Wort, das natürlich auch nicht umbrochen wird und über Bildschirmbreite breit ist. Im Normalfall, und wenn du alle Inhalte schön "floaten" läßt, paßt sich der Inhalt an. Das Problem mit dem Querscrollen hast Du dann gar nicht.
Das ist übrigens ein schönes Design und läßt sich sicher gut mit css umsetzen :-)
Gruß aus Köln-Ehrenfeld,
Elya
--
"Alle mal an die Nase fassen, und zwar an die eigene": http://forum.de.selfhtml.org/archiv/2003/9/57903/#m324482
_____________
Wikipedia: Die freie Enzyklopädie http://de.wikipedia.org-
Hallo Elya,
... - Dein Szenario der "Überbreite" jedoch für nicht realistisch. ...
Bei uns geht der Inhalt über alles. Ich bin eben kein Designer, sondern Wissenschaftler. Wenn für eine Darstellung, z.B. eines Experiments, eine über 1000 Pixel breite Grafik benötigt wird, dann ist sie eben so breit. Der Besucher kann ja die Navigation wegscrollen. Aber Du hast schon Recht. Dieser Fall tritt selten ein oder wenn der Besucher einen kleinen Monitor oder ein schmales Browserfenster hat. Und möglicherweise lässt sich das Problem auch über die Hintergrundfarbe des body beseitigen.
Das ist übrigens ein schönes Design und läßt sich sicher gut mit css umsetzen :-)
Allerdings ist es nicht von mir. Das hat eine Agentur für die Uni gemacht. Mein Anteil besteht nur darin, die technische Umsetzung (valides html, einfacheres Tabellenlayout, ...) überarbeitet und das Ganze und mit Struktur und Inhalt gefüllt zu haben. Der Link oben zeigt das ganze übrigens dreispaltig. Aber da traue ich mich erst ran, wenn die zweispaltige Version tabellenfrei ist.
Vielen Dank für Deine Hilfe.Gruß, Jürgen
-
-
-