zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 3-spaltiges dynamisches Layout, Barrierefrei

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.08.2009, 19:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.08.2009
Beiträge: 4
insopitus befindet sich auf einem aufstrebenden Ast
Standard 3-spaltiges dynamisches Layout, Barrierefrei

Hallo,

ich habe folgendes Problem. Um ein dreispaltiges Layout, dessen mittlere Spalte den ganzen verfügbaren Platz einnehmen soll, barrierefrei zu bekommen, sollen die DIV-Container in die "richtige" Reihenfolge gebracht werden.

Momentan ist es so gelöst:
linke Spalte float: left; width: 200px;
rechte Spalte float: right; width: 200px;
mittlere Spalte margin: 0 215px;
clear: both;

So sind die Spalten in der Reihenfolge 1-3-2. Jetzt möchte ich den Inhalt (mittlere Spalte) aber gerne direkt nach der Navigation (linke Spalte) haben. Also 1-2-3.

Mir fällt leider kein funktionierender Ansatz dazu ein. Nach langem Suchen habe ich mich nun hier angemeldet. Kann mir hier jemand weiter helfen?

Beste Grüße,
Marcus

EDIT:
Gerade erst habe ich bemerkt, dass ich mit dem Beitrag im CSS-Bereich gelandet bin. Dort ist er zwar nicht fehl am Platz, sollte aber in den Bereich zur Barrierefreiheit.

Geändert von insopitus (16.08.2009 um 19:32 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.08.2009, 19:44
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
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

Gibt es eine Gesamtbreite (z.B. 760px)?
__________________
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
  #3 (permalink)  
Alt 16.08.2009, 19:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.08.2009
Beiträge: 4
insopitus befindet sich auf einem aufstrebenden Ast
Standard

Es existiert eine min-width (950px) und eine max-width (1280px). Unter Umständen könnte man so dem Content-Bereicht (mittlere Spalte) auch die beiden Werte verpassen. Dann wäre ein float: left; möglich, denke ich.

EDIT: Falsch gedacht (ich meine mich). Er nimmt für die mittlere Spalte dann natürlich so wenig Platz wie mögich.

Nochmal EDIT:

Jetzt ist mir eine mögliche Lösung eingefallen.

Zuerst lege ich ein zweispaltiges Layout an:
linke Spalte float: left; width: 200px;
Container margin: 0 0 0 215px;
clear: left;

In den Container kommen dann die rechte Spalte und der Content-Bereich (mittlere Spalte). Der Content muss hier natürlich vor der rechten Spalte kommen und so viel Platz wie möglich einnehmen. Etwa wie hier: http://blog.html.it/layoutgala/LayoutGala32.html. Damit müsste es eigentlich gehen. Hat jemand einen besseren Vorschlag?

Schon wieder EDIT:
Nette Idee. Nur im verlinkten Beispiel ist der Content-Bereicht gefloatet und die Breite auf 100% gesetzt. So wird das leider nichts. ;(

Geändert von insopitus (16.08.2009 um 20:12 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 16.08.2009, 20:45
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
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

Das dort angewandte Prinzip der negativen seitlichen margins ist schon in Ordnung, allerdings wird in der konkreten Umsetzung ein zusätzliches div benötigt, das das Content-div umgibt. Außerdem wird ein Problem in älteren Geckos nicht behoben ("Add text" für den blauen Bereich im NN 7 zeigt es).

Nachfolgend eine Lösung ohne "überflüssige" divs, d.h. insgesamt nur 4 für die 3 Spalten plus 1 Footer. Alternativ kann auch nur der IE < 8 diese Lösung bekommen und alle übrigens Browser z.B. eine CSS-Tabelle, aber da die folgende Version überall funktioniert, kann sie auch problemlos so eingesetzt werden.

Wenn man die 3 Extra-Regeln für ältere Geckos entfernt, zeigen diese das erwähnte Problem. Letztlich sollten diese Regeln natürlich mit den bereits bestehenden "zusammengeführt" werden.

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>
<title>Test</title>
<style type="text/css">

* {
	margin: 0;
	padding: 0;
	border: none;
	font: 100%/1.3 Arial, sans-serif;
	text-decoration: none;
	}

body {
	font-size: .8em;
	padding: 0 215px;
	}

#n1,
#n3 {
	width: 200px;
	background: red;
	}

#n1 {
	float: left;
	margin-left: -215px;
	}

#n3 {
	float: right;
	margin-right: -215px;
	height: 200px; /* zur Demonstration der Fehldarstellung aelterer Geckos, wird weiter unten behoben */
	}

#n2 {
	float: left;
	width: 100%;
	background: yellow;
	}

#n4 {
	clear: both;
	background: yellow;
	margin: 0 -215px;
	}

/* Ueberlappung fuer aeltere Geckos - sollen diese beruecksichtigt werden, die folgenden 3 Deklarationen den bereits bestehenden Regeln hinzufuegen */

#n1 {
	margin-right: 16px;
	}

#n3 {
	margin-left: 16px;
	}

#n2 {
	margin: 0 -1px;
	}

</style>
<!--[if lt IE 8]>
<style type="text/css">

div {
	position: relative;
	}

#n4 {
	min-height: 0;
	}

* html #n4 {
	height: 1px
	}

* html #n1,
* html #n3 {
	display: inline;
	}

</style>
<![endif]-->
</head>

<body>

<div id="n1">navi</div>
<div id="n2">inhalt</div>
<div id="n3">sidebar</div>
<div id="n4">footer</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.)

Geändert von heiko_rs (16.08.2009 um 21:18 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 16.08.2009, 20:48
Benutzerbild von philosapiens
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 08.05.2009
Ort: Berlin Südende
Beiträge: 297
philosapiens befindet sich auf einem aufstrebenden Ast
Standard

Hi,

und wenn Du das Ganze mit absoluten Positionen machst anstatt zu floaten und dann auch noch alles mit em anstatt px als Größenangabe?

So, denke ich, kann man ein beliebigspaliges Layout hinbekommen.

Hier einmal meine Seite mit diesem Denkansatz jedoch nur für ein zweispaltiges Layout:

barrierefrei.idealseiten.de | Netzwerk für barrierefreie Webseiten

__________________
Der höchste Lohn für unsere Bemühungen ist nicht das, was wir dafür bekommen, sondern das, was wir dadurch werden.

Mein aktuelles Projekt bei idealseiten.de
Mit Zitat antworten
  #6 (permalink)  
Alt 16.08.2009, 21:02
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
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 philosapiens Beitrag anzeigen
wenn Du das Ganze mit absoluten Positionen machst
...solltest Du das Content-div lieber nicht durch gegenüberliegende Offsets (left und right) aufspannen, da der IE 6 das nicht kann, sondern die Abstände zum Viewport-Rand durch seitliche margins erzeugen

Und der übliche Nachteil bei pos. abs.: Der Footer kann nie unter allen Umständen ganz unten stehen (d.h. egal welche Spalte die höchste ist).

Zitat:
Zitat von philosapiens Beitrag anzeigen
alles mit em anstatt px als Größenangabe?
Das geht ja eh bei nahezu allen Varianten
__________________
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 16.08.2009, 21:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.08.2009
Beiträge: 4
insopitus befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank, damit kann ich sicher etwas anfangen. Mit so wenigen Tags hätte ich dabei niemals gerechnet.

Auf den ersten Blick ist es auf jeden Fall sehr vielversprechend. Das muss ich mir gleich mal genauer ansehen.

Danke und einen schönen Abend,
Marcus
Mit Zitat antworten
  #8 (permalink)  
Alt 16.08.2009, 21:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.08.2009
Beiträge: 4
insopitus befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von philosapiens Beitrag anzeigen
Hi,

und wenn Du das Ganze mit absoluten Positionen machst anstatt zu floaten und dann auch noch alles mit em anstatt px als Größenangabe?
Mit absoluten Positionen möchte ich nicht arbeiten. Da würde ich fast lieber auf die Barrierefreiheit verzichten, obwohl das auch keine Option ist.

Die Größenangaben in em werden wahrscheinlich noch folgen. Das Basistemplate ist aber sehr umfangreich. Deshalb wird das noch dauern.

Beste Grüße,
Marcus
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
3 spaltiges Layout mit CSS Serpico CSS 2 20.12.2010 15:53
3 Spaltiges Layout AllOnline CSS 5 18.07.2010 23:09
2 spaltiges Layout, unabhängig scrollbar Plasm CSS 6 15.02.2008 10:31
3 spaltiges Layout, die 100.000te Speedoo CSS 21 18.08.2006 10:13
Dynamisches Layout (inkl. Bsp.), abhängig von der Auflösung Webstandard Ressourcen 0 06.12.2005 11:17


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