Loon3y
Neues Mitglied
Morgen.
Da ich momentan am umsetzen eines fast-print-layouts bin, welches viele Schatten enthält..wollt ich mal nach eurer Meinung fragen. Momentan habe ich versucht es so knapp wie möglich und korrekt ausgezeichnet zu halten...aber irgendwie ist es eine ziemliche Suppe...
Gibt es da noch div-minimierungs-potential?
html für einen teaser:
css für einen teaser:
Anbei noch ein Screen vom Teaser..
Wieso der Teaser so ist? er soll 100% nutzerfreundlich sein. D.h. wenn gezoomt wird, soll sich alles mitzoomen und nichts verzerren..
wieso soviele klassen? Um möglichst flexibel zu arbeiten. kommt jetzt eine grüne Headline hinzu, heißt es einfach h2.green, usw usf....
Ebenso beim schatten. wenn kein Schatten gewünscht wird, einfach die klasse mit dem schatten entfernen. Obendrein hat das den Vorteil, dass die Klasse auch für andere Teasergrößen verwendet werden kann.
Leider bin ich nicht zufrieden...es sieht alles zu sehr nach Suppe aus..hat wer eine Idee?
Gruß
Loon3y
Da ich momentan am umsetzen eines fast-print-layouts bin, welches viele Schatten enthält..wollt ich mal nach eurer Meinung fragen. Momentan habe ich versucht es so knapp wie möglich und korrekt ausgezeichnet zu halten...aber irgendwie ist es eine ziemliche Suppe...
Gibt es da noch div-minimierungs-potential?
html für einen teaser:
Code:
<div class="teaser230 teaser_leftshadow">
<div class="teaser_rightshadow">
<h2 class="none">Teaser 230px red</h2>
<p>text</p>
<div class="foot_none"></div>
</div>
</div>
Code:
.teaser_leftshadow {
background-image: url(../images/fw/teaser/teaser_leftshadow.png);
background-repeat:repeat-y;
background-position:left;
}
.teaser_rightshadow {
height:100%;
background-image: url(../images/fw/teaser/teaser_rightshadow.png);
background-repeat:repeat-y;
background-position:right;
}
.teaser230 {
width: 14.375em;
height:100%;
margin: 1em 0.25em 1em 0em;
background-color: #FFF;
}
.teaser230 h2 {
font-size: 0.688em;
line-height:1.2em;
padding: 0em 1em;
color: #fff;
}
/* Headline none */
.teaser230 h2.none {
background-image: url("../images/fw/teaser/teaser230/top_none.gif");
background-repeat:repeat-x;
color: #000;
font-size:1em;
padding: 1em 0.5em;
}
/* FOOTER none2 */
.teaser230 div.foot_none {
height: 1.3em;
background-image: url("../images/fw/teaser/teaser230/bottom_none.gif");
background-repeat:repeat-x;
background-position:bottom;
height:1em;
}
Wieso der Teaser so ist? er soll 100% nutzerfreundlich sein. D.h. wenn gezoomt wird, soll sich alles mitzoomen und nichts verzerren..
wieso soviele klassen? Um möglichst flexibel zu arbeiten. kommt jetzt eine grüne Headline hinzu, heißt es einfach h2.green, usw usf....
Ebenso beim schatten. wenn kein Schatten gewünscht wird, einfach die klasse mit dem schatten entfernen. Obendrein hat das den Vorteil, dass die Klasse auch für andere Teasergrößen verwendet werden kann.
Leider bin ich nicht zufrieden...es sieht alles zu sehr nach Suppe aus..hat wer eine Idee?
Gruß
Loon3y