Dritte Navigationsebene CSS

[ewaldo]

Hallo zusammen,

ich bräuchte schnell eure Hilfe. Ich habe auf meiner Hompage www.schach-wolfsberg.at im Navigationslink "Archiv" unter "2012" eine dritte Ebene "Gallerie" in der Seitenstruktur erstellt. Mein Wunsch wäre ledeglich, dass sich "Gallerie" links um etwa 20px einrückt, ansonsten kann man ja nicht erkennen, dass dies eine Unterpunkt von "2012" ist. Da ich in CSS noch nicht so sattelfest bin, ersuche ich um ein kleine Hilfestellung, das navigation.css liegt bei:

@media screen {

/* ====================================
   Horizontale Navigation – Erste Ebene 
   ==================================== */
#header .mod_navigation {
  background: #f1cf74;
  color: #000;
  padding: 0 18px;
  margin-top: 4px;  
  font-weight: bold;
}

#header .mod_navigation ul {
  float: left;
  width: auto; /* schrumpft die Liste */
  margin-bottom: 0;
}

#header .mod_navigation li {
  float: left;
  width: auto; /* schrumpft die Listenelemente */
  list-style-type: none;
  border-right: 2px solid #fefce6; /* Trennstriche rechts */
  margin: 0 ;
}

#header .mod_navigation li.first {
  border-left: 2px solid #fefce6; /* Trennstrich am Anfang */
 }
 
#header .mod_navigation a,
#header .mod_navigation span {
  display: block;
  min-width: 78px;
  background-color: transparent; color: #000;
  text-align: center; text-decoration: none;
  padding: 8px;
}

#header .mod_navigation .active,
#header .mod_navigation .trail {
  background-color:#7F6E3D; color: #fff;

}

#header .mod_navigation a:hover,
#header .mod_navigation a:focus {
  background-color: #7F6E3D; color: #fff;
}

/*====================================
Horizontale Navigation - Zweite Ebene
=====================================*/
/* Möglichkeit 1:  Zwei horizontale Ebenen*/
#container {
	padding-top: 1.5em;
}
#header ul.level_2 {
	position: absolute;
	left: auto;
	top: auto;
	background-color: #ac1f21;
}
#header .level_2 li,
#header .level_2 li.first { border: none; }

/*Möglichkeit 2: Dropdown-Navigation */
/* Listenelemente zweite Ebene untereinander */
#header .level_2 li {
	clear: both;
	border-top: 1px solid #fefce6;
}

/*Zweite Ebene ausblenden*/
#header .level_2 {
	position: relative;
	left: -9999px;
	top: -9999px;
	overflow: hidden;
	display: inline;
	width: 0;
	height: 0;
	z-index: 1; /* "nach vorne", über den Inhaltsbereich */
}

/* Zweite Ebene bei Mouseover einblenden */
#header li:hover .level_2 {
	left: auto;
	top: auto;
	overflow: auto;
	display: block;
	width: auto;
	min-width: 78px;
	height: auto;
	background-color: #F1CF74;
	border-top: 2px solid #fefce6; 
}

#header .level_2 li a { text-align: left; }



/* ==============
   Metanavigation Header   
   ============== */
#header .mod_customnav  {
position: absolute; 
right: 18px; 
top: -32px; 
font-size: 12px; 
font-weight: bold;

}
#header .mod_customnav li {
  float: left;
  width: auto;
  list-style-type: none;
  margin: 0 ;
  
}
#header .mod_customnav a,
#header .mod_customnav span {
  display: block;
  text-decoration: underline;
  color: #fff;
  padding: 3px ;
  margin-left: 9px;
}
#header .mod_customnav a:hover,
#header .mod_customnav a:focus {
  margin-top:1px;
  /*background: #F1CF74;*/
  color: white;
}
#header .mod_customnav span.active {
  /*background-color: #F1CF74;*/
  color: #F1CF74;
  margin-top: 0px;
 
}

/* =================
   Sitemap gestalten
   ================= */
.mod_sitemap ul ul { margin-bottom: 0; }

.mod_sitemap li {
  list-style-type: none;
  margin-left: 0; /* 1. Ebene ohne Einzug links */
}
.mod_sitemap li li { margin-left: 1.5em; } /* linker Einzug */

.mod_sitemap a { text-decoration: none; }
.mod_sitemap .level_1 a { font-weight: bold; }
.mod_sitemap .level_2 a { font-weight: normal; }

} /* Ende @media */

vielen Dank und liebe Grüße

Ewaldo

[Bas]

Hier die Adressierung ...

#header .mod_navigation ul.level_2 li { [..deine Angaben..] }  // Ansprache der LIs der zweiten Ebene
#header .mod_navigation ul.level_2 li a { [..deine Angaben..] } // Ansprache der Links in der zweiten Ebene

Dann fügst Du Deine gewünschten Änderungen ein .. z.B. bei der LI .. padding-left:10px;
oder beim Link einen font-size:11px (obwohl Pixelangaben doof sind )

Hoffe das hilft.

[ewaldo]

ich hoffe, dass ich das richtig verstanden habe, habe den Code wie folgt eigefügt:

/*====================================
Horizontale Navigation - Zweite Ebene
=====================================*/
/* Möglichkeit 1:  Zwei horizontale Ebenen*/
#container {
	padding-top: 1.5em;
}
#header .mod_navigation ul.level_2 li {
	margin-left:18px;
	}  /* Ansprache der LIs der zweiten Ebene*/
#header .mod_navigation ul.level_2 li a {
	font-size:11px;
	} /* Ansprache der Links in der zweiten Ebene*/

#header ul.level_2 {
	position: absolute;
	left: auto;
	top: auto;
	background-color: #ac1f21;
}
#header .level_2 li,
#header .level_2 li.first { border: none; }

/*Möglichkeit 2: Dropdown-Navigation */
/* Listenelemente zweite Ebene untereinander */
#header .level_2 li {
	clear: both;
	border-top: 1px solid #fefce6;
}

/*Zweite Ebene ausblenden*/
#header .level_2 {
	position: relative;
	left: -9999px;
	top: -9999px;
	overflow: hidden;
	display: inline;
	width: 0;
	height: 0;
	z-index: 1; /* "nach vorne", über den Inhaltsbereich */
}

/* Zweite Ebene bei Mouseover einblenden */
#header li:hover .level_2 {
	left: auto;
	top: auto;
	overflow: auto;
	display: block;
	width: auto;
	min-width: 78px;
	height: auto;
	background-color: #F1CF74;
	border-top: 2px solid #fefce6; 
}

#header .level_2 li a { text-align: left; }

aber der "Gallerie Button" rückt einfach nicht nach rechts. Wenn ich den Firefox Webdeveloper "Elemente Informationen" bemühe, habe ich bei "Gallerie" ul.level_3, muss ich nicht auf diese Klasse verweisen?

p.s. Wenn px doof sind sind, wäre dann % die bessere Alternative oder andere Attribute?

lg

[Fkhm]

Ist nur ein Versuch, aber könnte an #header .mod_navigation liegen, ich würde das zusammen schreiben #header.mod_navigation
War falsch.

Außerdem meinst du dein level_3, also musst du den Stylesheet auf ul.level_3 anpassen.