Hallo,
ich habe eine feststehende obere Navigationsleiste eingeführt. Der CSS-Code (aus einem Webdesign-Forum erhalten) enthält folgendes:
* {
margin: 0;
padding: 0;
}
Das funktioniert für die Leiste auch schön, ich habe jedoch festgestellt, dass sämtliche Listen im Forum dadurch an den linken Rand gerutscht sind.
Hat jemand eine Idee, wie man diesen Konflikt lösen kann?
Nimm doch eine andere Klasse oder Id für die Listengestaltung.. Wie sieht denn der gesamte Navi Code überhaupt aus ?
Ich bin in CSS leider überhaupt nicht fit, was müsste ich konkret tun ?
a) Hier der CSS-Code der Leiste:
Code:
/* Ein kleiner Reset der Default-Anweisungen im Browser */
* {
margin: 0;
padding: 0;
}
.navbar {
background-color: #ffffff;
color: #666666;
line-height: 45px; /* Hängt von der Höhe der Navbar ab, hilft aber enorm. */
margin: 0;
padding: 4px 15px 4px 5px;
position: fixed;
top: 0;
right: 0;
left: 0;
border-bottom:1px solid #666666;
box-shadow: 5px 5px 10px #e6e6e6;
}
/* Hier erstmal den Container für Titel und Logo nach Links schieben. */
.brand {
float: left;
}
/* Durch die nächste Anweisung stehen Logo und Seitentitel nebeneinander. */
.brand .logo,
.brand .my_oberzeile_seitenname {
display: inline-block;
vertical-align: middle;
}
/* Jetzt zum Menü, schieben wir es erstmal nach rechts. */
.nav_oben {
float: right;
}
/* Und jetzt noch ein paar Styles für die Links. */
.nav_oben a {
text-decoration: none;
}
.nav_oben a:hover {
border-bottom: 3px solid
}
.my_oberzeile_seitenname {
font: bold 25px Arial;
font-color: #666666;
}
.my_oberzeile_seitenname a {
color: #666666;
text-decoration: none;
}
b) HTML:
Code:
<div class="navbar">
<div class="brand">
<div class="logo"><a href="{$mybb->settings['bburl']}/"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" width="40" title="{$mybb->settings['bbname']}" /></a></div>
<!-- Der Seitentitel sollte mit einem H1 ausgezeichnet
werden, damit er aus semantischer Sicht sofort erkannt wird. -->
<h1 class="my_oberzeile_seitenname">
<a href="{$mybb->settings['bburl']}/">....de</a></h1>
</div>
<!-- Für einfache Navigationen (eine Menüebene),
genügen Links in einem nav Element, nav
kommt von Navigation.
-->
<nav class="nav_oben">
Button 1
Button 2
..
</nav>
</div>
Kann man sich deine Seite mal näher betrachten, wo die Navi zu sehen ist ?
Dies bitte löschen
Code:
* {
margin: 0;
padding: 0;
}
Diese Klasse
Code:
.navbar {
background-color: #ffffff;
color: #666666;
line-height: 45px; /* Hängt von der Höhe der Navbar ab, hilft aber enorm. */
margin: 0;
padding: 4px 15px 4px 5px;
position: fixed;
top: 0;
right: 0;
left: 0;
border-bottom:1px solid #666666;
box-shadow: 5px 5px 10px #e6e6e6;
}
abändern zu das
Code:
.navbar {
background-color: #ffffff;
color: #666666;
line-height: 40px; /* Hängt von der Höhe der Navbar ab, hilft aber enorm. */
margin: 0;
height: 45px;
padding: 4px 15px 4px 5px;
position: fixed;
top: 0;
right: 0;
left: 0;
border-bottom:2px solid #a4a4a4;
box-shadow: 5px 5px 10px #e6e6e6;
}
Diese Klasse
Code:
.my_oberzeile_seitenname a {
color: #666666;
text-decoration: none;
}
ändern zu
Code:
.my_oberzeile_seitenname a {
color: #666666;
text-decoration: none;
line-height: 17px;
}
Hoffe das es nun bei dir funktioniert.
Ja, das sieht auf den ersten Blick bestens aus. Vielen Dank, MrBrechreiz !