nicht angemeldet
Hättet ihr das anders bzw. vor allem einfacher gelöst?
Ja - und das wird dir jeder sagen :)
Mit der nötigen Erfahrung wirst du das auch über deine eigenen Dinge sagen: sobald du fertig bist, kommst du an 10 Ecken drauf, dass das einfacher/anders gegangen wäre :)
margin: 1px 1px;
das hier kannst du auf 1px zusammenfassen
top: 0px; left: 0px;
0 ist 0, egal in welcher Einheit.
.clearfix{
clear: both;
Clearfixing mit pseudo-Elementen erfordert zwar mehr CSS, saut dir aber den HTML-Code nicht zu und ist daher zu bevorzugen
<div id="teasers">
warum keine Liste?
<div class="homepageteaser">
Und Listen-Elemente - oder zumindest section-Elemente?
<img src="#" /> <div class="headline">
Warum keine Überschriften?
<div class="background"></div>
Das hier ist ziemlich überflüssig.
<div class="blubb">
Und das hier auch :)
<h1>My Headline</h1>
Hier ist doch wieder eine Überschrift ;)
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Da hättest du einen Absatz drumherum machen können (oder mehrere).
Grundlegend ist dein Vorhaben wesentlich einfacher umzusetzen, wenn du per :hover die Hintergrundfarbe oder die Deckkraft änderst und bestimmte Elemente mit dem Nachfahrenselektor ein/ausblendest.
Damit ist die ganze latte an Elementen wie eben dein div mit der Klasse "background" nicht erforderlich.
Visuell dürfte es ziemlich egal sein, ob du den Text mit 50 % schwarz überlagerst oder die Deckkraft der Schrift reduzierst und den Hintergrund entsprechend einfärbst.
Alternativ kannst du auch Hintergrundfarben per rgba() angeben, damit sparst du dir ebenfalls das übereinanderpositionieren - solltest du dann noch alte Browser unterstützen müssen, kannst du entwerder mit einem 1x1-Pixel-PNG arbeiten oder aber du reduzierst einfach die Deckkraft und lebst damit, dass auch die Schrift etwas durchsichtiger wird.
24ways hat hier einen guten Artikel:
http://24ways.org/2009/working-with-rgba-colour
Matthias Apsel