Layerproblem

NicNac · 06.11.2003, 11:44

Hi

Ich will jetzt mal das Grundlayout meiner Seite in CSS-Layer umprogrammieren, doch irgendwie schnall ich das mit position: absolute und irgendwie gleichzeitiger Zentrierung offenbar nicht, denn das Script hat offenbar noch Macken...

(ANMERKUNG: Code rausgeschnitten, da
a) nicht mehr aktuell, nur noch der im unteren Post
b) damit das Thema nicht zu lange wird)

Also alles hat geklappt, bis ich den main Container aufmachte, denn es sollte ja alles gemittet sein, auch der Main Container und bis dahin musste ich keine position angeben, nur gemittet. Da aber der position Container (mit You are here...) im Main Container beginnen soll und der leftbar Container auch im Main Container neben dem position container sein soll, gabs irgendwelche Probleme

Wäre dankbar für jede Hilfe

NicNac · 06.11.2003, 13:37

Hi

Also ich bin jetzt selber bisserl weitergekommen aber jetzt stecke ich endgültig fest. Es müsste eigentlich(wie bei verschachtelten Tabellen) der rightbar container bis ans Dokumentende mit dem content container mitgehen, aber das macht er nicht. Wieso?!

Der Code nochmal:

1. CSS:

PHP-Code:


			
body {

      font-family: Arial, Helvetica, sans-serif; 

      text-align: center;

      scrollbar-face-color: #A4BBD7; 

      scrollbar-highlight-color: #003366; 

      scrollbar-shadow-color: #003366; 

      scrollbar-3dlight-color: #A4BBD7; 

      scrollbar-arrow-color: white;  

      scrollbar-track-color: white; 

      scrollbar-darkshadow-color: #A4BBD7; 

      background: #CDD9E8;

     }



#topheader {

      /* anwendung eines hacks */

      /*/*/

      text-align: left;

      /**/

      margin-left: auto;

      margin-right: auto;

      margin-top: 50px;

      width: 700px;

      height: 35px;

      background: #CDD9E8;

      }

    

#middleheader {

      /* anwendung eines hacks */

      /*/*/

      text-align: left;

      /**/

      margin-left: auto;

      margin-right: auto;

      width: 700px;

      height: 1px;

      background: #003366; 

      }

      

#bottomheader {

      /* anwendung eines hacks */

      /*/*/

      text-align: left;

      /**/

      margin-left: auto;

      margin-right: auto;

      width: 700px;

      height: 77px;

      background: #A4BBD7;

      border: #003366 1px solid;

      border-top-width: 0;

      border-right-width: 1px;

      border-bottom-width: 0;

      border-left-width: 1px;

      }

      

#navigation {

      /* anwendung eines hacks */

      /*/*/

      text-align: left;

      /**/

      margin-left: auto;

      margin-right: auto;

      width: 700px;

      height: 22px;

      background: #A4BBD7;

      border: #003366 1px solid;

      }

      

#main {

      /* anwendung eines hacks */

      /*/*/

      text-align: left;

      /**/

      margin-left: auto;

      margin-right: auto;

      width: 700px;

      background: white;

      border: #003366 1px solid;

      border-top-width: 0;

      border-right-width: 0;

      border-bottom-width: 1px;

      border-left-width: 1px;

      }

      

#position {

      width: 549px;

      height: 15px;

      float: left;

      text-align: left;

      background: #E6F0FA;

      border: #003366 1px solid;

      border-top-width: 0;

      border-right-width: 0;

      border-bottom-width: 1px;

      border-left-width: 0;

          }



#rightbar {

      width: 150px;

      height: 100%;

      float: right;

      text-align: left;

      background: #A4BBD7;

      border: #003366 1px solid;

      border-top-width: 0;

      border-right-width: 1px;

      border-bottom-width: 0;

      border-left-width: 1px;

         }

         

#content {

      padding: 5px;

      float: left;

      margin: 0;

      width: 549px;

      text-align: left;

      background: white;

        }

2. Die PHP Datei:

PHP-Code:


			
<body>

<!-- Top Header !-->

<div id="topheader"><img src="images/logotop.jpg" width="124" height="35" /></div>



<!-- Middle Header !-->

<div id="middleheader"><img src="images/logomiddle.jpg" width="124" height="1" /></div>



<!-- Bottom Header !-->

<div id="bottomheader"><img src="images/logobottom.jpg" width="124" height="77" /></div>



<!-- Navigation Container !-->

<div id="navigation">

<a href="index.php?ind=home"><img src="images/home.jpg" alt="" width="103" height="20" border="0" /></a>

<a href="index.php?ind=search"><img src="images/search.jpg" alt="" width="109" height="20" border="0" /></a>

<a href="index.php?ind=view"><img src="images/memberzone.jpg" alt="" width="184" height="20" border="0" /></a>

<a href="index.php?ind=register"><img src="images/register.jpg" alt="" width="139" height="20" border="0" /></a>

<a href="index.php?ind=information"><img src="images/info.jpg" alt="" width="163" height="20" border="0" /></a>

</div>



<!-- Main Container !-->

<div id="main"> 



    <!-- Position Container !-->

    <div id="position"></div>

  

    <!-- Rightbar Container !-->

    <div id="rightbar">

    <p>aaaaaaa</p>

    <p>aaa</p>

    <p>aa</p>

    </div>

  

    <!-- Content Container !-->

    <div id="content">Inhalt</div>



</div>



</body>