Navigations Buttons via CSS

Beitrag von **Billy04** » 26.05.2011, 16:17

Hallo zusammen

Ich habe auf meiner Seite eine Navigation erstellt.

In dem File "navigation.php" habe ich etwa folgendes Abbild:

<div class="navibutton"><a href="bla.html">menüpunkt 1</a></div> 

<div class="navigbutton"><a href="bla bla.html">menüpunkt 2</a> </div> 

<div class="navibutton"><a href="bla bla bla.html">menüpunkt 3</a> </div>

Ich möchte, dass die Navigation wie Buttons dargestellt wird, die einen grauen Hintergrund haben und wenn ich drüber fahre, dass die Farbe sich ändert.

Das ganze habe ich im CSS so gelöst:

}
#navigation{
position: absolute;
top: 128px;
left: 151px;
width: 870px;
font-family: Verdana, Times New Roman, Arial;
font-size: 11px;

}
.navibutton{
height: 40px;
width: 162px;
background-color: #f7f7f7;
text-align: center;
display: inline;
padding: 20px;

}
.navibutton a:hover{
height: 40px;
width: 162px;
background-color: #ededed;
text-align: center;
display: inline;
padding: 20px;

Das klappt soweit ganz wunderbar. Nur habe ich nun folgendes Problem, dass der Button zwar in der genannten Grösse dargestellt wird, der Textinhalt jedoch am oberen rand des Buttons steht.

Ich habe das versucht mit padding zu lösen. (Kursiver Inhalt im Code). Das geht zwar auch. Es ist dann in der Höhe zentriert aber wenn ich mit dem Mauszeiger drüber gehe dann rutsch der a:hover Button immer um die genannten padding pixelgrösse nach unten.

Was mache ich falsch?

von **Anzeige von ABAKUS** »

SEO Consulting bei ABAKUS Internet Marketing
Erfahrung seit 2002

persönliche Betreuung
individuelle Beratung
kompetente Umsetzung

Jetzt anfragen: 0511 / 300325-0.

Beitrag von **xoni** » 26.05.2011, 17:13

Hallo,

das Zauberwort heißt in Deinem Fall "line-heigt".
Ich habe mal schnell was gebastelt was die Schrift auch vertikal zentriert.

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml" xml&#58;lang="de" lang="de">

<head>
    <title>Titel</title>

<style type="text/css">


#navigation &#123;
height&#58; 40px;
width&#58; 800px;
background-color&#58; #ededed;
width&#58; 762px;
height&#58; 40px;
&#125;

#navigation a &#123;
height&#58; 40px;
width&#58; 162px;
background-color&#58; #ededed;
text-align&#58; center;
display&#58; block;
float&#58; left;
width&#58; 162px;
height&#58; 40px;
line-height&#58; 40px;
&#125;

#navigation a&#58;hover &#123;
height&#58; 40px;
width&#58; 162px;
background&#58; #006600;
text-align&#58; center;
display&#58; block;
float&#58; left;
width&#58; 162px;
height&#58; 40px;
line-height&#58; 40px;
&#125;
</style>
</head>

<body>
<div id="navigation">
<a href="bla.html">link 1</a>
<a href="bla bla.html">link 2</a>
<a href="bla bla bla.html">link 3</a>
</div>
</body>
</html>

Beitrag von **Billy04** » 29.05.2011, 15:57

hat super geklappt...

jedoch nur in IE

Ist es normal, dass firefox und safari das nicht schnallen?

Die Texte werden zwar in der jeweiligen Farbe hinterlegt, jedoch haben die Buttons nicht die Grösse von 40 x 162.

Beitrag von **Billy04** » 29.05.2011, 16:00

hab gerade gemerkt, wenn ich es als display:block; im css darstelle, dann werden die boxen angezeigt, jedoch nicht in einer linie wie ich es gerne haben möchte.

ändere ich es auf display: inline; dann sind die buttons nicht mehr da

Beitrag von **nerd** » 29.05.2011, 23:25

wenn du einen "kasten" haben willst, dann musst du display:block verwenden - dann klappt auch die einteilung mit height, padding und margin.
ansonsten siehe https://www.zurb.com/article/266/super- ... 3-and-rgba oder das fertige beispiel @ https://www.zurb.com/blog_uploads/0000/ ... ns-03.html

Beitrag von **Billy04** » 31.05.2011, 12:02

Hallo

Ich habe das nun versucht mit display: inline-block;

funktioniert auf Safari, firefox einwandfrei - nur funktionierts nun nicht mehr im IE. Dort werden die Boxen nicht in einer Linie nebeneinander sondern untereinander angezeigt.

Kann man das irgendwie im CSS für beide lösen?

Im IE klappts wenn ich nur display: inline; hinschreibe.

Vielen Dank

Beitrag von **TomRidley** » 31.05.2011, 23:34

Billy04 hat geschrieben:hat super geklappt...

jedoch nur in IE

Ist es normal, dass firefox und safari das nicht schnallen?

Die Texte werden zwar in der jeweiligen Farbe hinterlegt, jedoch haben die Buttons nicht die Grösse von 40 x 162.

Das kann gut sein wenn zu viele infos gegeben werden:

xoni hat geschrieben:

#navigation {
height: 40px;
width: 800px;
background-color: #ededed;
width: 762px;
height: 40px;
}

#navigation a {
height: 40px;
width: 162px;
background-color: #ededed;
text-align: center;
display: block;
float: left;
width: 162px;
height: 40px;
line-height: 40px;
}

#navigation a:hover {
height: 40px;
width: 162px;
background: #006600;
text-align: center;
display: block;
float: left;
width: 162px;
height: 40px;
line-height: 40px;
}

Einmal höhe angeben reicht... Denke da gibts wohl ein Konflikt. Bei IE Notfall: