Markup (HTML, XML, etc.) und CSS - Forum

Derzeit sind Sie als Gast in unserem Forum aktiv. Für das Schreiben registrieren Sie sich bitte. Unser Forum ist eine Austauschplattform für Webworker zum Kommunizieren, Helfen, Informieren und Hilfe finden. Auf der rechten Seiten finden Sie eine Forenübersicht über alle Bereiche des Webmaster-Forums. Unterhalb finden Sie alle aktuellen Themen.

In diesem Forum sollen begleitend zu unserem CSS Portal und HTML-Bereich konkrete Fragen zu HTML und CSS diskutiert werden. Bitte immer die Suchfunktion nutzen bevor du eine Frage stellst.

Buttonnavigation, die sich nicht verschiebt

Link zur Antwort auf "Buttonnavigation, die sich nicht verschiebt" von Markus Stahmann Markus Stahmann, am Sonntag den 01.06.2008 um 11:12:55

Hallo,

sicherlich kennt jeder das Problem: Man erstellt eine Buttonnavigation, die zusätzlich einen Hover- oder Aktiv-Effekt mit einer fetten Schrift enthält. Unter normalen Bedingungen springen die Buttons aus der Reihe, klar, weil die fettere Schrift ja etwas mehr Platz, als die normale benötigt.

Ob das schön aussieht, ist eine andere Sache. Ich wollte nun man fragen, ob und wie ihr solche Dinge löst. Ich gehe da über das padding ran, indem ich den normalen Links ein größeres Padding gebe, als den aktiven, sodass sich nur die Schrift vergrößert, allerdings nicht der Kasten.

Man könnte das sicherlich auch mit festen Größenangaben umsetzen, allerdings hat dieses den Nachteil, dass irgendwann der Inhalt aus der Box springt, wenn er entsprechend lang ist. Zum Zweiten sieht es auch nicht sonderlich gut aus, wenn zum Beispiel der Button mit Forum genau dieselbe Breite von z. B. 500 Pixeln hat wie Webentwicklung.

Hier nun mal meine CSS-Lösung. Habt ihr auch welche, bzw. wie sehen eure Ideen/Lösungen aus?

 
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
li a {
display: block;
padding: 6px 17px 5px 10px;
background-color: #666666;
border: 1px solid #000;
color: #fff;
text-decoration: none;
margin: 2px;
}

li a:hover {
display: block;
padding: 5px 10px;
background-color: #CCCCCC;
border: 1px solid #000;
color: #000;
text-decoration: none;
font-weight: bold;
}

Viele Grüße

Markus


meggs
Beiträge: 2070

PN schreiben
Profil ansehen
User ist offline
Link zur Antwort auf "Buttonnavigation, die sich nicht verschiebt" von meggs meggs, am Sonntag den 01.06.2008 um 11:58:54

probier mal

 
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
li a { 
  padding: 5px 10px;  
  background-color: #666666;
  border: 1px solid #000;
  color: #fff;
  text-decoration: none;
  margin: 2px;
}
   }

li a:hover {
  text-align: center;
  padding: 5px 10px;
  background-color: #CCCCCC;
  color: #000;
  font-weight: bold;
}

das würde auch verhindern für jeden einzelnen link eine eigene id anzulegen, da ja die linktexte nicht immer gleich lang sind.

bezüglich block-element bin ich mir nicht ganzt sicher. dachte immer, dass wenn das <li> in einem <ol> oder <ul> (was zumeist der fall ist) steht, dass dann <li> vonhausaus auch ein block-element ist. bei <menu> etc würde es eininlineelement blieben (aber html5 steht leider noch in den sternen =D)


Normalo
Beiträge: 87

PN schreiben
Profil ansehen
User ist offline
Link zur Antwort auf "Buttonnavigation, die sich nicht verschiebt" von Normalo Normalo, am Sonntag den 01.06.2008 um 12:50:09

Soweit ich mich erinnern kann, ist das Setzen der Zeilenhöhe ausreichend. Z.b.:

 
css
1
line-height:150%;
Link zur Antwort auf "Buttonnavigation, die sich nicht verschiebt" von Markus Stahmann Markus Stahmann, am Sonntag den 01.06.2008 um 13:19:47

Habs mal getestet, aber funktioniert irgendwie auch nicht ;). Aber wollte das eh nur als Diskussion anregen, zur Zeit mache ich nichts in der Hinsicht, was da fett wird.

Gruß

Markus