Webhilfe.info/board

Normale Version: Iframe in CSS
Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
Seiten: 1 2
HI, mal ne Frage, wie bekomme ich ein Iframe (will darin eine url wiedergeben lassen) mit css hin ? sollte möglichst sich anpassen (größenmäßig). Danke Muelly
Hallo und herzlich Wilkommen im Forum.

Leider habe ich nicht genau verstanden, was genau du als iFrame bezeichnest. Außerdem scheint ein kleines Verständnisproblem vorzuliegen, da man (X)HTML Elemente nicht per CSS machen kann, sondern nur ihre Eigenschaften verändern kann. Wink
Aber ich denke, dass es ein Misverständnis meinserseits ist.

Ich denke mir, dass du einen iFrame smimulieren möchtest, also es so aussehen lassen, als ob dort einer wäre.
Dafür brauchen wir einfach nur einen Rahmen um die ganzen Elemente, die in diesem "iFrame" dargestellt werden sollen. Daher Nehmen wir ein <div /> und schreiben ein wenig Text hinein.
Dieser Text ist nachher in dem "iFrame". Außerdem müssen wir noch die border-Eigenschaft von unserem "iFrame" ändern, da kommt CSS ins Spiel.
[code:1]
<!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" xml:lang="en" lang="en">
<head>
<style type="text/css" media="screen">
<!--
#iFrame{
border:1px solid #000000;
}
// -->
</style>
<title>iFrame Spielerei</title>
</head>
<body>
<div id="iFrame">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus pretium. Praesent viverra euismod orci. Praesent consequat, urna ut consequat bibendum, libero est viverra enim, sed commodo pede velit ac diam. Suspendisse eros mauris, mollis vitae, sagittis et, sagittis tempus, orci. Pellentesque imperdiet felis eu ligula. Nullam vel nisl. Nam porta, mi a gravida dapibus, diam est feugiat nulla, sed sagittis sem nulla eu velit. Nam pulvinar hendrerit erat. Aliquam eget est at lectus adipiscing volutpat. Quisque metus. Sed eu tellus. Aenean ac velit. Aliquam erat volutpat. Aenean ac nulla vitae ipsum venenatis feugiat. Etiam sed mauris. Ut consectetuer. Praesent ac velit nec eros tincidunt commodo. Sed semper dui.
</p>
<p>
Etiam lacus quam, suscipit sed, sagittis eu, pharetra vel, lorem. Fusce ultricies, orci nec ultrices congue, massa metus vehicula ante, vel tempus dui quam quis urna. Duis est est, elementum et, ullamcorper et, vehicula non, orci. Sed faucibus nonummy libero. Sed vitae leo. Duis accumsan est eu tortor. Aliquam dolor diam, volutpat eget, imperdiet ac, nonummy sed, mauris. Nunc eleifend arcu. Curabitur ac quam nec tellus accumsan mattis. Nunc vel justo. Vestibulum ullamcorper dui ut wisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent euismod. Nam vitae ipsum fermentum urna euismod placerat. Nulla aliquam, nibh at condimentum dictum, felis nibh venenatis tellus, tincidunt porta nulla tellus tincidunt risus. Sed sit amet quam. Nam facilisis. Morbi eget nibh. Cras libero metus, aliquam id, commodo eu, ultrices eget, risus.
</p>
<p>
Nullam velit. Quisque in dui. Nunc suscipit. Aenean ac tellus. Etiam lectus elit, pharetra nec, dapibus ut, auctor a, tortor. Morbi fringilla ante molestie pede. Sed gravida, diam porttitor vehicula facilisis, nibh dolor eleifend mauris, quis imperdiet lacus est a dui. Fusce tempor. Nunc sodales velit et mauris. Nam ac elit. Aliquam luctus massa. Phasellus vulputate. Mauris arcu libero, aliquam sed, fringilla eu, blandit ac, arcu. In est diam, vulputate a, semper vel, nonummy ac, nibh. Vivamus quis enim. Ut facilisis quam non velit. Curabitur odio quam, pulvinar eu, laoreet quis, pharetra sed, augue. In id eros at neque condimentum pharetra.
</p>
</div>
</body>
</html>
[/code:1]
Damit das <div /> sich in der Größe nach unten strecken kann, müssen wir ihm eine feste Breite geben, da das Element sonst erst versucht in der Breite zu strecken.
[code:1]
<style type="text/css" media="screen">
<!--
#iFrame{
border:1px solid #000000;
width:600px;
}
// -->
</style>
[/code:1]
Jetzt haben wir einen Rahmen um den Text und das <div /> streckt sich nach unten, falls du noch Fragen haben solltest, scheue nicht davor zurück sie zu stellen.
kleine ergänzung von mir dabei, du kannst dem iFrame-div noch eine feste höhe zuweisen:
[code:1]
height: 400px;
[/code:1]
und alles was nicht darein passt, kannst du entweder verstecken lassen, oder du baust einen scrollbalken ein.
Das geht mit so:
[code:1]
overflow: scroll; /* hide, wäre hier für verstecken und mit auto würd sich der Browser es aussuchen, was er macht IE und FF nehmen aber meist scroll*/
[/code:1]
es ist so, ein normales <iframe> ist in Firefox nicht mit 100% sichtbar, sondern es stellt sich da selbst eine größe ein. da dachte ich mir ich suce ne neue lösung. dachte css wär da ganz good, aber ich bin auch für alles andere offen. will nur eine i-net seite im <iframe> wiedergeben lassen , aber mit 100% , aber so dass das auch der firefox versteht.
Willst du jetzt ein reines iFrame mit CSS formatieren oder willst du ein imitiertest iFrame mit CSS?
Ein imitiertest iFrame , worin einer Url dagestellt wird . Es sollte firefox kompatibel sein und sich selber anpassen (100%). Thx Muelly
Ich verstehe den sinn eines iFrames nicht, der die komplette Höhe und Breite eines Browserfensters ausfüllt. Die "normale" HTML Datei, worin der iFrame wäre, oder der imitierte CSS-Frame, ist doch von alleine bereits das Browserfenster.
Oder willst du einfach nur, dass du einen Bereich auf deiner Webseite hast, der von der oberen Kante bis zur unteren geht?
Ein Beispiel von deinem Problem würde uns sehr helfen. Da wohl niemand so recht versteht worauf du hinaus willst.
und zwar, können normale Iframes nicht im Firefox dargestellt werden, zumindest nicht mit höhe/breite 100%, Ich suche quasi einen ersatz dafür. In diesem ersatz sollte eine URL dargestellt werden. jetz verstanden ?
Also da gebe es eine Erklärung

Und des weiteren solltest du nicht mit einem iframe arbeiten, sonder eher mit PHP wo du dann deine Inhalte includest. Ist einfach besser.
- noch mal zu deinen 100% ich kapiere nicht warum du 100% brauchst! mach doch einfach ne neue Seite !
das mit 100% hat was mit den unterschiedlichen auflösungen zu tun. kann mir wer sowas in php,css,oder sonste was bauen, damit es auch im firefox funzt. Danke
Seiten: 1 2
Referenz-URLs