Restrukturierung des \"Design\"-Systems. Aufteilung in 5 Bereiche

[mahe]

OMG!!!
-)
-)  
-)  
-)
-)  
-)  
Das is doch nie und nimmer valid ...

[otti_mania]

@Powie
Janatürlich sind es zwei Lösungswege sinds aber auch ohne die Seperatoren oder?
@mahe
Ich hab nur mal die beiden Dateien Alleine validierenlassen und alles was er bemeckert sind Powies bestandteile aber die DIVs sind valid.

[otti_mania]

Also ich bin der meinung das die variable Breite kein Problem darstellt!
ich habe jetzt auf unserem Testsystem mal ein durcheinander gewürfeltes Design erstellt und das läuft einwandfrei!
Ich habe im laufe meiner Arbeit sogar herausgefunden das wir auf die DIVs verzichten können ausser für den ACP da bleit es erst mal weiter bei einem DIV.
Ich habe weiter dein System etwas verschmälert und die in_bottom.php und in_top.php rausgeschnissen.
Die Dateistruktur ist nun absteigend:
design.css
kopf.php
hader.php
fuss.php
bottom.php
kopf.php:

 
 
fuss.php:

 
 
ich habe um zu verdeutlichen das es möglich ist alle Bereiche unterschiedlich aussehen zu lassen volgendes CSS benutzt.

/* ############################################################ */
/*                                                              */
/*        Style-Sheet für das i|Sys von i|NSPIRITO              */
/*       erstellt von Christian Ortwig alias otti_mania         */
/*                       22.06.2oo7                             */
/*                                                              */
/*      Weiteren Stuff gibts unter http://www.inspirito.de      */
/*                                                              */
/*                    visit my websites:                        */
/*             www.ottimania.de | www.ounds-kg.de               */
/*                                                              */
/* ############################################################ */
/* ############################################################ */
/*                         Kopf Klassen                         */
/* ############################################################ */ 
#kopf .body {
  background: #FFFFFF;
  background-image: url(http://www.ottimania.de/bg_kachel.jpg);
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 12px;
}
#kopf .table { border: 0px; font-size: 12px; }
#kopf table.content { border-width: 0px; margin-bottom: 5px; padding: 0px; background-color: #000; }
#kopf table.head    { border-width: 0px; margin-bottom: 5px; padding: 0px; background-color: #000; }
#kopf table.info    { border-width: 0px; margin-bottom: 5px; padding: 0px; background-color: #000; }
#kopf table.panel   { border-width: 0px; margin-bottom: 5px; padding: 0px; background-color: #000; width: 150px; align: center ; }
#kopf table.panel th {
font-size: 10px;
}
#kopf .th { font-size: 13px; }
#kopf .td { font-size: 13px; }
 
#kopf td.head {
  background-image: url(http://www.ottimania.de/td_head.gif);
  width:100%;
  background-color: #C0C0C0;
  color: #000000;
  text-align: left;
  font-weight: bold;
  font-size: 12px;
}
#kopf th.head {
  background-image: url(http://www.ottimania.de/th_head.jpg); width: 100%;
  background-color: #C0C0C0;
  color: #F0F0F0;
  text-align: left;
  font-weight: bold;
  font-size: 12px;
  padding-left: 10px;
}
#kopf th.info {
  background-color: #C0C0C0;
  color: #000000;
  font-style: italic;
  font-size : 10px;
}
#kopf td.info {
  background-color: #C0C0C0;
  color: #000000;
  font-style: italic;
  font-size : 10px;
}
#kopf th.header { background-color: #D0D0D0; }
#kopf td.header { background-color: #D0D0D0; }
#kopf td.center { background-color: #D0D0D0; }
#kopf td.top { background-color: #D0D0D0; }
#kopf td.bottom { background-color: #D0D0D0; }
#kopf td.left { background-color: #C0C0C0; }
#kopf td.even { background-color: #E0E0E0; }
#kopf td.right { background-color: #F0F0F0; }
#kopf td.odd { background-color: #F0F0F0; }
#kopf table.quote { border: 0px; }
#kopf td.quote {
  font-style: italic;
  border: 1px dashed #0000C0;
  background-color: #D0D0D0;
  padding: 3px;
}
#kopf a:link    { text-decoration: underline; color: #000000; }
#kopf a:visited { text-decoration: underline; color: #202020; }
#kopf a:active  { text-decoration: underline; color: #0C6FC2; }
#kopf a:hover   { text-decoration: underline overline; color: #000080; cursor: pointer; }
#kopf .input       { border-color: #202020; background-color: #E0E0E0; color: #000; }
#kopf input.send  { border-color: #F0F0F0; background-color: #C0C0C0; color: #000; }
#kopf .select      { background-color: #F0F0F0; border-color: #808080; font-family: arial; color: #000; }
#kopf .textarea    { background-color: #E0E0E0; border-color: #202020; font-family: arial; color: #000; font-size: 12px; }
#kopf .fieldset    { border: 1px solid #000; background-color: #E0E0E0; padding: 5px; font-size: 12px; }
#kopf .legend      { 
  border: 1px solid #000;
  background-color: #E0E0E0;
  font-size: 13px;
  font-weight: bold;
  padding: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
}
#kopf .img   { border:0px; }
#kopf div.menu {
border:1px;
border-style:dashed;
margin:5px;
padding:2px;
background-color:#F0E9CE;
}
#kopf div.content {
border:1px;
border-style:dashed;
margin:5px;
padding:2px;
background-color:#F0E9CE;
}
#kopf .form { display:inline; }
#kopf td.pleft,td.pright {
   width: 150px;
   vertical-align: top;
   margin: 0px;
   padding: 10px 0px;
}
#kopf td.pcontent {
   vertical-align: top;
   text-align: center;
   margin: 0px;
   padding: 8px;
}
#kopf th.navigation {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none; color: #ffffff;
}
#kopf td.navigation {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
text-decoration: none; color: #ffffff;
}
#kopf td.navigation a:link { text-decoration: none; color: #ffffff; }
#kopf td.navigation a:visited {text-decoration: none; color: #ffffff; }
#kopf td.navigation a:active { text-decoration: none; color: #ffffff; }
#kopf td.navigation a:hover { text-decoration: underline; color: #ffffff; }
/* ############################################################ */
/*                   Linke Navigation Klassen                   */
/* ############################################################ */ 
#links .body {
  background: #FFFFFF;
  background-image: url(http://www.ottimania.de/bg_kachel.jpg);
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 12px;
}
#links .table { border: 0px; font-size: 12px; }
#links table.content { border-width: 0px; margin-bottom: 5px; padding: 0px; background-color: #000; }
#links table.head    { border-width: 0px; margin-bottom: 5px; padding: 0px; background-color: #000; }
#links table.info    { border-width: 0px; margin-bottom: 5px; padding: 0px; background-color: #000; }
#links table.panel   {
   width:150px;
   background-color:#878787;
   margin: 5px;
   border-spacing:1px;
}
#links table.panel th {
font-size: 10px;
}
#links .th { font-size: 13px; }
#links .td { font-size: 13px; }
#links td.head {
  background-color: #ffffff;
  font-weight: bold;
background-image: url(http://www.inspirito.de/style/silverblue/images//I_05.jpg); width: 100%;
}
#links th.head {
  background-color: #ffffff;
background-image: url(http://www.inspirito.de/style/silverblue/images/I_05.jpg); width: 100%;
}
#links th.info {
  background-color: #C0C0C0;
  color: #000000;
  font-style: italic;
  font-size : 10px;
}
#links td.info {
  background-color: #C0C0C0;
  color: #000000;
  font-style: italic;
  font-size : 10px;
}
#links th.header { background-color: #D0D0D0; }
#links td.header { background-color: #D0D0D0; }
#links td.center { background-color: #D0D0D0; }
#links td.top { background-color: #D0D0D0; }
#links td.bottom { background-color: #D0D0D0; }
#links td.left { background-color: #C0C0C0; }
#links td.even { background-color: #E0E0E0; }
#links td.right { background-color: #F0F0F0; }
#links td.odd { background-color: #F0F0F0; }
#links table.quote { border: 0px; }
#links td.quote {
  font-style: italic;
  border: 1px dashed #0000C0;
  background-color: #D0D0D0;
  padding: 3px;
}
#links a:link    { text-decoration: underline; color: #000000; }
#links a:visited { text-decoration: underline; color: #202020; }
#links a:active  { text-decoration: underline; color: #0C6FC2; }
#links a:hover   { text-decoration: underline overline; color: #000080; cursor: pointer; }
#links .input       { border-color: #202020; background-color: #E0E0E0; color: #000; }
#links input.send  { border-color: #F0F0F0; background-color: #C0C0C0; color: #000; }
#links .select      { background-color: #F0F0F0; border-color: #808080; font-family: arial; color: #000; }
#links .textarea    { background-color: #E0E0E0; border-color: #202020; font-family: arial; color: #000; font-size: 12px; }
#links .fieldset    { border: 1px solid #000; background-color: #E0E0E0; padding: 5px; font-size: 12px; }
#links .legend      { 
  border: 1px solid #000;
  background-color: #E0E0E0;
  font-size: 13px;
  font-weight: bold;
  padding: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
}
#links .img   { border:0px; }
#links div.menu {
width:144px;
   background-color:#F0F0F0;
   margin-bottom: 5px;
   border-spacing:1px;
}
 
#links div.content {
border:1px;
border-style:dashed;
margin:5px;
padding:2px;
background-color:#F0E9CE;
}
#links .form { display:inline; }
#links td.pleft,td.pright {
   width: 150px;
   vertical-align: top;
   margin: 0px;
   padding: 10px 0px;
}
#links td.pcontent {
   vertical-align: top;
   text-align: center;
   margin: 0px;
   padding: 8px;
}
#links th.navigation {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none; color: #ffffff;
}
#links td.navigation {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
text-decoration: none; color: #ffffff;
}
#links td.navigation a:link { text-decoration: none; color: #ffffff; }
#links td.navigation a:visited {text-decoration: none; color: #ffffff; }
#links td.navigation a:active { text-decoration: none; color: #ffffff; }
#links td.navigation a:hover { text-decoration: underline; color: #ffffff; }
/* ############################################################ */
/*                       Content Klassen                        */
/* ############################################################ */ 
#content .body {
  background: #FFFFFF;
  background-image: url(http://www.ottimania.de/bg_kachel.jpg);
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 12px;
}
#content .table { border: 0px; font-size: 12px; }
#content table.content { border-width: 0px; margin-bottom: 5px; padding: 0px; background-color: #000; }
#content table.head    { border-width: 0px; margin-bottom: 5px; padding: 0px; background-color: #000; }
#content table.info    { border-width: 0px; margin-bottom: 5px; padding: 0px; background-color: #000; }
#content table.panel   { border-width: 0px; margin-bottom: 5px; padding: 0px; background-color: #000; width: 150px; align: center ; }
#content table.panel th {
font-size: 10px; color: 000000;
}
#content .th { font-size: 13px; }
#content .td { font-size: 13px; }
#content td.head {
  background-image: url(http://www.inspirito.de/style/silverblue/images/I_12.gif);
  width:100%;
  background-color: #C0C0C0;
  color: #000000;
  text-align: left;
  font-weight: bold;
  font-size: 12px;
}
#content th.head {
  background-image: url(http://www.inspirito.de/style/silverblue/images/I_12.gif); width: 100%;
  background-color: #C0C0C0;
  color: #000000;
  text-align: left;
  font-weight: bold;
  font-size: 12px;
  padding-left: 10px;
}
#content th.info {
  background-color: #C0C0C0;
  color: #000000;
  font-style: italic;
  font-size : 10px;
}
#content td.info {
  background-color: #C0C0C0;
  color: #000000;
  font-style: italic;
  font-size : 10px;
}
#content th.header { background-color: #D0D0D0; }
#content td.header { background-color: #D0D0D0; }
#content td.center { background-color: #D0D0D0; }
#content td.top { background-color: #D0D0D0; }
#content td.bottom { background-color: #D0D0D0; }
#content td.left { background-color: #C0C0C0; }
#content td.even { background-color: #E0E0E0; }
#content td.right { background-color: #F0F0F0; }
#content td.odd { background-color: #F0F0F0; }
#content table.quote { border: 0px; }
#content td.quote {
  font-style: italic;
  border: 1px dashed #0000C0;
  background-color: #D0D0D0;
  padding: 3px;
}
#content a:link    { text-decoration: underline; color: #000000; }
#content a:visited { text-decoration: underline; color: #202020; }
#content a:active  { text-decoration: underline; color: #0C6FC2; }
#content a:hover   { text-decoration: underline overline; color: #000080; cursor: pointer; }
#content .input       { border-color: #202020; background-color: #E0E0E0; color: #000; }
#content input.send  { border-color: #F0F0F0; background-color: #C0C0C0; color: #000; }
#content .select      { background-color: #F0F0F0; border-color: #808080; font-family: arial; color: #000; }
#content .textarea    { background-color: #E0E0E0; border-color: #202020; font-family: arial; color: #000; font-size: 12px; }
#content .fieldset    { border: 1px solid #000; background-color: #E0E0E0; padding: 5px; font-size: 12px; }
#content .legend      { 
  border: 1px solid #000;
  background-color: #E0E0E0;
  font-size: 13px;
  font-weight: bold;
  padding: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
}
#content .img   { border:0px; }
#content div.menu {
border:1px;
border-style:dashed;
margin:5px;
padding:2px;
background-color:#F0E9CE;
}
#content div.content {
border:1px;
border-style:dashed;
margin:5px;
padding:2px;
background-color:#F0E9CE;
}
#content .form { display:inline; }
#content td.pleft,td.pright {
   width: 150px;
   vertical-align: top;
   margin: 0px;
   padding: 10px 0px;
}
#content td.pcontent {
   vertical-align: top;
   text-align: center;
   margin: 0px;
   padding: 8px;
}
#content th.navigation {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none; color: #ffffff;
}
#content td.navigation {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
text-decoration: none; color: #ffffff;
}
#content td.navigation a:link { text-decoration: none; color: #ffffff; }
#content td.navigation a:visited {text-decoration: none; color: #ffffff; }
#content td.navigation a:active { text-decoration: none; color: #ffffff; }
#content td.navigation a:hover { text-decoration: underline; color: #ffffff; }
/* ############################################################ */
/*                   Rechte Navigation Klassen                   */
/* ############################################################ */ 
#rechts body {
  font-family: Verdana,Arial,Helvetica,sans-serif;
  background-color: #E7E5DD;
  font-size: 12px;
  color: #000000;
}
#rechts table { border-width:0px; }
#rechts table.content {
   border-width:0px;
   margin: 5px;
   padding: 0px;
   background-color: #4D4D62;
   border-spacing:1px;
}
#rechts table.head {
   border-width:0px;
   margin: 5px;
   padding: 0px;
   background-color: #4D4D62;
   border-spacing:1px;
}
#rechts table.info {
   border-width:0px;
   margin:5px;
   padding: 0px;
   background-color: #4D4D62;
   border-spacing:1px;
}
#rechts table.panel   {
   width:150px;
   background-color:#4D4D62;
   margin:5px;
   border-spacing:1px;
}
#rechts table.panel th {
font-size: 10px;
}
#rechts th { font-size: 13px; }
#rechts td { font-size: 12px; }
#rechts th.head {
  background-color: #BE891B;
  filter: progid:DXImageTransform.Microsoft.Gradient(endColorstr=\"#BE891B\", startColorstr=\"#F8F5E4\", gradientType=\"0\");
}
#rechts td.head {
  background-color: #BE891B;
  font-weight: bold;
  filter: progid:DXImageTransform.Microsoft.Gradient(endColorstr=\"#BE891B\", startColorstr=\"#F8F5E4\", gradientType=\"0\");
}
#rechts th.info   { background-color: #9F966F; border: 1px solid #4583C0; }
#rechts td.info   { background-color: #9F966F; }
#rechts th.header { background-color: #D9B359; font-weight: bold; }
#rechts td.header { background-color: #D9B359; font-size: 9px; }
#rechts td.left   { background-color: #E6DB8E; }
#rechts td.right  { background-color: #F0E9B8; }
#rechts td.odd    { background-color: #E6DB8E; }
#rechts td.even   { background-color: #F0E9B8; }
#rechts td.center { background-color: #C19D66; }
#rechts td.top    { background-color: #C19D66; }
#rechts td.bottom { background-color: #C19D66; }
#rechts table.quote {
  background-color: #E6DB8E;
  border: 1px solid #4D4D62;
}
#rechts td.quote {
  padding: 3px;
  background-color: #E6DB8E;
  border-top: 1px dashed #4D4D62;
}
#rechts a:link {text-decoration: underline; color: #000; }
#rechts a:visited { text-decoration: underline; color: #000; }
#rechts a:active { text-decoration: underline; color: #000; }
#rechts a:hover { text-decoration: underline overline; color: #000; background-color: #E8CF98; }
#rechts input       { border: 1px solid #999; background-color: #F8F5E4; font-family: Verdana,Helvetica; color: #000; }
#rechts input.send  { border: 1px solid #999; background-color: #F8F5E4; font-family: Verdana,Helvetica; color: #000; }
#rechts select      { border: 1px solid #999; background-color: #F8F5E4; font-family: Verdana,Helvetica; color: #000; }
#rechts textarea    { border: 1px solid #999; background-color: #F8F5E4; font-family: Verdana,Helvetica; color: #000; font-size: 12px; }
#rechts fieldset    { border: 1px solid #999; background-color: #F8F5E4; padding-bottom: 5px; padding-left: 2px; padding-right: 2px; padding-top: 5px; }
#rechts legend {
  border: 1px solid #999;
  background-color: #D9B359;
  font-family: Verdana, Arial, sans-serif;
  font-size: 15px;
  font-weight: bold;
  padding: 2px;
}
#rechts img   { border:0px; }
#rechts div.menu {
border:1px;
border-style:dashed;
margin:5px;
padding:2px;
background-color:#F0E9CE;
}
#rechts div.content {
border:1px;
border-style:dashed;
margin:5px;
padding:2px;
background-color:#F0E9CE;
}
#rechts form { display:inline; }
#rechts td.pleft,td.pright {
   width: 150px;
   vertical-align: top;
   margin: 0px;
   padding: 10px 0px;
}
#rechts td.pcontent {
   vertical-align: top;
   text-align: center;
   margin: 0px;
   padding: 8px;
}
/* ############################################################ */
/*                         Fuß Klassen                          */
/* ############################################################ */
#fuss .body {
  background: #FFFFFF;
  background-image: url(http://www.ottimania.de/bg_kachel.jpg);
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 12px;
}
#fuss .table { border: 0px; font-size: 12px; }
#fuss table.content { border-width: 0px; margin-bottom: 5px; padding: 0px; background-color: #000; }
#fuss table.head    { border-width: 0px; margin-bottom: 5px; padding: 0px; background-color: #000; }
#fuss table.info    { border-width: 0px; margin-bottom: 5px; padding: 0px; background-color: #000; }
#fuss table.panel   { border-width: 0px; margin-bottom: 5px; padding: 0px; background-color: #000; width: 150px; align: center ; }
#fuss table.panel th {
font-size: 10px;
}
#fuss .th { font-size: 13px; }
#fuss .td { font-size: 13px; }
#fuss td.head {
  background-image: url(http://www.ottimania.de/td_head.gif);
  width:100%;
  background-color: #C0C0C0;
  color: #000000;
  text-align: left;
  font-weight: bold;
  font-size: 12px;
}
#fuss th.head {
  background-image: url(http://www.ottimania.de/th_head.jpg); width: 100%;
  background-color: #C0C0C0;
  color: #F0F0F0;
  text-align: left;
  font-weight: bold;
  font-size: 12px;
  padding-left: 10px;
}
#fuss th.info {
  background-color: #C0C0C0;
  color: #000000;
  font-style: italic;
  font-size : 10px;
}
#fuss td.info {
  background-color: #C0C0C0;
  color: #000000;
  font-style: italic;
  font-size : 10px;
}
#fuss th.header { background-color: #D0D0D0; }
#fuss td.header { background-color: #D0D0D0; }
#fuss td.center { background-color: #D0D0D0; }
#fuss td.top { background-color: #D0D0D0; }
#fuss td.bottom { background-color: #D0D0D0; }
#fuss td.left { background-color: #C0C0C0; }
#fuss td.even { background-color: #E0E0E0; }
#fuss td.right { background-color: #F0F0F0; }
#fuss td.odd { background-color: #F0F0F0; }
#fuss table.quote { border: 0px; }
#fuss td.quote {
  font-style: italic;
  border: 1px dashed #0000C0;
  background-color: #D0D0D0;
  padding: 3px;
}
#fuss a:link    { text-decoration: underline; color: #000000; }
#fuss a:visited { text-decoration: underline; color: #202020; }
#fuss a:active  { text-decoration: underline; color: #0C6FC2; }
#fuss a:hover   { text-decoration: underline overline; color: #000080; cursor: pointer; }
#fuss .input       { border-color: #202020; background-color: #E0E0E0; color: #000; }
#fuss input.send  { border-color: #F0F0F0; background-color: #C0C0C0; color: #000; }
#fuss .select      { background-color: #F0F0F0; border-color: #808080; font-family: arial; color: #000; }
#fuss .textarea    { background-color: #E0E0E0; border-color: #202020; font-family: arial; color: #000; font-size: 12px; }
#fuss .fieldset    { border: 1px solid #000; background-color: #E0E0E0; padding: 5px; font-size: 12px; }
#fuss .legend      { 
  border: 1px solid #000;
  background-color: #E0E0E0;
  font-size: 13px;
  font-weight: bold;
  padding: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
}
#fuss .img   { border:0px; }
#fuss div.menu {
border:1px;
border-style:dashed;
margin:5px;
padding:2px;
background-color:#F0E9CE;
}
#fuss div.content {
border:1px;
border-style:dashed;
margin:5px;
padding:2px;
background-color:#F0E9CE;
}
#fuss .form { display:inline; }
#fuss td.pleft,td.pright {
   width: 150px;
   vertical-align: top;
   margin: 0px;
   padding: 10px 0px;
}
#fuss td.pcontent {
   vertical-align: top;
   text-align: center;
   margin: 0px;
   padding: 8px;
}
#fuss th.navigation {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none; color: #ffffff;
}
#fuss td.navigation {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
text-decoration: none; color: #ffffff;
}
#fuss td.navigation a:link { text-decoration: none; color: #ffffff; }
#fuss td.navigation a:visited {text-decoration: none; color: #ffffff; }
#fuss td.navigation a:active { text-decoration: none; color: #ffffff; }
#fuss td.navigation a:hover { text-decoration: underline; color: #ffffff; }
/* ############################################################ */
/*                         Sonder Klassen                       */
/* ############################################################ */
/* Hier könnt Ihr Klassen anlegen die eurer Meinung nach noch fehlen */
/* ############################################################ */
/*                         ACP Klassen                          */
/* ############################################################ */ 
#admin body {
  font-family: Verdana,Arial,Helvetica,sans-serif;
  background-color: #E7E5DD;
  font-size: 12px;
  color: #000000;
}
#admin table { border-width:0px; }
#admin table.content {
   border-width:0px;
   margin: 5px;
   padding: 0px;
   background-color: #4D4D62;
   border-spacing:1px;
}
#admin table.head {
   border-width:0px;
   margin: 5px;
   padding: 0px;
   background-color: #4D4D62;
   border-spacing:1px;
}
#admin table.info {
   border-width:0px;
   margin:5px;
   padding: 0px;
   background-color: #4D4D62;
   border-spacing:1px;
}
#admin table.panel   {
   width:150px;
   background-color:#4D4D62;
   margin:5px;
   border-spacing:1px;
}
#admin table.panel th {
font-size: 10px;
}
#admin th { font-size: 13px; }
#admin td { font-size: 12px; }
#admin th.head {
  background-color: #BE891B;
  filter: progid:DXImageTransform.Microsoft.Gradient(endColorstr=\"#BE891B\", startColorstr=\"#F8F5E4\", gradientType=\"0\");
}
#admin td.head {
  background-color: #BE891B;
  font-weight: bold;
  filter: progid:DXImageTransform.Microsoft.Gradient(endColorstr=\"#BE891B\", startColorstr=\"#F8F5E4\", gradientType=\"0\");
}
#admin th.info   { background-color: #9F966F; border: 1px solid #4583C0; }
#admin td.info   { background-color: #9F966F; }
#admin th.header { background-color: #D9B359; font-weight: bold; }
#admin td.header { background-color: #D9B359; font-size: 9px; }
#admin td.left   { background-color: #E6DB8E; }
#admin td.right  { background-color: #F0E9B8; }
#admin td.odd    { background-color: #E6DB8E; }
#admin td.even   { background-color: #F0E9B8; }
#admin td.center { background-color: #C19D66; }
#admin td.top    { background-color: #C19D66; }
#admin td.bottom { background-color: #C19D66; }
#admin table.quote {
  background-color: #E6DB8E;
  border: 1px solid #4D4D62;
}
#admin td.quote {
  padding: 3px;
  background-color: #E6DB8E;
  border-top: 1px dashed #4D4D62;
}
#admin a:link {text-decoration: underline; color: #000; }
#admin a:visited { text-decoration: underline; color: #000; }
#admin a:active { text-decoration: underline; color: #000; }
#admin a:hover { text-decoration: underline overline; color: #000; background-color: #E8CF98; }
#admin input       { border: 1px solid #999; background-color: #F8F5E4; font-family: Verdana,Helvetica; color: #000; }
#admin input.send  { border: 1px solid #999; background-color: #F8F5E4; font-family: Verdana,Helvetica; color: #000; }
#admin select      { border: 1px solid #999; background-color: #F8F5E4; font-family: Verdana,Helvetica; color: #000; }
#admin textarea    { border: 1px solid #999; background-color: #F8F5E4; font-family: Verdana,Helvetica; color: #000; font-size: 12px; }
#admin fieldset    { border: 1px solid #999; background-color: #F8F5E4; padding-bottom: 5px; padding-left: 2px; padding-right: 2px; padding-top: 5px; }
#admin legend {
  border: 1px solid #999;
  background-color: #D9B359;
  font-family: Verdana, Arial, sans-serif;
  font-size: 15px;
  font-weight: bold;
  padding: 2px;
}
#admin img   { border:0px; }
#admin div.menu {
border:1px;
border-style:dashed;
margin:5px;
padding:2px;
background-color:#F0E9CE;
}
#admin div.content {
border:1px;
border-style:dashed;
margin:5px;
padding:2px;
background-color:#F0E9CE;
}
#admin form { display:inline; }
#admin td.pleft,td.pright {
   width: 150px;
   vertical-align: top;
   margin: 0px;
   padding: 10px 0px;
}
#admin td.pcontent {
   vertical-align: top;
   text-align: center;
   margin: 0px;
   padding: 8px;
}

 
 
Ich weis auch das ich noch einiges am CSS optimieren muss aber für einen ersten Test habe ich das mal ausser acht gelassen.
Vieleicht könntet Ihr euch ja dazu durchringen  dieses Style mal zu testen bzw zu schaun ob ich irgendwas ausser aacht lasse was wichtig wäre?

[Powie]

wie gerad mit Otti diskutiert mal einfach so als Q&D Kommentar:
http://www.powie.de/temp/pbox.png\" alt=\"pbox.png\" />

und was ist rechts und link mit dem leeren Bereich?

[Powie]

reload!

[k00ni]

Ich denke, die beiden \"leeren\" Bereiche links und rechts sind einfach nur Buffer für den Content. Hättest du noch Ideen, was man da rein machen könnte?
 
Grüße

[otti_mania]

Ich finde die Idee wie auch schon in der Diskusion mit Powie gesagt sehr sehr GEIL!
Das macht meinen eher Statischen gedanken dann extrem Variabel.
Ich stelle mir nur vor was dann designtechnisch alles möglich wäre (ALLES).
Und was ich daran auch für sehr gut erachte ist der Inovative vorsprung vor TPL-Systemen wie Smarty ect.
Kurz zusammengafasst nicht so aufgeblasen wie Smarty & Co aber dafür min doppelt so Variabel!

[mahe]

da fehlt pbox_inbottom /uploads/emoticons/icon_e_biggrin.gif.1a84f5257b36e14b36d04985314f877f.gif\" alt=\":-D\" />

Ich lese da was von 5 Bereichen, ich zähle aber mehr als 5. :gaga:

[k00ni]

da fehlt pbox_inbottom[/quote]
Ich wäre auch dafür. Für uns wäre das zum Beispiel interessant, da man damit beispielsweise Banner o.ä. einblenden könnte.
[edit]@A7: Kannst du auch lesen? Zählen ist ja nicht sehr schwer, aber lesen und mitdenken ist schon wichtig, denn dann erkennt man auch, dass hier im Thread eine Entwicklung von statten gegangen ist. /uploads/emoticons/icon_e_wink.gif.3167d127940f44558fbf1ccd9b6d60a9.gif\" alt=\";-)\" />[/edit]
Grüße

[otti_mania]

Original von A7 Ich lese da was von 5 Bereichen, ich zähle aber mehr als 5. :gaga:
[/quote]
Das kommt davon wenn mann nur den Titel und den letzten Beitrag liest /uploads/emoticons/icon_e_wink.gif.c059000ae48ff64afa53be0962c021f2.gif\" alt=\":wink:\" />

Sachlich bleiben, Jungs! Oder soll ich Kinder sagen? Ich beziehe mich auf den Ausgangsthread!

[otti_mania]

Stimmt die pbox_inbottom würde auch noch fehlen!
Wobei ich dir ganz erlich sage das ich finde das Sie etwas undurchsichtig seien können bottom, inbottom, top, intop ich schmeisse immer die beiden INs raus ^^
 
[ot]  @ A7:
Das ist sehr Sachlich - Ich wollte damit nur sagen das du dir bitte den ganzen Thread (Alle Beiträge) Durchliest!
Dann hättest du schnell gemerkt das es ja eine Entwicklung gab und würdest das Thema nicht durch deine UNQUALIFIZIERTEN Beiträge aufweichen![/ot]

Lerne lesen und moser nicht so kindisch rum! Ich beziehe mich die erste grafische Darstellung!