Push-Nachrichten von MacTechNews.de
Würden Sie gerne aktuelle Nachrichten aus der Apple-Welt direkt über Push-Nachrichten erhalten?
Forum>Entwickler>CSS Darstellungsprobleme in Safari

CSS Darstellungsprobleme in Safari

firlefranz25.04.0814:59
Hallo zusammen,

ich versuche gerade, meine Webseite etwas zeitgemäßer zu programmieren und wollte daher das Design mit CSS schreiben. Die Internetseite hat an allen vier Browserkanten je ein fixes Bild, sodass der scrollbare Bereich mittels iFrame eingebettet ist. Genau hier ist das Problem. Der iFrame wird in Safari viel zu klein angezeigt. In Firefox sieht alles so aus, wie es sein sollte.

Hier mal der Link zur Testseite:

Und so sieht der Code aus:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Test</title>
<style type="text/css">
body{ margin:0; padding:0}

div {border:0;}

#logo { position:absolute; top:0px;    left:0px; width:420px; height:142px; z-index:2;    background-image: url(images/logo.jpg)}
#rechtsunten { position:absolute; right:0px; bottom:0px; width:215px; height:436px; z-index:2;    background-image: url(images/rechts.jpg);}
#unten { position:absolute; left:0px; bottom:0px; width:151px; height:80px; z-index:2;    background-image: url(images/unten.jpg);}
#unten1 {position:absolute;    left:0;    bottom:0px;    z-index:1; width:100%; height:50px;    background-image: url(images/unten1.jpg); background-repeat:repeat-x;}
#ecke { position:absolute; right:0px; top:0px; width:152px; height:135px; z-index:2;    background-image: url(images/ecke.jpg);}
#oben {    position:absolute; left:0; top:0px;    z-index:1; width:100%; height:105px; background-image: url(images/oben.jpg); background-repeat:repeat-x;}
#rand { position:absolute; right:0px; top:0px; width:114px; height:100%; z-index:1;    background-image: url(images/rand.jpg);background-repeat:repeat-y;}
#links { position:absolute; left:0px; top:0px; width:122px; height:100%; z-index:1;    background-image: url(images/links.jpg);background-repeat:repeat-y;}
.main { position:absolute; left:120px; top:150px; right:220px; bottom:80px; border:0; overflow: auto;}
</style>
</head>
<body>
<div id="logo"></div>
<div id="rechtsunten"></div>
<div id="unten"></div>
<div id="unten1"></div>
<div id="ecke"></div>
<div id="oben"></div>
<div id="rand"></div>
<div id="links"></div>
<iframe class="main" src="inhalt.html" name="inhalt"></iframe>
</body>
</html>


<div style="position:absolute; top:0px; left:0px">
<img src="images/logo.jpg" width="420" height="142" alt="Logo"></div>

Was habe ich falsch gemacht?

Gruß
Cornelius
0

Kommentare

Mr. Krabs
Mr. Krabs25.04.0815:05
Ich denke du bist besser beraten, wenn du statt des iframes ein div nimmst und die overflow-Eigenschaft anpasst.
„Deux Strudel!“
0
firlefranz25.04.0815:07
Kannst du mir das ein Bisschen genauer erklären? Ich arbeite mich gerade erst in CSS ein. Für mich ist das alles Neuland
0
Mr. Krabs
Mr. Krabs25.04.0815:09
Klar

statt
<iframe class="main" src="inhalt.html" name="inhalt"></iframe>
am besten
<div class="main">#Inhalt von inhalt.html</div>
„Deux Strudel!“
0
firlefranz25.04.0815:19
Dank dir! Das funktioniert so weit.

Das wirft aber ein weiteres Problem auf. Eigentlich wollte ich das Grundgerüst der Seite (das ganze gelbe Drumherum) nicht jedes Mal neu laden lassen, wenn man auf einen Link klickt und somit in eine andere Rubrik springt. Es sollte sich also eigentlich nur die eingebettete Seite ändern und alles andere unverändert bleiben. Geht das?
0
Mr. Krabs
Mr. Krabs25.04.0815:59
Das Grundgerüst befindet sich doch nach dem ersten Laden im Cache des Clienten. Den Rest machst du z.B. mit PHP, von iframes und Konsorten würde ich Abstand nehmen.
„Deux Strudel!“
0

Kommentieren

Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.