susi1600
Threadersteller
Dabei seit: 16.11.2005
Ort: München
Alter: 40
Geschlecht: 
|
Verfasst Mi 15.02.2006 21:31
Titel Hilfe bitte! Horizontale Listen mit CSS |
  |
|
Hallo,
habe entdeckt, dass alle Browser außer der IE meine Navigationsleiste nicht richtig darstellen.
Ich habe die Leiste in einer Tabelle, 1 Zeile, 6 Spalten, in jeder Spalte ein Link, siehe www.art-of-mine.de, die Rollover-Effekte sind mit CSS geschrieben, jedoch wird die Größe der Buttons nicht richtig angezeigt.
Ich habe nun den Tipp erhalten, die Leiste als horizontale Liste mit hybrid-rollovers darzustellen.
Nun bin ich schon so weit, dass an sich die grafische darstellung der Buttons mit rollover und Größe alles stimmt,
nur folgendes Problem: Die Liste wird einfach nicht horizontal dargestellt.
Habe es schon mit sämtlichen Variationen versucht (display: inline in li, ul, a...) aber es wird einfach immer in der vertikalen Liste dargestellt.
Hier mal der aktuelle CSS-Code:
| Code: | body {
margin: 0px;
padding: 0px;
color: #000000;
background-color: #FFFFFF;
font-family: verdana,arial;
font-size: 10pt;
scrollbar-arrow-color: #CCCCCC;
scrollbar-base-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
}
table,tr,td {
margin: 0px;
color: #000000;
font-family: verdana,arial;
font-size: 10pt;
}
#menu li {
margin:0px;
padding:0px;
list-style: none;
display: inline;
}
#menu a {
display: block;
width: 100px;
height: 25px;
margin: 5px;
background-image: url(buttons.jpg);
background-repeat: no-repeat;
font-family: verdana,arial;
font-size: 10 pt;
text-decoration: none;
font-weight: bold;
text-align: center;
}
#menu a:link, #menu a:visited {
color:#333333;
background-image: url(buttons.jpg);
background-position: 0px 0px;
}
#menu a:hover {
color: #000000;
background-image: url(buttons.jpg);
background-position: 0px -25px;
}
#menu a:active, #menu a:focus {
color: #000000;
background-image: url(buttons.jpg);
background-position: 0px -50px;
}
Und noch HTML:
<ul id="menu">
<li><a href="sites/home.htm">HOME</a></li>
<li><a href="sites/latest.htm">LATEST</a></li>
<li><a href="sites/galery.htm">GALERY</a></li>
<li><a href="sites/artist.htm">ARTIST</a></li>
<li><a href="sites/index.php3">GUESTS</a></li>
<li><a href="sites/mailer.html">CONTACT</a></li>
</ul> |
Wird wie folgt dargestellt www.art-of-mine.de/test.html
Wo liegt denn mein Fehler?
Laut CSS-Generator, Self-HTML und sämtlichen anderen Tutorials in denen ich gesucht hab, müsste es so stimmen.
Und woran liegt es, das Firefox die Scrollleisten nicht darstellt wie ich sie oben im CSS geschrieben habe? IE macht es schon.
Ich wär euch echt dankbar, wenn ihr mir weiterhelfen könnt!!
Gruß,
susi1600
edit: Bitte Code-Tags verwenden
Zuletzt bearbeitet von tacker am Mi 15.02.2006 23:57, insgesamt 1-mal bearbeitet
|
|
Willkommen auf dem Portal für Mediengestalter
