zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 2 Spalten Layou mit full height

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.12.2010, 00:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.12.2010
Beiträge: 1
dark alex befindet sich auf einem aufstrebenden Ast
Standard 2 Spalten Layou mit full height

Nach einer Stunde probieren und googeln gebe ich jetzt auf und frage euch...


Ich möchte ein ganz einfaches Zweispaltenlayout für eine Ajax-basierte Seite erstellen.

Dazu hier mal ein Entwurf, den ich möglichst genau umsetzen möchte, allerdings von der Auflösung des Nutzers unabhängig.


Gibt es die Möglichkeit mit HTML5 und CSS3 das umzusetzen bzw wie?
Der content-Container muss scrollbar sein, wenn der Inhalt zu lang wird. (Idealfall: Nur vertikales Scrolling, horizontal Zeilenumbruch)

Danke für eure Hilfe!
Angehängte Grafiken
Dateityp: png layout.png (35,0 KB, 15x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.12.2010, 08:19
Benutzerbild von nevermind
Trollflüsterer
XHTMLforum-Kenner
 
Registriert seit: 29.08.2005
Ort: Bietigheim-Bissingen
Beiträge: 2.215
nevermind ist ein Lichtblicknevermind ist ein Lichtblicknevermind ist ein Lichtblicknevermind ist ein Lichtblicknevermind ist ein Lichtblicknevermind ist ein Lichtblick
Standard

Im Prinzip suchst du ein Layout mit fester Breite, variabler Höhe und feststehender Navigation?
Schau mal auf meine Site.

Sollen beide Spalten die gleiche Höhe aufweisen, schaust du hier:
http://xhtmlforum.de/40267-faq-h-ufi...-und.html#faq1
__________________
Gruß Roman // ngkreativ.de - Webdesign & Motorradumbau
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.12.2010, 21:58
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 marsupilami Beitrag anzeigen
Aber bitte kommt mir jetzt nicht mit sowas wie "Tabellenlayouts sind veraltet"!
Oh doch. Dir ist der Begriff Semantik geläufig? Zeichne Inhalte sinnvoll aus und setze Elemente nur für den Zweck ein, für den sie gedacht sind. Und Tabellen sind nicht zum Positionieren von Elementen gedacht, sondern für die Zuordnung von Daten etc.

Zitat:
Zitat von marsupilami Beitrag anzeigen
Tabellenlayouts sind praktisch
Für Anfänger vielleicht, aber wer sich auch nur halbwegs auskennt, braucht solche Krücken nicht.
__________________
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
  #4 (permalink)  
Alt 08.12.2010, 22:19
Benutzerbild von nevermind
Trollflüsterer
XHTMLforum-Kenner
 
Registriert seit: 29.08.2005
Ort: Bietigheim-Bissingen
Beiträge: 2.215
nevermind ist ein Lichtblicknevermind ist ein Lichtblicknevermind ist ein Lichtblicknevermind ist ein Lichtblicknevermind ist ein Lichtblicknevermind ist ein Lichtblick
Standard

Zitat:
Zitat von marsupilami Beitrag anzeigen
Das kannst du mit einer Tabelle sehr gut realisieren.

Aber bitte kommt mir jetzt nicht mit sowas wie "Tabellenlayouts sind veraltet"!
Tabellenlayouts sind praktisch, da sie beliebig mit CSS formatierbar sind und sehen nebenbei gar nicht übel aus, wenn man sie richtig einsetzt.

Zurück zum Thema:
Du machst zwei Tabellenspalten, in die linke Spalte kommt die Navigation, in die rechte Spalte der Inhalt.
Die meisten Browser brechen Text am Fensterende automatisch um und scrollen nur verikal, nicht horizontal.
Die Nutzerauflösung kannst du umgehen, indem du nicht Pixel, sondern em verwendest.
1 em ist die Höhe des kleinen Buchstabens m nach Benutzer-/Sylesheeteinstellung.
Oh mein Gott... die Untoten leben wieder auf.
__________________
Gruß Roman // ngkreativ.de - Webdesign & Motorradumbau
Mit Zitat antworten
  #5 (permalink)  
Alt 08.12.2010, 23:36
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

__________________
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
  #6 (permalink)  
Alt 12.12.2010, 07:14
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:
Aber natürlich gebe ich dir Recht, Tabellen sind theoretisch für Layouts nicht geeignet, werden in der Praxis aber verwendet (schau dir z. B. mal den Forum-Quelltext an).
Pfusch gibt es überall ...

Bei einem Tabellenlayout kommt man recht schnell an Grenzen wo man selbst
durch den Code nicht mehr durchblickt. Nebenbei gibt es auch bei Tabellen
browserspezifische Unterschiede und Tücken.

Bei meinem Internetarchiv hat sich beim konsequenten Umstieg auf ein halbwegs
semantisches Layout der HTML-Code auf ca 30 % verringert (bedeutet auch
nur noch 30 % Traffic, 30 % potentielle Fehler usw).

Es geht nicht nur um die "reine Lehre", es macht einfach Sinn und spart Arbeit.
__________________
Grüße aus dem Spessart, Joe

{ table-layout: biertischistbesser; }
Der Mausinator
Mit Zitat antworten
  #7 (permalink)  
Alt 12.12.2010, 10:53
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Zitat:
Zitat von marsupilami Beitrag anzeigen
aber wie würdest du zwei Bereich mit gleiher Höhe mit CSS und div realisieren?
Danke für deine Antwort!
Hmm, eigentlich gibts dafür doch genug Beispiele, z.B. hier (Two Columns):
CSS-LAB.com - Ray's CSS Demos
Dort sollte doch bestimmt etwas für den TE dabei sein.

Gruß Manfred
Mit Zitat antworten
  #8 (permalink)  
Alt 12.12.2010, 11:32
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

Alle guten Browser inkl. IE 8 können auch folgendes (nur IE < 8 kann's nicht):

HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">

* {
	margin: 0;
	padding: 0;
	}

body {
	padding: 30px;
	font-family: sans-serif;
	}

#n1 {
	display: table;
	table-layout: fixed;
	width: 760px;
	margin: 0 auto;
	}

#n2 {
	display: table-row;
	}

#n2 div {
	display: table-cell;
	}

#n3,
#n5 {
	width: 200px;
	background: #c0c0c0;
	}

#n4 {
	width: 360px;
	background: #f1f1f1;
	}

</style>
</head>

<body>

<div id="n1">
<div id="n2">
	<div id="n3">Text<br />Text<br />Text<br /></div>
	<div id="n4">Text</div>
	<div id="n5">Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text<br />Text</div>
</div>
</div>

</body>

</html>
__________________
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
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
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 17:53
Darstellungsprobleme im IE lea11011989 CSS 17 05.11.2010 10:44
Div Positionen in Firefox falsch ozero CSS 4 17.07.2009 23:35
prblemme mit mein inhalt div carlos587261 CSS 3 23.04.2008 15:07
Mozilla zeigt DIV zu oft an cracki CSS 6 09.03.2008 16:22


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:12 Uhr.