✔ Anpassung eines CSS-Menü Templates

ElGreco93 · 26. Januar 2010

Hallo,
und zwar hab ich bisschen Probleme mit der anpassung der CSS-Datei für das Vertikale Navigationsmenü.
Das ist das Template (Ist für Joomla): http://joomla15.siteground.com/?template=siteground-j15-1

Hier ist ein ausschnitt der CSS-Datei, der für die Formatierung der Navigation zuständig ist.
Mein Problem ist, das ich da den Überblick verliere. Hab ja auch noch nicht soviel CSS erfahrung.
Fürs erste würde mir reichen wenn ich weiß wofür die jeweiligen Klassen sind. Ich schreib daneben meine Vermutungen, mal schaun ob die Stimmen...

Code:

#leftcolumn div.module table ,#rightcolumn div.module table { <---Nicht relevant für das Navigationsmenü
	width: auto;
}

#leftcolumn h3, #rightcolumn h3 {<---Nicht relevant für das Navigationsmenü
	margin: 0;
	color:#fefefe;
	font-weight: bold;
	font-family: Helvetica,Arial,sans-serif;
	font-size: 1.1em;
	background:#eeeeee;
	padding:2px 0 2px 10px;
	line-height:20px;
	text-align: left;
	background:transparent url(../images/menu_t.jpg) top left repeat-x;
	
}


#leftcolumn .moduletable_menu, #leftcolumn .moduletable, #leftcolumn .moduletable_text, #leftcolumn .c,  
#rightcolumn .moduletable_menu, #rightcolumn .moduletable, #rightcolumn .moduletable_text, #rightcolumn .c { <---Vielleicht Äußere Box um das Nav. Menü?
	margin:0 0 20px 0;
	padding: 3px;
	border:1px solid #ccc;
	background:#fefefe;	
}

#leftcolumn ul.menu, #rightcolumn ul.menu { <-- Die linie um das Menü
	margin:0;
	padding:0;
	list-style:none;
	border:1px solid #ccc;
	border-top:none;
}

#leftcolumn ul.menu li, #rightcolumn ul.menu li { <-- Hintergrundfarbe für Hauptpunkt
	margin:0;
	padding:0;
	background: #f5f5f5;
}

#leftcolumn ul.menu li a, #leftcolumn ul.menu li a:link,
#rightcolumn ul.menu li a, #rightcolumn ul.menu li a:link { <-- Die "box" um eine Hauptpunkt. Aber wofür steht das a (#leftcolumn ul.menu li a)
	display:block;
	line-height:20px;
	background:#f5f5f5 url(../images/menu_link_bg.gif) left no-repeat;
	padding:2px 20px;
	border-top:1px solid #dddddd;
	text-decoration:none;
	color:#06569d;
}

#leftcolumn ul.menu li a:hover, #rightcolumn ul.menu li a:hover { <--Moueover effekt. Wieder wofür das a?
	background:#eeeeee url(../images/menu_link_bg.gif) left no-repeat;
	color:#666666;
}

/* ****** left col current menu ****** */
#leftcolumn ul.menu li#current a, #leftcolumn ul.menu li#current a:link, 
#rightcolumn ul.menu li#current a, #rightcolumn ul.menu li#current a:link { <-- Aktuelles Menü.Wieder wofür das a?
	display:block;
	line-height:20px;
	background:#f5f5f5 url(../images/menu_curren_link_bg.gif) left no-repeat;
	padding:2px 20px;
	border-top:1px solid #dddddd;
	text-decoration:none;
	color:#ff8800;
}

#leftcolumn ul.menu li#current a:hover, #rightcolumn ul.menu li#current a:hover { <- Aktuelles Menü Mousover. Wieder wofür das a?
	background:#eeeeee url(../images/menu_curren_link_bg.gif) left no-repeat;
	color:#666666;
}

/* ****** left col sub menu ****** */
#leftcolumn ul.menu li ul, #rightcolumn ul.menu li ul { <--Unterpunkte
	margin:0;
	padding:0 0 0 0px;
	list-style:none;
}

#leftcolumn ul.menu li#current ul li a, #leftcolumn ul.menu li#current ul li a:link,
#rightcolumn ul.menu li#current ul li a, #rightcolumn ul.menu li#current ul li a:link { <-Aktueller unterpunkt
	background:#f5f5f5 url(../images/menu_sub_link_bg.gif) left no-repeat;
	text-decoration:none;
	color:#06569d;
	padding:2px 25px;
}

#leftcolumn ul.menu li#current ul li a:hover, #rightcolumn ul.menu li#current ul li a:hover { <--Aktueller Unterpunkt Mousover
	background:#f5f5f5 url(../images/menu_sub_link_bg.gif) left no-repeat;
	color:#666666;
}

/* forms */
#leftcolumn .moduletable ul, #rightcolumn .moduletable ul { <--?
	margin:6px 0;
	padding:0;
	list-style:none;
}

#leftcolumn .moduletable ul li, #rightcolumn .moduletable ul li {<--?
	margin:0;
	padding:0 2px;
}

Bisschen unübersichtlich aber naja...ich will eigentlichnur Hinkriegen das die unterpunkte Übersichtlicher werden (ul li ul li ich glaube die)].
Vielleicht weiß jemand wo ich da bearbeiten muss. (Die anpassung selber schaffe ich schon)

Vielen Dank im vorraus,
Philip

Maik · 26. Januar 2010

ElGreco93 hat gesagt.:

Code:

#leftcolumn ul.menu li a, #leftcolumn ul.menu li a:link,
#rightcolumn ul.menu li a, #rightcolumn ul.menu li a:link { <-- Die "box" um eine Hauptpunkt. Aber wofür steht das a (#leftcolumn ul.menu li a)

Die "Box" ist das a-Element, das in der Auszeichnungssprache HTML den Hyperlink, Verweis auszeichnet.

In den vier gruppierten Selektoren wird es jeweils am Ende der Elementhierachie genannt, und somit mit dem darauffolgenden Regelblock formatiert.

Zu deinen weiteren darauffolgenden Fragen bzgl. dieses Elements empfehle ich dir, das Kapitel :link, :visited, :focus, :hover, :active (Pseudoklassen für Verweise und andere Elemente) zu studieren.

ElGreco93 hat gesagt.:

Code:

/* forms */
#leftcolumn .moduletable ul, #rightcolumn .moduletable ul { <--?
	margin:6px 0;
	padding:0;
	list-style:none;
}

#leftcolumn .moduletable ul li, #rightcolumn .moduletable ul li {<--?
	margin:0;
	padding:0 2px;
}

Da ist dem Selektor zufolge im linken und rechten Spaltenblock für einen Formularbereich innerhalb eines Elements mit dem Klassenbezeichner .moduletable eine <ul>-Liste vorgesehen.

ElGreco93 hat gesagt.:
Bisschen unübersichtlich aber naja...ich will eigentlichnur Hinkriegen das die unterpunkte Übersichtlicher werden (ul li ul li ich glaube die)].

Wenn du die Unterpunkte bzw. Verweise in der zweiten Menü-Ebene anders formatieren möchtest, als jene der ersten (oberen) Menü-Ebene, hast du vom Ansatz her den entsprechenden Selektor genannt. Wie er für dieses Menü vollständig / spezifisch zu lauten hat, kannst du doch der ersten (obersten) Menü-Ebene entnehmen.

mfg Maik

ElGreco93 · 26. Januar 2010

Danke
werds mal veruschen
Melde mich morgen dann nochmal

ElGreco93 · 29. Januar 2010

Ich kriegs irgendwie nicht hin. Ich hab jetzt nur die Klasse, die die Untermenüs (ul li ul li) Formatiert, wenn die angezeigt werden.

Code:

#leftcolumn ul.menu li#current ul li a, #leftcolumn ul.menu li#current ul li a:link

Was mich hier allerdings wundert ist, das damit ja eigentlich die aktiven Links Formatiert werden oder nicht?

Aber wenn ich den Link eines Sub-Menüs anklicke wird die Klasse von den ul li punkten angewendet. Hab schon alles mögliche versucht (auch gegoogelt) aber ich schaffs irgendwie nicht...

Weiß wer weiter?

Maik · 29. Januar 2010

ElGreco93 hat gesagt.:
Weiß wer weiter?

Nicht wirklich, denn mit deinen gezeigten Selektoren, die im linken Spaltenblock in der Untermenüebene des aktiven Hauptmenüpunktes (li#current) die enthaltenden Links und Links zu nicht besuchten Seiten (a:link) formatieren sollen, lässt sich so erstmal nicht viel anfangen.

Ein Link zu deiner Seite sollte mehr Aufschluß bringen, was du da erfolglos versuchst, umzusetzen.

mfg Maik

ElGreco93 · 29. Januar 2010

Moment habs bis jetzt nur im Localhost installier aber ich lad das mal woanders hoch.
in 5 min poste ich den link

ElGreco93 · 29. Januar 2010

http://bkv24.square7.ch/
Hab mal die Sub Links bisschen auffälliger gemacht.
Hier nochmal die ganze CSS-Datei:

Code:

html {
  height: 100%;
  margin-bottom: 0px;
}

form {
  margin: 0;
  padding: 0;
}

img,table {
	border:none;
}

body {
	font-family: Helvetica,Arial,sans-serif;
	line-height: 1.3em;
	margin: 0px 0px 0px 0px;
	font-size: 12px;
	color: #333;
}

a:link, a:visited {
	text-decoration: none;
	font-weight: normal;
}

a:hover {
	text-decoration: underline;
	font-weight: normal;
}

input.button {
 cursor: pointer;
 background:none;
}

p {
  margin-top: 0;
  margin-bottom: 5px;
}

/*****************************************/
/*** Template specific layout elements ***/
/*****************************************/
#page_bg {
	padding: 0;
	margin-bottom: 1px;
}

div.center {
  text-align: center;
}

div#wrapper {
	margin-left: auto;
	margin-right: auto;
}

body.width_medium div#wrapper {
	width: 950px;
}

body.width_small div#wrapper {
	width: 773px;
}

body.width_fmax div#wrapper {
	min-width: 750px;
	max-width: 1050px;
}


div#header_r {
	padding:0px 25px;
	text-align: left;
}

#logo {
	padding: 0px;
	text-align: left;
	height:85px;
}

#logo a, #logo a:link, #logo a:hover {
	font-weight: bold;
	font-family: Helvetica,Arial,sans-serif;
	font-size: 4em;
	padding:0;
	margin:0;
	line-height:1.4em;
	color:#fefefe;
	text-decoration:none;
}

div#newsflash {
	width: auto;
	margin-left: 350px;
	margin-right: 30px;
	border: 1px solid #00f;
}

div#tabarea {
	background: url(../images/top_menu_bg.jpg) top left repeat-x;
	margin: 0 6px;
}

div#footer_r {
	padding-top: 10px;
	height: 47px;
	overflow: hidden;
}

div#footer_r div {
	text-align: center;
	font-size: .90em;
	color: #aaa;
}

div#footer_r a:link, div#footer_r a:visited  {
	color: #999;
}

#pathway {
	padding: 0px 10px 8px;
	width: auto;
	margin-right: 250px;
	text-align: left;
}

#search {
	float: right;
	width:320px;
	margin-top: -20px;
	margin-right: 20px;
	height: 40px;
	overflow: hidden;
	text-align:right;
}

#area {
	padding: 0;
	width:100%;
}

#whitebox {
	margin: 0;
	width: auto;
}

#whitebox div {
	text-align: left;
}

#whitebox_t {
	background: #ebebeb url(../images/header_top_middle.jpg) 0 0 repeat-x;
}

#whitebox_tl {
	background: url(../images/header_top_left.jpg) 0 0 no-repeat;
}

#whitebox_tr {
	height: 16px;
	overflow: hidden;
	background: url(../images/header_top_right.jpg) 100% 0 no-repeat;
}

#whitebox_m {
	width: auto;
	padding: 10px 10px;
	margin:0 6px;
	background: url(../images/left_bg.jpg) 100% 100% repeat;
}


#whitebox_br {
	height: 13px;
	background: url(../images/mw_content_b_r.png) 100% 100% no-repeat;
}

/* horizontal pill menu */
table.pill {
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

td.pill_m {
  padding: 0;
  margin: 0;
  width: auto;
}

td.pill_l {
  width:  2px;
  height: 28px;
  background: url(../images/top_menu_separator.jpg) top right no-repeat;
}

#pillmenu {
  white-space: nowrap;
  height: 28px;
  float: left;
}

#pillmenu ul {
  margin: 0;
  padding: 0;
  list-style:none;
}

#pillmenu li {
	float: left;
	margin: 0;
	padding: 0;
	background: url(../images/top_menu_separator.jpg) top right no-repeat;
}

#pillmenu a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: normal;
	float:left;
  display:block;
  height: 22px;
  line-height: 24px;
  padding: 3px 20px;
  color: #fefefe;
  text-decoration: none;
}

#pillmenu a:hover {
  color: #96abbe;
}

#pillmenu a#active_menu-nav {
	height: 28px;
	line-height: 21px;
}

#leftcolumn ,#rightcolumn {
	margin: 0;
	width: 16%;
	float:left;
}

div#maincolumn {
padding:0 10px;
float:left;
width: 65%;
}
div#maincolumn_full {
padding:0 10px;
width: 80%;
float:left;
}

div.nopad {
	padding: 0;
}

td.middle_pad {
	width: 20px;
}

/*****************************************/
/*** Joomla! specific content elements ***/
/*****************************************/

div.offline {
	background: #fffebb;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	font-size: 1.2em;
	padding: 5px;
}

span.pathway {
  display: block;
  margin: 0 20px;
  height: 16px;
  line-height: 16px;
  overflow: hidden;
}

/* headers */
div.componentheading {
  padding-left: 0px;
}

h1 {
	padding: 0;
	font-family:Helvetica ,Arial,sans-serif;
	font-size: 1.3em;
	font-weight: bold;
	vertical-align: bottom;
	color: #666;
	text-align: left;
	width: 100%;
}

h2, .contentheading {
	padding: 0;
	font-family: Tahoma, Helvetica,sans-serif;
	font-size: 12px;
	font-weight: bold;
	vertical-align: bottom;
	color: #06569d;
	text-align: left;
	width: 100%;
}

table.contentpaneopen h3 {
	margin-top: 25px;
}

h4 {
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
}

h3, .componentheading, table.moduletable th, legend {
  margin: 0;
  font-weight: bold;
  font-family: Tahoma,Helvetica,Arial,sans-serif;
  color:#06569d;
  font-size: 1.4em;
  padding-left: 0px;
	margin-bottom: 10px;
	text-align: left;
}

/* small text */
.small {
	font-size: .90em;
	color: #999;
	font-weight: normal;
	text-align: left;
}

.modifydate {
  height: 20px;
  vertical-align: bottom;
	font-size: .90em;
	color: #999;
	font-weight: normal;
	text-align: left;
}

.createdate {
	height: 20px;
	vertical-align: top;
	font-size: .90em;
	color: #999;
	font-weight: normal;
	vertical-align: top;
	padding-bottom: 5px;
	padding-top: 0px;

}

a.readon {
	margin-top: 10px;
	display: block;
	float: left;
	background: url(../images/mw_readon.png) top right no-repeat;
	padding-right: 20px;
	line-height: 14px;
	height: 16px;
}

/* form validation */
.invalid { border-color: #ff0000; }
label.invalid { color: #ff0000; }


/** overlib **/

.ol-foreground {
	background-color: #f6f6f6;
}

.ol-background {
	background-color: #666;
}

.ol-textfont {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}

.ol-captionfont {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #f6f6f6;
	font-weight: bold;
}
.ol-captionfont a {
	color: #0B55C4;
	text-decoration: none;
	font-size: 12px;
}

.ol-closefont {}

/* menu links */
a.mainlevel:link, a.mainlevel:visited {
	padding-left: 5px;
}

a.mainlevel:hover {

}

/* spacers */
span.article_separator {
	display: block;
	height: 20px;
}

.article_column {
	padding-right: 5px;
}

.column_separator {
	border-left: 1px dashed #e0e0e0;
	padding-left: 10px;
}

td.buttonheading {

}

.clr {
	clear: both;
}


div#maindivider {
  border-top: 1px solid #ddd;
  margin-bottom: 10px;
  overflow: hidden;
  height: 1px;
}

table.blog span.article_separator {
	display: block;
	height: 20px;
}

/* table of contents */
table.contenttoc {
  margin: 5px;
  border: 1px solid #ccc;
  padding: 5px;
}

table.contenttoc td {
  padding: 0 5px;
}


/* content tables */
td.sectiontableheader {
  background: #efefef;
  color: #333;
  font-weight: bold;
  padding: 4px;
  border-right: 1px solid #fff;
}

tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
  padding: 4px;
}

td.sectiontableentry0,
td.sectiontableentry1,
td.sectiontableentry2 {
  padding: 3px;
}


/* content styles */
table.contentpaneopen, table.contentpane {
	margin: 0;
	padding: 0;
	width: auto;
}

table.contentpaneopen li {
	margin-bottom: 5px;
}

table.contentpaneopen fieldset {
	border: 0;
	border-top: 1px solid #ddd;
}

table.contentpaneopen h3 {
	margin-top: 25px;
}

table.contentpaneopen h4 {
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
}

.highlight {
	background-color: #fffebb;
}

/* module control elements */
table.user1user2 div.moduletable {
	margin-bottom: 0px;
}

div.moduletable, div.module {
  margin-bottom: 25px;
}

div.module_menu {
	margin: 0;
	padding: 0;
	margin-bottom: 15px;
}

div.module_menu div div div {
	padding: 0px;
	padding-top: 30px;
	padding-bottom: 10px;
	width: auto;
}

div.module_menu div div div div {
	background: none;
	padding: 0;
}

div.module_menu ul {
	margin: 10px 0;
	padding-left: 10px;
	list-style:none;
}

div.module_menu ul li {
	margin: 0;
	padding: 0;
}

div.module_menu ul li a:link, div.module_menu ul li a:visited {
	font-weight: bold;
	background:transparent url(../images/blue/bullet2.jpg) top left no-repeat;
	padding:2px 0 2px 25px;
	line-height:24px;
	
}

#leftcolumn div.module table ,#rightcolumn div.module table {
	width: auto;
}

#leftcolumn h3, #rightcolumn h3 {
	margin: 0;
	color:#fefefe;
	font-weight: bold;
	font-family: Helvetica,Arial,sans-serif;
	font-size: 1.1em;
	background:#eeeeee;
	padding:2px 0 2px 10px;
	line-height:20px;
	text-align: left;
	background:transparent url(../images/menu_t.jpg) top left repeat-x;
	
}


#leftcolumn .moduletable_menu, #leftcolumn .moduletable, #leftcolumn .moduletable_text, #leftcolumn .c, 
#rightcolumn .moduletable_menu, #rightcolumn .moduletable, #rightcolumn .moduletable_text, #rightcolumn .c {
	margin:0 0 20px 0;
	padding: 3px;
	border:1px solid #ccc;
	background:#fefefe;	
}

#leftcolumn ul.menu, #rightcolumn ul.menu {
	margin:0;
	padding:0;
	list-style:none;
	border:1px solid #ccc;
	border-top:none;
}

#leftcolumn ul.menu li, #rightcolumn ul.menu li {
	margin:0;
	padding:0;
	background: #f5f5f5;
}

#leftcolumn ul.menu li a, #leftcolumn ul.menu li a:link,
#rightcolumn ul.menu li a, #rightcolumn ul.menu li a:link {
	display:block;
	line-height:17px;
	background:#f5f5f5 url(../images/menu_link_bg.gif) left no-repeat;
	padding:2px 20px;
	border-top:1px solid #dddddd;
	text-decoration:none;
	color:#06569d;
}

#leftcolumn ul.menu li a:hover, #rightcolumn ul.menu li a:hover {
	background:#eeeeee url(../images/menu_link_bg.gif) left no-repeat;
	color:#06569d;
}

/* ****** left col current menu ****** */
#leftcolumn ul.menu li#current a, #leftcolumn ul.menu li#current a:link, 
#rightcolumn ul.menu li#current a, #rightcolumn ul.menu li#current a:link {
	display:block;
	line-height:17px;
	background:#f5f5f5 url(../images/menu_curren_link_bg.gif) left no-repeat;
	padding:2px 20px;
	border-top:1px solid #dddddd;
	text-decoration:none;
	color:#ff8800;
}

#leftcolumn ul.menu li#current a:hover, #rightcolumn ul.menu li#current a:hover {
	background:#eeeeee url(../images/menu_curren_link_bg.gif) left no-repeat;
	color:#666666;
}

/* ****** left col sub menu ****** */
#leftcolumn ul.menu li ul, #rightcolumn ul.menu li ul {
	margin:0;
	padding:0 0 0 0px;
	list-style:none;
}

#leftcolumn ul.menu li#current ul li a, #leftcolumn ul.menu li#current ul li a:link,
#rightcolumn ul.menu li#current ul li a, #rightcolumn ul.menu li#current ul li a:link,#leftcolumn ul.menu li ul#current li a, #leftcolumn ul.menu li ul#current li a:link{
	background:#f5f5f5 url(../images/menu_sub_link_bg.gif) left no-repeat;
	text-decoration:none;
	color:#F06;
	padding:2px 25px;
}

#leftcolumn ul.menu li#current ul li a:hover, #rightcolumn ul.menu li#current ul li a:hover {
	background:#f5f5f5 url(../images/menu_sub_link_bg.gif) left no-repeat;
	color:#666666;
}

/*new*/
#leftcolumn .moduletable_menu_new, #leftcolumn .moduletable, #leftcolumn .moduletable_text, #leftcolumn .c {
	margin:0 0 20px 0;
	padding: 3px;
	border:1px solid #ccc;
	background:#fefefe;	
}

#leftcolumn ul.menu_new {
	margin:0;
	padding:0;
	list-style:none;
	border:1px solid #ccc;
	border-top:none;
}

#leftcolumn ul.menu_new li {
	margin:0;
	padding:0;
	background: #f5f5f5;
}

#leftcolumn ul.menu_new li a, #leftcolumn ul.menu_new li a:link {
	display:block;
	line-height:18px;
	background:#f5f5f5 url(../images/menu_link_bg.gif) left no-repeat;
	padding:2px 20px;
	border-top:1px solid #dddddd;
	text-decoration:none;
	color:#06569d;
}

#leftcolumn ul.menu_new li a:hover {
	background:#eeeeee url(../images/menu_link_bg.gif) left no-repeat;
	color:#666666;
}

/* ****** left col current menu ****** */
#leftcolumn ul.menu li#current a, #leftcolumn ul.menu li#current a:link {
	display:block;
	line-height:17px;
	background:#f5f5f5 url(../images/menu_curren_link_bg.gif) left no-repeat;
	padding:2px 20px;
	border-top:1px solid #dddddd;
	text-decoration:none;
	color:#ff8800;
}

#leftcolumn ul.menu li#current a:hover, #rightcolumn ul.menu li#current a:hover {
	background:#eeeeee url(../images/menu_curren_link_bg.gif) left no-repeat;
	color:#666666;
}

/* ****** left col sub menu ****** */
#leftcolumn ul.menu_new li ul {
	margin:0;
	padding:0 0 0 0px;
	list-style:none;
}

#leftcolumn ul.menu_new li#current ul li a, #leftcolumn ul.menu_new li#current ul li a:link {
	text-decoration:none;
	color:#06569d;
	padding:2px 30px;
	background-color: #f5f5f5;
	background-image: url(http://localhost/images/icons/bullet_black.png);
	background-repeat: no-repeat;
	background-position: 15px;
}

#leftcolumn ul.menu_new li#current ul li a:hover {
	background:#f5f5f5 url(http://localhost/images/icons/bullet_blue.png) no-repeat;
	background-position: 15px;
	color:#666666;
}


/* forms */
#leftcolumn .moduletable ul, #rightcolumn .moduletable ul {
	margin:6px 0;
	padding:0;
	list-style:none;
}

#leftcolumn .moduletable ul li, #rightcolumn .moduletable ul li {
	margin:0;
	padding:0 2px;
}

table.adminform textarea {
  width: 540px;
  height: 400px;
  font-size: 1em;
  color: #000099;
}

div.search input {
	width: 145px;
	border: 1px solid #ccc;
	margin: 15px 0 10px 0;
}

form#form-login fieldset { border: 0 none; margin: 0em; padding: 0.2em;}
form#form-login ul { padding-left: 20px; }

/* thumbnails */
div.mosimage         {  margin: 5px; }
div.mosimage_caption {  font-size: .90em; color: #666; }

div.caption       { padding: 0 10px 0 10px; }
div.caption img   { border: 1px solid #CCC; }
div.caption p     { font-size: .90em; color: #666; text-align: center; }

/* Parameter Table */
table.paramlist {
	margin-top: 5px;
}

table.paramlist td.paramlist_key {
	width: 128px;
	text-align: left;
	height: 30px;
}

table.paramlist td.paramlist_value {
}

div.message {
	font-family : "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size : 14px;
	color : #c30;
	text-align: center;
	width: auto;
	background-color: #f9f9f9;
	border: solid 1px #d5d5d5;
	margin: 3px 0px 10px;
	padding: 3px 20px;
}

/* Banners module */

/* Default skyscraper style */
.bannergroup {
}

.banneritem {
}

/* Text advert style */

.banneritem_text {
	padding: 4px;
	font-size: 11px;
}

.bannerfooter_text {
	padding: 4px;
	font-size: 11px;
	background-color: #F7F7F7;
	text-align: right;
}

/* System Messages */
/* see system general.css */

.pagination span { padding: 2px; }
.pagination a    { padding: 2px; }

/* Polls */
.pollstableborder td {
	text-align: left;
}

/* Frontend Editing*/
fieldset {
	border: 1px solid #ccc;
	margin-top: 15px;
	padding: 15px;
}

legend {
	margin: 0;
	padding: 0 10px;
}

td.key {
	border-bottom:1px solid #eee;
	color: #666;
}

/* Tooltips */
.tool-tip {
	float: left;
	background: #ffc;
	border: 1px solid #D4D5AA;
	padding: 5px;
	max-width: 200px;
}

.tool-title {
	padding: 0;
	margin: 0;
	font-size: 100%;
	font-weight: bold;
	margin-top: -15px;
	padding-top: 15px;
	padding-bottom: 5px;
	background: url(../../system/images/selector-arrow.png) no-repeat;
}

.tool-text {
	font-size: 100%;
	margin: 0;
}

/* System Standard Messages */
#system-message dd.message ul { background: #C3D2E5 url(../../images/notice-info.png) 4px center no-repeat;}

/* System Error Messages */
#system-message dd.error ul { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B;}

/* System Notice Messages */
#system-message dd.notice ul { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E;}



/* ****************************************************************************** */
/* blue */
input,button {
	border:1px solid #dcdcdc;
	background:transparent;
}


/* blue */
a:link, a:visited {
	color: #06569d;
}

a:hover {
	color: #0b3768;
}

#pillmenu a#active_menu-nav {
  background: url(../images/top_menu_hover_bg.jpg) top right repeat-x;
  color: #fff;
}

#pillmenu a#active_menu-nav:hover {
  color: #fff;
}

h3, .componentheading, table.moduletable th {
  color: #06569d;
}

div.module_menu {
	background: url(../images/blue/module_mright_bg.jpg) 100% 100% no-repeat;
}

div.module_menu div {
	background: url(../images/blue/module_mleft_bg.jpg) 0 100% no-repeat;
}

div.module_menu div div {
	background: url(../images/blue/module_right_bg.jpg) 100% 0 no-repeat;
}

div.module_menu div div div {
	background: url(../images/blue/module_left_bg.jpg) 0 0 no-repeat;
}

/* ********************************************************************************* */
/* blue */
#page_bg {
	background: #ebebeb;
	margin:20px 40px;
}

div#wrapper {
	background: url(../images/left_shadow.jpg) 0 0 repeat-y;
}

div#wrapper_r {
	background: url(../images/right_shadow.jpg) 100% 0 repeat-y;
}

div#header {
	background: #06569d url(../images/header_top_middle_shadow_bg.jpg) bottom left repeat-x;
	margin:0 6px;
}

div#header_r {
	background: transparent url(../images/header_lr_bg.jpg) bottom right no-repeat;
}

div#footer {
	background: url(../images/footer_m_bg.jpg) 0 100% repeat-x;
}

div#footer_l {
	background: url(../images/footer_l_bg.jpg) 0 0 no-repeat;
}

div#footer_r {
	background: url(../images/footer_r_bg.jpg) 100% 0 no-repeat;
}

/* ********************************************************************** */

input[type="checkbox"], input[type="radio"]{
   background: transparent;
   border: none;
}

/* -------------------------- */
a.sgfooter:link, a.sgfooter:visited {
	color			: #2861a4;
	font-family: Arial,sans-serif;
	text-decoration:none;
}
a.sgfooter:hover {
	color: #2861a4;
	font-family: Arial,sans-serif;
	text-decoration:none;
}
#sgf {
font-size: 11px;
text-align:center;
width:100%;
margin:0px auto;
color: #2861a4;
font-family: Arial,sans-serif;
}
.sgf {
text-align:right;
font-size: 11px;
font-family: Arial,sans-serif;
color: #2861a4;
text-decoration:none;
}
.sgf1 {
font-size: 11px;
font-family: Arial,sans-serif;
color: #2861a4;
text-align:left;
}

a.sglink:link, a.sglink:visited {
	color			: #2861a4;
	font-size		: 11px;
	font-family: Arial,sans-serif;
	text-decoration:none;
}
a.sglink:hover {
	color			: #2861a4;
	font-family: Arial,sans-serif;
	text-decoration:none;
}

Maik · 29. Januar 2010

In deinen beiden vorhin gezeigten Selektoren muß der ID-Bezeichner #current für das <li>-Element in der Untermenüebene deklariert werden, denn dort taucht er im Markup auf, und nicht in der oberen (ersten) Menüebene.

mfg Maik

ElGreco93 · 29. Januar 2010

DANKE

#leftcolumn ul.menu li ul li#current a, #leftcolumn ul.menu li ul li#current a:link
damit hats geklappt!

Super danke nochmal für deine Hilfe!

✔ Anpassung eines CSS-Menü Templates

ElGreco93

Erfahrenes Mitglied

Maik

ElGreco93

Erfahrenes Mitglied

ElGreco93

Erfahrenes Mitglied

Maik

ElGreco93

Erfahrenes Mitglied

ElGreco93

Erfahrenes Mitglied

Maik

ElGreco93

Erfahrenes Mitglied

Neue Beiträge