Liste der Anhänge anzeigen (Anzahl: 2)
Layout zerschießt bei kleinem Browserfenster
Hallo,
ich habe ein Problem und bin bald am verzweifeln... Wenn ich im Browser meine Seite "normal" d.h. im Vollbild anschaue ist alles ok. Aber wenn ich das Browserfenster verkleinere, zerfetzt es mir das Layout... :(
Irgendwie hab ich die Vermutung, dass es damit zutun hat, weil gewisse divs wie Header, footer und Imagesilder auf width: 100% laufen. Aber auch wenn ich eine feste Breite definiere ändert das nichts. Jedenfalls fließt der Content aus dem Main div und der Footer ist nicht mehr 100% width. Bisschen blöd zu beschreiben, deshalb hier mal Screenshots:
"Großes Browserfenster" (alles ist OK)
Anhang 10727
"Kleiners Browserfenster" (Alles zerschossen, footer nicht mehr 100%, der body "top" kommt am rechten Rand zum vorschein)
Anhang 10728
Hier auch nochmal der CSS Code
Code:
#top {
background-color: #FFFFFF;
background-image: url("../../files/website/gfx/bgtop.png");
background-repeat: repeat;
}
html {
height: 100%;
margin: 0;
overflow-y: scroll;
padding: 0;
}
body {
background-color: #ECECEC;
font: 87.5% Verdana,Arial,Helvetica,sans-serif;
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
background-color: #FAFAFA;
background-repeat: repeat;
height: auto !important;
margin: 0 auto;
min-height: 100%;
position: relative;
width: auto;
}
#logo {
height: 50px;
margin-top: 5px;
padding-bottom: 5px;
width: 350px;
}
#header {
background-image: url("../../files/website/gfx/headersmall.png");
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.65);
height: 95px;
margin: 0;
padding: 0;
position: relative;
width: 100%;
z-index: 999;
}
#header h1 {
color: #444444;
font: bold 26px/1.7 "Droid Sans",sans-serif;
margin: 0;
padding: 0;
}
#header h2 {
color: #444444;
font: 1em "Droid Sans",sans-serif;
margin: 0;
padding: 0;
}
#header .inside {
margin-left: auto;
margin-right: auto;
padding-top: 10px;
width: 960px;
}
#container {
margin-left: auto;
margin-right: auto;
margin-top: 2em;
position: relative;
top: 320px;
width: 960px;
}
#main {
color: #444444;
font-size: 1em;
font-weight: normal;
line-height: 1.7;
}
#main.inside {
margin: 0 auto;
width: 960px;
}
#main .ce_text {
margin-left: auto;
margin-right: auto;
width: 960px;
}
#footer {
background-image: url("../../files/website/gfx/footerbggreen.png");
background-repeat: repeat-x;
bottom: 0 !important;
box-shadow: 0 -3px 5px rgba(0, 0, 0, 0.65);
color: #444444;
font-size: 12px;
font-weight: normal;
height: 80px;
width: 100%;
}
#footer .inside {
width: 960px;
}
#footer p {
margin: 0;
padding: 0;
Hat jemand von Euch eine Idee, wo das Problem liegen kann?
Schon mal vielen Dank vorab.
Gruß
Mase
