Startseite: Aufbau, Design, Bearbeiten
Grundsätzlich gilt für das Bearbeiten der Startseite, dass dies nur im Text-Editor geschehen sollte. Wenn man im WordPress die Visuell-Ansicht auswählt kann es direkt passieren, dass das Design zerschossen wird.
ID’s können nur einmal innerhalb einer Seite benutzt werden und werden in CSS mit #ID angesprochen.
Klassen können mehrmals innerhalb einer Seite benutzt werden und werden in CSS mit .KLASSE angesprochen.
Man sollte im Allgemeinen darauf achten, Klassen und ID’s möglichst eindeutig zu benennen, damit die Zuordnung auch von Personen nachvollzogen werden kann, die den Text nicht geschrieben hat.
Grundstruktur des Codes:
Das Startseiten-Design ist zunächst in den Bereich .cntnr eingebettet. Auf der nächsten Ebene unter .cntnr befindet sich dann zum einen der Code für die Desktop-Ansicht in dem Bereich mit der ID #desktop, zum anderen der Code für die Mobile-Ansicht in dem Bereich mit der ID #mobile. In den Bereichen mit den ID’s #links, #rechts und #mitte befinden sich jeweils die beiden Themenbereiche, die auf der Desktop-Ansicht an der jeweiligen Position befinden. Im Code heißen die Abschnitte ebenfalls so, auch wenn sie hier in eine Spalte zusammenrücken.
Die beiden Themenbereiche einer Spalte sind dann zunächst in einem Akkordeon zusammengefasst, dass mit der classe .akk gekennzeichnet ist.
Der Beginn des Codes eines jeden Themenbereiches ist mit
<!–######################THEMENBEREICH##############################–>
Gekennzeichnet.
Die einzelnen Themenfelder sind in der HTML/CSS Datei genau ihren Namen als ID zugeordnet bekommen. Also: Themenbereich Gesellschaft hat die ID gesellschaft, Themenbereich Märkte hat die ID #maerkte usw. Sie können im CSS mit z.B. #gesellschaft angesprochen werden.
Die Unterkategorien der ersten Ebene sind jeweils in dem Bereich .box gebündelt. Für jede Unterkategorie geht ein eigener Bereich auf der nach eben dieser Kategorie benannt ist. Also: Für Kategorie Erlebnis die ID #erlebnis usw. Gibt es unter den Kategorien der ersten Ebene eine weitere, zweite Ebene, so sind diese Unterkategorien in den Bereichen .box2, .box3 oder .box4 gebündelt. Die Zahl ist dabei abhängig davon, an welcher Stelle die jeweilige Kategorie der ersten Ebene steht (z.B. #erlebnis an Stelle 1 hat für die Unterkategorien den Bereich .box2, #kulturen an Stelle 2 hat für die Unterkategorien den Bereich .box3, usw.).
Am Ende eines jeden Bereiches wird mit <!–BEREICH–> das schließende Tag zu dem angegebenen Bereich markiert um den Überblick nicht zu verlieren.
Grobe Struktur des Startseiten-Codes
<cntnr>
<desktop>
<links>
<akk>
<gesellschaft>
<box>
<erlebnis>
<box2>
….
</box2>
</erlebnis>
<kulturen>
<box3>
…
</box3>
</kulturen>
…
…
</box>
</gesellschaft>
<maerkte>
…
…
</maerkte>
</akk>
</links>
<mitte>
…
…
</mitte>
<rechts>
…
…
</rechts>
</desktop>
<mobil>
…
…
</mobil>
</cntnr>
CSS:
Die CSS-Angaben sind im Kopf des Textdokuments in den <style> Tags.
In .cntnr stehen allgemeine Angaben für z.B. die Schrift.
Die ID’s #links, #rechts und #mitte stehen für die jeweilige Spalte des Startseiten-Menüs und sorgen mit width: 33.3% dafür, dass jede Spalte jeweils ein Drittel der Seite einnimmt.
Die Angaben in der @media screen and (max-width: 680px) {} Klammer in denen die width für #links, #rechts und #mitte auf 100% gesetzt wurde sorgen dafür, dass das dreispaltige Design auf kleineren Endgeräten in eine Spalte zusammenrückt.
@media screen and (max-width : …px) regelt das Aussehen der Seite für die angegeben Pixelgröße des Endgerätes oder Browserfensters. Alle Angaben die innerhalb der Klammern {} gemacht werden gelten solange wie das Fenster die angegebene Pixelbreite nicht übersteigt (bzw. bei min-width gelten die Regeln erst ab der angegebenen Größe).
Angaben die innerhalb einer max-width: 680px Klammer stehen regeln das Aussehen der Mobilen-Ansicht. Alle anderen @media screen Angaben gelten in der Regel vor allem für die Desktop-Ansicht oder sind allgemeine Angaben für die Startseite. Insbesondere wird in diesen Klammern mit
.akk > .themenbereich:hover {
background-color: #000;
height:300px;
das Verhalten der einzelnen Themen-Kacheln bei einem Mouse-Over (hover) bestimmt. Height bestimmt wie weit die Kachel sich nach unten öffnet. background-color bestimmt die Farbe des sich öffnenden Feldes. Da die Pixel-Angaben feste Größen sind, muss man für verschiedene Display-Größen auch verschiedene Angaben machen.
transition: height 1s ease-in-out sorgt für ein flüssiges Aufgleiten der Kacheln.
#themenbereich:hover .box2 {display:block;} etc. sorgt dafür, dass die Unterkategorien der zweiten Ebene (die in der jeweiligen box2, box3 oder box4 liegen) bei einem Mouse-Over über die Unterkategorien der ersten Ebene angezeigt werden.
Folgende sorgt dafür, dass in der Mobilen-Ansicht eine Transparente Box über die Themenbilder gelegt wird, in der dann die Unterkategorien gezeigt werden.
@media screen and (max-width: 680px) {
.box {
position:relative;
z-index:2;
height:100%;
margin-top:-150px;
background: rgba(0,0,0,0);
transition: background 1s;
border-radius:8%;
}
.akk > div:hover .box {
background: rgba(0,0,0,0.5);
transition: background 1s;
}
Da der Code für die Mobile-Ansicht und der Code für die Desktop-Ansicht auf der gleichen Seite ist, beide Ansichten aber unter anderem verschiedene Bilder benutzen ist es wichtig, dass während der Desktop-Ansicht die Mobile-Ansicht ausgeblendet wird und andersherum.
Dafür sorgen folgende Angaben in den entsprechenden
@media screen and (min-width/max-width: 680px) {}
Klammern:
#desktop {
display:none;
}
#mobile {
display:none;
}
