zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden DIVs statt Tabelle / IDs mehrfach nutzen?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.09.2011, 15:15
Benutzerbild von dercoe
Wissbegierig
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 02.01.2010
Ort: NRW
Beiträge: 115
dercoe befindet sich auf einem aufstrebenden Ast
Standard DIVs statt Tabelle / IDs mehrfach nutzen?

Hallo zusammen,

hier erstmal die Seite, um die es geht: Reitverein Am Fronhof e.V. Allerheiligen

Dort geht es hauptsächlich um die horizontale Anordnung von:

Artikelbild...Beschreibung...Preis.

Früher war die Artikelübersicht als Tabelle ausgeführt (3 Spalten, mehrere Zeilen). Im Zuge des Umschreibens auf HMTL&CSS habe ich aber mehrfach gelesen, daß man für diese Arten von Darstellung besser 3 DIVs nebeneinander anordnet (durch float).

Gesagt getan. Allerdings wundert mich eine Sache. IDs dürfen auf einer Website nur einmalig vorhanden sein. In meinem Fall (der vielleicht nicht richtigen Umsetzung) nutze ich diese ID aber mehrfach, allerdings immer mit demselben Inhalt.

Die betroffenen IDs sind "shop_text", "shop_preis" und "shop_pic".

Codeschnipsel:
HTML-Code:
<div id="shop_pic">
<img src="img/0004/0007.png" width="150px">
</div>
<div id="shop_text">
<p><span class="fett">Cliff Winter</span></p>
<p><span class="fett">Farben: </span> schwarz, braun</p>
<p><span class="fett">Logo: </span>auf dem Rücken / groß</p>
<p><span class="fett">Größen: </span>XS, S, M, L, XL, 2XL - 5XL</p>
</div>
<div id="shop_preis">
<p>Offizieller VK-Preis: 159,50 €</p>
</div>

<div id="shop_pic">
<img src="img/0004/0008.png" width="150px">
</div>
<div id="shop_text">
<p><span class="fett">Arosa</span></p>
<p><span class="fett">Farben: </span>dkl.-blau/cocos, black, black/cocos, camel/marzipan, schocko/zimt, schoko/marzipan</p>
<p><span class="fett">Logo: </span>auf der linken Brust / klein</p>
<p><span class="fett">Größen: </span>XS, S, M, L, XL, 2XL</p>
</div>
<div id="shop_preis">
<p>Offizieller VK-Preis: 89,50 €</p>
</div>
Und es funktioniert dennoch. Oder soll die Definition "darf nur einmal vorhanden sein" bedeuten, daß man eine ID nicht für ein DIV und für z.B. ein a-Tag benutzen darf? Dann wäre meine Vorgehensweise doch wieder richtig, da ich die ID nur für ein DIV benutze, oder?

Leider geht das aus dem Buch nicht hervor, bzw. kann ich das nicht daraus lesen.

Danke für Eure Hilfe

Gruß
Marko
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.09.2011, 15:21
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Es funktioniert, aber es kann schnell zu Problemen führen. HTML und CSS ist es egal ob eine ID einmal, zweimal oder hundert Mal auf derselben Seite verwendet wird. Aber es gibt natürlich hier einen Sinn warum da steht, dass eine ID nur einmal auf einer Seite verwendet werden sollte. Dafür ist auch egal für welches Element sie genutzt wird.

Eine ID kann Ankerpunkt für Sprunglinks und/oder Zugriffsanker für JavaScript sein. Und hier gibt es dann entsprechend Probleme. Bei einer Klasse ist das egal. Diese kann auf einer Seite immer wieder benutzt werden.

Das heißt: Du solltest aus allen IDs, die mehrfach auf einer Seite vorkommen, Klassen machen.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.09.2011, 15:27
Benutzerbild von dercoe
Wissbegierig
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 02.01.2010
Ort: NRW
Beiträge: 115
dercoe befindet sich auf einem aufstrebenden Ast
Standard

Also so wie hier:

HTML-Code:
<div class="position">
<p>3.1</p>
</div>
<div class="mannbild">
<a href="img/0001/0023.jpg" rel="lightbox[Herren3]" title="Valentin Keul"><img src="img/0001/0023.jpg" width="95px"></a>
</div>
<div class="manntext">
<p class="fett">Valentin Keul</p>
<p>Geburtsdatum: 03.10.1994</p>
<p>Im Verein seit: 02/2006</p>
</div>

<div class="position">
<p>3.2</p>
</div>
<div class="mannbild">
<a href="img/0001/0015.jpg" rel="lightbox[Herren3]" title="Joachim Rothmann"><img src="img/0001/0015.jpg" width="95px"></a>
</div>
<div class="manntext">
<p class="fett">Joachim Rothmann</p>
<p>Geburtsdatum: 27.11.1951</p>
<p>Im Verein seit: 04/1979</p>
</div>
Gruß
Marko
Mit Zitat antworten
  #4 (permalink)  
Alt 08.09.2011, 15:30
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Ja.

Eine Klasse mit dem Namen ".fett" die dann womöglich auch noch selbiges Formatiert sollte es nicht geben. Dafür ist das Element strong da.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #5 (permalink)  
Alt 08.09.2011, 15:31
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.844
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

Für eine Tabelle solltest Du aber schon eine Tabelle nutzen.
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe
Mit Zitat antworten
  #6 (permalink)  
Alt 08.09.2011, 15:35
Benutzerbild von dercoe
Wissbegierig
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 02.01.2010
Ort: NRW
Beiträge: 115
dercoe befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von ArcVieh Beitrag anzeigen
Für eine Tabelle solltest Du aber schon eine Tabelle nutzen.
Ok, aber eine Tabelle sollte doch nur für tabellarische Inhalte und nicht zum Design verwendet werden. Hab ich mir mal sagen lassen! (Semantik).


@Praktikant: Wenn ich das Element "Strong" im HTML benutze, ist die Trennung von Inhalt und Design nicht gegeben. Deshalb mein verzicht. Falsch?

Gruß
Marko
Mit Zitat antworten
  #7 (permalink)  
Alt 08.09.2011, 15:36
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.844
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von dercoe Beitrag anzeigen
Ok, aber eine Tabelle sollte doch nur für tabellarische Inhalte und nicht zum Design verwendet werden. Hab ich mir mal sagen lassen! (Semantik).
Das was ich dort auf deiner Seite sehe, sind aber tabellarische Inhalte.

Edit: strong hat eine Bedeutung.
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe
Mit Zitat antworten
  #8 (permalink)  
Alt 08.09.2011, 15:39
Benutzerbild von dercoe
Wissbegierig
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 02.01.2010
Ort: NRW
Beiträge: 115
dercoe befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von ArcVieh Beitrag anzeigen
Das was ich dort auf deiner Seite sehe, sind aber tabellarische Inhalte.

Edit: strong hat eine Bedeutung.
OK, da lasse ich micht gerne eines besseren belehren

Also ist STRONG durchaus ein inhaltlicher und kein gestaltungsbezogener Bezug? Genauso wie EM ?

Gruß
Marko
Mit Zitat antworten
  #9 (permalink)  
Alt 08.09.2011, 15:43
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.844
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von dercoe Beitrag anzeigen
OK, da lasse ich micht gerne eines besseren belehren
Code:
<div class="position">
<p>3.1</p>
</div>
<div class="mannbild">
<a href="img/0001/0023.jpg" rel="lightbox[Herren3]" title="Valentin Keul"><img src="img/0001/0023.jpg" width="95px"></a>
</div>
<div class="manntext">
<p class="fett">Valentin Keul</p>
<p>Geburtsdatum: 03.10.1994</p>
<p>Im Verein seit: 02/2006</p>
</div>
Du weist Attribut-Namen die passenden Werte zu (Bild, Name, Mitglied seit, Geburtsdatum, etc.).

Die ganzen Jacken, die ich hier sehe, sind eine Produkt-Tabelle...

Zitat:
Also ist STRONG durchaus ein inhaltlicher und kein gestaltungsbezogener Bezug?
Ja. Strong betont, so wie em auch. Man soll die Tags b (bold), i (italic) & u (underline) nicht verwenden, da diese nur gestalterische Auswirkungen haben (wie die Namen bereits vermuten lassen).
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 08.09.2011, 15:48
Benutzerbild von dercoe
Wissbegierig
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 02.01.2010
Ort: NRW
Beiträge: 115
dercoe befindet sich auf einem aufstrebenden Ast
Standard

Wenn ich den Code so ändern würde:

HTML-Code:
<div class="shop_pic">
<img src="img/0004/0005.jpg" width="150px">
</div>
<div class="shop_text">
<p><span class="fett">Basecap RC24P</span></p>
<p><span class="fett">Farben: </span> navy/white, natural/navy, gray/black</p>
<p><span class="fett">Logo: </span>Front</p>
<p><span class="fett">Größe: </span>verstellbar</p>
</div>
<div class="shop_preis">
<p>9,80 €</p>
</div>
Wäre das im Vergleich zu der Mannschaftaufstellung doch gleich, oder verwurschtele ich mich da in etwas?

Gruß
Marko
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Tabelle gerechtfertig, oder Liste oder DIVs nutzen? quarki69 CSS 4 14.06.2010 17:22
div's verhalten zuweisen wie einer tabelle ismx CSS 0 03.07.2008 00:49
Tabelle erscheint innerhalb eines DIVs FBI CSS 1 27.06.2007 02:39
Tabelle simulieren mit divs - gelöst unicorn CSS 26 21.11.2005 18:33
Tabelle in divs umformen - wie hier? ossionline CSS 23 17.03.2005 00:35


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:55 Uhr.