Danke für die Links.
Ich weiss dass ich mit margin: auto; die Ausrichtung machen kann und die Lösung in meniem letzten Post funktioniert gut.
Grene würde ich noch deine Meinung zu
Ich habe noch etwas weitergestöbert im Forum und gelesen, dass es am besten und zeigemässten wäre wenn man als Hintergrundgrafik ein grosses Bild per CSS zuweist und dann die DIV's ausrichtet.
Vielen Dank
Gruss
Eine Lösung, die ich mit Berücksichtigung deines Input's, die positions zu löschen gebastelt habe wäre:
*
{
margin: 0;
padding: 0;
}
html, body
{
width: 100%;
height: 100%;
overflow: hidden;
background-color: #000;
}
#bg_top
{
width: 100%;
[COLOR=#ff0000] height: auto;[/COLOR]
}
#bg_bottom
{
width: 100%;
[COLOR=#ff0000] height: auto;[/COLOR]
bottom: 0;
}
#alu_bg_top
{
width: 100%;
height: 100%;
z-index: 1;
}
#alu_bg_bottom
{
width: 100%;
height: 100%;
z-index: 1;
}
#content {
z-index: 2;
overflow: hidden;
width: 600px;
[COLOR=#ff0000]margin: 2% auto;[/COLOR]
min-height: 400px;
clear: left;
border: 1px solid white;
}Ich habe noch etwas weitergestöbert im Forum und gelesen, dass es am besten und zeigemässten wäre wenn man als Hintergrundgrafik ein grosses Bild per CSS zuweist und dann die DIV's ausrichtet.
Was denkst du?
Danke und Gruss
Also ich würde dir mal empfehlen ein Browser Plugin zu installieren, wie z.B. Firebug für Firefox.
Mit F12 kannst du dann die Konsole öffnen und erhälst einen super überblick wo sich was im Quellcode befindet.
Hallo,
Erstmal vielen Dank für die schnelle Rückantwort und die Erläuterung bezüglich Viewport.
Eigentlich möchte ich gerne, dass die untere Grafik fix bleibt (aktuell 300px höhe), deswegen auch die absolute Positionierung.
Die mittlere DIV soll variabel sein, resp. soll sich immer im Zentrum des Bildschirmes befinden und den zwischenraum zu den Hintergrundgrafiken oben und unten ausgleichen. als erstes kommt mir das margin: auto; oder eine prozentuale Angabe in den Sinn.
Das margin: auto; habe ich aber schon drin und bewirkt die horizontale zentrierung. Wie soll ich hier die vertikale hinbekommen?
Ich bedanke mich im Vorraus.
Hi,
Ich habe zwei Probleme und hoffe jemand kann mir weiterhelfen.
Mein HTML Dokument besteht aus 3 DIV's. Das erste lädt ein Hintergrundbild, dann kommt das mittlere (hier soll ein Flashfilm abgespielt werden) und ganz unten die zweite Hintergrundgrafik.
Hier mal der Code:
<body>
<div id="bg_top">
<img id="alu_bg_top" src="images/alu_bg_top.jpg" border="0" alt="ImageTop" />
</div>
<div id="content"></div>
<div id="bg_bottom">
<img id="alu_bg_bottom" src="images/alu_bg_bottom.jpg" border="0" alt="ImageBottom" />
</div>
</body>Die CSS Attribute werden von dieser externen Datei geladen:
*
{
margin: 0;
padding: 0;
}
html, body
{
width: 100%;
height: 100%;
overflow: hidden;
background-color: #000;
}
#bg_top
{
width: 100%;
height: 200px;
}
#bg_bottom
{
width: 100%;
height: 300px;
bottom: 0;
position: absolute;
}
#alu_bg_top
{
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
#alu_bg_bottom
{
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
#content {
z-index: 2;
overflow: hidden;
width: 600px;
margin: 0 auto;
min-height: 400px;
position: relative;
clear: left;
border: 1px solid white;
}Mein Ziel ist es eine Seite zu erstellen, welche sich den Bildschirmgrössen anpasst.
Die Grafiken unten und oben sind absolut positioniert und nur die Höhe der mittleren DIV verändert sich beim betrachten auf verschieden grossen Bildschirmen.
Hier ist auch schon das erste Problem, die mittlere DIV soll zwar flexibel in der Höhe sein, aber nicht kleiner als 400px werden (weil der Flashfilm 400px hoch ist). Stattdessen soll sich die Grafik in der untersten DIV verkleinern.
Bei der zweiten Sache geht es darum, dass sich die mittlere DIV variabel, vertikal anpassen soll. Also die mittlere DIV soll vertikal zentriert sein und genau mittig zwischen den beiden Hintergrundgrafiken sein. Wenn ich also den Browser auf einem grossen Screen öffne, soll der Flashfilm im Zentrum sein und oben und unten gleich viel Abstand zu den beiden Hintergrundbildern.
Ich hoffe jemand kann mit weiterhelfen und warte gespannt auf Lösungsvorschlge.
Danke schon mal im Vorraus.
Snifflles