Titelbild 3-spaltig, mittleres mit fester Breite

NordenDerWelt · 22 März 2013

Guten Tag,

ich habe folgendes Problem: Das Titelbild einer Website soll immer 100% Breite des Browsers haben. Dabei soll der mittlere - der wichtigste - Teil des Titelbildes aber nicht gestreckt oder gestaucht werden, sondern seine feste Breite von 900px behalten. Die beiden äußeren Teile sollen dann links und rechts des mittleren Teiles so gestreckt werden, dass das Bild eben immer seine 100% hat.

Mein Ansatz war es, das Bild in die 3 Teile zu zerschneiden, und es dann - wie ein solches dreispaltiges Layout, von denen es viele gibt - als drei Bilder einzufügen.

Folgendermaßen sieht das bisher aus:

style.css:

Code:

body { margin: 0; padding: 0; }
.titelbild { overflow: hidden; }

.links { width: 50%; float: left; height: 386px; overflow: hidden; }
.rechts { width: 50%; float: right; height: 386px; overflow: hidden; }

.links .innen { margin: 0 450px 0 0; height: 386px;  float: right; width: 100%; }
.rechts .innen { margin: 0 0 0 450px; height: 386px;  width: 100%; }

.innen img { width: 100%; height: 386px; }

.mitte { margin: 0 -450px 0 -450px; float: left; height: 386px; width: 900px; }

style_ie.css:

Code:

*+ html .links, *+ html .rechts { width:49.9%; float:left; }

titelbild.html:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Titelbild</title>
        <link href="css/style.css" rel="stylesheet" type="text/css" />
        <!--[if IE]>
            <link href="css/style_ie.css" rel="stylesheet" type="text/css" />
        <![endif]-->
    </head>
    <body>
        <div class="titelbild">
            <div class="links">
                <div class="innen">
                    <img src="img/titelbild-links.jpg" />
                </div>
            </div>

            <div class="mitte">
                <img src="img/titelbild-mitte.jpg" />
            </div>
             
            <div class="rechts">
                <div class="innen">
                    <img src="img/titelbild-rechts.jpg" />
                </div>
            </div>
        </div>
    </body>
</html>

Das funktioniert auch in allen getesteten Browsern perfekt. In allen? Nein! - Der allseits geliebte Internet Explorer scheint das "float: right;" bei der Klasse .links .innen zu überlesen, und richtet das linke Bild also nicht am linken Rand des mittleren Bildes, sondern in der Browsermitte aus.

Hat da jemand eine Ahnung, wie ich das auch im Internet Exploder ( :evil: ) zum Laufen bringen kann?

Vielen Dank und liebe Grüße!

EDIT: bzw IE ignoriert nicht das "float", sonder viel mehr das "margin"...

NordenDerWelt · 22 März 2013

Es lebt!

Code:

body { margin: 0; padding: 0; background: #555; margin: 100px 0; overflow: hidden; }
.titelbild { overflow: hidden; }

.links { width: 50%; float: left; height: 386px; overflow: hidden;  }
.rechts { width: 50%; float: right; height: 386px; overflow: hidden;}

.rechts .innen { margin: 0 0 0 450px; height: 386px;  width: 100%; }
.links .innen { left: -450px; height: 386px;  float: right; width: 100%; position: relative; }

.innen img { width: 100%; height: 386px; }

.mitte { margin: 0 -450px 0 -450px; float: left; height: 386px; width: 900px; }

Mit Bisschen Tricksen ließ sich auch der IE überlisten!

threadi · 22 März 2013

Was soll das denn sein?

Code:

margin: 0 -450px 0 -450px;

Ich bezweifle, dass das wirklich in der Form sinnvoll ist.

Abgesehen davon: von welcher Version des Internet Explorers sprichst Du? Version 8 oder 7? Ich bin mir unsicher, ob man dein Anliegen wirklich als gelöst betrachten kann wenn ich mir den CSS-Code ansehe.

Titelbild 3-spaltig, mittleres mit fester Breite

NordenDerWelt

Neues Mitglied

NordenDerWelt

Neues Mitglied

threadi

Moderator

Neueste Beiträge