DIV-Höhe dynamisch an Inhalt anpassen

[sgei]

Hallo Gemeinde,

ich habe mal ein kleines CSS-Problem:

Folgendes möchte ich erreichen:

In einem DIV mit Breite 100% vom MainContent sollen über float:left die Kategorien angezeigt werden, welche selbst in einem DIV-Container sitzen.

Code: PHP  [Auswählen]

<div id="cat_show1">
        {foreach name=aussen item=module_data from=$module_content}
                <div id="cat_show2">
                        <div id="cat_show3">
                                Hallo
                        </div>
                </div>
        {/foreach}
</div>

Das dynamische Anzeigen der einzelnen Kategorien mit korrekter Formatierung geht super, jedoch das umschließende DIV (id="cat_show1") passt sich nicht an die Höhe des Inhalts an.

Hier der Teil der stylesheet.css:

Code: CSS  [Auswählen]

#cat_show1 {
        position:relative;
        width:100%px;
        min-height:200px;
        background-color:#ccc;
        border:solid #000000;
        border-width:1px 1px 1px 1px;
}
#cat_show2 {
        position:relative;
        width:150px;
        height:200px;
        color:#000000;
        background-color:#ffffff;
        border:solid #000000;
        border-width:1px 1px 1px 1px;
        margin:5px 5px 5px 5px;
        float:left;
}
#cat_show3 {
        width:150px;
        height:200px;
        display:table-cell;
        text-align:center;
        vertical-align:middle;
}

[ Für Gäste sind keine Dateianhänge sichtbar ]

Hat jemand eine zündende Idee?

Danke.

Steffen

Linkback: https://www.modified-shop.org/forum/index.php?topic=1221.0

[sgei]

Hallo,

ich habe eine Lösung gefunden:

neue CSS-ID:

Code: CSS  [Auswählen]

#cat_show4 {
        clear:left;
        height:0;
        margin:0;
        padding:0;
        font-size:0;
}

...und dann:

Code: PHP  [Auswählen]

<div id="cat_show1">
        {foreach name=aussen item=module_data from=$module_content}
                <div id="cat_show2">
                        <div id="cat_show3">
                                Hallo
                        </div>
                </div>
        {/foreach}
        <div id="cat_show4"> </div>
</div>

[ Für Gäste sind keine Dateianhänge sichtbar ]

Steffen

[sgei]

Hallo,

hmmm, im FF sieht es wie oben aus, jedoch stellt der IE7 das umschließende DIV nicht korrekt dar.
Gibt es für den IE da einen Hack?

Steffen

*EDIT:

Der IE benötigt zwingend:

Code: CSS  [Auswählen]

min-height:200px;

Jetzt sieht es gleich aus...

Steffen

[Anonym]

Eine dynamische Höhe bekommst Du nur hin, wenn Du KEINE Höhe angibst. Da aber das Fliessen/Float bei Dir nicht aufgehoben wird, kommt es hierzu zu Problemen.

Der Div, der eine dyn. Höhe brauch, erwartet vor seinem schliessen den DIV eine class = "clear "

Code: CSS  [Auswählen]

.clear { clear:both; }

Schmeiss hier mal bitte den komplette Code online. Danke

[sgei]

Hallo Christian,

ich fange nochmal ganz am Anfang an...

Ich habe mir das Modul C-List (Kategorien auf der Startseite anzeigen) installiert und möchte es gern auf das modified eCommerce Shopsoftware-Design anpassen. Das Modul selbst stellt die Kategorien auf der Startseite dar, allerdings in einem fiesen Tabellenlayout.

Ich möchte es komplett in CSS mit DIVs machen und das überarbeitete Modul dann hier hochladen.

So weit, so gut...

Hier die CSS:

Code: CSS  [Auswählen]

#cat_show1 {
        width:100%px;
        min-height:200px;
        background-color:#EDEDED;
        border:solid #ccc;
        border-width:1px 0px 1px 0px;
        padding:5px 0px 0px 0px;
}
#cat_show2 {
        width:165px;
        height:250px;
        color:#000000;
        background-color:#EDEDED;
        border:solid #ccc;
        border-width:1px 1px 1px 1px;
        margin:0px 4px 5px 4px;
        float:left;
}
#cat_show3 {
        width:165px;
        height:250px;
}
#cat_show_name {
        width:165px;
        height:40px;
        background-color:#666666;
        display:table-cell;
        text-align:center;
        vertical-align:middle;
}
#cat_show_text {
        width:165px;
        height:70px;
        background-color:#EDEDED;
        text-align:center;
        vertical-align:middle;
}
#cat_show_text #p {
        margin:0px 0px 0px 0px;
        background-color:#ccc;
}
#cat_show_image {
        width:165px;
        height:140px;
        background-color:#EDEDED;
        text-align:center;
        vertical-align:middle;
}
#cat_clear {
        clear:both;
        height:0;
        margin:0;
        padding:0;
        font-size:0;
}

Hier die categories_list.html:

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="boxes"}

<div id="cat_show1">
        {foreach name=aussen item=module_data from=$module_content}
                <div id="cat_show2">
                        <div id="cat_show3">
                                <div id="cat_show_name">
                                        <a href="{$module_data.CATEGORY_LINK}">{$module_data.CATEGORY_NAME}</a>
                                </div>
                                <div id="cat_show_text">
                                        {if $module_data.CATEGORY_DESCRIPTION!=''}
                                        <a href="{$module_data.CATEGORY_LINK}">
                                                        {$module_data.CATEGORY_DESCRIPTION}
                                                </a>
                                {else}
                                        Keine Beschreibung!
                                {/if}
                                </div>
                                <div id="cat_show_image">
                                        {if $module_data.CATEGORY_IMAGE_TRUE!=''}
                                        <a href="{$module_data.CATEGORY_LINK}">
                                                        <img src="{$module_data.CATEGORY_IMAGE}" alt="{$module_data.CATEGORY_NAME}" />
                                                </a>
                                {else}
                                        Kein Bild vorhanden!
                                {/if}
                                </div>
                        </div>
                </div>
        {/foreach}
        <div id="cat_clear"> </div>
</div>

Soweit geht auch alles, aber:

Die Kategoriebeschreibung wird als <p>blablabla</p> eingefügt.
Da aber:

Code: CSS  [Auswählen]

/* PARAGRAPH GLOBAL */
p {
        margin:8px 0px 8px 0px
}

wird dies auch auf die Kategoriebeschreibung angewendet.

Ich habe versucht:

Code: CSS  [Auswählen]

#cat_show_text #p {
        margin:0px 0px 0px 0px;
        background-color:#ccc;
}

aber ohne Auswirkung.
Genau so verhält sich der a-Tag bei dem Kategorienamen.

Was mache ich den falsch?

[ Für Gäste sind keine Dateianhänge sichtbar ]

[sgei]

Hallo,

habe den Fehler gefunden:

falsch:

Code: CSS  [Auswählen]

#cat_show_text #p {
       margin:0px 0px 0px 0px;
}

richtig:

Code: CSS  [Auswählen]

#cat_show_text p {
       margin:0px 0px 0px 0px;
}

Dasselbe Problem war beim <a> Tag.

Eine Frage noch:

Gibt es eine Möglichkeit die Kategorien auf der Startseite in dieser Form anzuzeigen, ohne in den Shop-Core eingreifen zu müssen?

Steffen

[Anonym]

[...]
Gibt es eine Möglichkeit die Kategorien auf der Startseite in dieser Form anzuzeigen, ohne in den Shop-Core eingreifen zu müssen?
[...]

Mit HTML CODE und entsprechender Verlinkung. Weiss sowie so nicht warum jeder jedes Modul in den Shop quetschen muss.

1. Bau Dir eine HTML Seite so wie Du es haben möchtest
2. Hinterlege Sie im Content Manager bei index
3. Fertig

[sgei]

Ich will ja nicht jedes Modul in den Shop quetschen.
Ich möchte nur auf der Startseite die Kategorien 1. Ordnung und deren Kategoriebilder anzeigen lassen. Die Suche bei Google brachte mich auf das Modul C-List.

Wenn es einfacher geht wäre mir das natürlich recht...

Steffen

Hier das überarbeitete Modul für die modified eCommerce Shopsoftware: MODUL: Kategorien auf der Startseite anzeigen (c_list Modul)

  [ Für Gäste sind keine Dateianhänge sichtbar ]

[signmaxone]

Guten Tag,

Ich nutze ebenfalls das modifizierte C-List-Script und verzweifel an dem Versuch, pro Kategorie nur eine Zeile zu verwenden. Im Shop wird jede zweite Kategorie nach rechts rausgeschoben, so das ich Sie nicht sehe. Im dem oben beschriebenen Beispiel sehe ich auf dem Bild sogar drei Kategorien nebeneinander. In welcher Datei ändert man denn die Anzahl der Kategorien pro Zeile?

[Tomcraft]

Warum benutzt du denn nicht einfach das angepasste Modul, was direkt über deinem Beitrag steht?
Dort sollten doch die fertig angepassten Dateien bereits enthalten sein. Wozu also selber basteln?

Grüße

Torsten