Basemod.css

aus Papoo Dokumentation, der freien Wissensdatenbank
(Unterschied zwischen Versionen)
Wechseln zu: Navigation, Suche
 
 
(Eine dazwischenliegende Version von einem Benutzer wird nicht angezeigt)
Zeile 18: Zeile 18:
 
* '''#mod_menue_top''' Das Top Menü mit Hilfe | Impressum | Kontakt | etc.
 
* '''#mod_menue_top''' Das Top Menü mit Hilfe | Impressum | Kontakt | etc.
 
* '''#weiter''' Die weiter Links bei mehr als 20 Ergebnissen
 
* '''#weiter''' Die weiter Links bei mehr als 20 Ergebnissen
* #col1 {
+
* '''#col1''' Die linke Spalte, die Standardmäßig das Menü enthält
    width:220px;
+
* '''#mod_menue''' Der Menüblock bzw. Menü Modul komplett
    }
+
* '''.menuxaktiv''' Die normale Menüklasse
#mod_menue {
+
* '''.menuxaktiv_back''' Der aktive Menüpunkt
    width:220px;
+
* '''.menuy_aktiv''' Der Menüpunkt der oberen Ebene der aktiv ist, der einen aktiven Untermenüpunkt hat
    padding-top:50px;
+
* '''#mod_menue  .untermenu1''' Die Untermenü Klasse die Untermnüs der Ebene 1 enthält
    }
+
* '''#mod_menue  .untermenu2''' Die Untermenü Klasse die Untermnüs der Ebene 2 enthält
 
+
* '''#col2''' Die optische rechte Spalte
#mod_menue  ul li
+
* '''.rightitem''' Ein Eintrag in der rechten Spalte
{
+
* '''#col3''' Die mittlere Spalte
list-style-type: none;
+
* '''.comment_inhalt''' Inhalt der Kommentare
padding: 0px;
+
* '''.floatbox''' Die Box die jeweils einen Artikel oder Teaser enthält
margin: 0px;
+
* '''.messagedata h2, .messageh4''' Überschriften im Forum
 
+
* '''.artikelbox_left''' Box die Inhalte z.B. ein Bild links in den Float setzt, im Editor zu sehen
     
+
* '''.artikelbox_right''' Box die Inhalte z.B. ein Bild rechts in den Float setzt, im Editor zu sehen
}
+
* '''.teaserbildleft''' Bild links vom Teaser positionieren
 
+
* '''.bbeditor_element''' Ein Element im BBCode Editor
#mod_menue  .menuxaktiv, .menuxaktiv_back, .menuy_aktiv
+
* '''#formk, .form''' id eines Formulars
{
+
* '''#lightbox und folgende'''  Lightbox Überlagerung
display: block;
+
* '''#overlay und folgende'''
padding: 0px 5px 0px 10px;
+
* '''.breadcrump''' Brotkrumen Menü Modul
margin-top: 1px;
+
* '''#linkliste''' Linklisten Plugin
border-bottom:1px solid #fff;
+
border-top:1px dotted #AFB7B7;
+
     
+
}
+
#mod_menue  .untermenu1 {
+
    margin-left:20px;
+
margin-bottom:-10px;
+
    }
+
#mod_menue  .untermenu2 {
+
    margin-left:20px;
+
    }
+
#mod_menue  .untermenu1 a, #mod_menue  .untermenu1 span
+
{
+
padding: 0px 5px 0px 0px;
+
margin-top: 0px;
+
}
+
 
+
#mod_menue  .untermenu2 a, #mod_menue  .untermenu2 span
+
{
+
padding: 0px 5px 0px 50px;
+
margin-top: 0px;
+
}
+
 
+
#mod_menue .untermenu3 a, #mod_menue  .untermenu3 span
+
{
+
padding: 3px 5px 3px 70px;
+
margin-top: 0px;
+
}
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
/* ######################################################################################################
+
** ### spezielle Rechte Spalte                         ################################################
+
** ######################################################################################################
+
*/
+
 
+
#col2 {
+
    border:0px solid black;
+
    margin-top:20px;
+
    width: 180px;
+
    background:#F4F4E8;
+
    border-left:1px solid #fff;
+
    }
+
 
+
#col2 h1,
+
#col2 h2,
+
#col2 h3 {
+
    line-height:25px;
+
    padding-left:5px;
+
    height:25px;
+
    }
+
.loginh2 {
+
    display:none;
+
    }
+
.rightitem {
+
padding:10px;
+
font-size:90%;
+
}
+
/* ######################################################################################################
+
** ### spezielle Artikel-Klassen                        ################################################
+
** ######################################################################################################
+
*/
+
div {
+
    border:0px solid black;
+
    }
+
.sprachlink {
+
background:#fff;
+
border:1px solid #fff;
+
padding-top:10px;
+
margin:0px;
+
}
+
.sprachlink img {
+
margin:0px;
+
padding:0px;
+
border:0px;
+
}
+
#suchefor #search {
+
width:60%;
+
}
+
#sprechomat_start {
+
margin-top:15px;
+
float:right;
+
}
+
#col3 {
+
    background:#fff;
+
    margin-right:180px;
+
    margin-left:220px;
+
    padding-right:20px;
+
    padding-top:1em;
+
    padding-left:20px;
+
    text-align:left;
+
 
+
    }
+
#col3 p {
+
+
}
+
/* Darstellung der Kommentare */
+
.comment_inhalt {
+
background: #E2E2C8;
+
border: 1px solid #decab4;
+
color: inherit;
+
font-size: 90%;
+
padding: 10px;
+
width:90%;
+
margin:5px;
+
}
+
.floatbox {
+
padding-left:20px;
+
}
+
/* Um container innerhalb einer Artikels floaten, kann Bilder etc. enthalten */
+
.float_left_artikel {
+
background: #ffffff none;
+
border-bottom-width: 1px;
+
border-color: #5f603c;
+
border-right-width: 1px;
+
border-style: solid;
+
border-width: 1px;
+
color: inherit;
+
float: left;
+
font-size: 90%;
+
line-height: 120%;
+
margin: 10px;
+
padding: 10px;
+
position: relative;
+
}
+
.float_right_artikel {
+
background: #ffffff none;
+
border-bottom-width: 1px;
+
border-color: #5f603c;
+
border-right-width: 1px;
+
border-style: solid;
+
border-width: 1px;
+
color: inherit;
+
float: right;
+
font-size: 90%;
+
line-height: 120%;
+
margin: 10px;
+
padding: 10px;
+
position: relative;
+
}
+
/*
+
Foreneinträge
+
*/
+
 
+
.messagedata h2, .messageh4{
+
    background:#fff;
+
    padding:5px;
+
margin-right:20px;
+
margin-top:5px;
+
+
color:#1074B0;
+
    border:1px solid #1074B0;
+
position:relative;
+
 
+
    }
+
.messagedata, .forumboard {
+
   
+
    }
+
.messagedatap, .messagebot {
+
background:#E2E2C8;
+
    padding:10px;
+
margin-left:20px;
+
margin-top:-10px;
+
padding-top:20px;
+
 
+
+
    }
+
.messagefoot {
+
background:#E8E6DB;
+
margin-left:20px;
+
    padding:10px;
+
margin-top:-3px;
+
+
 
+
    }
+
.messageul li,
+
.messageul ul,
+
ul.messageul {
+
margin-left:7px;
+
}
+
ul.messageul, ul.messageul li {
+
+
}
+
.forumliste a{
+
    font-size:100%;
+
    font-weight:400;
+
    }
+
.hierforum {
+
background:#F8F182;
+
}
+
.artikelbox_left
+
{
+
overflow:hidden;
+
float: left;
+
width: 310px;
+
}
+
 
+
.artikelbox_right
+
{
+
overflow:hidden;
+
float: right;
+
width: 310px;
+
padding-left: 40px;
+
}
+
.teaserbildleft {
+
    margin:10px;
+
    margin-left:0px;
+
    }
+
/* ######################################################################################################
+
** ### Formulare allgemein                              ################################################
+
** ######################################################################################################
+
*/
+
input,
+
select,
+
textarea {
+
    border:1px solid black;
+
    }
+
input:focus,
+
select:focus,
+
textarea:focus {
+
    border:1px inset black;
+
    background:#eee;
+
    }
+
input[type=text], input[type=password], textarea
+
{
+
+
}
+
 
+
.bbeditor_element
+
{
+
float: left;
+
}
+
 
+
#formk, .form {
+
line-height: 140%;
+
}
+
#formk fieldset, .form fieldset {
+
background-color: #F1EFE2;
+
border: 1px solid #939A9D;
+
margin: 20px 0px 20px 0px;
+
        padding:10px;
+
}
+
#formk legend, .form legend {
+
background-color: #E2E2C8;
+
margin: 0px 0px 10px -20px;
+
padding: 2px 10px 2px 10px;
+
border: 1px solid #939A9D;
+
}
+
.forumlistex {
+
font-size:100%;
+
+
}
+
.forumlistex ul{
+
list-style-type:none;
+
}
+
.floatbox {
+
   
+
    }
+
 
+
/* für IE */
+
.innerform {
+
}
+
.form label {
+
}
+
/* .form input[type=text] */
+
#formk .inpt, .form .inpt {
+
margin-left: 1em;
+
text-align: left;
+
width: 70%;
+
        margin-bottom:5px;
+
}
+
/* Textarea */
+
#formk .txt, .form .txt {
+
margin-left: 1em;
+
text-align: left;
+
width: 70%;
+
}
+
input.inpt:focus, textarea.txt:focus {
+
background: #eee;
+
}
+
#formk select , .form select {
+
margin-left: 1em;
+
text-align: left;
+
+
}
+
.headerfor {
+
background:#DAD9DF;
+
padding:5px;
+
}
+
/* Label von Checkboxen */
+
.label {
+
border-bottom: 1px dotted #000;
+
}
+
/* input[type=submit] */
+
#formk .senden, .form .senden {
+
margin: 0px 0px 0px 55%;
+
}
+
label, .label, select, input[type=checkbox], input[type=radio], input[type=submit], .senden {
+
cursor: pointer;
+
}
+
label, .label, select, .inpt, .txt {
+
margin-bottom: 20px;
+
}
+
.senden {
+
margin-bottom: 0px;
+
}
+
#formk p, .form p {
+
margin: 20px 0px 10px 0px;
+
}
+
#formk textarea, .form textarea {
+
    width:90%;
+
    }
+
 
+
legend {
+
padding: 2px 2px 2px 2px;
+
}
+
label {
+
        margin-bottom: 2em;
+
}
+
.formwrap {
+
background-color: transparent;
+
margin: 20px 0px 20px 0px;
+
        width:90%;
+
 
+
}
+
.formwrap_guest {
+
background-color: transparent;
+
margin: 20px 0px 20px 0px;
+
        width:90%;
+
}
+
#footer {
+
    border-top:1px solid #B2AB84;
+
    background:#fff;
+
    }
+
#lightbox{
+
background-color:#eee;
+
padding: 10px;
+
border-bottom: 2px solid #666;
+
border-right: 2px solid #666;
+
}
+
#lightboxDetails{
+
font-size: 0.8em;
+
padding-top: 0.4em;
+
}
+
#lightboxCaption{ float: left; }
+
#keyboardMsg{ float: right; }
+
#closeButton{ top: 5px; right: 5px; }
+
 
+
#lightbox img{ border: none; clear: both;}
+
#overlay img{ border: none; }
+
 
+
#overlay{ position:absolute;
+
margin-top:-20px;
+
background-image: url(../../bilder/overlay.png); }
+
 
+
.tab1 {
+
width:100%;
+
}
+
/* #################Doku###########################*/
+
.breadcrump {
+
background:#eee;
+
margin-bottom:20px;
+
+
}
+
div.tright {
+
   
+
    float: right;
+
    border-width: .5em 0 .8em 1.4em;
+
}
+
div.tleft {
+
    float: left;
+
    margin-right: .5em;
+
    border-width: .5em 1.4em .8em 0;
+
}
+
#linkliste {
+
margin-left:10px;
+
 
+
}
+
.linklistul, .linklistul li, .pdatlist {
+
list-style-type:none;
+
margin:0px;
+
pading:0px;
+
}
+
 
+
.linkitem  {
+
border-bottom:1px solid #ddd;
+
width:100%;
+
height:160px;
+
}
+
.decrip {
+
color:#444;
+
 
+
}
+
.linkitem h2 {
+
border:none;
+
}
+
.linkbilditem {
+
float:left;
+
margin-right:20px;
+
margin-bottom:10px;
+
}
+
.linklist_inhalt {
+
 
+
}
+
.p_logo {
+
float:right;
+
 
+
}
+
.pdaten {
+
border-bottom:1px solid #ddd;
+
width:100%;
+
height:140px;
+
}
+

Aktuelle Version vom 28. August 2006, 21:31 Uhr

Sie sind hier: Hauptseite / Papoo CSS Layout / CSS Grundgerüst / basemod.css

basemod.css

Die basemod.css beinhaltet alle Anpassungen des Layouts an das Standardlayout mit allen Blöcken.

  • #head Der Kopf der oben angezeigt wird und das Hintergrundbild mit der Straße beinhaltet.
  • #page_margins Festlegung der Layoutbreite und Zentrierung
  • #mod_suchbox Die Suchbox
  • #mod_styleswitcher Die Box mit dem Styleswitcher
  • #mod_login Die Einlogg Box
  • #main beinhaltet die col1, col2 und col3
  • #footer das ist der optische Fuß
  • #mod_kopftext Das Modul mit dem Kopftext, z.B. Dies ist die Überschrift ganz oben auf Ihrer neuen Seite.
  • #mod_kopftext h1, .toph1 beschreibt die Überschrift innerhalb des Moduls Kopftext
  • #mod_kopftext a der Link innerhalb des Moduls Kopftext
  • #menue_sprung, .breadtext, .ignore, .ignoreornot, dfn Unsichtbare Objekte
  • #mod_efa_fontsize Die Schrfitgrößen änder -> A+ A A-
  • #mod_sprachwahl Die Sprachauswahl
  • #mod_menue_top Das Top Menü mit Hilfe | Impressum | Kontakt | etc.
  • #weiter Die weiter Links bei mehr als 20 Ergebnissen
  • #col1 Die linke Spalte, die Standardmäßig das Menü enthält
  • #mod_menue Der Menüblock bzw. Menü Modul komplett
  • .menuxaktiv Die normale Menüklasse
  • .menuxaktiv_back Der aktive Menüpunkt
  • .menuy_aktiv Der Menüpunkt der oberen Ebene der aktiv ist, der einen aktiven Untermenüpunkt hat
  • #mod_menue .untermenu1 Die Untermenü Klasse die Untermnüs der Ebene 1 enthält
  • #mod_menue .untermenu2 Die Untermenü Klasse die Untermnüs der Ebene 2 enthält
  • #col2 Die optische rechte Spalte
  • .rightitem Ein Eintrag in der rechten Spalte
  • #col3 Die mittlere Spalte
  • .comment_inhalt Inhalt der Kommentare
  • .floatbox Die Box die jeweils einen Artikel oder Teaser enthält
  • .messagedata h2, .messageh4 Überschriften im Forum
  • .artikelbox_left Box die Inhalte z.B. ein Bild links in den Float setzt, im Editor zu sehen
  • .artikelbox_right Box die Inhalte z.B. ein Bild rechts in den Float setzt, im Editor zu sehen
  • .teaserbildleft Bild links vom Teaser positionieren
  • .bbeditor_element Ein Element im BBCode Editor
  • #formk, .form id eines Formulars
  • #lightbox und folgende Lightbox Überlagerung
  • #overlay und folgende
  • .breadcrump Brotkrumen Menü Modul
  • #linkliste Linklisten Plugin
'Persönliche Werkzeuge
Namensräume
Varianten
Aktionen
Navigation
Werkzeuge