✔ Div Iframe Problem

layla · 17. Februar 2006

Hallo!

Ich hab ein Problem und zwar ich habe meine gesamte Seite mit divs aufgebaut. Jetzt soll auf der Seite eine Gästebuch und eine Galerie noch dazu kommen. Der Webspace wo die Seite liegt hat keine PhP dabei und deswegen liegt das Gästebuch und Galerie wo anders.
Kann man in ein div irgendwie eine externe Seite laden?
Ok also ich wollte halt für diese 2 Seiten ein Iframe einbauen. Firefox zeigt es halbwegs richtig an aber IE nicht.

PHP:

</head>
<body>
<div id="wrapper">
	
  <div id="header"> 
    <map name="Map">
      <area shape="rect" coords="583,3,647,18" href="impressum.htm">
      <area shape="rect" coords="653,4,701,22" href="kontakt.htm">
    </map>
    <img src="Bilder/pension_01.jpg" border="0" usemap="#Map"></div>
  <div id="main">
<div id="nav"><div class="menue"><a href="ghaus.htm">Gästehaus</a></div>
	<div class="menue"><a href="bauernhof.htm">Bauernhof</a></div>
	<div class="menue"><a href="reiten.htm">Reiten</a></div>
	<div class="menue"><a href="umgebung.htm">Umgebung</a></div>
	<div class="menue"><a href="preise.htm">Preise</a></div>
	<div class="menue"><a href="anfahrt.htm">Anfahrt</a></div>
	<div class="menue"><a href="gbuch.htm">Gästebuch</a></div>
	<div class="menue"><a href="galerie.htm">Bildergalerie</a></div>
	</div>
</div>
		<div>
		 
    <div align="left"><iframe src="http://www.google.at" width="476" height="640" name="f"marginheight="0" marginwidth="0" frameborder="0" scrolling="auto"> </iframe></div>
    </div>
	
	<div id="footer"></div>
		</div>
</body>
</html>

Habt ihr bitte paar tips, die Seite sollte eigentlich Sonntag fertig sein.

Maik · 17. Februar 2006

Der HTML-Code wird ohne CSS-Formateigenschaften fehlerfrei dargestellt.

SilentWarrior · 17. Februar 2006

Igittigittigitt! Deine Seite ist die reinste Div-Suppe – da solltest du dringend was dran ändern, beispielsweise liesse sich das Menü (Gästehaus, Bauernhof usw.) prima durch eine Liste darstellen.

Ausserdem muss ein iFrame nicht von einem Div umschlossen werden, da es selbst schon ein Blockelement ist.

*brrr* Ich geh schnell wieder, von den vielen Divs wird mir ganz übel (tut mir leid, ist wirklich so – versuch echt, das zu verbessern, wir helfen auch gern dabei).

layla · 18. Februar 2006

sorry das ich das des erstemal mit css mache!
außerdem muss die seite morgen fertig sein und daher hab ich netmehr die zeit alles umzustellen.

und wie soll das menu mit einer liste zu machen sein? es sind vielleicht buttons im hintergrund.

deine aussagen helfen mir auch net wirklich weiter.

Maik · 18. Februar 2006

Auf Listamatic: one list, many options findest Du Anregungen und Beispiele für CSS-gestützte Listenmenüs.

Du solltest hier auch den dazugehörigen CSS-Code zeigen, wenn's damit Probleme gibt

Und bitte beachte die Netiquette bzgl. der Groß- und Kleinschreibung. Vielen Dank.

SilentWarrior · 18. Februar 2006

layla hat gesagt.:
Firefox zeigt es halbwegs richtig an aber IE nicht.

Du musst dich nicht wundern, dass ich nicht genauer antworten kann, wenn du nur so schwammige Fehlerangaben machst. Screenshots wären schön, eine genaue Beschreibung oder auch gleich ein Link zur funktionierenden (bzw. eben nicht funktionierenden) Seite.

layla · 18. Februar 2006

Ok hier der Inhalt vom css file.

Code:

	body{
	background: #FFB05C;
		margin: 0;
		padding:0;
		text-align: center;

	
	}
	#wrapper{
	background:transparent url(Bilder/bg.gif) repeat-y top center;
		text-align: left;
		width: 720px;
		margin: auto;
		
	}
	#header{
	width: 720px;
	height:208px;
	/*background: transparent url(Bilder/pension_01.jpg) no-repeat;*/
	}

	
	#nav{
		width:244px;
		height:459px;
		background:transparent url(Bilder/pension_02.jpg) no-repeat;
		float: left;
		padding-top: 95px;
		

}
div.menue{ background: url(Bilder/button.gif) no-repeat;
                width:173px; height:30px; margin-left:57px; }
  div.menue a {padding-left:40px; padding-top:4px; display:block; text-decoration:none; }
    div.menue a:link, div.menue a:visited {font-family: verdana; font-size: 13pt; text-decoration:none; color: #000000; }
    div.menue a:hover { color:white; }
    div.menue a:active { color:black; }
	}
	
	#content{
		margin-left: 244px;
		padding-top: 10px;
		padding-right: 20px;
		padding-bottom: 10px;
		background: transparent url(Bilder/pension_03.gif) no-repeat;
		font-family: verdana;
		font-size: 10pt;
	}	
	
	#footer{
		clear: left;
		width: 720px;
	height:54px;
	background: transparent url(Bilder/pension_04.gif) no-repeat;
	}
	
	h1{ 
	font-size: 18pt;
	}
	

	A:link{ font-family: verdana; font-size: 10pt; text-decoration:none; color: #E4831B;}
	A:hover{ font-family: verdana; font-size: 10pt; text-decoration:none; color:#fe8606;}
	A:active{font-family: verdana; font-size: 10pt; text-decoration:none; color:#fe8606;}
	A:visited{ font-family: verdana; font-size: 10pt; text-decoration:none; color:#bd7325;}
	
	table{font-family: verdana; font-size: 8pt;
	border-collapse:collapse;
	empty-cells:hide;
	 }
	 td { border:1px solid black; }

Mein Hauptproblem ist es das es nicht funktioniert das Iframe richtig auszurichten.
Es sollte dort wo sonst der Content ist hin.
Am Screen sieht man wo der IE das Iframe anzeigt.

Maik · 18. Februar 2006

Mein erster Eindruck: da paßt wohl was nicht zusammen, denn im HTML-Quelltext taucht nirgends die ID #content auf, dafür gibt es ein DIV mit der ID #main, die wiederum im Stylesheet nicht notiert ist

Maik · 18. Februar 2006

Hier ein Lösungsansatz:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
body{
        background: #FFB05C;
                margin: 0;
                padding:0;
                text-align: center;
        }
        #wrapper{
        background:transparent url(Bilder/bg.gif) repeat-y top center;
                text-align: left;
                width: 720px;
                margin: 0 auto;
        }

        #header{
        width: 720px;
        height:208px;
        /*background: transparent url(Bilder/pension_01.jpg) no-repeat;*/
        }

        #nav{
                width:244px;
                height:459px;
                background:transparent url(Bilder/pension_02.jpg) no-repeat;
                float: left;
                padding-top: 95px;
                }

div.menue{ background: url(Bilder/button.gif) no-repeat;
                width:173px; height:30px; margin-left:57px; }
  div.menue a {padding-left:40px; padding-top:4px; display:block; text-decoration:none; }
    div.menue a:link, div.menue a:visited {font-family: verdana; font-size: 13pt; text-decoration:none; color: #000000; }
    div.menue a:hover { color:white; }
    div.menue a:active { color:black; }
        }

        #content{
                 float:right;
                background: transparent url(Bilder/pension_03.gif) no-repeat;
                font-family: verdana;
                font-size: 10pt;
                }

        #footer{
                clear: left;
                width: 720px;
                height:54px;
                background: transparent url(Bilder/pension_04.gif) no-repeat;
        }

        h1{
        font-size: 18pt;
        }


        A:link{ font-family: verdana; font-size: 10pt; text-decoration:none; color: #E4831B;}
        A:hover{ font-family: verdana; font-size: 10pt; text-decoration:none; color:#fe8606;}
        A:active{font-family: verdana; font-size: 10pt; text-decoration:none; color:#fe8606;}
        A:visited{ font-family: verdana; font-size: 10pt; text-decoration:none; color:#bd7325;}

        table{font-family: verdana; font-size: 8pt;
        border-collapse:collapse;
        empty-cells:hide;
         }
         td { border:1px solid black; }
-->
</style>
</head>
<body>

<div id="wrapper">

  <div id="header">
    <map name="Map">
      <area shape="rect" coords="583,3,647,18" href="impressum.htm">
      <area shape="rect" coords="653,4,701,22" href="kontakt.htm">
    </map>
    <img src="Bilder/pension_01.jpg" border="0" usemap="#Map">
  </div>

  <div id="nav">
    <div class="menue"><a href="ghaus.htm">Gästehaus</a></div>
    <div class="menue"><a href="bauernhof.htm">Bauernhof</a></div>
    <div class="menue"><a href="reiten.htm">Reiten</a></div>
    <div class="menue"><a href="umgebung.htm">Umgebung</a></div>
    <div class="menue"><a href="preise.htm">Preise</a></div>
    <div class="menue"><a href="anfahrt.htm">Anfahrt</a></div>
    <div class="menue"><a href="gbuch.htm">Gästebuch</a></div>
    <div class="menue"><a href="galerie.htm">Bildergalerie</a></div>
  </div>

  <div id="content">
       <iframe src="http://www.google.at" width="476" height="640" name="f" marginheight="0" marginwidth="0" frameborder="0" scrolling="auto"> </iframe>
  </div>


  <div id="footer"></div>

</div>
</body>
</html>

layla · 18. Februar 2006

Des #content fehlt da weil das is der Div wo normal der Text reinkommt.
Aber nachdem ich da keinen habe, hab ich das weggelassen.

Danke werde mir deinen Code nacher ansehen.

Mein ganzer Pc is abgekackt und musste formatieren, deswegen hab ich jetzt dafür keine zeit mehr.

✔ Div Iframe Problem

layla

Erfahrenes Mitglied

Maik

SilentWarrior

Erfahrenes Mitglied

layla

Erfahrenes Mitglied

Maik

SilentWarrior

Erfahrenes Mitglied

layla

Erfahrenes Mitglied

Anhänge

Maik

Maik

layla

Erfahrenes Mitglied

Neue Beiträge