zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Seitenlayout mit DIV's in variabler Höhe

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.10.2008, 23:02
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.08.2008
Beiträge: 33
JohnnyBoy befindet sich auf einem aufstrebenden Ast
Standard Seitenlayout mit DIV's in variabler Höhe

Guten Abend,

bin ein bisschen am verzweifeln... Ich möchte ein Seitenlayout mit DIV's gestalten. Dabei soll es eine Kopf- und eine Fußzeile geben. Diese sollen immer sichtbar sein. Dazwischen soll ein viewport sein, der sich der Größe des Browserfensters anpasst. In diesen Viewport kommt der Content, den ich mit margin-left:250px; von der Navigation (im Viewport)in Abstand bringen möchte. Die Navigation selbst soll auch gefixed sein.

Hoffe ich habe nicht wirrr geschrieben.

Ohne die Fixpositionen klappt es. Das ist auch der Code:
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Home</title>
	<style type="text/css" media="all">
		html, body {
			height: 100%;
		}
		body {
		   margin:  0;
		   padding: 0;
                   background-color:blue;
		   min-height:100%;
		   }
		
		#head {
		   height:50px;
		   background-color:pink;
		   }

                   
		#viewport {
		  height: 100%;
		  background-color:red;
		  }
		
		#foot {
		   position: relative;
		   height:20px;
		   margin-top: -20px;
		   background-color:white;
		   }

               #content {
                   display:block; 
	           overflow:auto; 
	           position:absolute;  
	           top:50px; 
	           bottom:20px; 
	           width:2600px; 
	           margin-left:251px; 
                   border:none;
                   background-color:yellow;
                   }

	</style>
</head>

<body>

	<div id="viewport">
          <div id="head">header</div>
          <div id="content"> </div>
        </div>
        
        <div id="foot">footer</div>
	   
</body>
</html>
Der Content ist 2600px breit, die Kopf- und Fußzeile geht aber nur auf Bildschirmgröße mit. Damit muss ich leben, wenn ich divs nehme, oder?

Vielleicht kann mir jemand ein Tip geben, was ich lesen muss. Oder wie ich an die sache hern gehen muss, oder geht dieser Fall besser mit Tabellen (die habe ich schon fertig )

Liebe Grüße

JohnnyBoy
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.10.2008, 23:28
Benutzerbild von Scheppertreiber
Chaot und Nonkonformist.
XHTMLforum-Kenner
 
Registriert seit: 13.03.2007
Ort: Steinmark im Spessart
Beiträge: 7.458
Scheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein Lichtblick
Standard

Zitat:
Zitat von JohnnyBoy Beitrag anzeigen
Der Content ist 2600px breit
Äm ... wo gibt es solche Monitore ? Und dann soll sich der Viewport anpassen ?
Das wird nicht so einfach
__________________
Grüße aus dem Spessart, Joe

{ table-layout: biertischistbesser; }
Der Mausinator
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.10.2008, 23:46
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.08.2008
Beiträge: 33
JohnnyBoy befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Scheppertreiber Beitrag anzeigen
Äm ... wo gibt es solche Monitore ? Und dann soll sich der Viewport anpassen ?
Das wird nicht so einfach
Naja, man kann nach rechts und links scrollen, deswegen soll auch head, foot und die linke navigation fix sein. im content soll eine große tabelle dargestellt werden. Tabellengröße ist immer gleich.

Hast du eine Idee wie man das machen kann?

Grüße
Mit Zitat antworten
  #4 (permalink)  
Alt 14.10.2008, 23:48
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von JohnnyBoy Beitrag anzeigen
Der Content ist 2600px breit
Das kann nicht Dein Ernst sein - und Nutzer mit 1024 oder 1280px Breite müssen sich die halbe Seite horiz. erscrollen? Nimm entweder Deine Breite ganz raus und begrenze sie auf max. 980px.

Desweiteren siehe FAQ oder http://www.cssplay.co.uk/layouts/ Stichwort "fixed".

EDIT:

Zitat:
Zitat von JohnnyBoy Beitrag anzeigen
im content soll eine große tabelle dargestellt werden.
Das kann ich jetzt nicht beurteilen, aber Hauptsache Du überlegst genau was Du tust...
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)

Geändert von heiko_rs (14.10.2008 um 23:50 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 14.10.2008, 23:50
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.08.2008
Beiträge: 33
JohnnyBoy befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
Das kann nicht Dein Ernst sein - und Nutzer mit 1024 oder 1280px Breite müssen sich die halbe Seite horiz. erscrollen? Nimm entweder Deine Breite ganz raus und begrenze sie auf max. 980px.

Desweiteren siehe FAQ.
mh, der Content besteht aus einer Tabelle, welche eine Breite von von 2600px hat. ist auch nur eine seite, alle anderen müssen gar nicht gescrollt werden
Mit Zitat antworten
  #6 (permalink)  
Alt 14.10.2008, 23:51
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Ja, siehe mein Edit
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #7 (permalink)  
Alt 14.10.2008, 23:52
Benutzerbild von Scheppertreiber
Chaot und Nonkonformist.
XHTMLforum-Kenner
 
Registriert seit: 13.03.2007
Ort: Steinmark im Spessart
Beiträge: 7.458
Scheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein Lichtblick
Standard

Hi JohnyBoy,

machen kann man viel bis alles. Es sollte aber auf die Zielgruppe ausgerichtet
werden. Nicht jeder hat so einen Monitor (Sony Jumbotron, 5 m Diagonale ?).
Statt einer Tabelle würde sich da eine Konstruktion anbieten, die Datensätze
auf mehrere Zeilen aufteilt. Vielleicht wäre das ein Weg.
__________________
Grüße aus dem Spessart, Joe

{ table-layout: biertischistbesser; }
Der Mausinator
Mit Zitat antworten
  #8 (permalink)  
Alt 14.10.2008, 23:57
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.08.2008
Beiträge: 33
JohnnyBoy befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Scheppertreiber Beitrag anzeigen
Hi JohnyBoy,

machen kann man viel bis alles. Es sollte aber auf die Zielgruppe ausgerichtet
werden. Nicht jeder hat so einen Monitor (Sony Jumbotron, 5 m Diagonale ?).
Statt einer Tabelle würde sich da eine Konstruktion anbieten, die Datensätze
auf mehrere Zeilen aufteilt. Vielleicht wäre das ein Weg.
Meine Idee ist, war, dass der User auf dieser einen Seite immer horizontal scrollen muss. Die Tabelle lässt sich leider nicht anderst darstellen..

Wenn ich head, foot, nicht fixe, dann geht auch alles wie s soll, aber sobald ich die fix mache, macht das ding ärger...

ich habe schon gelesen, dass fixed elemente aus dem Fluss heraus genommen werden aber wie kann ich #viewport so machen, dass es dazwischen passt?
Mit Zitat antworten
  #9 (permalink)  
Alt 15.10.2008, 00:00
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
desweiteren siehe faq oder http://www.cssplay.co.uk/layouts/ stichwort "fixed".
. .
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 15.10.2008, 00:01
Benutzerbild von Scheppertreiber
Chaot und Nonkonformist.
XHTMLforum-Kenner
 
Registriert seit: 13.03.2007
Ort: Steinmark im Spessart
Beiträge: 7.458
Scheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein Lichtblick
Standard

Die Tabelle in ein div packen und scrollbar machen.

Ich denke, da gibt es mit der Riesentabelle ein konzeptionelles Problem.
Kannst Du nicht die Wichtigsten Sachen in eine schlanke Tabelle packen und
den Rest beim Anklicken anzeigen ?
__________________
Grüße aus dem Spessart, Joe

{ table-layout: biertischistbesser; }
Der Mausinator
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
div, fixed, foot, head, layout, variable, viewport

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
Problem bei Anordnung- footer nach div mit variabler Höhe gombi CSS 7 18.01.2010 19:14
div hat keine Höhe, wenn innere divs gefloatet werden? Anotherone CSS 3 23.07.2006 02:25
verschachtelte Div's mit variabler Höhe sAt. CSS 1 10.08.2005 19:26
divs aneinander in der höhe ausrichten - wie ? MS Master CSS 1 24.02.2005 17:49


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:40 Uhr.