Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „css / hierarchie“

mfwenzel

Nicht mehr ganz neu hier

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?
 

sokie

Mod | Web

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
 
Zuletzt bearbeitet:

mfwenzel

Nicht mehr ganz neu hier

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)
 
Zuletzt bearbeitet:

sokie

Mod | Web

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
 
Zuletzt bearbeitet:

mfwenzel

Nicht mehr ganz neu hier

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

Aktives Mitglied

AW: css / hierarchie

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

Mod | Web

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

Nicht mehr ganz neu hier

AW: css / hierarchie

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>
 
Zuletzt bearbeitet:

Doitsu

Aktives Mitglied

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

Nicht mehr ganz neu hier

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
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.156
Beiträge
2.581.859
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben