iFrame Höhe 100% Problem
Hallo Leute.
Ich bin dabei eine schlichte Seite für mich zu erstellen. Um mich mit der ganzen Thematig WebDesign bisschen zu befassen.
Nur hab ich ein Problem.
Ich habe eine Index.html erstellt wo nur das Menü, der Header und ein iFrame drin ist.
der iFrame will ich dazu benutzen um halt zum Beispiel wenn ich auf Bilder klicke, nicht die komplette seite neu geladen wird sondern das die dafür vorgesehene html datei im iFrame landed.
nur wenn ich jetzt auf z.B. Bilder zeigt er zwar was an aber es fehlt verdammt viel.
hier mal mein index.html code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>TEST</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="headerBg"></div>
<div id="headerWidth">
<img src="http://mygully.com/images/logo.png" alt="TEST" id="logo">
<div id="nav">
<a href="home.html" title="Home" target="iframe" class="navItem">Home</a>
<a href="gallerie.html" title="Galerie" target="iframe" class="navItem">Galerie</a>
<a href="dienstleistung.html" title="Dienstleistung" target="iframe" class="navItem">Dienstleistung</a>
<a href="kontakt.html" title="Anfahrt/Kontakt" target="iframe" class="navItem">Anfahrt/Kontakt</a>
<a href="ueber_uns.html" title="Über Uns" target="iframe" class="navItem">Über Uns</a>
</div>
</div>
</div>
<div id="body">
<iframe src="home.html" width="100%" height="100%" name="iframe" frameborder="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="no" noresize>
</iframe>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
und hier der CSS Code:
Code:
body {
background-image: url(images/bg-.png);
background-repeat:no-repeat;
font-family: 'Trebuchet MS',Helvetica,Arial,sans-serif;
}
#body {
height: 100%;
width: 100%;
}
}
#headerBg {
width: 100%;
background-color: white;
border-bottom: 1px solid #E4E4E4;
height: 63px;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
}
#headerWidth {
width: 960px;
margin: auto;
}
#logo {
}
#nav {
float: right;
margin-top: 16px;
}
.navItem {
padding: 24px 20px 17px 20px;
-webkit-transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
transition: all 500ms ease-out;/
}
.navItem:hover {
background-color: #8FAEF5;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
#nav a {
text-decoration: none;
color: #8FAEF5;
}
#nav a:hover {
color: white;
}
Ich hoffe es kan mir jemand bei den Problem helfen, oder kann mir eine gute allternative vorschlagen.
lg Specimann |
