zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Layout mit css ohne wegscrollen der Navigation

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.07.2003, 20:40
Anonymous
Gast
Thread-Ersteller
 
Beiträge: n/a
Standard Layout mit css ohne wegscrollen der Navigation

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.07.2003, 09:28
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.07.2003, 15:05
Webstandards-Evangelist
neuer user
 
Registriert seit: 25.07.2003
Ort: Mainz
Beiträge: 93
Flocke befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 25.07.2003, 18:34
Anonymous
Gast
Thread-Ersteller
 
Beiträge: n/a
Standard

> 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.
Mit Zitat antworten
  #5 (permalink)  
Alt 25.07.2003, 18:43
Benutzer
neuer user
 
Registriert seit: 28.05.2003
Beiträge: 30
Jürgen befindet sich auf einem aufstrebenden Ast
Standard Mal sehen, was Ulle dazu meint:

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
__________________
Kaum macht man\'s mal richtig, schon läuft\'s.
Mit Zitat antworten
  #6 (permalink)  
Alt 25.07.2003, 18:53
Anonymous
Gast
Thread-Ersteller
 
Beiträge: n/a
Standard

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]
Mit Zitat antworten
  #7 (permalink)  
Alt 26.07.2003, 22:47
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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.
__________________
</ulle>
Mit Zitat antworten
  #8 (permalink)  
Alt 27.07.2003, 23:20
Anonymous
Gast
Thread-Ersteller
 
Beiträge: n/a
Standard Danke Ulle

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.
Mit Zitat antworten
  #9 (permalink)  
Alt 28.07.2003, 09:39
Benutzer
neuer user
 
Registriert seit: 28.05.2003
Beiträge: 30
Jürgen befindet sich auf einem aufstrebenden Ast
Standard Ich bin der Gast

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.
__________________
Kaum macht man\'s mal richtig, schon läuft\'s.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:37 Uhr.