Gordon: Seite mit drei Spalten, dritte Spalte soll umbrechen.

SELF-Forum

Seite mit drei Spalten, dritte Spalte soll umbrechen.

Gordon
– Informationen zu den Bewertungsregeln

Hallo.

Thematisch paßt meine Frage in das Forum zu CSS, aber auch zum Thema Barrierefreiheit. Also nicht wundern, wenn Ihr diese Frage in beiden Foren findet : )

Ich möchte ein dreispaltiges Layout einer Seite erstellen. Die drei Spalten sollen mit DIVs angelegt sein, da ich die Seite barrierefrei machen möchte.

Die linke und die rechte Spalte sollen mit FESTEN Pixelbreiten angelegt sein, die mittlere Spalte soll sich der Browserbreite angleichen. Sobald man eine Auflösung von 640 x 480 Pixeln erreicht hat, soll die rechte Spalte nach unten springen.

Und noch was Kniffeliges kommt hinzu und da liegt auch das Hauptproblem: Im Quellcode soll ZUERST DIE MITTLERE SPALTE erscheinen, dann die linke und als letzte die rechte Spalte. Warum? Weil man in einem Screenreader dann zuerst die mittlere Spalte, also den eigentlichen Inhalt einer Seite angezeigt bekommt und dananch die Navigation in der linken Spalte und als letztes ein paar Teaser in der rechten Spalte. Das ist redaktionell ganz gut barrierefrei.

Die einfache Lösung mit drei Spalten in Prozent und in der Quellcode-Reihenfolge 1)linke Spalte 2)mittlere Spalte 3)rechte Spalte ist leicht machbar, aber das ist nicht das, was ich suche : )

Ich wäre über einen Tipp sehr dankbar.
Bis dann

Gordon

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Seite mit drei Spalten, dritte Spalte soll umbrechen.

    Ashura Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Gordon.

    Thematisch paßt meine Frage in das Forum zu CSS, aber auch zum Thema Barrierefreiheit. Also nicht wundern, wenn Ihr diese Frage in beiden Foren findet : )

    Ich wundere mich aber, da hier die Themenunterscheidung wenig relevant ist.

    Ich möchte ein dreispaltiges Layout einer Seite erstellen. Die drei Spalten sollen mit DIVs angelegt sein, da ich die Seite barrierefrei machen möchte.

    Ich möchte nicht mit dem Zug fahren, weil der Apfel grün ist.
    Was haben Div-Elemente mit der Vermeidung von Barrieren zu tun?

    Die linke und die rechte Spalte sollen mit FESTEN Pixelbreiten angelegt sein,

    Warum ein fixes Layout? Wenn alle Spalten flexibel sind, kann sich dein Layout doch viel besser an den zur Verfügung stehenden Platz anpassen.

    die mittlere Spalte soll sich der Browserbreite angleichen.

    Browserbreite != zur Verfügung stehender Platz (Viewport)

    Sobald man eine Auflösung von 640 x 480 Pixeln erreicht hat, soll die rechte Spalte nach unten springen.

    Ich werde wahrscheinlich nie mit einer Auflösung von 640*480 unterwegs sein und dennoch kann die Spalte bei mir umbrechen.

    -> Auflösung != zur Verfügung stehender Platz (Viewport)

    Warum? Weil man in einem Screenreader dann zuerst die mittlere Spalte, also den eigentlichen Inhalt einer Seite angezeigt bekommt und dananch die Navigation in der linken Spalte und als letztes ein paar Teaser in der rechten Spalte. Das ist redaktionell ganz gut barrierefrei.

    Finde ich nicht. Wenn ich erst ewig lange scrollen muss, bzw. mein Visualisierungsmittel abgrasen muss, bevor ich zur Navigation komme, empfinde ich das als lästig.

    Daher finde ich es meist durchdachter, wenn die Navigation am Anfang steht und am Ende der Seite ein Verweis auf den Seitenkopf. (nicht! mit display:none; ausgeblendet, sondern lieber mit einem entsprechend großen negativen margin)

    Die einfache Lösung mit drei Spalten in Prozent und in der Quellcode-Reihenfolge 1)linke Spalte 2)mittlere Spalte 3)rechte Spalte ist leicht machbar, aber das ist nicht das, was ich suche : )

    Wenn du float verwenden möchtest, muss die Reihenfolge der HTML-Elemente dafür geeignet sein.

    Also üblicherweise:

    [Kopf]
    [Navigation]
    [Inhalt]
    ([Zusätzliches])
    [Fuß]

    Hiermit lässt sich wunderbar mit float arbeiten.

    Einen schönen Mittwoch noch.

    Gruß, Ashura

    --
    Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
    30 Days to becoming an Opera8 Lover -- Opera 8.02 mit Bittorent-Unterstützung
    Meine Browser: Opera 8.01 | Firefox 1.0.5 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0
    [Deshalb frei! - Argumente pro freie Software]
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Seite mit drei Spalten, dritte Spalte soll umbrechen.

    Gernot Back Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Gordon,

    mir fällt zu deinem Problem nichts anderes als position:absolute in Verbindung mit overflow:auto ein

      
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">  
<html>  
<head>  
<title></title>  
<meta name="author" content="Gernot Back">  
<meta name="generator" content="Ulli Meybohms HTML EDITOR">  
<style type="text/css">  
[code lang=css]  
html, body {  
  margin:0;  
  padding:0;  
  width:100%;  
  height:100%;  
  font-size:16px;  
  /* font-size nur zur Veranschaulicheung des Problems in Pixelmaß */  
}  
  
#linke {  
  margin:0;  
  padding:0;  
  width:150px;  
  height:100%;  
  overflow:auto;  
  background-color:#DDEEFF;  
  position:absolute;  
  top:0;  
}  
  
#mittlere {  
  padding:0 150px 0 0;  
  height:100%;  
  background-color:#FFEEDD;  
  position:absolute;  
  left:150px;  
}  
  
#rechte {  
  margin:0;  
  padding:0;  
  width:150px;  
  height:100%;  
  overflow:auto;  
  background-color:#EEFFDD;  
  position:absolute;  
  top:0;  
  right:0;  
}

    </style>
    </head>
    <body >
    <div id="mittlere">Mitte Mitte Mitte Mitte MitteunregelmäßigMitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte Mitte</div>
    <div id="linke">Links Links Links Links Links Links LinksunregelmäßigLinks Links Links Links Links Links Links Links </div>
    <div id="rechte">Rechts RechtsunregelmäßigRechts Rechts Rechts Rechts Rechts Rechts </div>
    </body>
    </html>
    [/code]
    Gruß Gernot

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Seite mit drei Spalten, dritte Spalte soll umbrechen.

      molily
      – Informationen zu den Bewertungsregeln

      <!doctype html public "-//W3C//DTD HTML 4.0 //EN">

      DOCTYPE muss übrigens groß geschrieben werden. HTML 4.0 bringt oft Verblüffungen hervor, also besser 4.01.

      Mathias

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Seite mit drei Spalten, dritte Spalte soll umbrechen.

        Gernot Back Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hallo molily,

        <!doctype html public "-//W3C//DTD HTML 4.0 //EN">

        DOCTYPE muss übrigens groß geschrieben werden. HTML 4.0 bringt oft Verblüffungen hervor, also besser 4.01.

        Ich muss schon immer type="text/javascript" in meinem alten Phase5 anstelle von language="JavaScript" einfügen. Der Doctype (4.0 ist übrigens das Neueste was mir da angeboten wird) bekomme ich zwar in Großschreibung zur Auswahl, in den Code eingefügt wird er dann aber in Kleinschreibung.

        Lästig! Trotzdem mag ich mich nicht von der alten Version dieses Editors trennen, weil das Erstellen von Imgagemaps (Koordinaten auslesen im Bildbetrachtungsmodus) in den neueren nicht mehr unterstützt wird.

        Gruß Gernot

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      2. Seite mit drei Spalten, dritte Spalte soll umbrechen.

        MudGuard Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hi,

        <!doctype html public "-//W3C//DTD HTML 4.0 //EN">
        DOCTYPE muss übrigens groß geschrieben werden.

        PUBLIC afaik auch.

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        Schreinerei Waechter
        Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln