Problem mit Zeilenumbruch

[Kalle_B]

Hallöle,

Listen baue ich gerne mit CSS auf. Jede Zeile hat mehrere Spalten:

.row  {border-bottom:1px solid #ccc}
.sp01 {width:10em; float:left}
.sp02 {width:10em; float:left}
.clear{clear:both}

<div class=row>
  <div class=sp01>Name:</div>
  <div class=sp02>Kalle</div>
  <div class=clear></div>
</div>
<div class=row>
  <div class=sp01>Bundesland:</div>
  <div class=sp02>Hessen</div>
  <div class=clear></div>
</div>

Vorteil gegenüber Tabellen: Die Spaltenbreite wird eingehalten (Tabellen quetschen sich klein trotz width-Angabe, wenn die Anzeigefläche zu klein wird).

Nun das Problem: Können Blinde den Zeilenwechsel bei diesem Design eigentlich fühlen?

Oder muss ich <div class=row> durch <p> ersetzen? Darf innerhalb von p div vorkommen?

Lieben Gruß, Kalle

[wucher wichtel]

Hallo!

Listen baue ich gerne mit CSS auf. Jede Zeile hat mehrere Spalten:

Du meinst, dass du Tabellen gerne mit CSS aufbaust. Dann könntest du doch aber wenigstens die Möglichkeiten von CSS ausnützen. Obwohl es eigentlich am besten wäre, das ganze mit HTML-Tabellen zu machen.

Oder muss ich <div class=row> durch <p> ersetzen? Darf innerhalb von p div vorkommen?

Nein. Zitat:

Das <p>-Element darf keine anderen blockerzeugenden Elemente
  wie z.B. Überschriften, Textabsätze oder Listen enthalten.

ciao, ww

[Kim]

Vergiss bitte auch nicht, die Attribute in Anführungszeichen zu setzen.

[Kalle_B]

Vergiss bitte auch nicht, die Attribute in Anführungszeichen zu setzen.

Warum? Solange sie kein Leerzeichen enthalten ...

[wucher wichtel]

Hallo!

Vergiss bitte auch nicht, die Attribute in Anführungszeichen zu setzen.

Warum? Solange sie kein Leerzeichen enthalten ...

Solange du HTML schreibst ist das kein Problem. Ich finde solchen Code, in dem die Anführungszeichen fehlen unschön, weil ich ihn schlechter lesen kann. Bei XHTML ist es aber AFAIK notwendig, Attribute in Anführungseichen zu setzen.

ciao, ww

[Auge]

Hallo

Listen baue ich gerne mit CSS auf.

Ich baue Listen gerne mit Listen auf (ul, ol, dl). Das, was du da zeigst, sieht mir sehr nach einer Definitionsliste (dl) oder, bei anderer Anordnung, nach einer Tabelle aus.

<div class=row>
  <div class=sp01>Name:</div>
  <div class=sp02>Kalle</div>
  <div class=clear></div>
</div>

Vorteil gegenüber Tabellen: Die Spaltenbreite wird eingehalten (Tabellen quetschen sich klein trotz width-Angabe, wenn die Anzeigefläche zu klein wird).

Schon gelesen: table-layout?

Nun das Problem: Können Blinde den Zeilenwechsel bei diesem Design eigentlich fühlen?

Ein <div> ist, wie auch <p>, ein Blockelement. Es erzeugt einen Absatz. Das dürfte auch bei der Ausgabe über Screenreader etc. nicht anders sein.

Oder muss ich <div class=row> durch <p> ersetzen? Darf innerhalb von p div vorkommen?

Nein und nein.

Tschö, Auge

[Kalle_B]

Hallo

Ich baue Listen gerne mit Listen auf (ul, ol, dl).

dl sieht interessant aus, habe ich bisher noch nicht gekannt. Danke für den Tipp, werde ich ausprobieren.

Kalle

[David Aurelio]

Hallo Kalle,

1.) Warum so umständlich?
Das ginge doch auch ohne das div zum clearen:

  
.row  {border-bottom:1px solid #ccc}  
.sp01 {width:10em; float:left}  
.sp02 {margin-left:10em;}  

  
<div class=row>  
  <div class=sp01>Name:</div>  
  <div class=sp02>Kalle</div>  
</div>  
<div class=row>  
  <div class=sp01>Bundesland:</div>  
  <div class=sp02>Hessen</div>  
</div>  

Nun das Problem: Können Blinde den Zeilenwechsel bei diesem Design eigentlich fühlen?

Wenn Du Dir schon Gedanken um Barrierefreiheit machst, solltest Du Div-Suppen vermeiden und Deine Gedanken um das Thema sinnvolles Markup erweitern.

Dein Beispiel sieht nach einer Definitionsliste aus. Warum nicht eine solche benutzen?

  
<dl>  
    <dt>Name:</dt>  
    <dd>Kalle</dd>  
    <dt>Bundesland:</dt>  
    <dd>Hessen</dd>  
</dl>  

Die kann man auch prima formatieren, z.B. so:

  
dt {  
    clear: both; /* cleart vorangegangene dts */  
    float: left;  
    width: 10em;  
}  
  
dd {  
    border-bottom: 1px solid #ccc;  
    margin-left: 10em;  
}  

Und, für Fortgeschrittene, damit dts, die länger sind als die folgenden dds oder am Ende alleine stehen, nicht unten über die Liste hinausragen:

  
dl {  
    *height: 1px; /* Für den IE. Wird von anderen Browsern nicht gesehen,  
                     Macht, das die Box auch um gefloatete Elemente herum erweitert wird. */  
}  
  
dl:after {  
    content: "."; /* Für andere Browser */  
    display: block;  
    height: 0;  
    clear: both;  
    visibility: hidden;  
}  

[David Aurelio]

Zur Ergänzung:
Eine Tabelle wäre in diesem Fall natürlich auch schwer in Ordnung, da es sich ja um tabellarische Daten handelt. Die kann man auch so stylen, wie es Dir vorschwebt.

  
table.personal {  
    table-layout: fixed;  
    width: 20em;  
}  
  
table.personal th,  
table.personal td {  
    border-bottom: 1px solid #ccc;  
    width: 50%;  
}  

  
<table class="personal">  
  <caption>Das bin ich:</caption>  
  <tr>  
    <th>Name:</th>  
    <td>Kalle</td>  
  </tr>  
  <tr>  
    <th>Bundesland:</th>  
    <td>Hessen</td>  
  </tr>  
</table>