Hallo,
habe folgendes Problem:
Ich habe eine Webseite gemacht, bei der sich der Header über die ganze Breite der Seite ausdehnen soll und sich auch anpassen soll, bei einer geringeren Auflösung.
Soweit kein Problem, nur dummerweise besteht dieser header nicht nur aus einem div, sondern gleich aus 4. Einer oben, der den oberen Teil des Bildes enthält, einer links unten, der einen kleinen Teil des Bildes enthält, der in der mitte unten, der eine Newsbox enthält und noch einer rechts unten, der die Navigation enthält.
Hierbei soll sich der obere div anpassen und der unten rechts.
Die Probleme sind:
-IE 6 zeigt es falsch an. (Grund: Interpretiert min-width falsch und width+border stimmt nicht, ist aber kein problem, wird durch hacks gelöst)
-IE 7 zeigt es falsch an. (Grund: Ebenfalls width+border falsch, wird auch durch hacks gelöst)
-FF zeigt es richtig an, aber nur bei 1280*1024, was ich mal als Maximalgröße des Bildes genommen habe. Wenn man das Fenster verkleinert, oder wenn man von Anfang an eine kleinere Auflösung hat, verkleinert sich nur der obere Teil des Bildes, der Teil unten rechts bleibt gleich. Ich vermute, dass es daran liegt, dass der Teil sich auf 100% ausdehnt, allerdings die zwei divs auf der linken Seite nicht beachtet.
Ich weiß nicht wie ich es lösen soll. Eine Lösung (nur für FF) wäre, einfach im body "overflow:hidden" anzugeben, dann würde es richtig angezeigt werden. Allerdings könnte man dann ja auch nicht mehr vertikal scrollen.
Hier der Link:
http://www.gamling.kilu3.de/template1/index.html
Hier die CSS Datei:
body {
max-width:1280;
}
#navi_oben {
position:absolute;
top:0px;
right:0px;
background-image:url(../images/navi_oben.png);
width:360px;
height:38px;
}
#header {
position:absolute;
top:38px;
left:0px;
right:0px;
margin:0px;
padding:0px;
background-image:url(../images/header.png);
background-repeat:no-repeat;
width:1278px;
max-width:100%;
height:120px;
border-top:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
overflow:hidden;
}
#unten_links {
position:absolute;
top:158px;
left:0px;
background-image:url(../images/unten_links.png);
width:71px;
height:144px;
border-left:1px solid black;
border-bottom:1px solid black;
}
#news_aussen {
position:absolute;
top:158px;
left:72px;
background-image:url(../images/news.png);
background-repeat:no-repeat;
width:247px;
border-left:1px solid #000000;
border-top:1px solid #000000;
border-bottom:1px solid #000000;
border-right:1px solid #000000;
height:575px;
}
#news_innen {
position:absolute;
left:1px;
top:1px;
border:1px solid #5a5a5a;
width:240px;
padding-left:3px;
height:571px;
}
#header_unten {
position:absolute;
top:159px;
left:321px;
background-image:url(../images/header_unten.png);
background-repeat:no-repeat;
width:959px;
max-width:100%;
height:144px;
overflow:hidden;
}
#content {
position:absolute;
top:302px;
left:321px;
}
#news_head {
margin:0px;
background-image:url(../images/news_icon.png);
background-repeat:no-repeat;
padding-left:16px;
font-size:17px;
font-family:times, verdana, arial;
font-style:italic;
color:#da6434;
padding-top:0px;
padding-bottom:4px;
}
.strich {
margin:0px;
padding:0px;
border:0px;
padding-bottom:4px;
}Vielen Dank für eure hilfe schonmal
mfG
Gamling
