Problem bei der Formatierung mit CSS

[Gunnar Bittersmann]

@@Manny:

nuqneH

Mein Code sieht wie folgt aus:

Oh je.

<div id="Artikel">
  <strong>Fisch</strong>
</div>

"ich möchte eine überschrift sein, bitte bitte lass mich ein <hX> sein!" [wahsaga] Siehe Textstrukturierung [http://de.selfhtml.org/html/text/index.htm@title=SELFHTML].

<hr/>

<hr> ist dazu da, einen thematischen Wechsel zwischen Absätzen zu kennzeichnen. [HTML5] <hr> ist nicht dazu da, horizontale Linien zu zeichnen; dazu dient CSS (border-bottom für die Überschrift).

<div id="Artikel">

IDs müssen dokumentweit eindeutig sein, wie „Identität“ schon sagt: „eindeutige Unterscheidbarkeit einer Person oder einer Sache von einer anderen“ [Wiktionary] Du darfst "Artikel" nicht mehrfach vergeben.

Und für die Artikelliste gilt: Ich möchte eine Liste sein, bitte bitte lass mich ein <ul>/<ol> sein! (Oder eine <dl>, die aber wegen des fehlenden <di>-Elelemnts qua HTML-Spec oft unbrauchbar ist). Siehe Textstrukturierung [http://de.selfhtml.org/html/text/index.htm@title=SELFHTML]. Die einzelnen Artikel sind dann <li> …

<div class="gerichtnummer">1</div>

… und die Durchnumerierung erfolgt dann bei <ol> automatisch, so dass dieses Element entfallen könnte. Es sei denn, es wird nicht von 1 bis n durchnumeriert, sondern es können Lücken auftreten oder auch Nummern wie "A1".

<div class="gerichtueb">Fisch mit einem tollen Titel</div>

Auch "ich möchte eine überschrift sein, bitte bitte lass mich ein <hX> sein!" [wahsaga]

<div class="preis">6.90 &euro;</div>

Du solltest das €-Zeichen im Quelltext verwenden, keine Zeichenreferenz (entsprechende Zeichencodierung vorausgesetzt). [ESCAPES]

<div class="subtitle">Eine Beschreibung die so lang sein kann, wie sie möchte. Deswegen ist es hier besonders wichtig, dass hier viel Platz für den Text ist.</div>

Anstelle der Klassen bietet sich eine sematische Auszeichnung an. [schema.org] Dein Markup sähe dann so aus:

<h2>Fisch</h2>  
<ul>  
  <li itemscope itemtype="http://schema.org/Product">  
    <h3>  
      <span itemprop="productID">1</span>  
      <span itemprop="name">Fisch mit einem tollen Titel</span>  
    </h3>  
    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">  
      <span itemprop="price">6.90 €</span>  
    </div>  
    <div itemprop="description">Eine Beschreibung die so lang sein kann, wie sie möchte. Deswegen ist es hier besonders wichtig, dass hier viel Platz für den Text ist.</div>  
  </li>  
  <li itemscope itemtype="http://schema.org/Product">  
    <h3>  
      <span itemprop="productID">2</span>  
      <span itemprop="name">Fisch</span>  
    </h3>  
    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">  
      <span itemprop="price">6.90 €</span>  
    </div>  
    <div itemprop="description">Eine Beschreibung die so lang sein kann, wie sie möchte. Deswegen ist es hier besonders wichtig, dass hier viel Platz für den Text ist.</div>  
  </li>  
</ul>

<div id="down">
  <center>Hier finden Sie unsere Men&uuml;karte zum Download: <a href="#">Men&uuml;karte</a></center>
  <hr>
</div>[/code]

Missbilligte darstellungsbezogene Elemente wie <center> haben im Markup nichts zu suchen. Zum Ausrichten dient CSS.

"Menükarte" muss auch nicht doppelt dastehen (und schon gar nicht mit vers&uuml;mmeltem Ü):

<p>Wir bieten Ihnen unsere <a href="">Menükarte</a> zum Download an.</p>

Qapla'