Layout mit css ohne wegscrollen der Navigation

#1 (**permalink**) 03.07.2003, 19:40

Hallo an Alle,
ich hoffe jemand hat eine Idee und Ihr seid nicht entsetzt über diese Anfängerfrage. Ich baue eine Seite ohne Frameset und habe eine Navigation oben und eine an der linken Seite. Nun soll die Navi mmer sichtbar sein auch wenn der eigentliche Content gescrollt werde muss. Ist das überhaupt möglich ohne Frameset? Ich wäre über eine Hilfestellung sehr dankbar

Gruß Kicky

ulle · #2 (**permalink**) 04.07.2003, 08:28

Hallo,

jaein...........

Theoretisch ging es mit Containern mit der Eigenschaft

Code:

position: fixed;

Das kann aber der IE nicht.

Alternative:

Den Content in einen Container den Du mit

Code:

overflow: auto; height: 300px;

Das Problem hierbei ist die Höhe des Containers, da diese angegeben werden muß gibst Du auch eine feste Höhe der gesamten Website vor. Das könntest Du mit relativen Angaben umgehen, aber dann muß Deine Navi (Oben) auch relativ hoch sein.

Grundsätzliches:

Die Frames haben zwar den Vorteil das die Inhalte der einzelnen Fenster nur einmal 'ge-'Downloaded werden muß, aber auch den elenden Nachteil das diese das 'scroll'-bare Fenster immer verkleinern.

Diesen Nachteil willst Du in eine moderne Website wieder einbauen ???

Keine prof. Website arbeit noch mit feststehenden Bereichen, siehe zum
Beispiel Spiegel, Stern .........usw

Flocke · #3 (**permalink**) 25.07.2003, 14:05

Hallo Kicky, hallo Ulle.

So lange sich das Menü links befindet ist die Sache gar nicht so schlimm. Ich habe letztens für eine Kunden eine solche Seite umgesetzt. Sie war explizit für 1024er-Auflösung gewünscht.
Forum Mainz
Gute Beschreibungen zu dem Thema findest Du unter
devnull.tagsoup.com/fixed/
und bei
Fabrice Pascal

Die Sache ist aber bei komplexeren Layouts wie der Forum-Seite nicht sehr einfach. Aber es klappt. Und es klappt in allen Browsern (NS4 ist ja kein Browser, sondern Gottes Strafe für die Webdesigner!).

Grüße aus Mainz,

Jens

#4 (**permalink**) 25.07.2003, 17:34

> So lange sich das Menü links befindet ist die Sache gar nicht so schlimm.

Diese Einschränkung ist vollkommen ungültig bzw. unnötig.
Das Menue kann sich überall befinden, auch oben, unten und links (rechts auch noch ein Bereich, aber dann ist der Scrollbalken nicht mehr am Rand)
Es wird auch nichts daduch kompliziert.

Nur position:fixed sollte man wirklich nicht verwenden, einerseits funktioniert es im M$IE nicht, wie Ulle schon sagte, dann ist es im Mozilla auch buggy (seltsame Scrollefekte, wenn Text über den fixierten Bereich scrollt).

MfG

P.S.: Bitte erwähnt doch den NS4 nicht mehr, wer den noch benutzt ist doch wohl wirklich selber Schuld.

Jürgen · #5 (**permalink**) 25.07.2003, 17:43

Ulle, Du hast ja recht, aber der Auftraggeber bezahlt. z.Z. bin ich bei folgendem Experiment (Vorgabe IE6.0), wo der Inhalt scrollt und das Menü stehen bleibt(ohne java-script):

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
	<head>
		<title>Titel</title>
	</head>
	<body style="overflow:hidden;margin-top:108px; margin-left:0px; margin-right:0px; margin-bottom:0px; padding:0px;">
		<div style="position:absolute;top:0px;left:0px;width:100%;height:108px;">
			<div style="overflow:hidden;float:left;width:135px; height:108px;border:1px blue solid;">
				Grafik
			</div>
			<div style="overflow:hidden;float:none;width:100%; height:108px;line-height:108px; text-align:center;border:1px red solid;">
				Titel
			</div>
		</div>
		<div style="overflow:auto;float:left;width:135px; height:100%;text-align:center; border:1px lime solid;">
			Menue

			Menue

			Menue

			Menue

			Menue

			Menue

			Menue

			Menue

			Menue

			Menue

			Menue

			Menue

			Menue

			Menue

			Menue

			Menue

			Menue

			Menue

			Menue

			Menue

			Menue

			Menue

			Menue

			Menue9

		</div>
		<div style="overflow:auto;float:none; width:100%;height:100%; border:1px black solid;">
			11111111111111111111111111111111111111111119

			1

			1

			1

			1

			1

			1

			1

			1

			1

			1

			1

			1

			1

			1

			1

			1

			1

			1

			1

			1

			1

			1

			1

			1

			1

			1

			1

			1

			1

			1

			1

			1

			1

			1

			9

		</div>
	</body>
</html>

Da habe ich aber gleich noch 'ne Zusatzfrage: float:left erzeugt zwischen den beiden divs, die gefloatet werden, einen kleinen Abstand. Wie bekomme ich den auch noch weg ?

mfG Jürgen

#6 (**permalink**) 25.07.2003, 17:53

Zitat:

Zitat von Anonymous

> So lange sich das Menü links befindet ist die Sache gar nicht so schlimm.

Diese Einschränkung ist vollkommen ungültig bzw. unnötig.
Das Menue kann sich überall befinden, auch oben, unten und links (rechts auch noch ein Bereich, aber dann ist der Scrollbalken nicht mehr am Rand)
Es wird auch nichts daduch kompliziert.

Na, da bin ich aber froh, daß Du offenbar meine Seite agemacht hast

Natürlich verkomplizierte sich die Lage in meinem Falle durch das rechte Menü. Ruf mal die Seite auf und schieb die Seite kleiner. Die Überlagerung von Menü und Logo hättest Du so möglicherweise nicht bei einem linken Menü.
Es ist vorausschauendes Design gefragt, vielleicht kannst Du dem zustimmen. Kommt für mich aufs gleiche raus.

Zitat:

Nur position:fixed sollte man wirklich nicht verwenden, einerseits funktioniert es im M$IE nicht, wie Ulle schon sagte, dann ist es im Mozilla auch buggy (seltsame Scrollefekte, wenn Text über den fixierten Bereich scrollt).

Stimmt. Deshalb habe ich die beiden Links beigefügt um zu zeigen, daß man mit Conditional Comments am besten für den IE ab 5 ein eigenes kleines Stylesheet liefert, in dem dann nicht position:fixed; sondern position:absolute; steht.
Sorry, ich wollte nicht den Inhalt der verlinkten Texte rekapitulieren. Dafür habe ich leider keinen Zeit.

Grüße aus Mainz,

Jens
[/code]

ulle · #7 (**permalink**) 26.07.2003, 21:47

Zitat:

Da habe ich aber gleich noch 'ne Zusatzfrage: float:left erzeugt zwischen den beiden divs, die gefloatet werden, einen kleinen Abstand. Wie bekomme ich den auch noch weg ?

So nicht

Erstmal [width:100%] bei einem Block-Element wie zB. einem DIV-Tag ist unnötig. Da Block-Elemente immer die volle zur Verfügung stehende Breite nutzen.

Im Gegenteil dies macht alles kaputt, zumindest wenn Du noch margin, border und padding angeben willst. Nach dem CSS-BOX-Model werden genau diese Breiten und Höhenangaben zur definierten Breiten/Höhen-Angabe dazu gezählt.

Also ein DIV mit 100px Breite und 1px Border ist dann natürlich 102Pixel breit.

Und 100% Breite Plus 2px Border ist nun mal 100%+2px also größer 100% Breite des Eltern-Elements.

#8 (**permalink**) 27.07.2003, 22:20

Wie gesagt, war mein obiges Script eine Experimentalscript. Die borders brauchte ich nur, um zu sehen, was der IE eigentlich aus meinen divs so macht. Inzwischen habe ich meinen Auftraggeber überzeugt, daß Scrollen im Menü für seine Aufgabenstellung Nonsens ist. Es handelt sich hier nicht um einen Internetauftritt, sondern um Erfassungsformulare, die größer als eine Bildschirmseite sind, und wo sich Sachbearbeiter über das ständig präsente Menü Zusatzinformationen einholen bzw. mit anderen Anwendungen erst mal eine "Zwischenrechnung" machen, um das Ergebnis dann in die Erfassung einzubeziehen. Dazu werden Seiten in einem extra Fenster aufgerufen und bei der Rückkehr zum Erfassungsformular steht man noch an der Stelle, wo man weitermachen will. Und das Menü ist auch noch präsent.
Nun sieht mein Experimentalscript folgendermaßen aus:

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
	<head>
		<title>Titel</title>
	</head>
	<body style="overflow:hidden;margin-top:108px; margin-left:135px; margin-right:0px; margin-bottom:0px; padding:0px; background-image:url(images/glas_back.jpg); background-repeat:repeat-y">
    <div style="overflow:auto;width:100%;height:100%;">
  		11111111111111111111111111111111111111111119

	  	1

 		  1

  		1

	  	1

		  1

  		1

	  	1

		  1

  		1

	  	1

		  1

  		1

	  	1

		  1

  		1

	  	1

		  1

  		1

	  	1

		  9

    </div>
		<div style="overflow:hidden;position:absolute;top:0px; left:0px;width:135px; height:108px;">
			Grafik
		</div>
		<div style="overflow:hidden;position:absolute;top:0px; left:135px;width:100%; height:108px; line-height:108px;text-align:center;">
			Titel und evtl. Topmenue
		</div>
		<div style="overflow:hidden;position:absolute;top:108px; left:0px;width:135px; height:100%; text-align:center;">
			Menue

			Menue

			Menue

			Menue

			Menue

			Menue

			Menue

			Menue

			Menue

			Menue

			Menue

			Menue

			Menue

			Menue9

		</div>
	</body>
</html>

Mit dem IE6.0 sieht das z.Z. recht ordentlich aus. Wenn man das IE-Fenster vergrößert bzw. verkleinert, verschwinden bzw. erscheinen die Scrollbalken, aber nur im Formular-div.

Jürgen · #9 (**permalink**) 28.07.2003, 08:39

Hallo, der Gast oben war ich -Jürgen-. Als ich den Beitrag schrieb, glaubte ich, angemeldet zu sein. Es ist mir schon einmal passiert, daß ich einen Beitrag von mir 2 mal editierte, und dieser dann aber 3 mal angezeigt wurde, weil ich glaubte, angemeldet zu sein. Oder geht evtl. ab und zu die Anmeldung verloren? Unter welchen Umständen ? Es gab hier schon mal Beiträge, die mehrfach hintereinander auftauchen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Vertikale CSS Navigation mit Bildern und Text	macmensa	CSS	2	25.07.2009 16:23
Navigation mit CSS erstellen	Boof	CSS	7	17.02.2009 15:23
Layout Problem CSS	david.bellem	CSS	8	17.09.2004 11:59
css layout oder besser doch tabellen?	chrimp	CSS	0	22.06.2004 15:54
Layout mit css ohne wegscrollen der Navigation	Anonymous	CSS	1	04.07.2003 08:35