Joomla Template - Menü ist höher als Inhalt

[Nikke1994]

Hallo Leute,

Heute bin ich etwas verwirrt. Ich bin dabei, ein Template ein wenig zu erneuern - ihr findet es unter http://wasserturmschule.de/joomla

Das was mir nicht gefällt, ist dass das Menü wesentlich länger ist, als der Inhalt, nämlich genau so lang, wie der "Content" Bereich. Ich weis nur nicht wieso? Ich habe es bereits als Display Block definiert, es mit height: auto; probiert, aber ich verstehe nicht ganz wieso es so groß ist.

Kann mir jemand helfen?

liebe Grüße und ein frohes Neues,
Niklas

 

[djheke]

#content_area {
    margin: 40px 0px 20px;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

Display:flex entfernen

#content_menu {
    display: block;
    margin-left: 20px;
    width: 23%;
    padding: 0px;
    background-color: #EEE;
    box-shadow: 0px 0px 5px #696969;
    border-radius: 5px;
    float: left;
}

float:left hinzufügen

#content_content {
    margin-right: 20px;
    width: 70%;
    padding: 0px;
    background-color: #EEE;
    box-shadow: 0px 0px 5px #696969;
    border-radius: 5px;
    float: right;
}

float:right hinzufügen

Ich würde es aber so belassen.

 

[Nikke1994]

Darf ich fragen, warum es mit einer Flex Box nicht funktioniert? Kann man das nicht auch mit einer Flex box umsetzen? Geht da nur um das Wissens Interesse.

Vielen Dank schon mal für die Antwort. Probiere es gleich aus

 

[MrMurphy]

Hallo

Das was mir nicht gefällt, ist dass das Menü wesentlich länger ist, als der Inhalt, nämlich genau so lang, wie der "Content" Bereich.

Das ist bei flex das Standardverhalten.

Kann man das nicht auch mit einer Flex box umsetzen?

Ja, dazu muss in dem Container "#content_area" die Anweisung "align-items: flex-start;" hinzugefügt werden.

Gruss

MrMurphy

 

[Nikke1994]

Vielen lieben Dank Mr. Murphy ! Das hat tatsächlich geklappt.

 

[djheke]

Sollte mich mal langsam mit der Thematik Flex-Box auseinander setzen. Sorry!

 

[Nikke1994]

Naja ich musste auch gerade feststellen, dass das iPad mit Flex leider nicht umgehen kann, weswegen ich wohl vorerst nochmal auf float zuruecksteigen muss.

 

[djheke]

Vielleicht hilft ja hier die zusätzliche Angabe von -webkit-align-items: flex-start und an entsprechender Stelle display: -webkit-flex;

 

[MrMurphy]

Hallo

Naja ich musste auch gerade feststellen, dass das iPad mit Flex leider nicht umgehen kann

Naja, Flexbox sollte mit Prefixen verwendet werden, dann ist es problemlos nutzbar. Dazu gibt es auch praktische Hilfen wie zum Beispiel

http://jsbin.com/gufoko/quiet

Siehe auch

http://caniuse.com/flexbox

Gruss

MrMurphy