PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : [CSS] div-elemente Ausrichten.


Borky
16.08.2007, 19:26
Hi Leutz,
ich habe mein ehemals mit verschachtelten Tabellen erstellte Layout auf Divs umgestellt. Zumindest versuche ich selbiges.

Ich lasse einfach mal code und bilder für sich sprechen.

So sieht es gerade aus:

http://anguel.an.funpic.de/layout.png

soweit so gut. nun sollte eigentlich die ganze sache so angeordnet in jeder auflösung mittig ist.

folgender Code steckt hinter dem Layout:



<?php
//main.php
include("func/db-connect.php");
session_start();
$_SESSION['last_page'] = $_GET['page'];
echo'
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="func/layout.css">
</HEAD>
<BODY>
<center>
<div class="border" width="900">
<div class="header" width="900" height="147">
<table width="900" height="147" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="900" height="147" align="center" valign="middle" background="images/bg/header_back.png">
<table width="894" height="141" border="0" cellpadding="0" cellspacing="0"
<tr>
<td width="894" height="141" align="center" valign="middle" background="images/bg/header_inlay_test.png">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="host" width="98" height="60">
<table width="98" height="60" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="98" height="19" align="center" valign="middle" background="images/bg/host_top.png">
</td>
</tr>
<tr>
<td width="98" height="37" align="center" valign="middle" background="images/bg/host_middle.png">
<img src="images/bg/host_middle_test.png">
</td>
</tr>
<tr>
<td width="98" height="4" align="center" valign="middle" background="images/bg/host_bottom.png"
</tr>
</table>
</div>
<div class="banner" width="474" height="66">
<table width="474" height="66" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="474" height="66" align="center" valign="middle" background="images/bg/banner_back.png">
<table width="468" height="60" border="0" cellpadding="0" cellspacing="0"
<tr>
<td width="468" height="60" align="center" valign="middle" background="images/bg/banner_inlay_test.png">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="content" width="600">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="4" height="19" background="images/bg/oben_ecke_links_hoch.png"></td>
<td width="592" height="19">
<table width="592" height="19" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="199" height="19" background="images/bg/oben_hoch.png" valign="midlle"></td>
<td width="13" height="19" background="images/bg/oben_ubergang_links.png"></td>
<td width="380" height="19" background="images/bg/oben_niedrig.png"></td>
</tr>
</table>
</td>
<td width="4" height="19" background="images/bg/oben_ecke_rechts_niedrig.png"></td>
</tr>
<tr>
<td width="4" background="images/bg/mitte_links.png"></td>
<td width="592" background="images/bg/mitte_bg.png">
testtext
</td>
<td width="4" background="images/bg/mitte_rechts.png"></td>
</tr>
<tr>
<td width="4" heigth="4" background="images/bg/unten_ecke_links.png"></td>
<td height="4" background="images/bg/unten_mitte.png"></td>
<td width="4" heigth="4" background="images/bg/unten_ecke_rechts.png"></td>
</tr>
</table>
</div>';
include("nav_left.php");
include("nav_right.php");
echo'
</div>
</center>
</BODY>
</HTML>
';
?>


Und die dazugehöhrige CSS datei:



BODY {
font-size: 12px;
color: #000000;
background-image:url(../images/bg/bg.png);
text-align: center;
}

div
.border {
position: fixed;
top: 0px;
margin-left: 50%;
margin-right: 50%;
}
.header {
position: absolute;
top: 0px;
left: 0px;
}
.host {
position: absolute;
top: 200px;
left: 250px;
}
.banner {
position: absolute;
top: 200px;
left: 400px;
}
.nav_left {
position: absolute;
top: 200px;
left: 0px;
}
.content {
position: absolute;
top: 350px;
left: 150px;
}
.nav_right {
position: absolute;
top: 350px;
left: 760px;
}


Würde mich über lösungsvorschläge freuen.

In diesem Sinne Borky
Drakes
16.08.2007, 20:02
Dann Positoniere nicht mit px sondern mit em oder %. Wobei Prozent einen Vorteil und einen Nachteil hat. Der Vorteil ist, dass es dann wirklich nach Prozent geht, Nachteil, wenn man das Fenster minimiert, geht der Inhalt auch zusammen. Ich würde em empfehlen (entspricht Schriftgrösse).
Teelicht
16.08.2007, 21:58
Ich würde dir empfehlen, die Seite komplett neu zu machen, mit CSS und em. Das fände ich jedenfalls einfacher als ein Tabellenlayout in ein CSS Layout umzuschreiben...
Du weißt ja, wie sie aussehen soll, dann schreib dir eine neue Seite, die genauso aussieht, nur mit CSS statt Tabellen. Ist imo einfacher.
Borky
05.09.2007, 12:55
Ok, so richtig hat mir jetzt noch nichts geholfen. ich versuche es nocheinmal anders mit dem erklären.

Ich möchte, das die anordnung der div elemente auf allen auflösungen gleich mittig ist. also habe ich um die elemente einen weiteren div-tag gezogen. (den die border class). nun sollen alle anderen div elemente anhand des Randes dieses Border-divs ausgerichtet werden, und nicht anhand des Browserfensters.

im Selfhtml steht folgendes:



static = keine spezielle Positionierung, normaler Elementfluss (Normaleinstellung).
relative = relative Positionierung (Verschiebung), gemessen an der Normalposition oder Anfangsposition des Elements selbst.
absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Vorfahrenelements, das nicht die Normaleinstellung position:static aufweist. Scrollt mit.
fixed = absolute Positionierung, gemessen am "Viewport", d.h. am Browserfenster. Bleibt beim Scrollen stehen.


deshalb hat der bordertag die position fixed, und der rest absolute. jedoch werden die elemente noch immer am Browserfenster ausgerichtet. sprich sie nemen den border-tag nicht als Vorfahrenelement. und genau da liegt mein Problem.

Ich betone noch einmal: es geht NICHT um den Inhalt der Div-Elemente, sondern um deren Ausrichtung innerhalb des Browserfensters

Borky

Done. jetzt klappts. Hab ein fertiges Beispiel umgeschrieben. sehe zuwar zu meinem vorherigem keinen großen unterschied, aber jetzt gehts auf jeden fall