Div-Tabelle erstellen

[LalaP]

Einen Guten Morgen wünsche ich =)

Ich habe mich entschlossen, eine Layoutbox mit Divs statt mit dem table-Tag zu erstellen. Mein Problem ist, dass ich oft noch in die Table-Schiene reinfalle.
Mein Grundbau ist bisher:

<div style="text-align: center;" >
  <div style="float:left;">IMG</div>
  <div style="float:left; background-image:url('equip/frameT.png'); background-repeat:repeat-x;">
                  asdasdasd
  </div>
  <div>IMG</div>

<div style="clear: left; float:left; background-image:url('equip/frameL.png'); background-repeat:repeat-y;"></div>
  <div style="float:left; background-image:url('equip/back.png'); background-repeat:repeat;">
  asddddddddddddddsasd<br/>
  asdasd
  </div>
  <div style="background-image:url('equip/frameR.png'); background-repeat:repeat-y;"></div>

<div style="clear: left;float:left;">
  IMG
  </div><div style="float:left; background-image:url('equip/frameB.png'); background-repeat:repeat-x;">
  asdasd
  </div><div style="float:left;">
  IMG
  </div>
 </div>

Damit man es besser erkennt, habe ich die normalen Grafiken mit IMG ersetzt. Bei so etwas experimentellem schreibe ich übrigens gerne direkt die CSS-Angaben in das Tag. Später dann nicht mehr ;)

Der tag in der Mitte stellt den Content-Bereich dar. Er funktioniert bisher als einziger richtig ;)
Nun werden die Ränder an allen vier Seiten nicht wiederholt, bis der Content-Bereich umschlossen ist. Die Ecken müsste ich eigentlich auch rechts vom horizontal-mittleren Div-Bereich ansetzen, oder? ;(

Ich hoffe, ihr versteht was ich meine.

[Cheatah]

Hi,

Einen Guten Morgen wünsche ich =)

selbiges desgleichen!

Ich habe mich entschlossen, eine Layoutbox mit Divs statt mit dem table-Tag zu erstellen.

Schade. Besser wäre der Entschluss, statt Layout-Tabellen oder Layout-<div>s zu 100% vom Layout unabhängiges semantisches Markup zu erstellen, welches *anschließend* per CSS zu einer gewünschten Darstellung geführt wird.

Mein Problem ist, dass ich oft noch in die Table-Schiene reinfalle.

Stimmt. Du hast <table> durch <div> ersetzt, <tr> durch <div> und <td> durch <div>. Das nützt nichts.

<div style="text-align: center;" >

Der Text soll also in einem linksplatzierten Element zentriert werden.

<div style="float:left;">IMG</div>

Ich vermute, dass dieses "IMG" für eine Header-Grafik steht. Das richtitge Element hierzu wäre <h1>, nicht <div>. Ob darin ein <img> untergebracht wird, ist nicht zwangsläufig gesagt.

<div style="float:left; background-image:url('equip/frameT.png'); background-repeat:repeat-x;">
                  asdasdasd
  </div>

Um was für eine Art Inhalt handelt es sich hierbei?

<div>IMG</div>

Wes Zweckes dient dies?

<div style="clear: left; float:left; background-image:url('equip/frameL.png'); background-repeat:repeat-y;"></div>

Inhaltsleere Elemente, die den Zweck einer Gruppierung haben, erfüllen ihren Zweck nicht. Dieses Element hat keine Daseinsberechtigung.

<div style="float:left; background-image:url('equip/back.png'); background-repeat:repeat;">

Ganz zwischendurch: Die Inline-Styles eliminiere bitte vollständig zugunsten ausgelagerter Styles. Statt dessen fehlen mir sprechende Bezeichner für Deine offenkundig bemerkenswert eindeutigen bzw. klassifizierbaren Elemente.

asddddddddddddddsasd<br/>

Wird dieses <br/> durch den Inhalt gerechtfertigt?

Der tag in der Mitte stellt den Content-Bereich dar. Er funktioniert bisher als einziger richtig ;)

In welchen Browsern, was bedeutet "funktioniert" sowie "funktioniert nicht"?

Ich hoffe, ihr versteht was ich meine.

Nicht wirklich. Wünschenswert wäre ein Link zur Testseite sowie eine Grafik, die Dein Ziel erkennbar macht - nebst einer Beschreibung, was denn eigentlich schief läuft.

Cheatah

[LalaP]

Hey, Danke für deine Antwort! =)

Schade. Besser wäre der Entschluss, statt Layout-Tabellen oder Layout-<div>s zu 100% vom Layout unabhängiges semantisches Markup zu erstellen, welches *anschließend* per CSS zu einer gewünschten Darstellung geführt wird.

Dieses zu 100%, vom Layout unabhängige, Markup ist also besser. Dann sollte ich darauf optimalerweise 'umsteigen'? Gibt es da vielleicht einen guten Link, der das näherst erläutert?

<div style="text-align: center;" >
Der Text soll also in einem linksplatzierten Element zentriert werden.

;) Das wollte ich noch ändern

Ich vermute, dass dieses "IMG" für eine Header-Grafik steht. Das richtitge Element hierzu wäre <h1>, nicht <div>. Ob darin ein <img> untergebracht wird, ist nicht zwangsläufig gesagt.

IMG steht bei mir für <img src="equip/corner2.png" alt="" />. Bei den anderen demenstprechen corner1,3 oder 4.

<div style="float:left; background-image:url('equip/frameT.png'); background-repeat:repeat-x;">
                  asdasdasd
  </div>
Um was für eine Art Inhalt handelt es sich hierbei?

Um mehrere <span>-Tags, wie z.B.:
<span class="Reihe"><span class="blau_ueber">PvP-Flachbogen</span></span><br />
<span class="Reihe"><span class="weiß_vorder">Stich- Schaden: 15-28 </span><span class="grau">(Erfordert 9 Treffsicherheit)</span></span><br />
<span class="Reihe"><span class="blau_vorder">Inschrift: Keine</span></span><br />
<span class="Reihe"><span class="grau_vorder">Flachboden, zweihändig</span></span><br />

Der tag in der Mitte stellt den Content-Bereich dar. Er funktioniert bisher als einziger richtig ;)

In welchen Browsern, was bedeutet "funktioniert" sowie "funktioniert nicht"?

Funktionieren heißt, dass die gesamte Fläche (die vom dynamischen Inhalt generiert wird) mit einer 1*1 Pixel großem 90% transparentem PNG-Grafik hinterlegt wird. Und dass auch in allen Browsern. (Habe für die IE bis Version 6 zwar noch keinen Filter gesetzt, kommt aber noch)

Nicht wirklich. Wünschenswert wäre ein Link zur Testseite sowie eine Grafik, die Dein Ziel erkennbar macht - nebst einer Beschreibung, was denn eigentlich schief läuft.

»»Cheatah

Wie Du sicherlich bemerkt hast, habe ich einige Fragen von dir nicht beantwortet. Entweder habe ich keine Antwort gewusst, oder ich habe die Frage nicht verstanden.
Mein Problem besteht darin, dass es nicht so aussieht, wie ich möchte. Außerdem schriebst du ja auch, dass ich besser mit unabhängigem Markup schreiben sollte (oder bedauerst zumindest, dass ich es nicht mache). Ich möchte gerne 'gutes' HTML und CSS schreiben, deswegen möchte ich das auch so 'optimal' wie Möglich machen- auch wenn ich weiß, dass es bisher fernab vom Optimalen ist.

Habe nun mal meine Version hoch geladen. Beim ersten ist das Layout mit einem <table>-Tag gemacht worden, beim zweiten mit der <div>-Konstruktion. So wie es optisch beim table-tag ist, so möchte ich es auch für das zu 100% vom Layout unabhängigem Markup haben.

[OhneName]

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

[LalaP]

Vielen Dank für die Erklärung, ich werde es noch ändern! :)

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.

Habe dir deinen Link angeschaut und auch für mich angepasst. Dass heißt, ich habe es versucht.
Zwei Dinge: Man kann zum das Schwarze von den Nachbargrafiken oft hinter den Ecken erkennen, da diese Transparent sind. Jedoch sollte es funktionieren, wenn man diese Ecken ein wenig grafisch anpasst.
Was jedoch in meinem Fall viel gravierender ist, dass die <div>-Boxen sich nicht dem Inhalt anpassen. Es funktioniert zwar, wenn ich Größenangaben mit CSS definiere, aber das sollte eigentlich nicht so sein.

http://huesson.de/richtig_div.html

Schönen Abend soweit =)

[OhneName]

Hallo,

Was jedoch in meinem Fall viel gravierender ist, dass die <div>-Boxen sich nicht dem Inhalt anpassen. Es funktioniert zwar, wenn ich Größenangaben mit CSS definiere, aber das sollte eigentlich nicht so sein.

Die Box macht genau das was von ihr zu erwarten ist. Als Blockelement (CSS) nimmt sie die gesamte zur Verfügung stehende Breite ein. Das Problem ist, dass deine Grafiken zu klein sind und deshalb die Box nur teilweise abdecken. Die Lösung dafür sind normalerweise sich wiederholende Hintergrundbilder. Das gleiche Verhalten beobachtest du auch auf der Beispielseite des Artikels, wenn du das Fenster ganz schmal machst und nach unten scrollst.

Gruss,
OhneName

[LalaP]

Hallo,

Was jedoch in meinem Fall viel gravierender ist, dass die <div>-Boxen sich nicht dem Inhalt anpassen. Es funktioniert zwar, wenn ich Größenangaben mit CSS definiere, aber das sollte eigentlich nicht so sein.

Die Box macht genau das was von ihr zu erwarten ist. Als Blockelement (CSS) nimmt sie die gesamte zur Verfügung stehende Breite ein. Das Problem ist, dass deine Grafiken zu klein sind und deshalb die Box nur teilweise abdecken. Die Lösung dafür sind normalerweise sich wiederholende Hintergrundbilder. Das gleiche Verhalten beobachtest du auch auf der Beispielseite des Artikels, wenn du das Fenster ganz schmal machst und nach unten scrollst.

Gruss,
OhneName

Hey!

Kann man dann nicht ein anderes Element wählen, welches kein Blockelement ist, sodass es horizontal 'aufhört'? Die Grafiekn sind extra so klein, weil eigentlich diese Boxen nie diese Größe erreichen sollten, weil der Inhalt kleiner ist.

[OhneName]

Hallo,

Kann man dann nicht ein anderes Element wählen, welches kein Blockelement ist, sodass es horizontal 'aufhört'?

Ein anderes Element zu wählen wäre der falsche Ansatz. Wir wollen ja unser Markup nicht mehr ändern. Ich habe nicht umsonst CSS hinter Blockelement geschrieben. Es geht hier um die CSS-Eigenschaft display:block, die für das Verhalten verantwortlich ist. Du kannst ja mal für die ganzen divs und das p darin die Eigenschaft auf display:inline ändern. Aber vielleicht solltest du auch über das vergeben einer festen Breite (vorzugsweise in % oder em) nachdenken.

Gruss,
OhneName

[lalaP]

Hey Chief!
Ich habe überraschend es optisch so hinbekommen, wie ich wollte. Habe den <div>s float:left zugewiesen. Darf ich das so machen? http://huesson.de/selfhtmlversion.html

[OhneName]

Hallo,

Ich habe überraschend es optisch so hinbekommen, wie ich wollte. Habe den <div>s float:left zugewiesen. Darf ich das so machen? http://huesson.de/selfhtmlversion.html

Wenn der Validator nichts dagegen hat, darfst du das so machen. Ob float die ideale Lösung ist wird sich wohl aber erst zeigen wenn du mehrere solche Boxen in eine größere Seite einbaust. Dann musst du dich auch mit den Eigenschaften clear oder overflow auseinandersetzen.

Gruss,
OhneName

[suit]

Um was für eine Art Inhalt handelt es sich hierbei?
Um mehrere <span>-Tags, wie z.B.:
<span class="Reihe"><span class="blau_ueber">PvP-Flachbogen</span></span><br />
<span class="Reihe"><span class="weiß_vorder">Stich- Schaden: 15-28 </span><span class="grau">(Erfordert 9 Treffsicherheit)</span></span><br />
<span class="Reihe"><span class="blau_vorder">Inschrift: Keine</span></span><br />
<span class="Reihe"><span class="grau_vorder">Flachboden, zweihändig</span></span><br />

dann machs mit einer definitionsliste und teil das auch gleich semantisch richtig ein

blau_ueber ist nicht gut - wenn AreaNET sich plötzlich entscheidet, einfache identifizierbare items nichtmehr hellblau sondern grün zu machen und uniques dann hellblau, musst du alles ändern :D

in diesem sinne:
<dl class="common">
  <dt>Name</dt>
  <dd>Genialer Langbogen d. schmalzigen Guthaftigkeit</dt>
  <dt>Inschrift:</dt>
  <dd class="inschrift">Die Rache ist mein</dt>
</dl>

alle .inschrift in .common drinnen sind dann zb hellblau, alle in .unique sind grün und alle in .rare meinetwegen gold

[suit]

nachtrag: aussehen soll das vermutlich mal so:
http://www.guildwiki.de/gwiki/images/3/3b/Grabthars_Hammer_stats.jpg

Also denke über den Sinn der elemente und nicht deren aussehen nach - klar wird ein unique wahrscheinlich immer grün bleiben, aber man weiss ja nie - und dann alle class="gruen" in class="red" umbenennen ist etwas unsinnig