 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
Yumiii
Threadersteller
Dabei seit: 17.12.2009
Ort: Wuppertal
Alter: 32
Geschlecht: 
|
Verfasst Do 08.04.2010 11:49
Titel Listenpunkte werden nicht angezeigt. (Navigation) |
  |
|
Hallo liebe Mediengestalter.
Ich habe ein kleines Problem mit einer Navigation. Ich wollte meine Kenntnisse etwas erweitern und probiere mich gerade an einer Horizontalen Navigation mit einem Untermenü das beim drüber fahren ausklappt. (nur CSS)
Nun habe ich allerdings folgendes Problem: Meine Listenpunkte werden nicht angezeigt und ich weiß nicht wieso.
Hier mein CSS-Code
| Code: |
#topmenu {
margin:0 auto;
height:40px;
background:url(../images/bg_menu.jpg) repeat-x;
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
width:802px;
list-style-position:inside;
}
ul.top, ul.top ul {
/*Entfernt alle Abstände von den Listenelementen*/
margin: 0 auto;
padding: 0;
display: inline;
}
ul.top {
padding-top:7px;
display: table;
list-style-type:circle;
}
ul.top>li {
display: table-cell;
position: relative;
padding: 2px 10px 2px 10px;
}
ul.top>li a {
display: table-cell;
position: relative;
padding: 2px 6px;
color:#FFFFFF;
padding-bottom:8px;
}
ul.top li>ul {
display: none;
position: absolute;
height:auto;
}
ul.top li:hover>ul {
/*Beim Hover wird dies angezeigt*/
background-image:url(../images/sub_menu2.jpg);
display : block;
padding-bottom:10px;
margin-left:-3px;
list-style-type:none;
}
ul.top ul li a {
/*Macht Hyperlinks zum Blockelement*/
display: block;
padding: 2px 10px;
}
/*** Menu Farben ***/
ul.top, ul.top ul, ul.top ul li a {
color: #FFFFFF;
}
ul.top li:hover, ul.top ul li a:hover {
color: #FFFFFF;
}
ul.top li:active, ul.top ul li a:active {
color: #FFFFFF;
}
|
Die Menü Punkte mache ich mit Joomla. Schreibe also keine zusätzliche HTML Datei mit Liste etc.
Ich habe list-sytle-type und list-style-position schon an alle möglichen Stellen eingefügt. Ist allerdings nichts passiert. Außer in dem Submenü da bekomme ich Sie hin, wenn ich in
| Code: |
ul.top li:hover>ul {
/*Beim Hover wird dies angezeigt*/
background-image:url(../images/sub_menu2.jpg);
display : block;
padding-bottom:10px;
margin-left:-3px;
list-style-type:none;
}
|
das list-style-type:none; entferne. 
Vielen Dank im voraus
|
|
| |
  |
 |
nicoG
Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht: 
|
Verfasst Do 08.04.2010 16:45
Titel
|
|
|
Klar: Du gibst ihm ja auch die Eigenschaft einer Tabelle (display:table/table-cell) 
Wieso soll er dann auf einmal wie eine Liste agieren. Bau das Menu anders (floaten, im IE6 wird das sowieso nicht gehen mit table) oder hau Hintergrundbilder rein, anstelle der browsereigenen Bullets.
Zuletzt bearbeitet von nicoG am Do 08.04.2010 16:46, insgesamt 1-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
Yumiii
Threadersteller
Dabei seit: 17.12.2009
Ort: Wuppertal
Alter: 32
Geschlecht:
|
Verfasst Do 08.04.2010 16:53
Titel
|
|
|
Vielen Dank. 
Klappt nun alles super. Muss nurnoch die Position der Punkte richtig anpassen.
Lösung:
Habe dem Element ul.top>li ein Background Image verpasst anstelle eines Listen Typs. Was natürlich auch Sinn macht, weil ich, wie du ja gesagt hast, eine Tabelle habe.
Code sieht wie folgt aus:
| Code: |
#topmenu {
margin:0 auto;
height:40px;
background:url(../images/bg_menu.jpg) repeat-x;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
width:802px;
}
ul.top, ul.top ul {
margin: 0 auto;
padding: 0;
display: inline;
}
ul.top {
/*padding-top:7px;*/
display: table;
}
.item1 {
background-position:5px 5000px !important;
}
ul.top>li {
background-image:url(../images/liste.png);
background-repeat:no-repeat;
background-position:0 10px;
display: table-cell;
position: relative;
padding: 2px 10px 2px 10px;
}
ul.top>li a {
display: table-cell;
position: relative;
padding: 10px 8px 8px 8px;
color:#FFF;
}
ul.top li>ul {
display: none;
position: absolute;
height:auto;
}
ul.top li:hover>ul {
/*Beim Hover wird dies angezeigt*/
background-image:url(../images/sub_menu2.jpg);
display : block;
padding-bottom:10px;
margin-left:-3px;
list-style-type:none;
}
ul.top ul li a {
/*Macht Hyperlinks zum Blockelement*/
display: block;
padding: 2px 10px;
}
/*** Menu Farben ***/
ul.top, ul.top ul, ul.top ul li a {
color: #FFFFFF;
}
ul.top li:hover, ul.top ul li a:hover {
color: #FFFFFF;
}
ul.top li:active, ul.top ul li a:active {
color: #FFFFFF;
}
|
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Sharepoint Problem - Listenpunkte werden nicht angezeigt
Navigation wird im IE an anderer Stelle angezeigt wie im Fir
[css] IE 7 zerschmeist mir die Listenpunkte
Listenpunkte abwechselnd färben
[CSS] DIV Navigation
[PHP, XML] Navigation...
|
|
|
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.
|
|
