Problem bei der Formatierung mit CSS

[Manny]

Hallo,

ich versuche derzeit mich ein wenig in CSS und HTML. Dabei bin ich nun langsam mal an meine Grenzen gestoßen. Deswegen hoffe ich kann man mir helfen. Mein Code sieht wie folgt aus:

<div id="Artikel">  
  <strong>Fisch</strong>  
</div>  
<hr/>  
<div id="Artikel">  
  <div class="gerichtnummer">1</div>  
  <div class="gerichtueb">Fisch mit einem tollen Titel</div>  
  <div class="preis">6.90 &euro;</div>  
  <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>  
</div>  
<hr/>  
<div id="Artikel">  
  <div class="gerichtnummer">2</div>  
  <div class="gerichtueb">Fisch</div>  
  <div class="preis">6.90 &euro;</div>  
  <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>  
</div>  
<hr/>  
<div id="Artikel">  
  <div class="gerichtnummer">3</div>  
  <div class="gerichtueb">Fisch</div>  
  <div class="preis">6.90 &euro;</div>  
  <div class="subtitle"></div>  
</div>  
<hr/>  
<div id="down">  
  <center>Hier finden Sie unsere Men&uuml;karte zum Download: <a href="#">Men&uuml;karte</a></center>  
  <hr>  
</div>

Hier mein bisheriger CSS Versuch: Es sieht in etwa so aus, wie es aussehen soll, aber leider immernoch nicht so ganz :/

  
#Haupttext hr {  
	margin: 10px 20px 10px 20px;  
}  
  
#Artikel  {  
	padding: 0px 15px 0px 15px;  
}  
  
#Artikel strong {  
	margin: 0 0 0 50px;  
	font-weight: bold;  
	font-size: 20px;  
}  
  
#Artikel .gerichtueb {  
	margin: 0 0 0 50px;  
	font-weight: bold;  
	font-size: 20px;  
	float: left;  
	width: 274px;  
}  
  
#Artikel .gerichtnummer {  
	position: absolute;  
	font-weight: bold;  
	font-size: 20px;  
}  
  
#Artikel .subtitle {  
	margin: 0 0 0 50px;  
	font-size: 10px;  
	float: left;  
	width: 274px;  
}  
  
#Artikel .preis {  
	text-align: right;  
	font-weight: normal;  
	font-size: 14px;  
	float: right;  
	width: 80px;  
}  

Am Ende soll es im Prinzip so aussehen, dass die Gerichtnummer vorne steht. Die Gerichtüberschrift und der Subtitle auf einer Linie etwas weiter rechts steht und die oben angegebenen 274px maximal breit wird. Auf der rechten Seite möchte ich den Preis stehen haben. Die Artikel sollen jeweils durch ein <hr/> voneinander getrennt werden (als optische Trennlinie) aber irgendwie funktioniert das alles nicht so, wie ich es mir wünsche :( Hoffe ihr könnt mir helfen.

mfg Manny

[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'

[Kackfohgel]

Hallo Gunnar,

bin zwar nicht der Thread-Ersteller, aber ich finde deine Antwort/die Links sehr hilfreich. Insbesondere den verlinkten Artikel mit den Zeichen-Escapes finde ich super, kannte ich noch nicht und hab ihn gleich zu meinen Lesezeichen hinzugefügt.

Freundliche Grüße
Kackfohgel

[Gunnar Bittersmann]

@@Kackfohgel:

nuqneH

Insbesondere den verlinkten Artikel mit den Zeichen-Escapes finde ich super

IIRC war das auch der erste W3C-i18n-Artikel, den ich übersetzt habe – nachdem ich ihn schon etliche Male verlinkt hatte und mich gewurmt hatte, dass es andere Übersetzungen gegeben hatte, aber noch keine deutsche.

Qapla'

[Der Martin]

Hallo Gunnar,

sehr schön zusammengestellt. :-)

mit vers&uuml;mmeltem Ü

Ich schenk dir auch noch ein 't' dazu: t

Ciao,
 Martin

[Tabellenkalk]

Hallo Gunnar,

sehr schön zusammengestellt. :-)

mit vers&uuml;mmeltem Ü

Ich schenk dir auch noch ein 't' dazu: t

Ciao,
Martin

ich hätte ja ein 'ch' spendürt...

gruß
Kalk

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Am Ende soll es im Prinzip so aussehen, dass die Gerichtnummer vorne steht. Die Gerichtüberschrift und der Subtitle auf einer Linie etwas weiter rechts steht und die oben angegebenen 274px maximal breit wird. Auf der rechten Seite möchte ich den Preis stehen haben.

Ausgehend von meinem Markup also in etwa:

li  
{  
  list-style: none;  
  border-top: 1px solid;  
}  
  
h3  
{  
  float: left;  
}  
  
[itemprop="offers"]  
{  
  float: right;  
}  
  
[itemprop="description"]  
{  
  clear: both;  
}

Qapla'

[Manny]

Vielen Dank! Sehr hilreiches Posting :) Werde mich später gleich mal dran setzen und alles genaustens Studieren ;)

Mfg Björn

[Manny]

Ich hätte da nochmal eine Frage.

Gibt es zu den Schemas auch irgendwo eine Aufstellung welche Schemas Google, Yahoo, Bing! usw. versteht? Oder ist die Seite http://schema.org schon allgemeiner Standart?

Würde mich einfach mal interessieren, weil Suchmaschienenoptimierung ist ja auch nicht unwichtig in der heutigen Zeit ;)

Mfg Björn

[molily]

Gibt es zu den Schemas auch irgendwo eine Aufstellung welche Schemas Google, Yahoo, Bing! usw. versteht? Oder ist die Seite http://schema.org schon allgemeiner Standart?

Hast du den zweiten Satz auf dieser Seite mal gelesen? Oder die FAQ?

Schema.org ist eine Übereinkunft von Google, Yahoo, Bing und anderen, insofern ein Quasi-Standard.

Mathias