heyho..
wie der ein oder andere vielleicht bermekt hat, geht es bei meiner seite (s. sig) langsam in die heiße (design-)endphase.
hab jetzt glücklicherweise entdeckt, dass man bei IR den ganzen tabellenkram auch als css machen kann.
da ich mich mit css aber kaum auskenn, hab ich jetzt ein kleines problemchen. ich würde gern den ganzen block der jetzt oben in der ecke klebt in die mitte der seite setzen, also sowohl horizontal als auch vertikal zentrieren.
nur leider sind jetzt die div-tags die die einzelnen bilder positionieren fix anhand von pixeldaten angebracht:
Code:
div.header-01 {
position:absolute;
left:0px;
top:0px;
width:219px;
height:175px;
da hilft auch ein table bzw. td (mit valign="middle" usw.) um den ganzen block aus div's herum nichts, da diese ja unbeweglich sind.
weiß jemand, was ich da machen kann?
lg, socke
Code:
<html>
<head>
<title>Chronophobic Mayfly</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (mayfly biography 3.psd) -->
<script type="text/javascript">
<!--
userAgent = window.navigator.userAgent;
browserVers = parseInt(userAgent.charAt(userAgent.indexOf("/")+1),10);
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function findElement(n,ly) {
if (browserVers < 4) return document[n];
var curDoc = ly ? ly.document : document;
var elem = curDoc[n];
if (!elem) {
for (var i=0;i<curDoc.layers.length;i++) {
elem = findElement(n,curDoc.layers[i]);
if (elem) return elem;
}
}
return elem;
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
var img;
for (var i=0; i<changeImages.arguments.length; i+=2) {
img = null;
if (document.layers) {
img = findElement(changeImages.arguments[i],0);
}
else {
img = document.images[changeImages.arguments[i]];
}
if (img) {
img.src = changeImages.arguments[i+1];
}
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
header_02_header_03_up = newImage("Bilder/header_02-header_03_up.jpg");
header_02_header_03_down = newImage("Bilder/header_02-header_03_down.jpg");
header_03_down = newImage("Bilder/header_03-down.jpg");
blog_over = newImage("Bilder/blog-over.jpg");
musik_over = newImage("Bilder/musik-over.jpg");
steckbrief_over = newImage("Bilder/steckbrief-over.jpg");
gallerie_over = newImage("Bilder/gallerie-over.jpg");
gallerie_gurke_over = newImage("Bilder/gallerie-gurke_over.jpg");
guests_over = newImage("Bilder/guests-over.jpg");
menu_left_03_gurke_over = newImage("Bilder/menu_left_03-gurke_over.jpg");
gurke_over = newImage("Bilder/gurke-over.jpg");
preloadFlag = true;
}
}
// -->
</script>
<!-- End Preload Script -->
<!-- ImageReady Styles (mayfly biography 3.psd) -->
<style type="text/css">
<!--
div.Tabelle_01 {
position:absolute;
left:0px;
top:0px;
width:700px;
height:550px;
align:center;
valign:middle;
}
div.header-01 {
position:absolute;
left:0px;
top:0px;
width:219px;
height:175px;
}
div.header-02 {
position:absolute;
left:219px;
top:0px;
width:372px;
height:175px;
}
div.header-03 {
position:absolute;
left:591px;
top:0px;
width:33px;
height:120px;
}
div.header-05 {
position:absolute;
left:624px;
top:0px;
width:76px;
height:175px;
}
div.header-04 {
position:absolute;
left:591px;
top:120px;
width:33px;
height:55px;
}
div.blog {
position:absolute;
left:0px;
top:175px;
width:100px;
height:70px;
}
div.Tabelle_02 {
position:absolute;
left:101px;
top:177px;
width:500px;
height:350px;
}
div.musik {
position:absolute;
left:600px;
top:175px;
width:100px;
height:81px;
}
div.menu-left-01 {
position:absolute;
left:0px;
top:245px;
width:100px;
height:10px;
}
div.steckbrief {
position:absolute;
left:0px;
top:255px;
width:100px;
height:74px;
}
div.menu-right-01 {
position:absolute;
left:600px;
top:256px;
width:100px;
height:175px;
}
div.menu-left-02 {
position:absolute;
left:0px;
top:329px;
width:100px;
height:11px;
}
div.gallerie {
position:absolute;
left:0px;
top:340px;
width:100px;
height:99px;
}
div.guests {
position:absolute;
left:600px;
top:431px;
width:100px;
height:94px;
}
div.menu-left-03 {
position:absolute;
left:0px;
top:439px;
width:100px;
height:14px;
}
div.gurke {
position:absolute;
left:0px;
top:453px;
width:100px;
height:72px;
}
div.bottom {
position:absolute;
left:0px;
top:525px;
width:700px;
height:25px;
}
div.iframe {
position:absolute;
left:100px;
top:175px;
width:500px;
height:350px;
}
-->
</style>
<!-- End ImageReady Styles -->
</head>
<body onload="preloadImages();" style="background-color:#000000; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; align: middle; valign: center;">
<!-- ImageReady Slices (mayfly biography 3.psd) -->
<!-- ...das mit der tabelle hier drumrum funzt ja leider nicht :( -->
<table width="100%" height="100%">
<tr>
<td width="100%" height="100%" align="center" valign="middle">
<div class="Tabelle_01">
<div class="header-01">
<img src="Bilder/header_01.jpg" width="219" height="175" alt="">
</div>
<div class="header-02">
<img name="header_02" src="Bilder/header_02.jpg" width="372" height="175" alt="">
</div>
<div class="header-03">
<a href="#"
onmouseout="changeImages('header_03', 'Bilder/header_03.jpg'); return true;"
onmousedown="changeImages('header_02', 'Bilder/header_02-header_03_down.jpg', 'header_03', 'Bilder/header_03-down.jpg'); return true;"
onmouseup="changeImages('header_02', 'Bilder/header_02-header_03_up.jpg', 'header_03', 'Bilder/header_03.jpg'); return true;">
<img name="header_03" src="Bilder/header_03.jpg" width="33" height="120" border="0" alt=""></a>
</div>
<div class="header-05">
<img src="Bilder/header_05.jpg" width="76" height="175" alt="">
</div>
<div class="header-04">
<img src="Bilder/header_04.jpg" width="33" height="55" alt="">
</div>
<div class="blog">
<a href="#"
onmouseover="changeImages('blog', 'Bilder/blog-over.jpg'); return true;"
onmouseout="changeImages('blog', 'Bilder/blog.jpg'); return true;"
onmousedown="changeImages('blog', 'Bilder/blog-over.jpg'); return true;"
onmouseup="changeImages('blog', 'Bilder/blog-over.jpg'); return true;">
<img name="blog" src="Bilder/blog.jpg" width="100" height="70" border="0" alt=""></a>
</div>
<div class="musik">
<a href="#"
onmouseover="changeImages('musik', 'Bilder/musik-over.jpg'); return true;"
onmouseout="changeImages('musik', 'Bilder/musik.jpg'); return true;"
onmousedown="changeImages('musik', 'Bilder/musik-over.jpg'); return true;"
onmouseup="changeImages('musik', 'Bilder/musik-over.jpg'); return true;">
<img name="musik" src="Bilder/musik.jpg" width="100" height="81" border="0" alt=""></a>
</div>
<div class="menu-left-01">
<img src="Bilder/menu_left_01.jpg" width="100" height="10" alt="">
</div>
<div class="steckbrief">
<a href="#"
onmouseover="changeImages('steckbrief', 'Bilder/steckbrief-over.jpg'); return true;"
onmouseout="changeImages('steckbrief', 'Bilder/steckbrief.jpg'); return true;"
onmousedown="changeImages('steckbrief', 'Bilder/steckbrief-over.jpg'); return true;"
onmouseup="changeImages('steckbrief', 'Bilder/steckbrief-over.jpg'); return true;">
<img name="steckbrief" src="Bilder/steckbrief.jpg" width="100" height="74" border="0" alt=""></a>
</div>
<div class="menu-right-01">
<img src="Bilder/menu_right_01.jpg" width="100" height="175" alt="">
</div>
<div class="menu-left-02">
<img src="Bilder/menu_left_02.jpg" width="100" height="11" alt="">
</div>
<div class="gallerie">
<a href="#"
onmouseover="changeImages('gallerie', 'Bilder/gallerie-over.jpg'); return true;"
onmouseout="changeImages('gallerie', 'Bilder/gallerie.jpg'); return true;"
onmousedown="changeImages('gallerie', 'Bilder/gallerie-over.jpg'); return true;"
onmouseup="changeImages('gallerie', 'Bilder/gallerie-over.jpg'); return true;">
<img name="gallerie" src="Bilder/gallerie.jpg" width="100" height="99" border="0" alt=""></a>
</div>
<div class="guests">
<a href="#"
onmouseover="changeImages('guests', 'Bilder/guests-over.jpg'); return true;"
onmouseout="changeImages('guests', 'Bilder/guests.jpg'); return true;"
onmousedown="changeImages('guests', 'Bilder/guests-over.jpg'); return true;"
onmouseup="changeImages('guests', 'Bilder/guests-over.jpg'); return true;">
<img name="guests" src="Bilder/guests.jpg" width="100" height="94" border="0" alt=""></a>
</div>
<div class="menu-left-03">
<img name="menu_left_03" src="Bilder/menu_left_03.jpg" width="100" height="14" alt="">
</div>
<div class="gurke">
<a href="#"
onmouseover="changeImages('gallerie', 'Bilder/gallerie-gurke_over.jpg', 'menu_left_03', 'Bilder/menu_left_03-gurke_over.jpg', 'gurke', 'Bilder/gurke-over.jpg'); return true;"
onmouseout="changeImages('gallerie', 'Bilder/gallerie.jpg', 'menu_left_03', 'Bilder/menu_left_03.jpg', 'gurke', 'Bilder/gurke.jpg'); return true;"
onmousedown="changeImages('gallerie', 'Bilder/gallerie-gurke_over.jpg', 'menu_left_03', 'Bilder/menu_left_03-gurke_over.jpg', 'gurke', 'Bilder/gurke-over.jpg'); return true;"
onmouseup="changeImages('gallerie', 'Bilder/gallerie-gurke_over.jpg', 'menu_left_03', 'Bilder/menu_left_03-gurke_over.jpg', 'gurke', 'Bilder/gurke-over.jpg'); return true;">
<img name="gurke" src="Bilder/gurke.jpg" width="100" height="72" border="0" alt=""></a>
</div>
<div class="iframe">
<iframe src="content.html" height="350" width="500" scrolling="yes" framespacing="0" frameborder="0">
<font color="#C1B693" size="1" face="Verdana, Arial, Helvetica, sans-serif">
Frame konnte nicht geladen werden.
</font>
</iframe>
</div>
<div class="bottom">
<img src="Bilder/bottom.jpg" width="700" height="25" alt="">
</div>
</div>
<!-- End ImageReady Slices -->
</td>
</tr>
</table>
</body>
</html>