PDA

Vollständige Version anzeigen : Web-Design ausrichtung mit css

socke
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:

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

<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>
Fobby
04.08.05, 18:50
Hm, nicht einfach, habs mir mal angeschaut ... das Problem ist, dass ja jedes Bild/Element absolut positioniert wird. Das heißt, du kannst so viele Tabellen und divs drumherumklemmen, wie du willst, da wird sich nix ändern ;)
Das einfachste wäre natürlich, das angezeigte in einer Tabelle anzuordnen und diese dann mittig auszurichten, nur willst du das ja mit CSS lösen - was prinzipiell ja der "sauberere" Weg ist. Hm ... ich bastel noch etwas herum und meld mich, wenn ich nen Weg gefunden habe :whistling

/edit:
also ich hab zumindestens eine Möglichkeit gefunden, das ganze Ding irgendwie koordiniert zu bewegen ... es wird ... langsam ... :tease:
chataya
05.08.05, 02:42
mit absoluten positionen arbeite ich eigentlich überhaupt nicht ... für meinen geschmack sind tabellen die "schönere" und vor allem variablere alternative. warum willst du denn unbedingt alles fix positionieren?
socke
05.08.05, 12:08
will ich ja gar nicht! *g*
imageready wollte das so, als ich bei den ausgabeoptionen "css erstellen" aktiviert hab.. ;)
ich glaub mit absoluten positionen is da nix zu machen.. ich müsste für jede auflösungsstufe ausrechnen wie weit der einzug ist um das ganze zu zentrieren, von hand die pixel eintragen und dann noch für jede auflösung ne andere css anlegen. :vogelzeig

also ich geh zurück zu meiner tabellenform. css is hier ja eigentlich eh unnötig, weil am hauptlayout nachträglich sowieso nix mehr groß geändert werden muss.

danke trotzdem euch beiden! :)
phoenix
05.08.05, 19:21
also ich würde das ganze ebenfalls neu erstellen lassen von IR, ohne css -> position:absolute.

css kannst du ja immer noch einsetzen für textlink-, text formatierungen etc.
socke
05.08.05, 20:16
jap. aber geht ja eh nur um diese indexseite, text is ja ausschließlich in dem frame. und tabellen- und textformatierung check ich grad noch. :)

ich find ir könnte gerade bezüglich der css-geschichte noch kleinere verbesserungen vertragen. also wenn schon css-gesülze dann doch bitte richtig, liebe firma adobe! :nein