|
|
#1
04.08.05, 18:22
|
||||
|
||||
|
ausrichtung mit css
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;
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>
|
| Lesezeichen |
| Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1) | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Bild auf Basis von Ausrichtung skalieren | Zaphod | Hilfestellung, Tipps und Tricks | 6 | 10.09.09 16:01 |
ausrichtung mit css
Baum-Darstellung