BearbeitenDiskussionVersionen

MediaWiki:Mobile.css: Unterschied zwischen den Versionen

(Die Seite wurde neu angelegt: „ →‎******************************** Zwei container formatierung Responsive 50/50 ********************************: @media only screen { →‎klassischer Desktop, zweispaltig; Grundstruktur: #container { overflow: auto; padding-bottom: 1px; } #container-links, #container-rechts { float: left; width: calc(50% - 0.5em - 0.005px); } #container-links { margin-right: 1em; } #container-unten…“)
 
KKeine Bearbeitungszusammenfassung
 
Zeile 826: Zeile 826:


   #container5-unten  {
   #container5-unten  {
      max-width: none;
  }
}
/*********************************
Zwei Spalten formatierung Responsive 60/40
*********************************/
@media only screen {
  /* klassischer Desktop, zweispaltig; Grundstruktur */
  #container6 {
      overflow:      auto;
      padding-bottom: 1px;
  }
  #container6-links{
      float: left;
      width: calc(60% - 0.5em - 0.005px);
  }
 
  #container6-rechts {
      float: left;
      width: calc(40% - 0.5em - 0.005px);
  }
  #container6-links {
      margin-right: 1em;
  }
 
  #container6-unten {
      clear: both;
  }
  #container6-oben,
  #container6-unten {
      text-align: center;
  }
}
@media only screen and (max-width: 54rem) {
  /* Platzmangel */
  #container6-links,
  #container6-rechts {
      float:        none;
      margin-right: 0;
      width:        auto;
  }
  #container6-oben,
  #container6-unten,
  #willkommen p:first-child {
      text-align: left;
  }
}
@media only screen and (max-width: 42rem) {
  /* Besonders kleiner Screen */
  #container6-oben {
      display: none;
  }
}
@media only screen and (min-width: 180rem) {
  /* Mehr als zweispaltig; 121rem */
  #container6-links {
      float:        none;
      margin-right: 0;
      width:        auto;
  }
  #container6-links-oben,
  #container6-links-unten {
      float: left;
  }
  #container6-oben, #container6-unten {
      max-width: none;
      width:    auto;
  }
}
@media only screen and (min-width: 99999rem) {
  /* Dreispaltig */
  #container6-links-oben,
  #container6-links-unten {
      margin-right: 3%;
      width:        28%;
  }
  #container6-rechts {
      width: 38%;
  }
}
@media only screen and (min-width: 180rem) {
  /* Vierspaltig */
  #container6-rechts {
      float: none;
      width: auto;
  }
  #container6-links-oben,
  #container6-links-unten,
  #container6-rechts-oben,
  #container6-rechts-unten {
      width: 23%;
  }
  #container6-links-oben,
  #container6-links-unten,
  #container6-rechts-oben,
  #container6-rechts-unten {
      margin-left:  1%;
      margin-right: 1%;
  }
  #container6-rechts-oben,
  #container6-rechts-unten {
      float: left;
  }
}
@media only screen and (min-width: 260rem) {
  /* Fünfspaltig */
  #container6-rechts-unten {
      float: none;
      width: auto;
  }
  #container6-links-oben,
  #container6-links-unten,
  #container6-rechts-oben,
  #container6-rechts-unten-1,
  #container6-rechts-unten-2 {
      margin-left:  1%;
      margin-right: 1%;
      width: 18%;
  }
  #container6-rechts-unten-1,
  #container6-rechts-unten-2 {
      float: left;
  }
  #container6-rechts-unten-2 {
      margin-right: 0;
  }
  #container6-unten  {
       max-width: none;
       max-width: none;
   }
   }
}
}

Aktuelle Version vom 21. Mai 2023, 09:25 Uhr


/*********************************


Zwei container formatierung Responsive 50/50


*********************************/
@media only screen {
   /* klassischer Desktop, zweispaltig; Grundstruktur */
   #container {
      overflow:       auto;
      padding-bottom: 1px;
   }
   #container-links,
   #container-rechts {
      float: left;
      width: calc(50% - 0.5em - 0.005px);
   }
   #container-links {
      margin-right: 1em;
   }
  
   #container-unten {
      clear: both;
   }

   #container-oben,
   #container-unten {
      text-align: center;
   }
}
@media only screen and (max-width: 54rem) {
   /* Platzmangel */
   #container-links,
   #container-rechts {
      float:        none;
      margin-right: 0;
      width:        auto;
   }


   #container-oben,
   #container-unten, p:first-child {
      text-align: left;
   }
}
@media only screen and (max-width: 42rem) {
   /* Besonders kleiner Screen */

   #container-oben {
      display: none;
   }
}
@media only screen and (min-width: 180rem) {
   /* Mehr als zweispaltig; 121rem */
   #container-links {
      float:        none;
      margin-right: 0;
      width:        auto;
   }
   #container-links-container-oben,
   #container-links-container-unten {
      float: left;
   }
   #container-oben, #container-unten {
      max-width: none;
      width:     auto;
   }
}
@media only screen and (min-width: 99999rem) {
   /* Dreispaltig */
   #container-links-container-oben,
   #container-links-container-unten {
      margin-right: 3%;
      width:        28%;
   }
   #container-rechts {
      width: 38%;
   }
}
@media only screen and (min-width: 180rem) {
   /* Vierspaltig */
   #container-rechts {
      float: none;
      width: auto;
   }
   #container-links-container-oben,
   #container-links-container-unten,
   #container-rechts-container-oben,
   #container-rechts-container-unten {
      width: 23%;
   }
   #container-links-container-oben,
   #container-links-container-unten,
   #container-rechts-container-oben,
   #container-rechts-container-unten {
      margin-left:  1%;
      margin-right: 1%;
   }
   #container-rechts-container-oben,
   #container-rechts-container-unten {
      float: left;
   }
}
@media only screen and (min-width: 260rem) {
   /* Fünfspaltig */
   #container-rechts-container-unten {
      float: none;
      width: auto;
   }
   #container-links-container-oben,
   #container-links-container-unten,
   #container-rechts-container-oben,
   #container-rechts-container-unten-1,
   #container-rechts-container-unten-2 {
      margin-left:  1%;
      margin-right: 1%;
      width: 18%;
   }
   #container-rechts-container-unten-1,
   #container-rechts-container-unten-2 {
      float: left;
   }
   #container-rechts-container-unten-2 {
      margin-right: 0;
   }

   #container-unten   {
      max-width: none;
   }
}


/*********************************


Zwei Spalten formatierung Responsive 75/25


*********************************/
@media only screen {
   /* klassischer Desktop, zweispaltig; Grundstruktur */
   #container1 {
      overflow:       auto;
      padding-bottom: 1px;
   }
   #container1-links{
      float: left;
      width: calc(75% - 0.5em - 0.005px);
   }
  
   #container1-rechts {
      float: left;
      width: calc(25% - 0.5em - 0.005px);
   }
   #container1-links {
      margin-right: 1em;
   }
  
   #container1-unten {
      clear: both;
   }

   #container1-oben,
   #container1-unten {
      text-align: center;
   }
}
@media only screen and (max-width: 54rem) {
   /* Platzmangel */
   #container1-links,
   #container1-rechts {
      float:        none;
      margin-right: 0;
      width:        auto;
   }


   #container1-oben,
   #container1-unten,
   #willkommen p:first-child {
      text-align: left;
   }
}
@media only screen and (max-width: 42rem) {
   /* Besonders kleiner Screen */

   #container1-oben {
      display: none;
   }
}
@media only screen and (min-width: 180rem) {
   /* Mehr als zweispaltig; 121rem */
   #container1-links {
      float:        none;
      margin-right: 0;
      width:        auto;
   }
   #container1-links-oben,
   #container1-links-unten {
      float: left;
   }
   #container1-oben, #container1-unten {
      max-width: none;
      width:     auto;
   }
}
@media only screen and (min-width: 99999rem) {
   /* Dreispaltig */
   #container1-links-oben,
   #container1-links-unten {
      margin-right: 3%;
      width:        28%;
   }
   #container1-rechts {
      width: 38%;
   }
}
@media only screen and (min-width: 180rem) {
   /* Vierspaltig */
   #container1-rechts {
      float: none;
      width: auto;
   }
   #container1-links-oben,
   #container1-links-unten,
   #container1-rechts-oben,
   #container1-rechts-unten {
      width: 23%;
   }
   #container1-links-oben,
   #container1-links-unten,
   #container1-rechts-oben,
   #container1-rechts-unten {
      margin-left:  1%;
      margin-right: 1%;
   }
   #container1-rechts-oben,
   #container1-rechts-unten {
      float: left;
   }
}
@media only screen and (min-width: 260rem) {
   /* Fünfspaltig */
   #container1-rechts-unten {
      float: none;
      width: auto;
   }
   #container1-links-oben,
   #container1-links-unten,
   #container1-rechts-oben,
   #container1-rechts-unten-1,
   #container1-rechts-unten-2 {
      margin-left:  1%;
      margin-right: 1%;
      width: 18%;
   }
   #container1-rechts-unten-1,
   #container1-rechts-unten-2 {
      float: left;
   }
   #container1-rechts-unten-2 {
      margin-right: 0;
   }

   #container1-unten   {
      max-width: none;
   }
}


/*********************************


Zwei Spalten formatierung Responsive 25/75


*********************************/
@media only screen {
   /* klassischer Desktop, zweispaltig; Grundstruktur */
   #container2 {
      overflow:       auto;
      padding-bottom: 1px;
   }
   #container2-links{
      float: left;
      width: calc(25% - 0.5em - 0.005px);
   }
  
   #container2-rechts {
      float: left;
      width: calc(75% - 0.5em - 0.005px);
   }
   #container2-links {
      margin-right: 1em;
   }
  
   #container2-unten {
      clear: both;
   }

   #container2-oben,
   #container2-unten {
      text-align: center;
   }
}
@media only screen and (max-width: 54rem) {
   /* Platzmangel */
   #container2-links,
   #container2-rechts {
      float:        none;
      margin-right: 0;
      width:        auto;
   }


   #container2-oben,
   #container2-unten,
   #willkommen p:first-child {
      text-align: left;
   }
}
@media only screen and (max-width: 42rem) {
   /* Besonders kleiner Screen */

   #container2-oben {
      display: none;
   }
}
@media only screen and (min-width: 180rem) {
   /* Mehr als zweispaltig; 121rem */
   #container2-links {
      float:        none;
      margin-right: 0;
      width:        auto;
   }
   #container2-links-oben,
   #container2-links-unten {
      float: left;
   }
   #container2-oben, #container2-unten {
      max-width: none;
      width:     auto;
   }
}
@media only screen and (min-width: 99999rem) {
   /* Dreispaltig */
   #container2-links-oben,
   #container2-links-unten {
      margin-right: 3%;
      width:        28%;
   }
   #container2-rechts {
      width: 38%;
   }
}
@media only screen and (min-width: 180rem) {
   /* Vierspaltig */
   #container2-rechts {
      float: none;
      width: auto;
   }
   #container2-links-oben,
   #container2-links-unten,
   #container2-rechts-oben,
   #container2-rechts-unten {
      width: 23%;
   }
   #container2-links-oben,
   #container2-links-unten,
   #container2-rechts-oben,
   #container2-rechts-unten {
      margin-left:  1%;
      margin-right: 1%;
   }
   #container2-rechts-oben,
   #container2-rechts-unten {
      float: left;
   }
}
@media only screen and (min-width: 260rem) {
   /* Fünfspaltig */
   #container2-rechts-unten {
      float: none;
      width: auto;
   }
   #container2-links-oben,
   #container2-links-unten,
   #container2-rechts-oben,
   #container2-rechts-unten-1,
   #container2-rechts-unten-2 {
      margin-left:  1%;
      margin-right: 1%;
      width: 18%;
   }
   #container2-rechts-unten-1,
   #container2-rechts-unten-2 {
      float: left;
   }
   #container2-rechts-unten-2 {
      margin-right: 0;
   }

   #container2-unten   {
      max-width: none;
   }
}


/*********************************


Zwei Spalten formatierung Responsive 70/30


*********************************/
@media only screen {
   /* klassischer Desktop, zweispaltig; Grundstruktur */
   #container4 {
      overflow:       auto;
      padding-bottom: 1px;
   }
   #container4-links{
      float: left;
      width: calc(70% - 0.5em - 0.005px);
   }
  
   #container4-rechts {
      float: left;
      width: calc(30% - 0.5em - 0.005px);
   }
   #container4-links {
      margin-right: 1em;
   }
  
   #container4-unten {
      clear: both;
   }

   #container4-oben,
   #container4-unten {
      text-align: center;
   }
}
@media only screen and (max-width: 54rem) {
   /* Platzmangel */
   #container4-links,
   #container4-rechts {
      float:        none;
      margin-right: 0;
      width:        auto;
   }


   #container4-oben,
   #container4-unten,
   #willkommen p:first-child {
      text-align: left;
   }
}
@media only screen and (max-width: 42rem) {
   /* Besonders kleiner Screen */

   #container4-oben {
      display: none;
   }
}
@media only screen and (min-width: 180rem) {
   /* Mehr als zweispaltig; 121rem */
   #container4-links {
      float:        none;
      margin-right: 0;
      width:        auto;
   }
   #container4-links-oben,
   #container4-links-unten {
      float: left;
   }
   #container4-oben, #container4-unten {
      max-width: none;
      width:     auto;
   }
}
@media only screen and (min-width: 99999rem) {
   /* Dreispaltig */
   #container4-links-oben,
   #container4-links-unten {
      margin-right: 3%;
      width:        28%;
   }
   #container4-rechts {
      width: 38%;
   }
}
@media only screen and (min-width: 180rem) {
   /* Vierspaltig */
   #container4-rechts {
      float: none;
      width: auto;
   }
   #container4-links-oben,
   #container4-links-unten,
   #container4-rechts-oben,
   #container4-rechts-unten {
      width: 23%;
   }
   #container4-links-oben,
   #container4-links-unten,
   #container4-rechts-oben,
   #container4-rechts-unten {
      margin-left:  1%;
      margin-right: 1%;
   }
   #container4-rechts-oben,
   #container4-rechts-unten {
      float: left;
   }
}
@media only screen and (min-width: 260rem) {
   /* Fünfspaltig */
   #container4-rechts-unten {
      float: none;
      width: auto;
   }
   #container4-links-oben,
   #container4-links-unten,
   #container4-rechts-oben,
   #container4-rechts-unten-1,
   #container4-rechts-unten-2 {
      margin-left:  1%;
      margin-right: 1%;
      width: 18%;
   }
   #container4-rechts-unten-1,
   #container4-rechts-unten-2 {
      float: left;
   }
   #container4-rechts-unten-2 {
      margin-right: 0;
   }

   #container4-unten   {
      max-width: none;
   }
}



/*********************************


drei container formatierung Responsive 33/33/33


*********************************/
@media only screen {
   /* klassischer Desktop, dreispaltig; Grundstruktur */
   #container3 {
      overflow:       auto;
      padding-bottom: 1px;
   }
   #container3-links,
   #container3-mitte {
      float: left;
      width: calc(33% - 0.5em - 0.005px);
   }

#container3-rechts {
      float: right;
      width: calc(33% - 0.5em - 0.005px);
   }

   #container3-links,
	#container3-mitte   {
      margin-right: 1em;
   }
   

   #container3-unten {
      clear: both;
   }

   #container3-oben,
   #container3-unten {
      text-align: center;
   }
}
@media only screen and (max-width: 54rem) {
   /* Platzmangel */
   #container3-links,
   #container3-rechts,
	#container3-mitte   {
      float:        none;
      margin-right: 0;
      width:        auto;
   }


   #container3-oben,
   #container3-unten, p:first-child {
      text-align: left;
   }
}
@media only screen and (max-width: 42rem) {
   /* Besonders kleiner Screen */

   #container3-oben {
      display: none;
   }
}
@media only screen and (min-width: 180rem) {
   /* Mehr als zweispaltig; 121rem */
   #container3-links,
   #container3-mitte   {
      float:        none;
      margin-right: 0;
      width:        auto;
   }
   #container3-links-container3-oben,
   #container3-links-container3-unten {
      float: left;
   }
   #container3-oben, #container3-unten {
      max-width: none;
      width:     auto;
   }
}
@media only screen and (min-width: 99999rem) {
   /* Dreispaltig */
   #container3-links-container3-oben,
   #container3-links-container3-unten {
      margin-right: 3%;
      width:        28%;
   }

   #container3-rechts {
      width: 38%;
   }
}
@media only screen and (min-width: 180rem) {
   /* Vierspaltig */
   #container3-rechts {
      float: none;
      width: auto;
   }
   #container3-links-container3-oben,
   #container3-links-container3-unten,
   #container3-rechts-container3-oben,
   #container3-rechts-container3-unten {
      width: 23%;
   }
   #container3-links-container3-oben,
   #container3-links-container3-unten,
   #container3-rechts-container3-oben,
   #container3-rechts-container3-unten {
      margin-left:  1%;
      margin-right: 1%;
   }
   #container3-rechts-container3-oben,
   #container3-rechts-container3-unten {
      float: left;
   }
}
@media only screen and (min-width: 260rem) {
   /* Fünfspaltig */
   #container3-rechts-container3-unten {
      float: none;
      width: auto;
   }
   #container3-links-container3-oben,
   #container3-links-container3-unten,
   #container3-rechts-container3-oben,
   #container3-rechts-container3-unten-1,
   #container3-rechts-container3-unten-2 {
      margin-left:  1%;
      margin-right: 1%;
      width: 18%;
   }
   #container3-rechts-container3-unten-1,
   #container3-rechts-container3-unten-2 {
      float: left;
   }
   #container3-rechts-container3-unten-2 {
      margin-right: 0;
   }

   #container3-unten   {
      max-width: none;
   }
}



/*********************************


Zwei Spalten formatierung Responsive 30/70


*********************************/
@media only screen {
   /* klassischer Desktop, zweispaltig; Grundstruktur */
   #container5 {
      overflow:       auto;
      padding-bottom: 1px;
   }
   #container5-links{
      float: left;
      width: calc(70% - 0.5em - 0.005px);
   }
  
   #container5-rechts {
      float: left;
      width: calc(30% - 0.5em - 0.005px);
   }
   #container5-links {
      margin-right: 1em;
   }
  
   #container5-unten {
      clear: both;
   }

   #container5-oben,
   #container5-unten {
      text-align: center;
   }
}
@media only screen and (max-width: 54rem) {
   /* Platzmangel */
   #container5-links,
   #container5-rechts {
      float:        none;
      margin-right: 0;
      width:        auto;
   }


   #container5-oben,
   #container5-unten,
   #willkommen p:first-child {
      text-align: left;
   }
}
@media only screen and (max-width: 42rem) {
   /* Besonders kleiner Screen */

   #container5-oben {
      display: none;
   }
}
@media only screen and (min-width: 180rem) {
   /* Mehr als zweispaltig; 121rem */
   #container5-links {
      float:        none;
      margin-right: 0;
      width:        auto;
   }
   #container5-links-oben,
   #container5-links-unten {
      float: left;
   }
   #container5-oben, #container5-unten {
      max-width: none;
      width:     auto;
   }
}
@media only screen and (min-width: 99999rem) {
   /* Dreispaltig */
   #container5-links-oben,
   #container5-links-unten {
      margin-right: 3%;
      width:        28%;
   }
   #container5-rechts {
      width: 38%;
   }
}
@media only screen and (min-width: 180rem) {
   /* Vierspaltig */
   #container5-rechts {
      float: none;
      width: auto;
   }
   #container5-links-oben,
   #container5-links-unten,
   #container5-rechts-oben,
   #container5-rechts-unten {
      width: 23%;
   }
   #container5-links-oben,
   #container5-links-unten,
   #container5-rechts-oben,
   #container5-rechts-unten {
      margin-left:  1%;
      margin-right: 1%;
   }
   #container5-rechts-oben,
   #container5-rechts-unten {
      float: left;
   }
}
@media only screen and (min-width: 260rem) {
   /* Fünfspaltig */
   #container5-rechts-unten {
      float: none;
      width: auto;
   }
   #container5-links-oben,
   #container5-links-unten,
   #container5-rechts-oben,
   #container5-rechts-unten-1,
   #container5-rechts-unten-2 {
      margin-left:  1%;
      margin-right: 1%;
      width: 18%;
   }
   #container5-rechts-unten-1,
   #container5-rechts-unten-2 {
      float: left;
   }
   #container5-rechts-unten-2 {
      margin-right: 0;
   }

   #container5-unten   {
      max-width: none;
   }
}
/*********************************


Zwei Spalten formatierung Responsive 60/40


*********************************/
@media only screen {
   /* klassischer Desktop, zweispaltig; Grundstruktur */
   #container6 {
      overflow:       auto;
      padding-bottom: 1px;
   }
   #container6-links{
      float: left;
      width: calc(60% - 0.5em - 0.005px);
   }
  
   #container6-rechts {
      float: left;
      width: calc(40% - 0.5em - 0.005px);
   }
   #container6-links {
      margin-right: 1em;
   }
  
   #container6-unten {
      clear: both;
   }

   #container6-oben,
   #container6-unten {
      text-align: center;
   }
}
@media only screen and (max-width: 54rem) {
   /* Platzmangel */
   #container6-links,
   #container6-rechts {
      float:        none;
      margin-right: 0;
      width:        auto;
   }


   #container6-oben,
   #container6-unten,
   #willkommen p:first-child {
      text-align: left;
   }
}
@media only screen and (max-width: 42rem) {
   /* Besonders kleiner Screen */

   #container6-oben {
      display: none;
   }
}
@media only screen and (min-width: 180rem) {
   /* Mehr als zweispaltig; 121rem */
   #container6-links {
      float:        none;
      margin-right: 0;
      width:        auto;
   }
   #container6-links-oben,
   #container6-links-unten {
      float: left;
   }
   #container6-oben, #container6-unten {
      max-width: none;
      width:     auto;
   }
}
@media only screen and (min-width: 99999rem) {
   /* Dreispaltig */
   #container6-links-oben,
   #container6-links-unten {
      margin-right: 3%;
      width:        28%;
   }
   #container6-rechts {
      width: 38%;
   }
}
@media only screen and (min-width: 180rem) {
   /* Vierspaltig */
   #container6-rechts {
      float: none;
      width: auto;
   }
   #container6-links-oben,
   #container6-links-unten,
   #container6-rechts-oben,
   #container6-rechts-unten {
      width: 23%;
   }
   #container6-links-oben,
   #container6-links-unten,
   #container6-rechts-oben,
   #container6-rechts-unten {
      margin-left:  1%;
      margin-right: 1%;
   }
   #container6-rechts-oben,
   #container6-rechts-unten {
      float: left;
   }
}
@media only screen and (min-width: 260rem) {
   /* Fünfspaltig */
   #container6-rechts-unten {
      float: none;
      width: auto;
   }
   #container6-links-oben,
   #container6-links-unten,
   #container6-rechts-oben,
   #container6-rechts-unten-1,
   #container6-rechts-unten-2 {
      margin-left:  1%;
      margin-right: 1%;
      width: 18%;
   }
   #container6-rechts-unten-1,
   #container6-rechts-unten-2 {
      float: left;
   }
   #container6-rechts-unten-2 {
      margin-right: 0;
   }

   #container6-unten   {
      max-width: none;
   }
}