|
|
Billy04
: 11.05.2005
: 249
|
| : 26.05.2011, 17:17 : Navigations Buttons via CSS |
|
|
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? |
|
| Nach oben |
|
 |
xoni
: 22.08.2007
: 507
|
| : 26.05.2011, 18:13 : Navigations Buttons via CSS |
|
|
Hallo,
das Zauberwort heißt in Deinem Fall "line-heigt".
Ich habe mal schnell was gebastelt was die Schrift auch vertikal zentriert.
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Titel</title>
<style type="text/css">
#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;
}
</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> |
xoni
"Cola schmeckt besser als aus dem Glas" |
|
| Nach oben |
|
|
Billy04
: 11.05.2005
: 249
|
| : 29.05.2011, 16:57 : Navigations Buttons via CSS |
|
|
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. |
|
| Nach oben |
|
|
Billy04
: 11.05.2005
: 249
|
| : 29.05.2011, 17:00 : Navigations Buttons via CSS |
|
|
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 |
|
| Nach oben |
|
|
nerd
: 15.02.2005
: 1733
: AKL
|
|
| Nach oben |
|
|
Billy04
: 11.05.2005
: 249
|
| : 31.05.2011, 13:02 : Navigations Buttons via CSS |
|
|
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 |
|
| Nach oben |
|
|
TomRidley
: 26.05.2010
: 519
|
| : 01.06.2011, 00:34 : Navigations Buttons via CSS |
|
|
| Billy04 hat Folgendes 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 Folgendes 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:
<!--[if IE]>
<style>
.item {
display: inline;
}
</style>
<![EndIf]-->
e-mail Marketing & Newsletter Software |
|
| Nach oben |
|
|
