Hallo,
ich entwickle gerade eine Web 2.0 Software welche wie googlemaps eine Landkarte darstellt.
Hierfür habe ich eine Webpage gebaut, wo quasi ein Rahmen-div den Ausschnitt festlegt und die Karte dann größer dahinter liegt, man aber halt nur den Ausschnitt den der Rahmen zulässt sieht.
Dafür habe ich folgendes HTML-Kontrukt:
mit der dazugehörigen CSS-Datei:
Das wird so auch in IE7/8, FF, Opera korrekt dargestellt, nur Safari zeigt einfach "content" und alles was da drin ist nicht an. Wenn ich die Größen ändere. wird zwar der Platz zwischen "header" und "footer" größer, aber man kann nichts sehen.
Danke!
noise
ich entwickle gerade eine Web 2.0 Software welche wie googlemaps eine Landkarte darstellt.
Hierfür habe ich eine Webpage gebaut, wo quasi ein Rahmen-div den Ausschnitt festlegt und die Karte dann größer dahinter liegt, man aber halt nur den Ausschnitt den der Rahmen zulässt sieht.
Dafür habe ich folgendes HTML-Kontrukt:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="headercontainer">
<div id="header">
<img src="logo.png" width="80px" height="50px" alt="logo"/>
</div>
</div>
<div id="content">
<div id="map">
<div id="mappics"></div>
<div id="controls"></div>
</div>
</div>
<div id="footer">
</div>
</body>
</html>mit der dazugehörigen CSS-Datei:
Code:
html {
padding:0px;
margin:0px;
overflow: hidden;
}
body {
background-color: transparent;
font-size: 12px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0px;
margin:0px;
overflow: hidden;
}
#content {
margin: 0px 0px 0px 0px;
border-top: 2px solid #D3D3D3;
border-bottom: 1px solid white;
padding: 0px;
overflow: hidden;
background-color: red;
width: 100%;
height: 100%;
}
#mappics {
position: absolute;
background: green;
overflow: hidden;
z-index: 3;
}
#controls {
position: absolute;
height: 75px;
width: 75px;
left: 6px;
top: 0px;
z-index: 7;
padding: 0px;
margin: 0px;
}
#headercontainer {
height: 75px;
width: 100%;
float:left;
z-index: 0;
}
#logo {
position: absolut;
left: 20px;
}
#header {
height: 50px;
width: 100%;
background: url("pics/backgrounds/bannerbg.png");
z-index: 0;
padding-left: 10px;
}
#map {
position: relative;
z-index: 2;
background: yellow;
left: 0px;
top: 0px;
height: 100px;
width: 200px;
}
#footer {
clear: both;
width: 100%;
height: 15px;
z-index: 0;
background: url("pics/backgrounds/footer.png");
}Das wird so auch in IE7/8, FF, Opera korrekt dargestellt, nur Safari zeigt einfach "content" und alles was da drin ist nicht an. Wenn ich die Größen ändere. wird zwar der Platz zwischen "header" und "footer" größer, aber man kann nichts sehen.
Danke!
noise
Zuletzt bearbeitet:
