|
|||
Absolute / relative Positionierung eines Elements
Hallo,
mein Content wird immer mittig angezeigt, dazu habe ich folgendes gemacht: Code:
<center> <div style="width:1000px; margin:0 auto;" Hier steht mein Content ... </div> </center> Mit einem Layer (z-index:30) soll nun ein iFrame eingebunden werden, dass halbtransparent über dem Content erscheint. Damit das mit dem Layer funktioniert, muss ich das iFrame absolut positionieren. Bei "position:absolute" kann ich aber kein "margin:0 auto" angeben, sondern muss einen festen Rand nennen. Der ist aber wieder von der Bildschirmauflösung bzw. der Breite des Browserfensters abhängig. Zurzeit wird also das iframe nie mittig, sondern immer linksbündig ausgegeben. Was tun? Habt ihr eine Patentlösung oder kennt ihr ein Beispiel? Vielen Dank, viele Grüße und einen guten Rutsch! Holger |
Sponsored Links |
|
|||
Hallo!
Gib dem äußeren div ein position:relative Nun kannst du den iframe innerhalb dieses div's absolut positionieren. Den linken Rand bestimmst du, indem du die Breite des iframes von der Breite des div's abziehst und das Ergebnis durch zwei teilst. |
Sponsored Links |
|
|||
Hallo, danke für deinen Tipp.
Ein weiteres Problem war, dass das iFrame unsichtbar bleiben sollte und erst dann angezeigt werden sollte, wenn ein Inhalt angezeigt wird (d.h. wenn ein entsprechender Link angeklickt und im iFrame geöffnet wird). Mit "position:relative" ging das nicht. Außerdem kann ich die genaue Position nicht fest vorgeben, da ich die Bildschirmauflösung nicht kenne (also erst abfragen muss). Ich habs jetzt so gelöst: HTML-Datei, in der das iFrame angezeigt werden soll: Code:
<div id="frame" > <iframe id="derframe" name="derframe" src="#" frameborder=0; scrolling="auto";></iframe> </div> Code:
<a href="xy.html" target="derframe" onclick="show(600,620);">Linktext</a> Code:
function showassi(h,w ){ self.scrollTo(0,0); document.getElementById('derframe').height=h; document.getElementById('derframe').width=w; document.getElementById('derframe').style.display = 'block'; document.getElementById('derframe').style.top = '30px'; var breite = (document.body.scrollWidth -750); var px = 'px'; var links = (breite / 2) + px; document.getElementById('derframe').style.left=links; } Code:
#derframe{ position: absolute; top:-10000px; left:-10000px; filter: alpha(opacity=100); /* IE */ opacity: 1.00; /* Safari, Opera and Mozilla */ display:none; z-index:3000; margin:50px auto; border:5px solid transparent; } |
Stichwörter |
absolute, iframe, positionierung |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
div-höhe? - Hauptcontainer über ganze Seite will nicht... | AndMei | CSS | 5 | 13.12.2010 14:43 |
Problem mit CSS relative, absolute & float | FrageHabe | CSS | 3 | 13.08.2010 14:40 |
Was übersehe ich? | Psyclown | CSS | 2 | 19.10.2008 13:00 |
ich habe totale Schwerigkeiten mit Absolute und Relative Positionierung?!? | damonster | CSS | 12 | 27.08.2008 15:56 |
prblemme mit mein inhalt div | carlos587261 | CSS | 3 | 23.04.2008 14:07 |