CSS Darstellungsprobleme in Safari

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

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

Kommentare

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!“

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

Mr. Krabs25.04.0815:09

Klar

statt

am besten

<div class="main">#Inhalt von inhalt.html</div>

„Deux Strudel!“

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?

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!“

Kommentieren

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

Interview: Größte private Mac-Sammlung

Übersicht: Lieferzeiten für die neuen Macs

Apple Intelligence: Weiterhin Nonsens-Zusammenf...

Apple Silicon M4: Die versteckte Innovation der...

Apple gewährt Einblick in Audio- und Video-Test...

iPhone 17 Pro: Leaks sollen Details zur neuen R...

Erscheint das neue MacBook Air M4 früher als an...

Kurz: Apple bietet iPhone 15 erstmals refurbish...