[GastForen Archiv Adobe GoLive css Problem mit li und ul tag

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Archiv - Archivierte Foren
Themen
Beiträge
Moderatoren
Letzter Beitrag

css Problem mit li und ul tag

patbe60
Beiträge gesamt: 2

19. Jan 2011, 15:16
Beitrag # 1 von 3
Bewertung:
(2333 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo

Ich versuche ein CSS zu erstellen mit der Möglichkeit, für Menüs und einfache Listen in Texten verschiedene Darstellungen zu wählen. Dabei soll das linke menü als vertikale Liste ohne Aufzählungspunkte, das Top menü als horizontale Liste ebenfalls ohne Aufzählungspunkte und die einfacjen Listen mit Aufzählungspunkten erscheinen. Ich habe dabei folgende Codes im CSS verwendet:

Code
ul { 
margin: 2px;
padding-left: 0px;
list-style-type: none;
}

li {
line-height: 15px;
padding-left: 15px;
background: url(../images/indent2.png) no-repeat;
background-position: 0px 4px;
}


Damit funktionieren Listen in Texten wie gefordert in allen Browsern.

Für die Menüs verwende ich fogendes:

Code
/* ++++++++++++++  first level  ++++++++++++++ */ 

ul.menu li a:visited, ul.menu li a:link
{
color: #5A5A5A;
display: block;
width: auto !important;
margin-right: 18px;
font-size: 12px;
line-height: 20px;
font-weight: bold;
float: left;
text-align: left;
padding-left: 20px;
list-style-type: none;
list-style-image: none;

}

ul.menu li.active a:link, ul.menu li a:hover, ul.menu li.active a:visited
{
color: #b7281d;
}

/* ++++++++++++++ second level ++++++++++++++ */

ul.menu li.active ul li a:link, ul.menu li.active ul li a:visited
{
color: #5a5a5a;
margin:0;
padding-right:20px;
font-weight:normal;
font-size: 0.95em;
line-height: 15px;
list-style-type: none;
list-style-image: none;
}

ul.menu li.active ul li a:hover, ul.menu li.active ul li a:active, ul.menu li.active ul li a:focus
{
color:#b7281d;
}

ul li.active ul li.active a:link, ul li.active ul li.active a:visited
{
color:#b7281d;
}

/* ++++++++++++++ top menu ++++++++++++++ */

ul.menu-top li a:visited, ul.menu-top li a:link
{
padding-left : 0px;
padding-right : 10px;
margin : 0;
display: inline;
float: left;
color: #ffffff;
list-style-type: none;
list-style-image: none;
}

ul.menu-top li.active a:link, ul.menu-top li.active a:visited
{
color: #ffffff;
}

ul.menu-top li a:hover
{
color: #aaaaaa;
}


Alle Browser stellen das wunschgemäss dar ausser der IE (6-8).

Deshalb meine zwei Fragen:

1. Wie kann ich die indent2.png in Texten nutzen, in den Menüs aber verbergen?
2. Wie kriege ich ein horizontales Menü auch im IE hin?

Die Testseite ist hier:http://www.panch.ch/joomla16/de/verband

Besten Dank für eure Hilfe.
Gruss Patrik
X

css Problem mit li und ul tag

SabineP
Beiträge gesamt: 7586

19. Jan 2011, 16:38
Beitrag # 2 von 3
Beitrag ID: #462212
Bewertung:
(2316 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
zu 1.

Das Hintergrundbild indent2.png ist eigentlich überflüssig.

list-style-type:none
zeigt keine Aufzählungspunkte

list-style-type:disc
zeigt einen ausgefüllten Kreis als Aufzählungspunkt

http://de.selfhtml.org/....htm#list_style_type

zu 2.
Hier findest Du einige Beispiele für horizontale Listen, die in IE6 funktionieren:
http://css.maxdesign.com.au/.../browser-support.htm


als Antwort auf: [#462197]
(Dieser Beitrag wurde von SabineP am 19. Jan 2011, 16:39 geändert)

css Problem mit li und ul tag

patbe60
Beiträge gesamt: 2

19. Jan 2011, 18:05
Beitrag # 3 von 3
Beitrag ID: #462234
Bewertung:
(2293 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine

Danke für deine Tipps.

Gruss Patrik


als Antwort auf: [#462212]