[WarrenFaith]

Ich bins mal wieder

Also ich habe folgendes:

<div class="bottom">
   <%@ include file="/paragraphs/teaser-vorteile.jsp" %>
   <%@ include file="/paragraphs/teaser-vorteile.jsp" %>
   <%@ include file="/paragraphs/teaser-vorteile.jsp" %>
</div>

und

PHP-Code:

<div class="teaser_bottom">
    <div class="teaser_background_color">
        <div class="teaser_head">
            <div class="teaser_ecke_links_oben"></div>
            <div class="teaser_ecke_rechts_oben"></div>
        </div>
        <div class="teaser_farbverlauf">
            <div class="teaser_vorteile_titel">Ihre Vorteile!</div>
            <div class="teaser_vorteile_liste">
                <ul class="no_style">
                    <li>Automatische Teilnahme</li>
                    <li>Mindestens 100 Spiele im Monat</li>
                    <li>Hohe Gewinnchancen</li>
                    <li>Kein Zeitaufwand</li>
                    <li>Sie sparen mindestens 45,00&euro; Portokosten monatlich</li>
                    <li>Teilnahmeeintragungsnachweis</li>
                    <li>Geld-Zur&uuml;ck-Garantie</li>
                </ul>
            </div>
        </div>
        <div class="teaser_footer">
            <div class="teaser_ecke_links_unten"></div>
            <div class="teaser_ecke_rechts_unten"></div>
        </div>
    </div>
</div> 


CSS:

div.bottom {
    width: 700px;
    height: 100%;
}
 
/******************************************************************************
 * teaser styles
 *****************************************************************************/
div.teaser,
div.teaser_bottom {
    margin: 10px auto;
    width: 220px;
    height: 100%;
    background-color: #FFFAE4;
}
 
div.teaser_bottom {
    float: left;
    margin: 10px auto;
}
 
div.teaser_head {
    background-color: #FFDD57;
    height: 9px;
    width: 220px;
}
 
div.teaser_footer {
    background-color: #FFFAE4;
    height: 9px;
    width: 220px;
    clear: both;
}
 
div.teaser_farbverlauf {
    background-image: url(/img/dev/teaser_farbverlauf.gif);
    height: 76px;
}
 
div.teaser_background_color {
    background-color: #FFFAE4;
    width: 100%;
    height: 100%;
}
 
div.teaser_ecke_links_oben {
    background-image: url(/img/dev/teaser_ecke_links_oben.gif);
    width: 9px;
    height: 9px;
    float: left;
}
 
div.teaser_ecke_rechts_oben {
    background-image: url(/img/dev/teaser_ecke_rechts_oben.gif);
    width: 9px;
    height: 9px;
    float: right;
}
 
div.teaser_ecke_links_unten {
    background-image: url(/img/dev/teaser_ecke_links_unten.gif);
    width: 9px;
    height: 9px;
    float: left;
}
 
div.teaser_ecke_rechts_unten {
    background-image: url(/img/dev/teaser_ecke_rechts_unten.gif);
    width: 9px;
    height: 9px;
    float: right;
}
 
/*
 * teaser vorteilliste
 */
div.teaser_vorteile_titel {
    font-family: times new roman, sans-serif;
    font-size: 1.65em;
    font-weight: bold;
    color: #f00;
    width: 90%;
}
 
div.teaser_vorteile_liste {
    font-family: times new roman, sans-serif;
    font-size: 0.8em;
    width: 220px;
    clear: both;
}
 

Das sieht so aus:

Es soll aber so aussehen:

(Background nur zur verdeutlich schwarz gemacht)
erreichbar ist das ganze, wenn ich statt

div.teaser_bottom {
    float: left;
    margin: 10px auto;
}

das nehme

div.teaser_bottom {
    float: left;
    margin: 10px 5px;
}

Problem dabei ist, ich brauch das "auto" da es auch sein kann, dass die nur 2 teaser dort zu sehen sind.
Ich häng mal alle notwendigen bilder an, damit ihr selbst testen könnt. (bitte die Pfade in der CSS anpassen)

Ich danke euch für eure Hilfe!

[WarrenFaith]

also ich glaube ja, dass sich das float und das margin bei div.teaser_bottom nicht vertragen.
allerdings ist halt mein problem, dass bei weniger als 3 teasern die anderen den platz aufteilen sollen untereinander.
beispiel:

------------------------------
|_|teaser|_|teaser|_|teaser|_|

oder
--------------------------
|__|teaser|___|teaser|___|
--------------------------
oder
------------------------
|_______|teaser|_______|

wobei die gesamtlänge eigentlich gleich bleiben soll (is blos nervig im forum das jetzt zu machen)

hat wer ne idee?

[WarrenFaith]

Ein sehr gutes Beispiel (danke Ben

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css"
<!--
#container {
margin:50px auto;
border:1px solid #ccc;
height:200px;
width:700px;
color:#666;
}

.box {
margin:10px auto;
background-color:#eee;
width:220px;
}
-->
</style>
</head>
<body>

<div id="container">
   <div class="box">Inhalt</div>
   <div class="box">Inhalt</div>
   <div class="box">Inhalt</div>
</div>

</body>
</html>

Ansonsten hat Ben aufgegeben (trotzdem danke!).
Traut sich wer? Sonst muss ich meinem Chef beibringen, dass das nicht so dynamisch geht wie er es haben will.

[Ben]

Was heißt aufgegeben. Ich habe halt einige Sachen ausgetestet und bin für mich zum Schluss gekommen, dass es nicht ohne Weiteres geht.
Eventuell über irgendeinen Trick oder so .. aber der läuft dann nur im FF und Opera, aber nicht im IE oder andersrum.
Wer weiß .. lohnt der Zeitaufwand wahrscheinlich nicht.

Als Workaround würde ich dann eben zusätzliche CSS-Klassen verwenden bzw. mittels serverseitiger Sprache angeben, welche Klassen dort genutzt werden müssen/sollen, sprich wie viele Boxen dargestellt werden müssen/sollen.


Das Problem "float arbeitet (in diesem Fall) nicht mit margin zusammen" find ich aber interessant.
Wer eine Lösung hat .. gerne her damit.

Grüße, Ben.

[WarrenFaith]

Ich hab mal an ne CSS Mailingliste geschrieben. Vielleicht haben die ne Idee.

Ich hab vom Designer allerdings schon gesagt bekommen, es soll anders aussehen. Aber ne Lösung will ich dennoch wissen

[WarrenFaith]

Es haben mir einige geantwortet. Der Grundtenor war: Es geht nicht, da es ein float:center nicht gibt. Das normale float nimmt das Element aus der normalen "Floatingfolge" raus und damit werden jegliche marginwerte, die ein dynamisches floaten zur Folge hätten, unwirksam.
Also gibts auch kein Workaround. Schade eigentlich.

[Ben]

Kannst du mal sagen welche Mailingliste? Bzw. hast du einen Link zu dne Antworten?

[WarrenFaith]

http://archivist.incutio.com/viewlis...ghlight=margin
damit gehts los und unten sind links zu den antworten.
homepage selbst ist www.css-discuss.org