• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

fluid-fixed-fluid-Kombination

T

tofix

Neues Mitglied
Hallo, ich benötige rechts und links der Website ein anderes Hintergrundbild. Meine Idee ist, die Hintergrundbilder in flexible Divs zu packen. Dazu müßte ich flexible und feste Breiten mischen, d.h. ein Container füllt die gesamte Breite (width = 100%), der Content hat eine feste Breite von 960px und beinhaltet meine eigentliche Website, linke und rechte Sidebar sollen flexibel den freien Raum ausfüllen und meine beiden Hintergrundbilder beinhalten. Wie kriege ich das hin, die Sidebars brauchen doch eine definierte Breite?

Oder hat jemand eine einfachere Lösung für mein Hintergrundproblem?

Vielen Dank für die Antworten.
 
Drei gefloatete Container. Der Content erhält eine feste width von 960px, bei den Slidern wird die width in Prozent und eine min-width in Pixeln definiert.
 
Zuletzt bearbeitet:
Danke für die Antwort. Mein Problem ist, dass der nötige Prozentwert der Slider je nach Browserbreite variiert. Oder stehe ich auf dem Schlauch? Ich schaffe es nicht, dass die Slider den gesamten freien Raum ausfüllen.
 
Versuche mal folgendes: Die Slider erhalten eine min-width analog zur Breite der Hintergrundbilder sowie eine width von 15%. Der Content bekommt eine min-width von 960px und eine width von 70%. Anschließend schaust du dir das in den unterschiedlichen Browsern an und veränderst bedarfsweise die Prozentwerte.
 
Ich habe die Lösung gefunden, siehe Code. Nur habe ich jetzt das Problem, dass ich dem content-div ein padding-top 1px geben muß, sonst habe ich einen riesigen Abstand nach oben. Was ist da los, welchen Anfängerfehler habe ich da gemacht?

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
  border: 0 none;
}
#content {
    width: 960px;
    margin: 0 auto;
    padding: 1px 0 0 0;
    background-color: #39e;
    height: 599px;
}
#inhalt {
    height: 425px;
    margin-top: 150px;
}
#left {
    position: absolute;
    top: 0;
    left: 0;
    right: 50%;
    margin-right: 480px;
    background-color: #e93;
    height: 600px;
}
#right {
    position: absolute;
    top: 0;
    left: 50%;
    right: 0;
    margin-left: 480px;
    background-color: #3e6;
    height: 600px;
}
#header {
    background-color: #C3C;
    float: left;
    height: 150px;
    display: block;
    width: 960px;
}
#footer {
    background-color: #99F;
    height: 24px;
    bottom: 0px;
}
</style>
</head>
<body>
<div id="container">
<div id="left">
<h1>Left</h1>
</div><!-- /left -->
  <div id="content">
        <div id="header"><h1>kopf</h1>
      </div>
      <div id="inhalt"><h1>Inhalt</h1>
        </div>
        <div id="footer">
                <p>footer</p>
        </div>
</div><!-- /content -->
<div id="right">
<h1>right</h1>
</div><!-- /sidebar -->
</div><!-- /container -->
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben