Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.
- Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
- Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
- Internet Explorer/Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
- Opera: Strg+F5
/*********************************
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;
}
}