position:absolute - Div verscheibt layout

sucka · 28 Juli 2006

Hallo,

ich habe mal Testweise ein Layout mit position:fixed und position:absolute für den IE gemacht. Klappt fast alles, nur leider läßt sich der blaue Balken nicht unabhängig vom Layout bewegen, im Gegensatz zu den anderen divs.

Schaut es euch mit dem Internet Explore an

http://kakapopo.ka.funpic.de/huette/index.html

Hier mal der Code:

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=iso-8859-1" />
<title>Breakfasthouse.com  </title>
<style type="text/css">
/*<![CDATA[*/
body {
font: 100.01% Verdana;
background-color:#FFFFFF;
color:#333333;
}
#body {
width:99.98%;
}
#container {
width: 746px;
text-align:left;
margin: 0 auto;
position:fixed;
left: 140px;
top: 5px;
}
.bg {
width: 100%;
height: 213px;;
background-color:#283140;
position:fixed;
top: 133px;
}
#header {
background-image:url(img/header.gif);
width: 746px;
height: 101px;
display:block;
position:fixed;
top: 8px;
}
#navigationtop {
width: 746px;
height: 37px;
background-image:url(img/navigationoben2.gif);
font-weight:bold;
font-size:12px;
color:white;
display:block;
position:fixed;
top: 109px;
}
.topnavi a:visited   {
color:#FFFFFF;
text-decoration: none;
}
.topnavi a:link {
color:#FFFFFF;
text-decoration:none;
}
.topnavi a:hover  {
color: white;
text-decoration:underline;
}
.topnavi {
position:fixed;
top: 116px;
left: 353px;
}
#navigationleft {
display:block;
width:200px;
height: 190px;
background-color:#FFFFFF;
background-repeat:no-repeat;
font-size:11px;
line-height: 20px;
position:fixed;
top: 146px;
left: 141px;
}
ul {
list-style-image:url(img/listspace.gif);
position:fixed;
left: 132px;
color:#333333;
}
#picsbar {
width: 533px;
height: 165px;
background-image:url(img/bilderleiste.gif);
position: fixed;
top: 145px;
right: 150px;
}
#rightbar {
width:14px;
height:434px;
background-image:url(img/leisterechts.gif);
position:fixed;
top: 145px;
right: 138px;
}
#welcometext {
width: 531px;
height: 234px;
background-image:url(img/welcometextflaeche.gif);
position:fixed;
top: 345px;
left: 341px;
}
#whitebar {
background-color:#ffffff;
width: 531px;
height: 26px;
position:fixed;
top: 310px;
left: 341px;
}
#footer {
font-size:11px;
position:fixed;
bottom: 0px;
left: 320px;
display:none;
}
#footer a:visited {
color: #283140;
text-decoration:none;
}
#footer a:hover {
color: #283140;
text-decoration:underline;
}
#footer a:link {
color: #283140;
text-decoration:none;
}
#gallery {
width: 201px;
height: 234px;
background-image:url(img/gallery.gif);
position:fixed;
top: 345px;
left: 140px;
}
ul a:visited {
color: #333333;
text-decoration:none;
}
ul a:hover {
color:#000099;
text-decoration:none;
}
ul a:link{
color:#333333;
text-decoration:none;
}
#picsbar span {
font-size:11px;
margin-left: 56px;
margin-top: 141px;
display:block;
}
#picsbar a:visited {
color:#333333;
text-decoration:none;
}
#picsbar a:hover {
color:#000099;
text-decoration:underline;
}
#picsbar a:link {
color:#333333;
text-decoration:none;
}
#gallery span {
color:#FFFFFF;
font-size:11px;
margin-left:64px;
margin-top: 215px;
display:block;
}
#gallery a:visited {
color:#fff;
text-decoration:none;
}
#gallery a:hover {
color:#fff;
text-decoration:underline;
}
#gallery a:link {
color:#fff;
text-decoration:none;
}
#welcometext p {
font-size: 12px;
margin-left: 30px;
margin-top: 37px;
}
#whitebar span {
font-size:11px;
font-weight:bold;
padding-top:7px;
padding-left: 14px;
display:block;
color:#283140;
}
#whitebar a:visited {
color:#283140;
text-decoration:none;
}
#whitebar a:hover {
color:#283140;
text-decoration:underline;
}
#whitebar a:link {
color:#283140;
text-decoration:none;
}
#navigationtop input {
margin-top:8px;
margin-left:25px;
font-size:11px;
color:#283140;
}
#navigationtop .submit {
margin-left:2px;
}
#search {
margin-right: 0;
}
/* Internet Explorer Part */
* html body {
height:100%;
width:100%;
}
* html #header {
position:absolute;
top: 8px;
left: 110px;
}
* html #navigationtop {
position:absolute;
top: 107px;
left: 110px;
}
* html #navigationleft {
position:absolute;
top: 144px;
left:111px;
}
* html #picsbar {
position:absolute;
top:143px;
left:311px;
}
* html .topnavi {
position:absolute;
top: 7px;
left: 213px;
}
* html #rightbar {
position:absolute;
top: 143px;
right: 148px;
}
* html #whitebar {
position:absolute;
top: 308px;
left: 311px;
}
* html #welcometext {
position:absolute;
top: 343px;
left: 311px;
}
* html #gallery {
position:absolute;
top: 343px;
left: 110px;
}
* html ul {
position: absolute;
top: 8px;
left: 0;
}
* html .bg {

}
/* Internet Explorer Part End */
/*]]>*/
</style>
</head>
<body>
<div class="bg" id="body">
<div id="container">
   <div id="header"></div>
   <div id="navigationtop"><form action="index.html" method="post">
   <input type="text" name="search" id="search" size="18" maxlength="40" value="&nbsp;Your search query" /><input class="submit" type="submit" name="go" value="Go"/>
   </form><span class="topnavi"><a href="index.html">Home</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="index.html">Rooms &amp; Rates</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="index.html">Region &amp; Local Attractions</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="index.html">About Us</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="index.html">Contact Us</a></span></div>
   <div id="navigationleft">
      <ul>
         <li><a href="index.html">Individual Room Details</a></li>
         <li><a href="index.html">Special Deals</a></li>
         <li><a href="index.html">Meals &amp; Menus</a></li>
         <li><a href="index.html">Terms &amp; Conditions</a></li>
         <li><a href="index.html">Attractions &amp; Pastimes</a></li>
         <li><a href="index.html">Photo Gallery</a></li>
         <li><a href="index.html">Links</a></li>
         <li><a href="index.html">References &amp; Testimonials</a></li>
      </ul>     
   </div>
   <div id="picsbar"><span><a href="index.html">View Details</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="index.html">View Details</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="index.html">View Details</a></span></div>
   <div id="rightbar"></div>
   <div id="whitebar"><span><a href="index.html">.Home</a></span></div>
   <div id="welcometext"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p><p style="margin-top:2px"> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</p>
   </div>
   <div id="gallery"><span><a href="index.html">View Gallery</a></span></div>
   <div id="footer"><p>Copyright 2006 by Breakfasthouse.com &nbsp;&nbsp;&nbsp;All rights reserved</div>
</div>
</div>   
</body>
</html>

Der blaue Kasten ist mit .bg definiert.

Könnt ihr mir helfen?

Danke

mfg

position:absolute - Div verscheibt layout

sucka

Neues Mitglied

Neueste Beiträge