Problem mit background:;

Status
Nicht offen für weitere Antworten.
versuch13

versuch13

Erfahrenes Mitglied
Hi, erstmal einfach der Quelltext:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xml:lang="de" lang="de">
  <head>
    <title>test</title>
 <style type="text/css">
  * {
   margin: 0;
   padding: 0;
  }
  div#fix {
   background: #ccc;
   height: 100px;
   width: 1500px;
  }
  div#wrapper {
   background: #eee;
  }
  div#test {
   margin: 30px auto 0 auto;
   overflow: hidden;
   width: 900px;
  }
  div#test div {
   float: left;
   border-right: 1px solid #999;
   width: 299px;
  }
  div#footer {
   background: #bbb;
   height: 100px;
   margin-top: 20px;
  }
 </style>
  </head>
  <body>
 <div id="fix"></div>
 <div id="wrapper">
  <div id="test">
   <div>
    eins
   </div>
   <div>
    zwei
   </div>
   <div>
    drei
   </div>
  </div>
 </div>
 <div id="footer"></div>
  </body>
</html>

Das Problem ist, ich habe in #wrapper und #footer background Grafiken (hier jetzt vereinfacht mit Farben), der Inhalt im div Elemente #test hat eine fixe breite.
Wenn ich jetzt das Browser Fenster öffne, und es kleiner ist als die gesamte breite
von #test welche sich durch die drei inneren Elemente ergibt, dann erstrecken sich
die hintergründe für #wrapper und #footer nicht über diese gesamte breite, sondern
bleiben beim horizontalen scrollen auf der breite des geöffneten Browser Fensters.

In Zahlen. Der Inhalt von #test ist 900px breit, man öffnet das Browser Fenster
auf einer größe von 600px, so erstreckt sich der Hintergrund für #wrapper auch nur
über diese 600px.

Ich sehe vielleicht auch gerade den Wald vor lauter Bäumen nicht mehr, aber ich
komme einfach nicht weiter. Wäre nett wenn sich das mal jemand ansehen könnte.


Danke, Grüße
 
Hallo versuch13,

nimm mal (nur zum Verständnis)
Code: 
body {border: 1px solid red;}
in die Stylesheets auf. Dann siehst du, dass das BODY-Element so breit wie das Anzeigefenster, das HTML-Element allerdings 1500px breit ist. Der wrapper-DIV-Block wird also nicht breiter als das BODY-Element.

Alles klar? Ansonsten melde dich noch mal.
 
Leg einfach einen DIV-Block als globalen Außenrahmen um alle Elemente, der dann so breit wie das breiteste Element (hier z.B. 1500px) ist. Oder du weist dem BODY-Element eine Breite von 1500px zu.
 
hela hat gesagt.:
Leg einfach einen DIV-Block als globalen Außenrahmen um alle Elemente, der dann so breit wie das breiteste Element (hier z.B. 1500px) ist. Oder du weist dem BODY-Element eine Breite von 1500px zu.
Zum Vergrößern anklicken....

Nein, so erreiche ich ja nicht das gewünschte Ergebnis, aber dem body eine
min-width Eigenschaft zu geben. Nur das wollte ich wenn möglich vermeiden,
habe ich vergessen zu erwähnen.

Also, so soll es aussehen:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xml:lang="de" lang="de">
  <head>
    <title>test</title>
 <style type="text/css">
  * {
   margin: 0;
   padding: 0;
  }
  body {
 min-width: 1100px;
  }
  div#fix {
   background: #ccc;
   height: 100px;
   margin: 0 auto;
   width: 1100px;
  }
  div#wrapper {
   background: #eee;   
  }
  div#test {
   background: #999;
   margin: 30px auto 0 auto;
   overflow: hidden;
   width: 900px;
  }
  div#test div {
   float: left;
   border-right: 1px solid #999;
   width: 299px;
  }
  div#footer {
   background: #bbb;
   height: 100px;
   margin-top: 20px;
  }
 </style>
  </head>
  <body>
 <div id="fix"></div>
 <div id="wrapper">
  <div id="test">
   <div>
    eins
   </div>
   <div>
    zwei
   </div>
   <div>
    drei
   </div>
  </div>
 </div>
 <div id="footer"></div>
  </body>
</html>

Die Hintergrundfarben sind Platzhalter für Grafiken #fix und #foot mit einer festen höhe.

Siehst du, mit einer anderen HTML Struktur eine Möglichkeit, dass ganze ohne min-width (aufgrund von ie6 und nicht gewünschter browser hacks) zu realisieren.
Oder dem body oder html - Element eine der Grafiken zuweisen und so die selbe Ausgabe zu erreichen?

Hoffe es ist klar was ich meine. Ansonsten lade ich heute abend mal ein Beispiel
mit den vorhandenen Hintergrundgrafiken hoch, ich denke dann dürfte es deutlicher
werden.

Aber Danke schon mal!
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück