• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Navibar und Footer

Status
Für weitere Antworten geschlossen.
A

andrésmx

Neues Mitglied
Hallo Leute,
und zwar ist das Problem, dass beim Zusammenfügen von den beiden Codes (Navibar und Footer) sich der Footer verschiebt, bzw. die Aufzählungspunkte, werden horizontal, statt vertikal, außerdem haben die Aufzählungspunkte ein Feld, dass gefärbt ist(es hat die gleiche Farbe wie die Navibar) und ich weiß nicht, wie es zu dieser Färbung kommt und generell zur verschiebung. Ich hoffe ihr könnt mir helfen. Die Zip-Datei ist angehängt.

>>Hochgeladene Datei gelöscht<<
 
Zuletzt bearbeitet von einem Moderator:
andrésmx schrieb:
[...] beim Zusammenfügen von den beiden Codes (Navibar und Footer) [...]
Zum Vergrößern anklicken....
... müssen die offensichtlich 1:1 übernommenen, doch zum Teil dokumentweit allgemein gültigen CSS-Selektoren & -Regeln für die Listenelemente innerhalb der beiden Seitenbereiche entsprechend differenziert/spezifiziert werden, um deren gewünschte Formatierung erfolgreich voneinander separieren zu können.

Navibar:
HTML: 
<nav><ul>...</ul></nav> <!-- <nav></nav> im best. Markup ergänzen -->
CSS: 
nav {...}
nav ul {...}
nav ul li {...}
nav ul li a {...}
nav ul li a:hover {...}
/* usw. */
Footer:
HTML: 
<footer><ul>...</ul></footer>
CSS: 
footer {...}
footer ul {...}
footer ul li {...}
footer ul li a {...}
footer ul li a:hover {...}
/* usw. */

Alle CSS-Regeln, die für die Listenelemente (und deren möglichen Kinder-/Nachfahrenelemente) in beiden Bereichen gleichermaßen gelten sollen, werden dann zuvor im Stylesheet festgelegt, um duplizierte/gleichlautende Regeln im weiteren Verlauf zu vermeiden, was den Code, respektive seine Struktur, übersichtlicher, damit zukünftig auch nachvollziehbarer, und zu guter letzt einfach schlanker gestaltet.

Also:
CSS: 
/* Globale Listenformatierung */
nav ul, footer ul {...}
nav ul li, footer ul li {...}
/* usw. */

/* Navibar-Listenformatierung */
nav {...}
nav ul {...}
nav ul li {...}
nav ul li a {...}
nav ul li a:hover {...}
/* usw. */

/* Footer-Listenformatierung */
footer {...}
footer ul {...}
footer ul li {...}
footer ul li a {...}
footer ul li a:hover {...}
/* usw. */

Außerdem sind mir augenscheinlich bei der Benennung der CSS-Selektoren diese beiden syntaktischen Fehler aufgefallen, die somit keine Auswirkung auf die CSS-Formatierung haben:
CSS: 
.main {...} /* Eine CSS-Klasse mit dieser Bezeichnung existiert nicht im HTML-Code, sondern das Element <main> */
CSS: 
footer-clean ul {...} /* Hier fehlt der vorangestellte Punkt für den Klassen-Namen - also: .footer-clean */

Desweiteren lassen sich diverse gleichlautende Regelblöcke zusammenfassen, um auch hier wieder den Code schlanker & übersichtlicher zu halten.

Nachfolgend beispielsweise eine von diversen syntaktisch-technischen Möglichkeiten für die Selektion mehrerer HTML-Elemente und deren Nachfahrenelemente innerhalb der HTML-Struktur.

Aus:
CSS: 
.dropdown-content1 {
        /* CSS-Regelblock */
}
.dropdown-content2 {
        /* gleichlautender CSS-Regelblock wie zuvor */
}
.dropdown-content1 a {
        /* CSS-Regelblock */
}
.dropdown-content2 a {
        /* gleichlautender CSS-Regelblock wie zuvor */
}
.dropdown-content1 a:hover {
        /* CSS-Regelblock */
}
.dropdown-content2 a:hover {
        /* gleichlautender CSS-Regelblock wie zuvor */
}
.dropdown1:hover .dropdown-content1 {
        /* CSS-Regelblock */
}
.dropdown2:hover .dropdown-content2 {
        /* gleichlautender CSS-Regelblock wie zuvor */
}
Wird:
CSS: 
.dropdown-content1, .dropdown-content2 {
        /* CSS-Regelblock */
}
.dropdown-content1 a, .dropdown-content2 a {
        /* CSS-Regelblock */
}
.dropdown-content1 a:hover, .dropdown-content2 a:hover {
        /* CSS-Regelblock */
}
.dropdown1:hover .dropdown-content1, .dropdown2:hover .dropdown-content2 {
        /* CSS-Regelblock */
}

Für weitere ausführliche und dezidierte Informationen zum Thema "CSS-Selektoren" siehe zum Beispiel:
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben