nicht angemeldet
Layout www.vr-networld.de mit CSS umsetzen
Ich möchte gerne eine Seite erstellen, die vom Aufbau her der Seite http://www.vr-networld.de gleicht.
Sprich:
- Headerlogo fix (width 100%, height z.B. 30px), darunter
- Headermenü fix (width 100%, height z.B. 15px)
- Left-Sidebar (unterteilt in oberen und unteren Bereich fix, width z.B. 150px, height 100% ???)
- Content-Bereich (2 Spalten, jeweils fixe Breite), vertikal scrollbar
Ich möchte nicht wie im Original auf ein framebasiertes Layout zurückgreifen, sondern stattdessen das ganze per CSS umsetzen.
Leider bekomme ich das nicht so hin wie ich möchte. Weitestgehends funktioniert es mit Mozilla, allerdings nicht mit IE.
Kann mir da jemand kurz mal auf die Sprünge helfen wie der Code aussehen müsste, damit's sowohl als auch sauber aussieht.
Danke im voraus.
Marco
-
-
Wieso kommst du ausgerechnet auf die VR-Networld-Seite?
Ganz einfach:
Mir gefällt das Layout, welches meine Bank (Volksbank) hat und möchte dies für eine eigene Seite einsetzen.Damit ich "neutral" bleibe habe ich eben VR-Networld angegeben!
Marco
-
Hi!
Mir gefällt das Layout, welches meine Bank (Volksbank) hat und möchte dies für eine eigene Seite einsetzen.
Damit ich "neutral" bleibe habe ich eben VR-Networld angegeben!
Schau mal auf meine URL ;-)
Gundlegende Hinweise zm Aufbau findest du unter http://de.selfhtml.org/css/layouts/fixbereiche.htm.
Da du ja aber schon angefangen hast, ist es am besten, du zeigst mal, wie weit du bist und woran es scheitert.
Gruß aus Iserlohn
Martin
-
Hallo Martin
Gundlegende Hinweise zm Aufbau findest du unter http://de.selfhtml.org/css/layouts/fixbereiche.htm.
Danke für den Link, schaue ich mir auf jeden Fall mal näher an!
Da du ja aber schon angefangen hast, ist es am besten, du zeigst mal, wie weit du bist und woran es scheitert.
Werde heute Abend mal das online stellen, was ich habe, Link folgt also noch! Aber nicht wundern, ich bin noch ganz am Anfang was CSS-Layouts betrifft!
Vorab kann ich aber schonmal die Inhalte der bisherigen Dateien schicken:
CSS:
body{margin:0px; padding:0px; text-align:center;}
.box1{background-image: url(logo.gif); background-repeat: no-repeat; padding:0px; border:0px; height:25px; position: fixed; left:0px; top:0px; z-index: 1;}
.box2{background:#B5C3E5; padding:0px; border:0px; width:140px; height:100%; margin:0px; position: fixed; left:0px; top:39px;}
.box3{background:white; padding:5px; margin:0px; border:0px; float: left; width: 508px; height: 100%; position: absolute; left: 140px; top: 25px; overflow: auto;}
.box4{background:#white; padding:0px; margin:0px; border:0px; float: left; width: 140px; height: 100%; position: absolute; left: 648px; top: 25px;}HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Testlayout 1</title>
<link href='styles.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="box1"><img src="img/logo.gif"></div>
<div class="box2">Hier die vertikale Navigation</div>
<div class="box3">Inhaltsbereich</div>
<div class="box4">Banner</div>
</body>
</html>Läuft auf jeden Fall unter Mozilla, auch wenn noch der horizontale Menübereich fehlt!
BTW:
Es gibt da ja ein nettes Programm "Cascade DTP", mit dem man sich ja ein Layout über Positionierung zusammenschustern kann. Gibt's sowas auch z.B. für CSS-Layouts, die fensterfüllend sind???Gruß
Marco ;-)
-
-
-