CSS Background Repeat

wasi1306

Lt. Commander
Dabei seit
Juli 2007
Beiträge
1.425
Hey ho,

ich hab mal wieder ein kleines Problemchen. Folgendes:
Ich habe auf einer Homepage eine Tabelle mit Produkten erstellt, diese habe ich mit einem Hintergrundbild hinterlegt.
Das Hintergrundbild ist ein beige-weiß Verlauf der Größe 300x1500. Nun habe ich das Problem, dass bei sehr langem Inhalt (height > 1500px) das Bild wiederholt wird, allerdings durch den Farbverlauf ein Absatz von beige zu weiß entsteht, der nicht so schön aussieht.
Was gibt es hier für Möglichkeiten der Abhilfe? Kann man eventuell einfach sagen, dass bei repeat an der x-Achse gespiegelt werden soll?

EDIT: Damit das Problem besser deutlich wird:



Liebe Grüße,
Felix
 
Zuletzt bearbeitet:

NoXPhasma

Lieutenant
Dabei seit
Jan. 2010
Beiträge
586
Das geht so nicht wie du dir das vorstellst, was du aber machen kannst, ist das vertikale wiederholen zu unterbinden und statt dessen der Tabelle die Hintergrundfarbe vom ende des Bildes zu geben.
Code:
background-color:#E4CDA1;
background-image:url(bla.jpg) repeat-x;
*edit*
Oder du verwendest für den Verlauf CSS3 gradient: http://www.normansblog.de/css3-im-detail-background-gradients/
 
Zuletzt bearbeitet:

Daaron

Fleet Admiral
Dabei seit
Dez. 2011
Beiträge
13.487
Ideale Lösung ist eine Kombination dieser beiden Ansätze. Für Holzklasse-Browser zeigt man den Verlauf 1x an und blendet auf die Hintergrund-Farbe. Für moderne Browser gibt man einen Verlauf über die gesamte Höhe an, vollkommen unabhängig wie viel Content drin ist.
 

wasi1306

Lt. Commander
Ersteller dieses Themas
Dabei seit
Juli 2007
Beiträge
1.425
Vielen Dank euch beiden, genau das, was ich gesucht habe! :)
 

Daaron

Fleet Admiral
Dabei seit
Dez. 2011
Beiträge
13.487
Übrigens ist es keine sonderlich gute Idee, deine Produkte in einem <table> darzustellen. <table> markiert ausschließlich tabellarische Daten. Innerhalb eines Produkts könntest du <table> für beschreibenden Kram verwenden (man denke nur an Hardware-Angaben). Eine Reihe Produkte ist hingegen definitiv kein tabellarischer Inhalt.

Mit <table> versaust du dir...
- die korrekte/schnelle Erfassung deiner Inhalte in Suchmaschinen
- die Möglichkeit, dein Layout irgendwann "responsive" zu lösen -> den Zugang zu Smartphones & Tablets
- weitestgehend die Möglichkeit, dein HTML-Markup durch bestimmte Microdata-Definitionen zu ergänzen, durch die Suchmaschinen deutlich verbesserten Einblick in deine Inhalte erhalten. Wenn man z.B. die Defintionen von Schema.org verwendet erkennen Suchmaschinen nicht nur, dass es sich um ein "Produkt" handelt, sondern auch wie viel dieses spezielle PRodukt kostet, wie es beschrieben ist, was sein Produktbild ist,.... Spiegelt sich dann alles direkt in den Google-Hits wieder.
- oftmals die Ladezeit, da <table> eine deutlich komplexere Struktur benötigt als pure <div>-Suppe (oder semantisches HTML5)
- die Möglichkeit, deine Inhalte barrierefrei optimal anzubieten. Das Internet ist nicht nur für die Sehenden. Auch Blinde surfen. Auch Blinde kaufen. Und Blinde nutzen Screenreader oder Braille-Terminals, die wiederum mit <table>-Missbrauch echte Probleme haben.

Eine Artikelübersicht, sprich eine Vielzahl von Artikeln auf einer Seite (z.B. eine Katalogseite oder Suchergebnisse) sind logisch gesehen eine unsortierte Liste, also <ul>. Niemals sind sie eine <table>.
Die ideale Repräsentation eines einzelnen Produktes (vor allem in den Produktdetails) wäre der HTML5-Tag <article>, ergänzt um passendes Microdata.

Das kann dann z.B. so aussehen:
HTML:
<article itemscope="itemscope" itemtype="http://schema.org/Product">
<h1 itemprop="name">Dein Produktname</h1>
<section itemprop="description">Deine Produktbeschreibung</section>
...
</article>
Den Kram für das Produktbild, den Preis und so hab ich mal rausgelassen. Das darfste dann selbst herausfinden.
 

rephluX

Ensign
Dabei seit
Okt. 2007
Beiträge
169
Das kann dann z.B. so aussehen:
HTML:
<article itemscope="itemscope" itemtype="http://schema.org/Product">
<h1 itemprop="name">Dein Produktname</h1>
<section itemprop="description">Deine Produktbeschreibung</section>
...
</article>
Du hast mit allem was Du schreibst recht. Nur zu dem Code da oben eine Anmerkung:

Ist die "Hierachie" (wenn man sie denn so nennen mag) nicht genau anders rum? Also erst eine <section> und darin dann viele <article>-Elemente? So hab ich das zumindest meistens verwendet, da ich das <section>-Element als "Seitenabschnitt" verstanden hab. Korriger mich bitte, wenn ich falsche liege ;-)
 

Daaron

Fleet Admiral
Dabei seit
Dez. 2011
Beiträge
13.487
Ein Article ist ein Teil einer Webseite, der vollkommen losgelöst vom Rest der Seite existieren könnte und zur Syndication taugt. Das könnte ein Blogpost sein, ein in sich geschlossenes Widget... oder eben ein Produkt im Shop. Eine Section ist ein Abschnitt eines Dokuments (eines größeren Ganzen).

Sinnvoll wäre z.B., dass du einen <article> über Obst verfasst und Kirschen, Erdbeeren,... jeweils eine <section> nebst separater Headline-Struktur spendierst.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section
 

rephluX

Ensign
Dabei seit
Okt. 2007
Beiträge
169
Ein Article ist ein Teil einer Webseite, der vollkommen losgelöst vom Rest der Seite existieren könnte und zur Syndication taugt. Das könnte ein Blogpost sein, ein in sich geschlossenes Widget... oder eben ein Produkt im Shop. Eine Section ist ein Abschnitt eines Dokuments (eines größeren Ganzen).

Sinnvoll wäre z.B., dass du einen <article> über Obst verfasst und Kirschen, Erdbeeren,... jeweils eine <section> nebst separater Headline-Struktur spendierst.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section
Wenn eine <section> ein "größerer" Abschnitt eines Dokumentes ist, sollte er dann nicht ein Kind-Element eines <articles> sein, sondern umgekehrt als Elternelement eine Vielzahl an <article>-Elemente zusammenfassen? Siehe auch:

html5-2.jpg

http://webdesignledger.com/tips/html5-essentials-and-good-practices
http://coding.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/
 

Daaron

Fleet Admiral
Dabei seit
Dez. 2011
Beiträge
13.487
<aside> hat z.B. gar nichts mit Sidebars zu tun. Im Kontext eines Produktes wäre sinnvoller Content für <aside> so etwas wie "Kunden die dies gekauft haben, haben auch ... gekauft". Mit anderen Worten: Inhalt, der den Hauptabschnitt referenziert und erläutert oder ergänzt. Der Hauptabschnitt kann vollkommen losgelöst vom <aside> existieren, aber nicht umgekehrt.

Es steht außerdem nirgendwo, dass man <section> und <article> nicht mehrfach verschachteln darf. Dein Beispiel ist durchaus valide... aber genauso wie meine Anwendung.
http://www.w3.org/TR/2011/WD-html5-author-20110705/the-section-element.html
Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis
Wie ich schon sagte, wenn du einen <article> über Obst schreibst, dann wäre jede Obstsorte ein eigenes Kapitel innerhalb einer <section>.

Es ist ganz einfach: Ein Shop-Produkt existiert losgelöst von der Shop-Webseite. Es ist eine in sich geschlossene Entität. Daher ist sie ein <article>. Die verschiedenen Sektionen der Beschreibung des Produktes sind durchaus <section>s.

Dein Beispielbild verstößt gegen die W3C-Empfehlung:
A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.
 
Top