CSS-Problem

[NiAlMa]

Hi,

das Problem mit dem Accordion Menu ist gelöst, allerdings habe ich noch das Problem mit den Aufzählungszeichen - bekomme die einfach nicht weg!

Wer kann da hilfreich zu Seite stehen?

html

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $("#navi_links li:not(:has(ul))").css("cursor","pointer");
    $("#navi_links li:not(:has(ul))").click(function(){
        $("#navi_links li:has(ul)").slideUp();
        $(this).next().slideDown();
      });
    $("#navi_links li:has(ul)").hide();
  });
</script>
<link href="css/my_layout.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>
<link href="css/patches/patch_my_layout.css" rel="stylesheet" type="text/css" />
<![endif]-->
<style type="text/css">
<!--
ul#navi_links a:link {
  color: #FF0; list-style:none;
}
a:visited {
  color: #F00;
}
a:hover {
  color: #F00;
}
a:active {
  color: #FFF;
}
-->
</style>
 
....
 
<div id="main">
        <div id="col1">
          <div id="col1_content" class="clearfix">
            <!-- add your content here -->
            <ul id="navi_links">
 <li class="active"><strong>Home</strong></li>
 
 <li><a href="#">Rund um den Club</a></li>
 <li>
  <ul>
   <li><a href="#">&Ouml;ffnungszeiten</a></li>
   <li><a href="#">Preise</a></li>
   <li><a href="#">Events</a></li>
            <li><a href="#">Rundgang</a></li>
            <li><a href="#">Regeln</a></li>
            <li><a href="#">Kontakt</a></li>
  </ul>
 </li>
 <li><a href="#">Community</a></li>
 <li><a href="#">Service</a></li>
 <li>
  <ul>
   <li><a href="#">Anfahrtsbeschreibung</a></li>
   <li><a href="#">Routenplaner</a></li>
            <li><a href="#">Hotel's</a></li>
  </ul>
 </li>
 <li><a href="#">Allgemein</a></li>
    <li>
     <ul>
         <li><a href="#">Kontakt</a></li>
            <li><a href="#">Impressum</a></li>           
     </ul>
          </div>
        </div>

Ich danke schonmal!

P.S Ja der Code ist derzeit noch nicht sauber, aber der CSS-Teil wird noch ausgelagert

 

[fakerer]

AW: CSS-Problem

ul#navi_links{ list-style:none; }

sollte klappen

 

[JannisL]

AW: CSS-Problem

Oder

#navi_links ul li {list-style:none; }

So mach ich das immer und es klappt

 

[sokie]

AW: CSS-Problem

Oder

#navi_links ul li {list-style:none; }

So mach ich das immer und es klappt

damit regelst du nur die li elemente in der in #navi_links genesteten ul, nicht aber alle li elemente der Navigation.

 

[NiAlMa]

AW: CSS-Problem

Das Problem konnte behoben werden, allerdings habe ich nun ein anderes!

Accordion Menu funktioniert wunderbar, allerdins wir der oberste Link (home) grundsätzlich beim Hover blau und unterstrichen dargestellt und ich finde diese Anweisung nirgendwo

HTML

...
 
<link href="css/my_layout.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>
<link href="css/patches/patch_my_layout.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
 //slides the element with class "menu_body" when paragraph with class "menu_head" is clicked 
 $("#firstpane p.menu_head").click(function()
    {
  $(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
 });
 //slides the element with class "menu_body" when mouse is over the paragraph
 $("#secondpane p.menu_head").mouseover(function()
    {
      $(this).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
 });
});
</script>
 
<div id="col1_content" class="clearfix">
            <!-- add your content here -->
            <div class="menu_list" > <!--Code for menu starts here-->
  <p class="menu_head"><a href="index.html">Home</a></p>
<!--  <div class="menu_body">
...

accordion.css

@charset "utf-8";[/SIZE]
[SIZE=1]/* CSS Document */[/SIZE]
[SIZE=1].menu_list {[/SIZE]
[SIZE=1] width: 150px;[/SIZE]
[SIZE=1] padding-top: 20px !important;[/SIZE]
[SIZE=1] text-align: left;[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1].menu_head {[/SIZE]
[SIZE=1] padding: 10px 10px;[/SIZE]
[SIZE=1] color:#f8f8f8;[/SIZE]
[SIZE=1] background-color:#000504;[/SIZE]
[SIZE=1] cursor: pointer;[/SIZE]
[SIZE=1] position: relative;[/SIZE]
[SIZE=1] margin:1px;[/SIZE]
[SIZE=1] font-weight:bold;[/SIZE]
[SIZE=1] background: #000504;[/SIZE]
[SIZE=1] font-size: 14px;[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1].menu_body {[/SIZE]
[SIZE=1] display:none;[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1].menu_body a{[/SIZE]
[SIZE=1]  display:block;[/SIZE]
[SIZE=1]  color:yellow;[/SIZE]
[SIZE=1]  background-color:#000504;[/SIZE]
[SIZE=1]  padding-left:40px;[/SIZE]
[SIZE=1]  font-weight:bold;[/SIZE]
[SIZE=1]  text-decoration:none;[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1].menu_body a:hover{[/SIZE]
[SIZE=1]  display:block;[/SIZE]
[SIZE=1]  color: red;[/SIZE]
[SIZE=1]  background-color:#000504;[/SIZE]
[SIZE=1]  text-decoration:none;[/SIZE]
[SIZE=1]  }

Gibt es hierfür eine Lösung? Der Hover sollte eigentlich Yellow ohne deco sein

Problem ist gelöst! Anweisung kam aus der content.css

 

[MegaAdi]

AW: CSS-Problem

schön dass du den Fehler selbst behoben hast, aber bitte bitte bitte denk auch an die Leute mit Brille (oder kleine Bildschirmen) und mach deine Schrift nid so klein
Danke

 

[NiAlMa]

AW: CSS-Problem

Das ist Absicht da das geschriebene nicht mehr relevant war/ist und ich es eigentlich löschen wollte!

 

[WebMediaService]

AW: CSS-Problem

Da sind noch einige andere Fehler im Navi Quellcode, die du ausräumen solltest. Schau dir mal die letzten 8 Zeilen deiner Navi Links an und überarbeite diese noch einmal.