Bilder horizontal und vertikal zentriert nebeneinander

[XRipper]

Hallo Community,

ich habe folgendes Problem:

Ich möchte wie auf dem Bild zu sehen, die Bilder nebeneinander anzeigen. Sie sollen sowohl horizontal wie auch vertikal zentriert werden. Hierbei scheine ich aber irgendwas immer wieder nicht zu beachten.



Kann mir jemand von euch helfen?

Mein HTML Code sieht so aus:

<div id="content_topmarken">
    <h3>Fenster & Türen</h3>
    <ul>
        <li><a href="/"><img src="../Test/aluplast_logo.png" /></a></li>
        <li><a href="/"><img src="../Test/salamander_logo.png" /></a></li>
        <li><a href="/"><img src="../Test/kbe_logo.png" /></a></li>
        <li><a href="/"><img src="../Test/veka_logo.png" /></a></li>
        <li><a href="/"><img src="../Test/gealan_logo.png" /></a></li>
        <li><a href="/"><img src="../Test/schueco_logo.png" /></a></li>
    </ul>
</div>

Der CSS Code so:

#content_topmarken {
    width: 988px;
    border: 1px solid #d8d8d8;
    margin: 50px 0 0 50px;
    height: 148px;
}

#content_topmarken h3 {
    height: 24px;
    margin: 1px;
    font-size: 14px;
    color: #ffffff;
    background: url(../Test/ueberschrift_bg.png) top left repeat-x;
    padding: 6px 0 0 8px;
}

#content_topmarken ul {
    border-top: 1px solid #d8d8d8;
    padding: 30px 10px;
    background: url(../Test/topmarken_bg.png) top left repeat-x;
    height: 55px;
}

#content_topmarken ul li {
    display: inline;
    margin-right: 50px;
}

#content_topmarken ul li img {
    vertical-align: middle;
}

Es wird zwar soweit richtig angezeigt! Aber ich bin mir sicher es muss irgendwie einfacher gehen!

Wenn jemand mal Zeit findet, würde ich ihn bitten sich meinen Code anzuschauen und mir zu sagen wie es einfacher geht. Vorallem "dynamischer". Weil ich richte anhand des Codes alles an die Höhe des größten Bildes aus. Wenn ich also ein Bild hinzufüge, was größer als das größte zuvor ist. Muss ich wieder den Code ändern.


Vielen Dank!

XRipper

 

[Max T.]

Hmm, also ich finde deinen Code schon recht einfach.

#content_topmarken ul {
border-top: 1px solid #d8d8d8;
padding: 30px 10px;
background: [COLOR=#333333]url(../Test/topmarken_bg.png) top left repeat-x;
[/COLOR]height: 55px;
}

(...)
Vorallem "dynamischer". Weil ich richte anhand des Codes alles an die Höhe des größten Bildes aus.
(...)

Wenn ich das richtig verstanden habe, musst du dann, wenn ein Bild höher ist, die Height der UL vergrößern?! Wenn es daran liegt, dann mache doch

height: 100%;

Wenn das Hintergrundbild ein Farbverlauf ist, der dann unschön bei Vergrößerung aussieht, dann gestalte ihn doch hiermit. Mache ich zumindest immer so.

Ich hoffe ich habe die Frage richtig verstanden und konnte helfen.

 

[jumbo125]

ich bin bei gott kein Experte und bin ebenfalls noch auf die hilfe anderer angewiesen. Wenn ich das richtig verstehe, passt alles, wie es zur Zeit ist. Dein Problem ist nur, dass die ul height statisch ist. D.h. wenn dein nächstes Bild größer ist, gibts Probleme. Sollten nicht alle Bilder in etwa die gleiche höhe haben?, damits strukturierter aussieht?

meine idee wäre (ungetestet): ul height:auto, cont_blabla ul li img: noch eine max-height einzubinden(damit verhinderst du, dass das neue Bild größer ist, alls die alten- wenn du das möchtest.).

Desweiteren versuche ich großteils mit % anstatt px zu arbeiten. Falls jemand mit einer kleineren Bildschirmauflösung die Seite öffnet kann es ansonsten "unproportional" bzw. zu groß wirken, aber auch zu klein, falls sein PC mit nen Flat-Screen verbunden ist