css / hierarchie

mfwenzel · 11.05.2009

huhu, nachdem ich nun meine navi stehen hab ()
hab ich nun ein Problem:

Ich hab #sidebar a verschiedene Mermale gesetzt, u.a. einen Rand von 5px.
Diesen Rand will ich bei meinem Submenüs aber nicht mehr haben. Nun steht aber ja #sidebar a durch das a allem anderen vornweg.

Was kann man da machen?

Herr_D · 11.05.2009

AW: css / hierarchie

ne class zuordnen

Code:

#sidebar a.haupt { werte}
#sidebar a.sub {werte }

sokie · 11.05.2009

AW: css / hierarchie

nach dem Beitrag den du verlinkt hast hat ist dein submeü der class="submenu" untergeordnet.

um diese Elemente eindeutig zu selektieren reicht:

Code:

.submenu a{
/*was auch immer du mit 'Rand' meinst*/
border: 0 none; /*bzw/*
padding: 0; /*bzw*/
margin: 0;
}

wenn du diese Elemente nach den übergordneten notierst beieinflusst das zugleich auch alle pseudoklassen der a-elemente innerhalb von .submenu

mfwenzel · 11.05.2009

AW: css / hierarchie

Rand = Border für einen Link

also pack ich die Subemenu Punkte in einen DIV Container?
Und style die dann`?

Edit:

Wenn ich die Klasse .submenu border wegmache, verändert sich nix
(d.h. Wenn ich etwas am #submenu a verändere, ändert sich die Klasse .submenu mit)

sokie · 11.05.2009

AW: css / hierarchie

ich hatte mich auf den Code deines Beispiels "Frage bzgl Navi" bezogen.

für Submenüs (also eine Liste in einem Listenelement der Hauptnavigation) braucht man eigentlich keine klasse.

zb

HTML:

<ul id="navigation">
  <li><a href="seite.htm">linktext</a></li>
  <li><a href="seite.htm">linktext</a></li>
  <li><a href="seite.htm">linktext</a></li>
  <li><!--hier startet die ul das Submenu-->
    <ul>
       <li><a href="subseite.htm">linktext</a></li>
       <li><a href="subseite.htm">linktext</a></li>
       <li><a href="subseite.htm">linktext</a></li>
       <li><a href="subseite.htm">linktext</a></li>
    </ul><!-- ende der unternavi-->
  </li>
<ul>

css:

Code:

#navigation a { /*betrifft ALLE A-Elemente der #navigation*/
  border: 5px solid red;
}
#navigation ul a{ /*betrifft nur die A-Elemente die in einem Submenü non #navigation sind*/
border: none;

}

mn braucht keine weitere klasse dazu, und schon gar kein zusätzliches div

mfwenzel · 12.05.2009

AW: css / hierarchie

also wenn ich jetzt die class="submenu" weglasse, dann funktioniert ja mein script nicht mehr...

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
      <script type="text/javascript" charset="utf-8">
         $(document).ready(function() {
            $('li.submenu').hide();            
            $('ul.navigation li').click(function() {
               $(this).next('.submenu').slideToggle()          
            });             
         });         
      </script>

Doitsu · 12.05.2009

AW: css / hierarchie

lord_of_terror_ffm schrieb:
also wenn ich jetzt die class="submenu" weglasse, dann funktioniert ja mein script nicht mehr...

Is klar, man siehe Roten teil:

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
      <script type="text/javascript" charset="utf-8">
         $(document).ready(function() {
            $('li.submenu').hide();            
            $('ul.navigation li').click(function() {
               $(this).next('[COLOR="Red"].submenu[/COLOR]').slideToggle()          
            });             
         });         
      </script>

Heisst soviel wie, wenn man auf 'ul.navigation li' klickt, soll das nachste '.submenu' angezeigt werden - die loesung von Sokie war aber trotzdem richtig, jederfalls der CSS-Teil, du musst halt nur wieder die Klasse submenu rein bringen.

sokie · 12.05.2009

AW: css / hierarchie

Code:

also wenn ich jetzt die class="submenu" weglasse, dann funktioniert ja mein script nicht mehr...

ist eigentlich klar, wenn man die klasse entfernt, die man als selektor für die funktion gewählt hat. (dass das nicht unbedingt die beste Wahl ist, wirst du vermutlich sehen, wenn du mehrere listenpunkte mit Untermenüs hast).

mfwenzel · 13.05.2009

AW: css / hierarchie

sokie schrieb:

Code:

(dass das nicht unbedingt die beste Wahl ist, wirst du vermutlich sehen, wenn du mehrere listenpunkte mit Untermenüs hast).[/quote]

bin gerne bereit, es anders zu machen... :)

Edit:
So ich hab das ganze jetzt mal da reingefummelt. Allerdings funktioniert es nicht richtig. Entweder hab ich ein Brett vorm Kopp' oder ich hab einfach keine Ahnung ^^


[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
         $(document).ready(function() {
            $('li.submenu').hide();            
            $('ul.navigation li').click(function() {
               $(this).next('.submenu').slideToggle()          
            });             
         });         
      </script>
<style type="text/css">
<!--
#navigation a { /*betrifft ALLE A-Elemente der #navigation*/
  border: 1px solid green;
}
#navigation ul a{ /*betrifft nur die A-Elemente die in einem Submenü von #navigation sind*/
border: none;

}
-->
</style>
</head>
<body>
<ul id="navigation">
  <li><a href="#">haupt</a></li>
  <li><a href="#">haupt</a></li>
  <li><a href="#">haupt</a></li>
    <li class="submenu"><!--hier startet die ul das Submenu-->
        <ul>
           <li><a href="#">sub</a></li>
            <li><a href="#">sub</a></li>
           <li><a href="#">sub</a></li>
           <li><a href="#">sub</a></li>
           </ul><!-- ende der unternavi-->
    </li>
</ul>
</body>
</html>

Doitsu · 13.05.2009

AW: css / hierarchie

Code:

<script type="text/javascript" charset="utf-8">
         $(document).ready(function() {
            $('li.submenu').hide();            
            [COLOR="Red"]$('ul.navigation li')[/COLOR].click(function() {
               $(this).next('.submenu').slideToggle()          
            });             
         });         
      </script>

Code:

[COLOR="#ff0000"]<ul id="navigation">[/COLOR]
  <li><a href="#">haupt</a></li>
  <li><a href="#">haupt</a></li>
  <li><a href="#">haupt</a></li>
  <li class="submenu"><!--hier startet die ul das Submenu-->
    <ul>
      <li><a href="#">sub</a></li>
      <li><a href="#">sub</a></li>
      <li><a href="#">sub</a></li>
      <li><a href="#">sub</a></li>
    </ul><!-- ende der unternavi-->
  </li>
</ul>

Suchst nach einer Klasse, die nicht vorhanden ist - kann ja auch nicht gehen.

mfwenzel · 13.05.2009

AW: css / hierarchie

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
         $(document).ready(function() {
            $('.submenu').hide();            
            $('[COLOR=Red]#navigation li[/COLOR]').click(function() {
               $(this).next('.submenu').slideToggle()          
            });             
         });         
      </script>
<style type="text/css">
<!--
#navigation a { /*betrifft ALLE A-Elemente der #navigation*/
  border: 1px solid green;
}
#navigation ul a{ /*betrifft nur die A-Elemente die in einem Submenü von #navigation sind*/
border: none;
}
-->
</style>
</head>
<body>
<ul id="[COLOR=Red]navigation[/COLOR]">
  <li><a href="#">haupt</a></li>
  <li><a href="#">haupt</a></li>
  <li><a href="#">haupt</a></li>
    <li class="submenu"><!--hier startet die ul das Submenu-->
        <ul>
           <li><a href="#">sub</a></li>
            <li><a href="#">sub</a></li>
           <li><a href="#">sub</a></li>
           <li><a href="#">sub</a></li>
           </ul><!-- ende der unternavi-->
    </li>
</ul>
</body>
</html>

Manchmal sieht man den Wald vor lauter Bäumen nicht.

Danke jetzt funktioniert alles 1-Wand-Frei