Archivlink: javarea.de Forum > (X)HTML & CSS (allgemein) > Layout mit stehenden Container
Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > Layout mit stehenden Container

Pages: [1]
geschrieben von Beat am 22.12.2006 - 14:05
Hallo zusammen,

Ich hätte da mal ne Frage! Was ist hier falsch?
Ich will das oben das "Banner" (<div id="logo">) und auf der Seite die
Navigation (<div id="nav">) stehen bleibt. Der container (<div id="field">)
soll ,wenn dies notwendig ist unter den anderen beiden Containern duch
scrollen.

Ich hätte erwartet, dass mit "position: fixed;" im Style die Container auf den Bildschierm geklebt werden,
aber nein klein Beat hat mal wieder Fehler eins gemach, er hatt gedacht.

Hier mal das was ich für die Lösung gehalten habe....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<head>
<meta http-equiv="Content-Language" content="de-ch">
<meta name="generator" content="editplus">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Test</title>
<style type="text/css">
body {
margin-top: 0px;
margin-left: 0px;
font-family: Arial, Verdana;
color: #336699;
background: #EEEEEE;
}
#logo{
position: fixed;
border-style: solid;
border-width: 0px;
top: 0px;
left: 0px;
padding-top: 10px;
padding-left: 10px;
width: 100%;
height: 100px;
font-family: Arial, Verdana;
font-size: 20px;
z-index:1;
}
#nav {
border-style: solid;
border-width: 0px;
border-color: #000000;
position:fixed ;
top: 111px;
left: 10px;
float: auto;
width: 130px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right:10px;
font-family: Arial, Verdana;
font-size: 10px;
font-weight: bold;
z-index:2;
}
#menue {
padding-top: 5px;
padding-bottom: 1px;
border-style: solid;
border-width: 1px;
height: 20px;
width: 125px;
padding-left: 5px;
padding-right: 0px;
margin-top: 5px;
margin-left: 0px;
font-size: 10pt;
}
#field {
border-style: solid;
border-width: 0px;
position:absolute;
top: 111px;
left: 161px;
float: auto;
width: 848px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right:10px;
font-family: Arial, Verdana;
}
/* <---- Nav Links ----> */
a:link.nav {
color: #336699;
text-decoration: none;
background-color: #EEEEEE;
}
a:visited.nav {
color: #336699;
text-decoration: none;
background-color: #EEEEEE;
}
a:hover.nav {
color: #EEEEEE;
text-decoration: none;
background-color: #336699;
}
a:active.nav {
color: #C0C0C0;
text-decoration: none;
}
/* <---- Text Link ----> */
a:link {
color: #336699;
text-decoration: none;
background-color: #EEEEEE;
}
a:visited {
color: #336699;
text-decoration: none;
background-color: #EEEEEE;
}
a:hover {
color: #EEEEEE;
text-decoration: none;
background-color: #336699;
}
a:active {
color: #C0C0C0;
text-decoration: none;
}
</style>
</head>
<body>
<div id="logo">
<table border="0" width="100%">
<tr>
<td width="145px"><!-- <img border="2px" src="file:#" width="132" height="80"> --></td>
<td width="200px"><div>Kopf Daten,<br>Adresse<br>PLZ und Ort</div></td>
<td width="*"><div>Tel:<br>Fax:<br>E-Mail:
<!-- <script language="JavaScript" type="text/javascript">
<!--
document.write(mail_L_Info);
//--/>
</script> -->
</div></td>
</tr>
</table>
</div>
<div id="nav">
<a class="nav" href="#"><div id="menue">Umgebung</div></a>
<a class="nav" href="#"><div id="menue">Einrichtung</div></a>
<a class="nav" href="#"><div id="menue">Test3</div></a>
<a class="nav" href="#"><div id="menue">Test4</div></a>
</div>
<div id="field">
<div>Text bis zum abwinken<br>oder Grafik<br>bla bla bla<br>
&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;
<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;
<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;
<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;
<br>&nbsp;<br>
</div>
</div>

</body>
</html>
Vielen dank für eure Hilfe
Ich wünsche allen ein frohes Fest und erholsame Feiertage,
Grüsse aus der sommersonnigen und frülignsgrünen Schweiz
Beat

geschrieben von Michael am 08.02.2008 - 14:56
Probiers mal hiermit...

Aber denke du wirst im IE6 mit position: fixed nicht viel Freude haben...

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 
49: 
50: 
51: 
52: 
53: 
54: 
55: 
56: 
57: 
58: 
59: 
60: 
61: 
62: 
63: 
64: 
65: 
66: 
67: 
68: 
69: 
70: 
71: 
72: 
73: 
74: 
75: 
76: 
77: 
78: 
79: 
80: 
81: 
82: 
83: 
84: 
85: 
86: 
87: 
88: 
89: 
90: 
91: 
92: 
93: 
94: 

<style type="text/css">
body {
	margin-top: 0px;
	margin-left: 0px;
	font-family: Arial, Verdana;
	color: #336699;
	background: #EEEEEE;
}
#logo{
	position: fixed;
	border-style: solid;
	border-width: 0px;
	top: 0px;
	left: 0px;
	padding-top: 10px;
	padding-left: 10px;
	width: 100%;
	height: 100px;
	font-family: Arial, Verdana;
	font-size: 20px;
	z-index: 2;
	background-color: #FF0000;
}
#nav {
	border-style: solid;
	border-width: 0px;
	border-color: #000000;
	position:fixed ;
	top: 111px;
	left: 10px;
	float: auto;
	width: 130px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right:10px;
	font-family: Arial, Verdana;
	font-size: 10px;
	font-weight: bold;
	z-index:3;
}
#menue {
	padding-top: 5px;
	padding-bottom: 1px;
	border-style: solid;
	border-width: 1px;
	height: 20px;
	width: 125px;
	padding-left: 5px;
	padding-right: 0px;
	margin-top: 5px;
	margin-left: 0px;
	font-size: 10pt;
}
#field {
	border-style: solid;
	border-width: 0px;
	position:absolute;
	top: 0px;
	margin-top: 111px;
	left: 161px;
	float: auto;
	width: 848px;
	height: auto;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right:10px;
	font-family: Arial, Verdana;
	z-index: 1;
}
</style>

</head>

<body>
<div id="logo">
<table border="0" width="100%">
<tr>
<td width="145px"><!-- <img border="2px" src="file:#" width="132" height="80"> --></td>
<td width="200px"><div>Kopf Daten,<br>Adresse<br>PLZ und Ort</div></td>
<td width="*"><div>Tel:<br>Fax:<br>E-Mail:</div></td>
</tr>
</table>
</div>
<div id="nav">
<a class="nav" href="#"><div id="menue">Umgebung</div></a>
<a class="nav" href="#"><div id="menue">Einrichtung</div></a>
<a class="nav" href="#"><div id="menue">Test3</div></a>
<a class="nav" href="#"><div id="menue">Test4</div></a>
</div>
<div id="field">
<div>Text bis zum abwinken</div>
</div>

geschrieben von wok am 09.02.2008 - 00:39
Das trifft ja haarscharf auch mein Problem.
Vor einigen Wochen (oder auch etwas länger) habe ich die website unseres Clubs auf frames umgestellt und - logisch - von den Cracks hier die gelbe Karte gezeigt bekommen.
Es mangelte allerdings zu dieser Zeit noch mehr an Wissen als heute, also hab' ich erst mal gemacht. Eine Alternative sah ich nicht und mit den allgemeinen Ratschläge konnte ich nichts anfangen.
Letzte Woche bin ich dann auch auf die Idee gekommen, es mit Position fixed zu probieren und auch mir erschien das als DIE Lösung. Die Ernüchterung folgte aber auf dem Fuß.
Artikel in allen Büchern, einigen Fachzeitschriften und selfhtml haben mit klar gemacht, der IE weigert sich strikt, diese Anweisung auszuführen und damit ist die Möglichkeit eben keine mehr.
Ich bin also genau so weit wie zuvor.
Als weitere Lösungsmöglichkeit habe ich mir nun überlegt den scrollteil absolut zu positionieren und mit overflow:hidden zu arbeiten.
Ist das ein gangbarer Weg und eine Alternative zu frames?

geschrieben von Danny am 11.02.2008 - 15:36
Tut mir leid aber ich hab nicht ganz verstanden wie du das meinst.
Kannst du vll. eine kleine Skizze machen wo welches Element angeordnet sein soll?

Schöne Grüße
Danny

geschrieben von wok am 15.02.2008 - 13:07
Hi Danny,
Eigentlich eine ganz traditionelle Anordnung mit drei Bereichen. Oben ein Kopfteil (Bereich 1), links die Navigation (Bereich 2) und daneben als Bereich 3 der Inhalt. Grafik.
Kopf und Navi sollen stets unverändert an ihrem Platz stehen. Der Bereich "Inhalt" kann gescrollt werden, wenn der Inhalt länger ist, als das Fenster hoch ist. Kopf und Navi müssen aber unverändert sichtbar bleiben. Das ist ja der eigentliche Grund für die Gestaltung mit frames und mit frames ist es ja auch keine Problem diese Seite so zu gestalten, allerdings mit den bekannten Nachteilen. Die Suche nach einer Alternative war (auch nach dem Versuch mit position fixed) bisher ergebnislos.
Nun habe ich versucht die Seite mit div-Bereichen aufzubauen. Kopf und Navi werden in div-Container gepackt und die Navi mit
<div style="position:absolute; top:125px;"> darunter gepackt.
der Bereich "Inhalt" kommt ebenfalls in einen div-Bereich
<div style="position:absolute; top:125px; margin-left:210px; height:600px; width:690; overflow:scroll; background-image:url(grafiken/hintergrund-1208a03.jpg); background-attachment:fixed;">.
Die Frage ist nun, ob dies ein guter und gangbarer Weg ist, oder ob ihr Alternativen kennt.

geschrieben von Michael am 17.02.2008 - 13:38
hier müsste eigentlich alles schön erklärt sein: http://www.webreference.com/program....ss_frames/

Mike

geschrieben von wok am 17.02.2008 - 14:55
Hallo Michael,
zunächst vielen Dank für den guten Tip.
Zitat
 hier müsste eigentlich alles schön erklärt sein:

vorausgesetzt man versteht genügend englisch, aber man kann natürlich nicht erwarten, daß so etwas auch noch ins deutsche übersetzt wird.
Ich denke aber mit einiger Mühe habe ich verstanden was Stu da gemacht hat.
Also doch position:fixed, nur eben nicht direkt, sondern für den IE über einen Umweg. Bis ich das allerdings getestet habe, wird es noch eine Weile dauern.

Bedeutet Dein Tip im Umkehrschluß, daß meine Variante nicht empfehlenswert ist?


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.