RJ wrote in <3da5e393$0$780$ba624c82@nntp03.dk.telia.net>:
> Ja, jeg ved godt, at css er smartest .... men jeg vil gerne have at min
> iframe ikke flytter sig på siden, hvis jeg gør vinduet mindre .....
Jeg går ud fra at du mener, at din iframe skal være i midten hele tiden.
> og ud
> fra hvad jeg ved, så er dette ikke muligt, hvis jeg ikke bruger tables.
Jeg tror ikke du gør noget med din table, som ikke kan gøres med CSS.
Jeg har smækket et par hurtige eksempler sammen. Jeg har ikke lige taget
hensyn til IE's fejl-implementering af "margin: auto" og "text-align:
center", så det er ikke centreret i IE. Men det kan der nemt gøres noget
ved.
I det første eksempel har jeg blot genskabt det, jeg så i browseren. Det er
lavet uden brug af billeder.
I det andet eksempel har jeg taget udgangspunkt i dine billeder.
Begge validerer i øvrigt, både html og css.
________________________________________________________________
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
background-color: #000000;
margin: 0px;
}
#outerbox {
position: relative;
width: 761px;
height: 438px;
margin-top: 67px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
background-color: white;
}
#upperhalf {
position: absolute;
top: 0px;
left: 0px;
width: 761px;
height: 246px;
padding: 0px;
background-color: #9ca8d2;
z-index: 0;
}
#lowerhalf {
position: absolute;
top: 246px;
left: 0px;
width: 761px;
height: 192px;
padding: 0px;
background-color: #b8bab9;
z-index: 0;
}
#upperextra {
position: absolute;
top: 60px;
left: 61px;
width: 637px;
height: 186px;
background-color: #9ca8d2;
border: 1px solid #ffffff;
padding: 0px;
z-index: 1;
}
#borderhider {
position: absolute;
top: 60px;
left: 107px;
width: 547px;
height: 1px;
padding: 0px;
background-color: #9ca8d2;
z-index: 2;
}
#lowerextra {
position: absolute;
top: 246px;
left: 61px;
width: 639px;
height: 126px;
padding: 0px;
background-color: #fefefe;
z-index: 1;
}
#centerpeace {
position: absolute;
top: 72px;
left: 96px;
width: 569px;
height: 287px;
padding: 0px;
border-width: 0px;
background-color: #fefefe;
z-index: 1;
}
</style>
</head>
<body>
<div id="outerbox">
<div id="upperhalf"></div>
<div id="lowerhalf"></div>
<div id="upperextra"></div>
<div id="borderhider"></div>
<div id="lowerextra"></div>
<iframe id="centerpeace" src="
http://google.com" name="content">[Din
browser understøtter desværre ikke frames. Derfor kan du ikke se denne
side.]</iframe>
</div>
</body>
</html>
________________________________________________________________
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
background-color: #000000;
margin: 0px;
}
#outerbox {
position: relative;
width: 935px;
height: 567px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
background-color: white;
}
#piece1 {
position: absolute;
top: 0px;
left: 0px;
width: 935px;
height: 139px;
padding: 0px;
background-image: url("images/index_01.jpg");
background-repeat: no-repeat;
}
#piece2 {
position: absolute;
top: 139px;
left: 0px;
width: 211px;
height: 287px;
padding: 0px;
background-image: url("images/index_02.jpg");
background-repeat: no-repeat;
}
#piece4 {
position: absolute;
top: 139px;
left: 780px;
width: 155px;
height: 287px;
padding: 0px;
background-image: url("images/index_04.jpg");
background-repeat: no-repeat;
}
#piece5 {
position: absolute;
top: 426px;
left: 0px;
width: 935px;
height: 141px;
padding: 0px;
background-image: url("images/index_05.jpg");
background-repeat: no-repeat;
}
#centerpeace {
position: absolute;
top: 139px;
left: 211px;
width: 569px;
height: 287px;
padding: 0px;
border-width: 0px;
background-color: #fefefe;
z-index: 1;
}
</style>
</head>
<body>
<div id="outerbox">
<div id="piece1"></div>
<div id="piece2"></div>
<iframe id="centerpeace" src="
http://google.com" name="content">[Din
browser understøtter desværre ikke frames. Derfor kan du ikke se denne
side.]</iframe>
<div id="piece4"></div>
<div id="piece5"></div>
<!--<img src="images/index_05.jpg" width="935" height="141" alt="">-->
</div>
</body>
</html>
________________________________________________________________
Jeg håber du kan få lidt inspiration ud af det. :)
Men husk, det er bare noget der er hurtigt smækket sammen, bare for at vise
at det kan lade sig gøre. Næste skridt kunne være at gøre koden pæn.
--
Mvh.
Niels Andersen
(la nels. anersyn.)