Du befindest Dich im Archiv vom ABAKUS Online Marketing Forum. Hier kannst Du Dich für das Forum mit den aktuellen Beiträgen registrieren.

Navigations Buttons via CSS

Ajax, Hijax, Microformats, RDF, Markup, HTML, PHP, CSS, MySQL, htaccess, robots.txt, CGI, Java, Javascript usw.
Neues Thema Antworten
Billy04
PostRank 5
PostRank 5
Beiträge: 258
Registriert: 11.05.2005, 08:31

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>&nbsp;

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

<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?

Anzeige von ABAKUS

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.


xoni
PostRank 8
PostRank 8
Beiträge: 692
Registriert: 22.08.2007, 12:14

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>

Billy04
PostRank 5
PostRank 5
Beiträge: 258
Registriert: 11.05.2005, 08:31

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.

Billy04
PostRank 5
PostRank 5
Beiträge: 258
Registriert: 11.05.2005, 08:31

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

nerd
PostRank 10
PostRank 10
Beiträge: 4023
Registriert: 15.02.2005, 04:02

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-a ... 3-and-rgba oder das fertige beispiel @ https://www.zurb.com/blog_uploads/0000/0 ... ns-03.html

Billy04
PostRank 5
PostRank 5
Beiträge: 258
Registriert: 11.05.2005, 08:31

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

TomRidley
PostRank 7
PostRank 7
Beiträge: 519
Registriert: 26.05.2010, 21:57

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:

<!--[if IE]>
<style>
.item {
display: inline;
}
</style>
<![EndIf]-->

Antworten