[gelöst][CSS] div-elemente Ausrichten.
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-Code:
<?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:
Code:
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
