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

[k00ni]

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

[Powie]

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.

[k00ni]

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?

[Powie]

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

[k00ni]

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

[Powie]

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\" />]

[otti_mania]

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:
http://www.inspirito.de/media/tutorial/idesign_aufbau.gif\" alt=\"idesign_aufbau.gif\" />
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.

[Powie]

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\" />

[otti_mania]

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\" />

[Powie]

Du bekommst eine offizielle HELD Urkunde

[otti_mania]

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?

[otti_mania]

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

[Powie]

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\" />]

[otti_mania]

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?

[Powie]

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