[CSS] div-elemente Ausrichten.

**Borky** · 16.08.2007 18: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-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

Thema: [CSS] div-elemente Ausrichten.

Themen-Optionen

Anzeige

Baum-Darstellung

[gelöst][CSS] div-elemente Ausrichten.

Berechtigungen