Padding/Margin und bgcolor - Probleme bei Formatierung und Hintergrundfarbe in CSS

[Tr4c3rt]

Hallo,

ich bin absoluter Neuling was CSS angeht und habe mich bei der Gestaltung meiner Linkleiste festgefahren.

Die Ausgangslage:

Ich habe eine Linkleiste mit fest definierter Hintergrundfarbe.
In dieser Linksleiste sollen zum einen Links, zum anderen auch Dropdownmüs verbaut werden. Dies habe ich mittels einfacher Liste (ul und li) realisiert.

               <div id="navi_main_container">
                    <ul id="navigation_main" >

                        <li class="tops_startseite" ><a href="#">Startseite</a>
                        </li>

                        <li class="tops_warum"><a href="#">Warum</a>
                            <ul class="dropdown_navi">
                                <li><a href="#">Wann</a></li>
                                <li><a href="#">Wo</a></li>
                                <li><a href="#">Warum</a></li>
                             </ul>
                        </li>

                 ......

#navi_main_container
         {
         width:100%;
         height:30px;
         background: -moz-linear-gradient(top,#8F8F8F,#5C5C5C);
         border-left: solid 1px #4A4A4A;
         border-top: solid 1px #4A4A4A;
         border-right: solid 1px #3251B9;
         border-top-right-radius: 10px;
         border-top-left-radius: 10px;
         }

         .navi_container
         {
            width:100%;
            height:30px;

Links sind mittels Margin und Padding auf der Linkleiste ausgerichtet.

ul#navigation_main li.tops_startseite
{
height: 30px;
border-left: solid 1px #FFF;
margin-top: -20px;
padding: 0 10px 0 10px;
box-shadow: 0px 10px 10px 0px #FFF;
text-align: center;
}

Was ich nun möchte ist, dass sich die Hintergrundfarbe ändert, wenn man mit der Maus über eine Schaltfläche fährt. (.class a:hover)

ul#navigation_main li.tops_startseite a:hover
{
backgroundcolor: #000000;
}

Das Problem ist, dass sich wirklich nur der Hintergrund der Hintergrund der Links ändert und nicht der durch Padding erweiterten Schaltfläche.



Gibt es dafür einen Trick oder muss ich die Linkleiste komplett anders aufbauen?

Vielen Dank

 

[ott]

Moin,
ich hab grad nicht die möglichkeit das zu testen, aber das solltest du mit "display: block;" lösen können.

also z.b.

#links li a {
color: #990000;
display: block;
font: bold 120% Arial, Helvetica, sans-serif;
padding: 5px;
text-decoration: none;
}

 

[Gubb3L]

Also zum einen sei mal kurz erwähnt das du bei der adressierung einer Klasse oder Id nicht nochmal davor den Typ also li oder ul in deinem Fall angeben musst oder solltest da es sonst schnell unübersichtlich wird.

Zu deinem Problem:
Da du den hover Effekt nur auf den Link gelegt hast ist es ja kein Wunder das nur der Background dieses die Farbe ändert.

Der sinnvollste Weg meiner Meinung nach ist es hier erstmals den Link an die Größe der Fläche anzupassen. Dabei musst du die Lineheight und natürlich auch ein Padding Setzen damit du sowohl oben als auch links und rechts bündig bist. Nicht vergessen dem Ganzen auch wenn die Line-height ausreicht für die "guten" Browser noch eine Height zu geben denn sonst gibt es zicken mit dem IE.
Einen Hover Effekt musst du nicht zwangsweise auf den Link selber setzen du kannst ihn auch der Schaltfläche geben. Solange aber Link und Schaltfläche gleich groß sind ist es iwo dann auch egal. Wenn Rundungen vorhanden sind kannst du dem äußeren Element bzw. dem Element welches die Rundung als Style besitzt noch einen overflow:hidden geben damit die innere Fläche nicht "überläuft".

Würde es also so machen:

Angenommen die Navi ist 50px hoch:

li a{
line-height: 50px;
height: 50px; // oder min-height: 50px;
padding: 0px 5px;
background: xy;
display:block;
}

und dann einfach den hover auf das a.
a:hover {
background: xy;
}


Als kleiner Zusatz:

Es sind auch Adressierungen wie folgende möglich:

ul > li:hover a {}

Du kannst also sagen das wenn auf den li Container gehovert wird sich der innere link verändern soll. Das > bedeutet darüber hinaus dass nur die nächst tiefere Ebene angesprochen wird. ein "ul li: hover a" würde dagegen für alle nach einem ul folgenden li mit einem nachfolgenden a in egal welcher Tiefe gelten. Kann ja gut sein das dein Dropdown Menü nen anderes Styling haben soll als die Navbar. Lieber sauber definieren als immer wieder überschreiben.


Dem Codeteil der die den tops_startseite definiert solltest du entschlacken. Eine Height du definieren ist ok aber durch das ausrichten des Link würde das text-align wegfallen, das padding ist auch nicht mehr nötig und das verschieben über margin-top:-20px was du vermutlich gemacht hast um die Schrift zu zentrieren fällt auch weg. Ggf. wird es nötig noch ein display: inline-block zu verwenden aber das dürfte hier glaube ich überflüssig sein.

Wenn du uns bei sowas den Link gibst kann man dir aber genauer helfen da man durch bearbeitung im Browser (F12) ja schon testen kann was in deiner Struktur am besten also mit möglichst wenig Code funktioniert.

 

[Tr4c3rt]

Gubb3l: Erstmal vielen vielen Dank für die sehr ausführliche Erläuterung.

Erstmal vorweg, es funktioniert jetzt wie es soll.

Neben den anderen Vorschlägen hat es natürlich gereicht das "a:" in der Klassendefinition zu entfernen, damit sich das Hover auf das komplette Feld und nicht nur auf den Link bezieht.

Ebenfalls sehr hilfreich war der Tip mit der Lineheight um eine mittige Ausrichtung zu erreichen, diese Funktion war mir bisher unbekannt.
Damit ergeben sich mir für die Ausrichtung völlig neue Möglichkeiten!!!!
Ich konnte damit die tops Funktion wie folgt verschlanken:

#navigation_main li.tops
{
line-height: 35px;
height: 35px;
margin-top: -20px;
padding: 0px 10px 0px 10px;
border-left: solid 1px #FFF;
}

#navigation_main li.tops:hover
{
background: -moz-linear-gradient(top,#F6F6F6,#AFAFAF);
}

Was ich nicht hinbekommen habe ist es das margin wegzulassen und überlege gerade verzweifelt warum von Haus aus keine mittige Ausrichtung vorgenommen wird.

Die Seite ist hier zu finden: http://78.47.221.107

Ergibt höchstwarscheinlich einen Zertifikatsfehler weil die Zertifikate abgelaufen sind...

Eine anständige Darstellung ist derzeit nur mit Firefox möglich, da ich die Farbverläufe nur für mozilla eingetragen habe!!!!

 

[Gubb3L]

Probier mal:


#navigation_main {
color: #000000;
display: inline-block;
font-size: 14pt;
font-variant: small-caps;
font-weight: bold;
margin-top: -1px;
}


#navigation_main li a {
color: #fff;
display: block;
height: 34px;
line-height: 34px;
padding: 0 15px;
text-decoration: none;
}


#navigation_main li.tops {
border-left: 1px solid #fff;
}

Sind jetzt angaben von dir mit drin da direkt im Browser ausprobiert.
Kurze Erklärung warum ich die Größe der Fläche über das a also den Link definieren würde. Wenn du mit der Maus über die Schaltfläche hoverst dann ist zwar der Effekt schon gegeben also du kriegst visuell die Rückmeldung hey hier kannst du klicken aber du kannst nur klicken wenn du im Flächenbereich des Links bist der bei deiner Variante kleiner als die Schaltfläche ist. Daher bei sowas immer die Größe über das innere Element definieren welches Klickbar sein soll.
Gleicher Grund auch für das Margin welches ich rausgeschmissen haben wollte. Wenn du über das Margin was ja ein Abstand ist der in deinem Fall rechts und links über das Element hinaus geht jedoch nicht zu dessen Fläche gehört sieht das zwar optisch passend aus wie in deinem Ergebnis jedoch erstellst du wieder einen optisch Klickbaren Bereich der keinerlei Funktion hat. Daher dann lieber in deinem Fall den Link nehmen und die Klickbare Fläche nach rechts und Links über ein Padding also eine inneren Abstand verbreitern

Wie arbeitest du denn an der Seite ? Trial and Error indem du immer neue Css Files hoch schmeißt oder probierst du vorher durch die im Browser integrierten Developer Tools das aus was du vor hast ? Würde ich dir ans Herz legen. (drück einfah mal F12 )
Dabei ist meiner Meinung das das Crome Developer Tool nochmal eine ganze Ecke besser als das des Firefox wobei es für dieses noch ein paar Erweiterungen gibt um es etwas funktionaler zu machen wie z.b. Firebug.

Was mir noch auffällt:
Du arbeitest fast ausschließlich mit Tables. Das macht man eigentlich heute nicht mehr. Einfache Div Container reichen aus da du das was Tables zusätzlich konnten auch garnicht in deinem Fall verwendest. Tables nimmt man nur noch in Ausnahmen wenn man z.b. wirklich mal Tabellen darstellen möchte aber da gibt es auch genug wege und Mittel das anders zu lösen.
Versuche Bereiche deiner Seite stärker von einander zu trennen und versuche nicht so extrem zu verschachteln. Kommt zum großteil durch deine Tables sodass du nach einem Element teils 4-5 Unterverschachtelungen hast die komplett leer und ungestyled sind bis dann mal das Inhaltselement kommt.
Wenn du Probleme haben solltest Elemente waagerecht zu zentrieren dann noch nen kleiner Tipp. Durch eine Fixe Angabe einer Breite kann man mit Margin-right: auto und margin-left: auto zentrieren. Wenn du absolut oder fixed gesetzte Elemente hast funktioniert es über eine Fixe Breite einem negativen margin-right welches der hälfte der Breite des Containers enstpricht und dann über left: 50%. Dadurch ist dieses Element immer zentriert mittig. Vllt hilft es dir ja mal.

 

[Tr4c3rt]

Vielen Dank nochmal,

was sie Schaltfläche angeht hast du natürlich recht.
Eine Möglichkeit den Link auf die komplette Fläche auszuweiten bietet CSS nicht zufällig?

Was mir noch auffällt:
Du arbeitest fast ausschließlich mit Tables. Das macht man eigentlich heute nicht mehr. Einfache Div Container reichen aus da du das was Tables zusätzlich konnten auch garnicht in deinem Fall verwendest. Tables nimmt man nur noch in Ausnahmen wenn man z.b. wirklich mal Tabellen darstellen möchte aber da gibt es auch genug wege und Mittel das anders zu lösen.

Abgesehen von den Schaltflächen ist das so wirklich noch mein erstes "Projekt"
Mittlerweile bin ich dazu übergangen fast alles mit flexbox Containern zu lösen.

Eine bessere Möglichkeit habe ich bislang nicht gefunden, was die Zentrieroptionen aber gerade auch was die skalierbarkeit in Abhängigkeit der Browsergröße angeht.

Auf jeden Fall vielen vielen Dank, deine Ansätze haben mich in vielerlei Hinsicht ein gutes Stück weitergebracht!




ädit: Was ich an deinem Beispiel nicht ganz verstehe (es funktioniert aber und sieht gut aus) ist das

margin-top: -1px;

in der #navigation_main


Wenn ich das weglasse stehen die Links nicht nur 1px weiter unten, sondern sind nur halb sichtbar am Rand.

Wieso wirkt sich das so stark aus und warum passt die Formatierung nicht von vornherein?