Web-Design ausrichtung mit css - Photoshop-Cafe.de :: Dein Photoshop-Forum

socke · #1 04.08.05, 18:22

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>

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Zur Linear-Darstellung wechseln Zur Hybrid-Darstellung wechseln Baum-Darstellung

Ä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

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)