mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Di 06.12.2016 15:23 Benutzername: Passwort: Auto-Login

Thema: Hilfe bitte! Horizontale Listen mit CSS vom 15.02.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Hilfe bitte! Horizontale Listen mit CSS
Autor Nachricht
susi1600
Threadersteller

Dabei seit: 16.11.2005
Ort: München
Alter: 32
Geschlecht: Weiblich
Verfasst Mi 15.02.2006 20:31
Titel

Hilfe bitte! Horizontale Listen mit CSS

Antworten mit Zitat Zum Seitenanfang

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 22:57, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
seal

Dabei seit: 31.07.2005
Ort: Pfalz
Alter: 33
Geschlecht: Männlich
Verfasst Mi 15.02.2006 21:24
Titel

Antworten mit Zitat Zum Seitenanfang

http://www.cssplay.co.uk/menus/centered2.html

Wozu die Tabelle? *Huch*
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
datenkind

Dabei seit: 28.04.2003
Ort: Eisenach
Alter: 34
Geschlecht: Männlich
Verfasst Mi 15.02.2006 22:30
Titel

Antworten mit Zitat Zum Seitenanfang

Code:
#menu li {
float: left;
}


Dazuschreiben.

Dann packste in die HR darunter
Code:
style="clear:left;"


Probier's ma aus.


Zuletzt bearbeitet von datenkind am Mi 15.02.2006 22:31, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen CSS: Horizontale Linie unendlich
CSS - Horizontale Navi hilfe
Horizontale Navigation mit CSS und DIV layern
css horizontale navigation im iexplorer 7 verschoben
horizontale css navi mit horizontaler subnavi zentrieren
listen formatieren mit css
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.