Jump to content
Sign in to follow this  
k00ni

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

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.


Das mit der dynamischen Breite ist schwierig ja. Besonders bei Bildern, Bild-Menüs etc. Welche Probleme sind bei euch aufgetreten?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Ja, das ist heavy-CSS. So verrückt sind wir nun auch wieder nicht :L :)


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

Share this post


Link to post
Share on other sites

klar, wie gesagt, es steht dir frei welche schweinerein du in deinem Style und dem zugehörigem CSS machst :) [:o]

Share this post


Link to post
Share on other sites

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:


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.

Share this post


Link to post
Share on other sites

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 [:o] . Kauf dir schon mal ein paar Schlachtfeldpackungen Klosterfraumelissengeist.

Sollest du da hinkriegen bist du mein HELD :-o

Share this post


Link to post
Share on other sites

Sooooooooo :-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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 [:o]

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites
Guest

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

Share this post


Link to post
Share on other sites
Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...