nicht angemeldet
Hallo,
ich will mal versuchen dir semantisches Markup ein wenig zu erläutern. Grundlage allen dessen was du tust ist der _Inhalt_. Bei dir wäre das im Moment:
PvP-Flachbogen
Stich-Schaden: 15-28 (Erfordert 9 Treffsicherheit)
Inschrift: Keine
Flachboden, zweihändig
Im nächsten Schritt zeichnest du diesen Inhalt seiner Bedeutung nach mit passenden HTML-Elementen aus.
<div class="waffe"> <!-- div gruppiert mehrere Elemente -->
<h1>PvP-Flachbogen</h1> <!-- eindeutig die wichtigste Überschrift, bei mehr Inhalt musst du hier wahrscheinlich eine andere Ordnung wie h2, h3, ... verwenden -->
<dl> <!-- hier wird die semantische Auszeichnung schwieriger, man könnte das ganze als tabellarische Daten auffassen und eine zweispaltige Tabelle draus machen, ich hab jetzt mal die Definitionsliste gewählt, problematisch ist vorallem der dritte Eintrag, der nicht ins Schema passt -->
<dt>Stich-Schaden:</dt>
<dd>15-28 <span class="anforderung">(erfordert 9 Treffsicherheit)</span></dd> <!-- der Text in Klammern wird mangels Alternativen mit einem span-Element ausgezeichnet und dem ganzen durch eine Klasse "Bedeutung" verpasst -->
<dt>Inschrift:</dt>
<dd>keine</dd>
</dl>
<p>Flachboden, zweihändig</p> <!-- ein einfacher Absatz, es wäre aber besser diesen Eintrag auch noch irgendwie in die Listenstruktur aufzunehmen, z.B. als <dt>Eigenschaften</dt><dd>Flachboden</dd><dd>zweihändig</dd> (den Titel kann man ja immernoch per CSS ausblenden) -->
</div>
Erst jetzt im dritten Schritt machst du dir über das Aussehen Gedanken. Mittels geeigneter CSS-Selektoren .waffe, h1, dl, dt, dd, .anforderung, p (beachte auch den Nachfahrenselektor um unnötige IDs und Klassen zu sparen) wählst du die Elemente aus und formatierst sie wie gewünscht. Bei komplizierten Designvorstellung kann es nötig sein weitere Elemente ins Markup einzufügen, das solltest du aber versuchen so weit wie möglich zu vermeiden.
In deinem konkreten Fall solltest du dir einfach mal einen Artikel über runde Ecken durchlesen, wie z.B. http://aktuell.de.selfhtml.org/artikel/css/runde_ecken/index.htm, dann solltest du das auch mit wenigen zusätzlichen divs hinbekommen.
Gruss,
OhneName