zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Kindelement eines ausgeblendeten Elternelementes ansprechen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.06.2010, 21:39
Benutzerbild von wandler
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.01.2006
Beiträge: 48
wandler befindet sich auf einem aufstrebenden Ast
Standard Kindelement eines ausgeblendeten Elternelementes ansprechen

Hallo,

ich habe ein CSS Drop-Down-Menü (über eine Unsortierte Liste) für den Einsatz in WordPress.
So weit so gut, nun möchte ich aber die Liste als Widget von WordPress verwalten lassen, dummerweise produziert WordPress eine Überschrift die auch als Listenelement eingesetzt wird (oberste Ebene). Sicher ich könnte den PHP-Code im Template so ändern, dass die Liste ohne Überschrift anfängt, allerdings könnte ich dann nicht (über ein Plugin) diverse Seiten ausschließen.

Lange Rede, kurzer Frage, ich will per CSS das Kindelement eines ausgeblendeten Elternelementes ansprechen, aber wie?

Hier mein HTML-Code:
HTML-Code:
  <div id="menu">
    <ul>
      <li>
        <h4>Navigation</h4>
        <ul>
          <li><a href="http://localhost/WordPress/system/wordpress" title="Startseite">Startseite</a></li>
          <li><a href="http://localhost/WordPress/system/wordpress/seite-2/" title="Seite 2">Seite 2</a></li>
          <li><a href="http://localhost/WordPress/system/wordpress/seite-3/" title="Seite 3">Seite 3</a>
            <ul>
              <li><a href="http://localhost/WordPress/system/wordpress/seite-3/seite-4/" title="Seite 4">Seite 4</a></li>
              <li><a href="http://localhost/WordPress/system/wordpress/seite-3/seite-5/" title="Seite 5">Seite 5</a></li>
            </ul>
          </li>
          <li><a href="http://localhost/WordPress/system/wordpress/seite-6/" title="Seite 6">Seite 6</a></li>
          <li><a href="http://localhost/WordPress/system/wordpress/seite-7/" title="Seite 7">Seite 7</a>
            <ul>
              <li><a href="http://localhost/WordPress/system/wordpress/seite-7/seite-8/" title="Seite 8">Seite 8</a></li>
              <li><a href="http://localhost/WordPress/system/wordpress/seite-7/seite-9/" title="Seite 9">Seite 9</a>
                <ul>
                  <li><a href="http://localhost/WordPress/system/wordpress/seite-7/seite-9/seite-10/" title="Seite 10">Seite 10</a></li>
                  <li><a href="http://localhost/WordPress/system/wordpress/seite-7/seite-9/seite-11/" title="Seite 11">Seite 11</a></li>
                </ul>
              </li>
              <li><a href="http://localhost/WordPress/system/wordpress/seite-7/seite-12/" title="Seite 12">Seite 12</a></li>
            </ul>
          </li>
          <li><a href="http://localhost/WordPress/system/wordpress/seite-13/" title="Seite 13">Seite 13</a></li>
          <li><a href="http://localhost/WordPress/system/wordpress/seite-14/" title="Seite 14">Seite 14</a></li>
        </ul>
      </li>
    </ul>
  </div>
Und mein Stylesheet für das Menü:
Code:
#menu {
	margin: 0;
	padding: 0;
	width: 980px;
	height: 31px;
	background: #3366FF;
	font-size: 76%;
}
#menu ul {
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
}
#menu li {
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
}
#menu a {
	text-decoration: none;
}
#menu li a, #menu li a:link, #menu li a:visited {
	color: #66CCCC;
	display: block;
	margin: 0;
	padding: 8px 15px 8px 15px;
}
#menu li a:hover, #menu li a:active {
	background: #0000CC;
	color: #fff;
	margin: 0;
	padding: 8px 15px 8px 15px;
	text-decoration: none;
}
#menu li li a, #menu li li a:link, #menu li li a:visited {
	background: #6666FF;
	width: 150px;
	color: #77A8E8;
	float: none;
	margin: 0;
	padding: 8px 10px 7px 10px;
	border-bottom: 1px solid #293F6F;
}
#menu li li a:hover, #menu li li a:active {
	background: #0000CC;
	color: #fff;
	padding: 8px 10px 7px 10px;
}
#menu li ul {
	z-index: 9999;
	position: absolute;
	left: -999em;
	height: auto;
	width: 170px;
	margin: 0;
	padding: 0;
}
#menu li ul a { 
	width: 140px;
}
#menu li ul ul {
	margin: -28px 0 0 170px;
}
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li.sfhover ul ul, #menu li.sfhover ul ul ul {
	left: -999em;
}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul {
	left: auto;
}
#menu li:hover, #menu li.sfhover { 
	position: static;
}
Wie kann ich also das oberste Listenelement ausschließen?

Schon mal vielen Dank im Voraus
wandler
__________________
Coden ist keine Esoterik, also lasst uns an eurem Wissen teilhaben ihr Gurus
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.06.2010, 13:47
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Rein inhaltlich ist diese Überschrift sinnvoll, also lässt Du sie nicht per display: none; verschwinden, sondern per

Code:
#menu h4 {
position: absolute;
top: -9999px;
left: -9999px;
}
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.06.2010, 16:57
Benutzerbild von wandler
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.01.2006
Beiträge: 48
wandler befindet sich auf einem aufstrebenden Ast
Standard

Hallo heiko_rs,

so geht es leider nicht, so entferne ich die erste Ebene der Unsortierte Liste, so das alle Kindelemente auch nicht mehr angezeigt werden!
Ich habe das auch so probiert, aber ich kann das Kindelement eines ausgeblendeten Elternelementes nicht spezifisch ansprechen.
Wer hat eine Lösung für so was?
__________________
Coden ist keine Esoterik, also lasst uns an eurem Wissen teilhaben ihr Gurus
Mit Zitat antworten
  #4 (permalink)  
Alt 17.06.2010, 17:01
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von wandler Beitrag anzeigen
so entferne ich die erste Ebene der Unsortierte Liste
Nein, #menu h4 spricht die h4 an und sonst nix.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #5 (permalink)  
Alt 17.06.2010, 17:11
Benutzerbild von wandler
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.01.2006
Beiträge: 48
wandler befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
Nein, #menu h4 spricht die h4 an und sonst nix.
Aber dann habe ich eine leere Liste und das Menü ist nicht mehr ansprechbar!
__________________
Coden ist keine Esoterik, also lasst uns an eurem Wissen teilhaben ihr Gurus
Mit Zitat antworten
  #6 (permalink)  
Alt 18.06.2010, 03:15
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Wie kommst Du denn darauf? Die Subnavi ist doch kein Kindelement der h4! Hast Du meinen Code wenigstens mal ausprobiert? Das einzige, was er ausblendet, ist rot markiert:

Code:
  <div id="menu">
    <ul>
      <li>
        <h4>Navigation</h4>
        <ul>
          <li><a href="http://localhost/WordPress/system/wordpress" title="Startseite">Startseite</a></li>
          <li><a href="http://localhost/WordPress/system/wordpress/seite-2/" title="Seite 2">Seite 2</a></li>
          <li><a href="http://localhost/WordPress/system/wordpress/seite-3/" title="Seite 3">Seite 3</a>
            <ul>
              <li><a href="http://localhost/WordPress/system/wordpress/seite-3/seite-4/" title="Seite 4">Seite 4</a></li>
              <li><a href="http://localhost/WordPress/system/wordpress/seite-3/seite-5/" title="Seite 5">Seite 5</a></li>
            </ul>
          </li>
          <li><a href="http://localhost/WordPress/system/wordpress/seite-6/" title="Seite 6">Seite 6</a></li>
          <li><a href="http://localhost/WordPress/system/wordpress/seite-7/" title="Seite 7">Seite 7</a>
            <ul>
              <li><a href="http://localhost/WordPress/system/wordpress/seite-7/seite-8/" title="Seite 8">Seite 8</a></li>
              <li><a href="http://localhost/WordPress/system/wordpress/seite-7/seite-9/" title="Seite 9">Seite 9</a>
                <ul>
                  <li><a href="http://localhost/WordPress/system/wordpress/seite-7/seite-9/seite-10/" title="Seite 10">Seite 10</a></li>
                  <li><a href="http://localhost/WordPress/system/wordpress/seite-7/seite-9/seite-11/" title="Seite 11">Seite 11</a></li>
                </ul>
              </li>
              <li><a href="http://localhost/WordPress/system/wordpress/seite-7/seite-12/" title="Seite 12">Seite 12</a></li>
            </ul>
          </li>
          <li><a href="http://localhost/WordPress/system/wordpress/seite-13/" title="Seite 13">Seite 13</a></li>
          <li><a href="http://localhost/WordPress/system/wordpress/seite-14/" title="Seite 14">Seite 14</a></li>
        </ul>
      </li>
    </ul>
  </div>
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #7 (permalink)  
Alt 18.06.2010, 18:28
Benutzerbild von wandler
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.01.2006
Beiträge: 48
wandler befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
Wie kommst Du denn darauf? Die Subnavi ist doch kein Kindelement der h4! Hast Du meinen Code wenigstens mal ausprobiert? Das einzige, was er ausblendet, ist rot markiert:
Hallo,

ja ich habe natürlich alles ausprobiert.
Vielleicht ist das Missverständnis, dass es sich um ein "Horizontales Dropdown-Menü" handelt.
Ich habe nun mal den Code der Navigation als Beispiel abgelegt.

Ohne Überschrift H4 im Quellcode sieht es so aus (was optisch richtig ist).

Mit der Überschrift sieht es leider jetzt so aus.

Und wenn ich H4 entferne, dann habe ich eine leere Liste und das Menü ist nicht mehr ansprechbar!

Vielleicht kannst du mich so besser verstehen.
Danke
__________________
Coden ist keine Esoterik, also lasst uns an eurem Wissen teilhaben ihr Gurus
Mit Zitat antworten
  #8 (permalink)  
Alt 19.06.2010, 02:32
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Dann musst Du dafür sorgen, dass li ohne die h4 nicht zusammenschrumpft - eine simple Methode wäre z.B. pos. rel. statt abs. für h4 (left bleibt).

Aber Du weißt schon, dass dieses Markup keinen Sinn ergibt? Korrekt wäre die h4 außerhalb der Navi-ul.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Antwort

Stichwörter
elternelement, kindelement

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
zweites Kindelement ansprechen *pi CSS 4 29.12.2008 17:18
bestimmte input felder ansprechen blackhawk3000 CSS 7 19.08.2008 00:08
Element label über id ansprechen Evoli CSS 8 28.08.2007 14:36


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:50 Uhr.