• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Suppe oder doch ein Ausblick?

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:
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>
css für einen teaser:
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;
    }
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
 

Anhänge

  • teaser.png
    teaser.png
    1,7 KB · Aufrufe: 16
Zurück
Oben