powie.de Tech Forum

Hallo,
der Otti ist seit Tagen schon kräftig am werkeln. Wir haben vor, die CSS-Datei anzupassen und wollten mal Anfragen, wie dazu die Meinungen sind.
Es geht um die Aufteilung der \"Seite\" in 5 Bereiche: Kopfbereich, Links, Mitte und Rechts, sowie Unten. Um jeden der 5 Bereiche wird eine eigener div-Bereich gelegt, durch eine ID definiert. Somit hat man als Designer die Möglichkeit, dass man für jeden Bereich eigene designtechnische Abstufungen im Vergleich zu den anderen einbauen kann.
 
Als Beispiel möchte ich das an den Panels erklären:
Beispielsweise möchte man das die linken Panels anders aussehen, als die rechten. Durch die Unterteilung in Bereiche, ist das einfach. Man belässt bei den Panels einfach die Klasse \"panel\". Nur definiert man diese für jeden Bereich anders. Somit wird beim Verschieben von links nach rechts, das Panel automatisch \"angepasst\".
 
Die Umsetzung
Also aus meiner Sicht dürfte dass nicht soooo schwer werden. Es müssten nur die design.css, die kopf/fuss.php des Styles und ggf. auch die kopf/fuss.php des Styles angepasst werden. Also die div-Kontainer gesetzt werden und eventuell hier und da ein paar Änderungen.
 
Grüße

Erstellt euch einfach mal einen eigenen neuen Style, und baut diesen so auf.
Ich denke es ist vielleicht möglich, aber sicher nicht einfach. Wir haben viel in die Richtung experimentiert, aber DIV\'s sind da ein wenig..... schwierig zu steuern, insbesondere wenn man eine Seite mit variabler Breite haben möchte.

Wir haben viel in die Richtung experimentiert, aber DIV\'s sind da ein wenig..... schwierig zu steuern, insbesondere wenn man eine Seite mit variabler Breite haben möchte.[/quote]
Das mit der dynamischen Breite ist schwierig ja. Besonders bei Bildern, Bild-Menüs etc.  Welche Probleme sind bei euch aufgetreten?

Ich hab versucht powie.de auf 2nur\" DIVS aufzubauen, es hat sich für mich als schlicht unmöglich herausgestellt.

Ja, das ist heavy-CSS. So verrückt sind wir nun auch wieder nicht  :L /uploads/emoticons/icon_e_smile.gif.4a0acefcb917340d2c82e5239c009e6e.gif\" alt=\":)\" />
Ich meinte nicht das Strukturieren, sondern nur das Formatieren. Das Layout und die Struktur wird weiterhin mit Tabellen gemacht. Es geht nur um die Bereichszuweisung, dass man mit der gleichen Klasse (bspw. panel), einfach den Bereich wechseln kann und schon sieht sie anders aus. Wenn man es so will, dann ist das mit den divs-Kontainern nur eine Gruppierung der CSS-Klassen.
 
Gr3ße

klar, wie gesagt, es steht dir frei welche schweinerein du in deinem Style und dem zugehörigem CSS machst /uploads/emoticons/icon_e_smile.gif.4a0acefcb917340d2c82e5239c009e6e.gif\" alt=\":)\" />  [/uploads/emoticons/icon_e_surprised.gif.a005678239f11b45b64b526b2c82e9a1.gif\" alt=\":o\" />]

Mein ansatz ist die pSys standart Classen unberührt zu lassen und dennoch in den verschiedenen Bereichen einer Website zB. Pannels unterschiedlich aussehen zu lassen ohne immer die classen zu verändern im PHP/HTML.
Das versuche ich gerade durch DIV-Container mit IDs zu realisieren:

hierbei ist es dann möglich die Klasse pannel in jedem Bereich anders aussehen zulassen.
Wenn ich hingehe und zB. ein Pannel im ACP von rechts nach links verlege ist es ohne weitere Arbeiten sofort an das abweichende Design angepasst.

jo, kein Problem! Du wirst aber irgendwann vermutlich feststellen das die Anordnung der DIVS so nach diesem Muster auf einer Seite mit variabler Breite äußerst aufregend ist  [/uploads/emoticons/icon_e_surprised.gif.a005678239f11b45b64b526b2c82e9a1.gif\" alt=\":o\" />] . Kauf dir schon mal ein paar Schlachtfeldpackungen Klosterfraumelissengeist.
Sollest du da hinkriegen bist du mein HELD  /uploads/emoticons/icon_e_surprised.gif.a8707b3f35a569cb4cfe563fc72ef78d.gif\" alt=\":-o\" />

Das wäre dann die Größte Vergütung die ich mir vorstellen kann.
Ich geb mir mühe  /uploads/emoticons/icon_e_surprised.gif.a8707b3f35a569cb4cfe563fc72ef78d.gif\" alt=\":-o\" />

Du bekommst eine offizielle HELD Urkunde

Sooooooooo  /uploads/emoticons/icon_e_surprised.gif.a8707b3f35a569cb4cfe563fc72ef78d.gif\" alt=\":-o\" />
ich bin so glücklich!
Also Powie,
ich hab jetzt mal ein Testsystem erstellt und das mit den IDs getestet.
Gennerell scheint die ID Idee aber zu funktionieren - einmal die TH schwarz einmal Rot!
Dasselbe hab ich mit verschiedenfarbigen hintergründen getestet.
Ich weis zwar nicht ganz warum das mit der variablen Breite auf sich hat aber vieleicht erklärst du es mir nochmal.
#####Anmerkung#####
Es scheint wichtig zu sein wo man die DIVs setzt weil sie zB vor einem  irgendwie einfach ignoriert wurde?

Nach einer langen Nacht hab ich es anscheinend geschafft.
der erste Release ist nun online auf www.Inspirito.de
Ich hate Vergessen das es ja noch das ACP gibt und das nach meiner umbauaktion dort kein CSS mehr vorhanden ist.
Also gibt es nun 6 Bereiche inkl. ACP!
Bereiche:
#kopf
#links
#content
#rechts
#fuss
#admin
Eingebunden werden die Selektoren über IDs in DIV Containern.
BEISPIEL:

Der gesammte Kopfinhalt

 
Man sollte seine Bereiche in eigenen HTML Tabellen packen.
mein CSS ist volgendes:

/* ############################################################ */
/*                                                              */
/*        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:144px;
   background-color:#878787;
   margin-bottom: 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; }
/* ############################################################ */
/*                         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;
}

 
 
Den ID-DIV fürs ACP beginnt man in der kopf.php und beendet man in der fuss.php.
/admin/kopf.php

 
 
/admin/fuss.php

 
 
Auf Inspirito.de sieht man es in aktion.
Wenn noch wer Fehler im CSS findet oder Einwände hat bitte immer her damit.
#####Dankesklausel#####
Ich möchte hier einigen Menschen danken die mich auf diesem Weg bis hierher unterstützt, mir geholfen und denkanstöße geliefert haben:
mahe
Statler
K00ni

mit variabler Breite meine ich das so wie hier: Die Seite passt sich der Breite des Browser Fensters an. Das es mit festen Breiten funktioniert wissen wir, aber das ist zum Beispiel etwas was ich nicht will!
Auf inspirito.de ist bei mir 50% des Browserfensters genutzt, der andere Teil ist \"weiss\". Kann man schön finden.... muss man aber nicht  [/uploads/emoticons/icon_e_surprised.gif.a005678239f11b45b64b526b2c82e9a1.gif\" alt=\":o\" />]

OK dann weis ich was du meinst sehe aber nicht wo das Problem ist.
Da ich ja DIVs nutze und diese auch bei Tabellen mit einer weite 100% kein Problem bekommen.
ich muss hallt nur hingehen und die DIVs so setzen das sie funzen.
Beispiel:
kopf.php

 
 
fuss.php

 
 
das ist das default Style von dir.
und funktioniert doch dann auch mit deiner variablen Breite oder nicht?

ja aber eben auf Grund der variablen Breite mit einer Tabelle. Sind halt 2 verschiedene Lösungswege.

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

@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.

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?

wie gerad mit Otti diskutiert mal einfach so als Q&D Kommentar:

und was ist rechts und link mit dem leeren Bereich?

reload!

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

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!

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:

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

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!

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!

es sind 6 /uploads/emoticons/icon_e_smile.gif.4a0acefcb917340d2c82e5239c009e6e.gif\" alt=\":)\" /> , jepp den inbottom kann man definitiv noch machen!

[OT]*einePackungValiumindenThreadwerf*[/OT]