Probleme mit div, iframe und link

byjoe · 19.03.2010

erstmal Hallo hier

wie man sehen kann bin ich neu hier. ich hab mich dazu entschlossen endlich die Homepage für meine Firma neu zu gestalten.
da ich ein wenig ehrgeizig bin und hin und wieder die Herausforderung liebe hab ich mich jetzt 2 Tage damit beschäftigt.

nun hab ich ein Problem, denn die von mir gewünschten verlinkungen funktionieren nur mit google chrome, aber nicht mit IE oder FF.

ich hab alles mit div tags gemacht und in ein div einen iframe eingefügt. dieser frame ist das ziel für jeden link. jedoch wird im IE und im FF ein neues Fenster geöffnet und ich verstehe nicht warum und wieso.

die restlichen dinge wie abstände, linkmarkierungen und die komische anzeige des iframe im IE ärgern mich zwar auch, aber das sollte auch für mich lösbar sein.

ich bitte hiermit mal einen Blick darauf zu werfen, vielleicht ist da ja doch nur eine kleinigkeit zu ändern.

ich weiß dass noch nicht alle angaben, betreffend header und so weiter vollständig sine, aber das mit den links ist jetzt wichtiger.

HTML:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pertl Ofenbau KG</title>
<style type="text/css">
<!--
body {
	background-color: #A0A5AA;
	text-align: center;
	}
#container {
	height: 768px;
	width: 969px;
	margin-top: 30px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	overflow: hidden;
	}
#header {
	height: 160px;
	text-align: left;
	}
.navi {
	margin-top: 10px;
	margin-right: 3px;
	margin-bottom: -3px;
	margin-left: auto;
	text-align: center;
}
#logo {
	float: left;
	height: 160px;
	width: 340px;
	}
#bilder_index_hintergrund {
	height: 625px;
	width: 285px;
	background-image: url(image/bilder_index.png);
	overflow: auto;
	text-align: center;
	float: right;
	}
#bilder_index {
	height: 605px;
	width: 265px;
	overflow: auto;
	text-align: center;
	margin: 10px;
	}
.bilder {
	margin-top: 5px;
	margin-right: 20px;
	margin-left: 20px;
	}
#text_index {
	float: left;
	height: 378px;
	width: 661px;
	background-image: url(image/text_index.png);
	padding: 10px;
	}
#platzhalter-frame1 {
	height: 376px;
	width: 659px;
	text-align: center;
	margin: 0px;
	}
#frame1 {
	text-align: center;
	height: 378px;
	width: 660px;
	overflow: visible;
	margin: 10px;
	border: 1px none #000;
	}
#footer1_index {
	float: left;
	height: 28px;
	width: 681px;
	background-image: url(image/fusszeile1.png);
	margin-top: 5px;
	text-align: center;
	}
#footer2_index {
	float: right;
	height: 28px;
	width: 285px;
	background-image: url(image/fusszeile2.png);
	margin-top: 5px;
	text-align: center;
	}



-->
</style></head>

<body>
<div id="container">
  <div id="header">
    <div id="logo"><img src="image/logo.png" width="340" height="160" /></div>
    <div id="bilder_index_hintergrund">
      <div id="bilder_index">
      		<a href="bilder/big/pict001.JPG" target="frame1">
            <img src="bilder/thumb/pict001.JPG" width="192" height="144" class="bilder" /></a>
            <a href="bilder/big/pict002.JPG" target="frame1">
            <img src="bilder/thumb/pict002.JPG" width="192" height="144" class="bilder" /></a>
            <a href="bilder/big/pict003.JPG" target="frame1">
            <img src="bilder/thumb/pict003.JPG" width="145" height="192" class="bilder" /></a>
            <a href="bilder/big/pict004.JPG" target="frame1">
            <img src="bilder/thumb/pict004.JPG" width="145" height="192" class="bilder" /></a>
            <a href="bilder/big/pict005.JPG" target="frame1">
            <img src="bilder/thumb/pict005.JPG" width="192" height="144" class="bilder" /></a>
       		<a href="bilder/big/pict006.JPG" target="frame1">
       		<img src="bilder/thumb/pict006.JPG" width="145" height="192" class="bilder" /></a>
            <a href="bilder/big/pict007.JPG" target="frame1">
            <img src="bilder/thumb/pict007.JPG" width="145" height="192" class="bilder" /></a>
            <a href="bilder/big/pict008.JPG" target="frame1">
            <img src="bilder/thumb/pict008.JPG" width="192" height="144" class="bilder" /></a>
            <a href="bilder/big/pict009.JPG" target="frame1">
            <img src="bilder/thumb/pict009.JPG" width="128" height="192" class="bilder" /></a>
            <a href="bilder/big/pict010.JPG" target="frame1">
            <img src="bilder/thumb/pict010.JPG" width="192" height="128" class="bilder" /></a>
            <a href="bilder/big/pict011.JPG" target="frame1">
            <img src="bilder/thumb/pict011.JPG" width="192" height="128" class="bilder" /></a>
            <a href="bilder/big/pict012.JPG" target="frame1">
            <img src="bilder/thumb/pict012.JPG" width="192" height="128" class="bilder" /></a>
            <a href="bilder/big/pict013.JPG" target="frame1">
            <img src="bilder/thumb/pict013.JPG" width="128" height="192" class="bilder" /></a>
            <a href="bilder/big/pict014.JPG" target="frame1">
            <img src="bilder/thumb/pict014.JPG" width="192" height="128" class="bilder" /></a>
            <a href="bilder/big/pict016.JPG" target="frame1">
            <img src="bilder/thumb/pict016.JPG" width="128" height="192" class="bilder" /></a>
            <a href="bilder/big/pict017.JPG" target="frame1">
            <img src="bilder/thumb/pict017.JPG" width="128" height="192" class="bilder" /></a>
            <a href="bilder/big/pict018.JPG" target="frame1">
            <img src="bilder/thumb/pict018.JPG" width="128" height="192" class="bilder" /></a>
            <a href="bilder/big/pict019.JPG" target="frame1">
            <img src="bilder/thumb/pict019.JPG" width="128" height="192" class="bilder" /></a>
            <a href="bilder/big/pict020.JPG" target="frame1">
            <img src="bilder/thumb/pict020.JPG" width="145" height="192" class="bilder" /></a>
            <a href="bilder/big/pict021.JPG" target="frame1">
            <img src="bilder/thumb/pict021.JPG" width="144" height="192" class="bilder" /></a>
            <a href="bilder/big/pict022.JPG" target="frame1">
            <img src="bilder/thumb/pict022.JPG" width="144" height="192" class="bilder" /></a>
            <a href="bilder/big/pict023.JPG" target="frame1">
            <img src="bilder/thumb/pict023.JPG" width="145" height="192" class="bilder" /></a>
            <a href="bilder/big/pict024.JPG" target="frame1">
            <img src="bilder/thumb/pict024.JPG" width="192" height="144" class="bilder" /></a>
            <a href="bilder/big/pict025.JPG" target="frame1">
            <img src="bilder/thumb/pict025.JPG" width="144" height="192" class="bilder" /></a>
            <a href="bilder/big/pict026.JPG" target="frame1">
            <img src="bilder/thumb/pict026.JPG" width="192" height="144" class="bilder" /></a>
            <a href="bilder/big/pict027.JPG" target="frame1">
            <img src="bilder/thumb/pict027.JPG" width="192" height="144" class="bilder" /></a>
            <a href="bilder/big/pict028.JPG" target="frame1">
            <img src="bilder/thumb/pict028.JPG" width="144" height="192" class="bilder" /></a>
            <a href="bilder/big/pict030.JPG" target="frame1">
            <img src="bilder/thumb/pict030.JPG" width="144" height="192" class="bilder" /></a>
            <a href="bilder/big/pict031.JPG" target="frame1">
            <img src="bilder/thumb/pict031.JPG" width="144" height="192" class="bilder" /></a>
            <a href="bilder/big/pict032.JPG" target="frame1">
            <img src="bilder/thumb/pict032.JPG" width="192" height="144" class="bilder" /></a>
            <a href="bilder/big/pict033.JPG" target="frame1">
            <img src="bilder/thumb/pict033.JPG" width="144" height="192" class="bilder" /></a>
            <a href="bilder/big/pict034.JPG" target="frame1">
            <img src="bilder/thumb/pict034.JPG" width="144" height="192" class="bilder" /></a
            ><a href="bilder/big/pict035.JPG" target="frame1">
            <img src="bilder/thumb/pict035.JPG" width="144" height="192" class="bilder" /></a>
            <a href="bilder/big/pict036.JPG" target="frame1">
            <img src="bilder/thumb/pict036.JPG" width="144" height="192" class="bilder" /></a>
            <a href="bilder/big/pict037.JPG" target="frame1">
            <img src="bilder/thumb/pict037.JPG" width="192" height="144" class="bilder" /></a>
            <a href="bilder/big/pict038.JPG" target="frame1">
            <img src="bilder/thumb/pict038.JPG" width="144" height="192" class="bilder" /></a>
            <a href="bilder/big/pict039.JPG" target="frame1">
            <img src="bilder/thumb/pict039.JPG" width="158" height="192" class="bilder" /></a>
            <a href="bilder/big/pict040.JPG" target="frame1">
            <img src="bilder/thumb/pict040.JPG" width="144" height="192" class="bilder" /></a>
            <a href="bilder/big/pict041.JPG" target="frame1">
            <img src="bilder/thumb/pict041.JPG" width="192" height="144" class="bilder" /></a>
            <a href="bilder/big/pict042.JPG" target="frame1">
            <img src="bilder/thumb/pict042.JPG" width="192" height="144" class="bilder" /></a>
            <a href="bilder/big/pict043.JPG" target="frame1">
            <img src="bilder/thumb/pict043.JPG" width="144" height="192" class="bilder" /></a>
            <a href="bilder/big/pict044.JPG" target="frame1">
            <img src="bilder/thumb/pict044.JPG" width="144" height="192" class="bilder" /></a> 
      </div>
      
    </div>
    	<p>	
   		<img src="image/MeisterSiegel.png" width="140" height="140" align="left" class="navi" />
        <a href="home.html" target="frame1"><img src="image/home.png" width="193" height="42" align="right" class="navi" /></a>
        <a href="info.html" target="frame1"><img src="image/information.png" width="193" height="42" align="right" class="navi" /></a>
        <a href="kontakt.html" target="frame1"><img src="image/kontakt.png" width="193" height="42" align="right" class="navi" /></a>
        </p>
   
  </div>
<div id="text_index">
    <div id="platzhalter-frame1">
      <iframe id="frame1"> </iframe>
    </div>
  </div>
  <div id="footer1_index">
  		<a href="home.html" target="frame1">Home</a> - 
        <a href="info.html" target="frame1">Information</a> - 
        <a href="kontakt.html" target="frame1">Kontakt</a>
  </div>
</div>
</body>
</html>

sokie · 19.03.2010

AW: Probleme mit div, iframe und link

das target im link bezieht sich auf das attribut 'name' im Iframe, NICHT auf die ID.
das 'name' attribut ist für deinen iframe nicht gesetzt, also nachholen, dann funktionierts

Code:

<iframe name="frame1" .... >

herzlich willkommn in der Community

byjoe · 19.03.2010

AW: Probleme mit div, iframe und link

also ich hab gerade einen Freudentanz gemacht!

vielen dank

ich will ja nicht unverschämt werden, aber mir läuft leider die zeit ein wenig davon.

was muss man tun um den iframe im IE nicht weiß zu haben, es sollte wie im FF dargestellt werden! :'(

das ist dann das letzte problem für diese seite, zumindest was zur zeit vorhersehbar ist!

mfg

hedoo · 19.03.2010

AW: Probleme mit div, iframe und link

Definiere für den <body> deines Iframes eine Hintergrundfarbe.

Gruß
hedoo

byjoe · 19.03.2010

AW: Probleme mit div, iframe und link

so, nochmals danke

ich hab jetzt die einzelnen html dokumente, welche per link geladen werden eingefärbt.

zum thema IE:

bei den bildern gehts nicht, da die ja direkt geladen werden.
jetzt ist halt bei den bildern ein weißer hintergrund und so eine dumme scrollbar, obwohl da alles auf hidden gestellt ist. :mad:

naja, aber man muß kompromisse eingehen und da ich den IE sleber eh nicht verwende seh ich das ja nicht!

mfg

hedoo · 19.03.2010

AW: Probleme mit div, iframe und link

Das Problem mit den Bildern kannst du folgendermaßen lösen:
Leg html-Seiten an in die du die Bilder einfügst, da kannst du ja wieder den body einfärben.
Wenn du dem body des Iframes noch ein margin: 0px; und padding: 0px; mitgibst müssten die Scrollblaken im IE auch weg sein.

Und was den IE angeht, der ist noch sehr! verbreitet.

hedoo

byjoe · 19.03.2010

AW: Probleme mit div, iframe und link

danke für deine hilfe!

leider ist der IE noch so verbreitet, aber egal!

ich denke aber dass ich mir das nochmal durch den kopf gehen lasse wegen den ganzen html seiten für die bilder, wenn es sich zeitlich ausgeht werd ich es machen!

mfg

byjoe · 19.03.2010

AW: Probleme mit div, iframe und link

so!

da ich jetzt unbedingt sehen wollte wie es aussieht wenn ich es mit einzelnen html dateien mache hab ich es versucht.

--> gefällt mir viel besser

--> habs geändert!

vielen dank nochmal für die Lösungen meiner Probleme!

P.S.:

wenn jemand lust hat sich das ganze anzusehen findet man den link im ersten post!

für verbesserungsvorschläge oder sonstiges bin ich jederzeit offen!

Info: Serverseitig steht kein mySql und kein Java zur verfügung.