Gut so, oder gehts auch einfacher?

[Blubb]

Hallo zusammen,

ich probiere mich gerade etwas in CSS und habe für diesen Zweck eine kleine Seite erstellt, in der Fotos zu sehen sind. Fährt man mit der Maus über ein Foto, wird das Bild abgedunkelt und ein Beschreibender Text wird angezeigt. Das Ganze funktioniert prima. Ich würde nur gerne eure Meinung dazu erfahren: Hättet ihr das anders bzw. vor allem einfacher gelöst?

CSS Code:

			h1{  
				font-size: 18px;  
				font-weight: bolder;  
				font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;  
				text-transform: capitalize;  
			}  
  
            .homepageteaser{  
                margin: 1px 1px;  
				position: relative;  
				height: 270px;  
				float: left;  
				cursor: pointer;  
            }  
			  
			.homepageteaser img{  
				width: 320px;  
				height: 270px;  
				z-index: 0;  
			}  
			  
			.homepageteaser div.headline{  
				position: absolute;  
				top: 0px;  
				left: 0px;  
				height: 270px;  
				width: 320px;  
				color: white;  
				visibility: hidden;  
				z-index: 1;  
				  
			}  
			  
			.homepageteaser div.background{  
				position: absolute;  
				background-color: black;  
				opacity: 0.5;  
				top: 0px;  
				left: 0px;  
				height: 270px;  
				width: 320px;  
				z-index: 2;  
				  
			}  
			  
			.homepageteaser div.headline div.blubb{  
				position: absolute;  
				top: 0px;  
				left: 0px;  
				width: 320px;  
				height: 270px;  
				z-index: 2;  
			}  
			  
			.homepageteaser:hover div.headline{  
				visibility: visible;  
			}  
			  
			.homepageteaser div.headline h1{  
				font-size: 20px;  
				font-weight: bolder;  
				margin: 10px;  
			}  
  
            .clearfix{  
                clear: both;  
            }  
  
            #teasers{  
                position: relative;  
                width: 966px; /* Width of 3 teasers */  
            }

HTML Code:

  
    <div id="teasers">  
		<div class="homepageteaser">  
			<img src="#" />  
			<div class="headline">  
				<div class="background"></div>  
				<div class="blubb">  
					<h1>My Headline</h1>  
					Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.  
				</div>  
			</div>  
		</div>  
		<div class="homepageteaser">  
            <img src="#" />  
			<div class="headline">  
				<div class="background"></div>  
				<div class="blubb">  
					<h1>blabla</h1>  
					Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.  
				</div>  
			</div>  
		</div>  
		<div class="homepageteaser">  
            <img src="#" />  
			<div class="headline">  
				<div class="background"></div>  
				<div class="blubb">  
					<h1>blubblubb</h1>  
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.  
				</div>  
			</div>  
		</div>  
<br class="clearfix" />  
</div>  

[suit]

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

[Blubb]

Hi suit,

danke für deine ausführliche Antwort.

Clearfixing mit pseudo-Elementen erfordert zwar mehr CSS, saut dir aber den >HTML-Code nicht zu und ist daher zu bevorzugen

Wie genau meinst du das? Das verstehe ich nicht so ganz.

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.

Wie kann man denn die Deckkraft ändern? Mir fallen da nur die Filter von CSS3 ein, die aber noch nicht überall unterstützt werden. Das mit dem Nachfahrenselektor muss ich mir einmal anschauen. Ich wusste nicht das es möglich ist, aus einer CSS-Klasse auch andere Elemente anzusprechen.

[Matthias Apsel]

Om nah hoo pez nyeetz, Blubb!

Clearfixing mit pseudo-Elementen erfordert zwar mehr CSS, saut dir aber den >HTML-Code nicht zu und ist daher zu bevorzugen

Wie genau meinst du das? Das verstehe ich nicht so ganz.

Das Pseudoelement ::after kann auch ein clear: both bekommen.

Wie kann man denn die Deckkraft ändern?

opacity

Das mit dem Nachfahrenselektor muss ich mir einmal anschauen. Ich wusste nicht das es möglich ist, aus einer CSS-Klasse auch andere Elemente anzusprechen.

Es gibt keine CSS-Klassen. Selektoren zum Anschauen.

Matthias