Thema: Aktiven Link mit bestimmten Hintergrund hinterlegen (meine nicht a:active)

Bitte gerne ...
Das ist mir auch eben aufgefallen, dass es bei dem Link klappt!

Ich nutz nur die Webdeveloper Toolbar wo der CSS-Editor drin ist.

Zitat von derexo

Bitte gerne ...
Das ist mir auch eben aufgefallen, dass es bei dem Link klappt!

Ich nutz nur die Webdeveloper Toolbar wo der CSS-Editor drin ist.

Ja, so kann man(n) sich irren

Webdevloper Toolbar habe ich auch, benutze sie grad aber nicht so oft wie firebug, das kann ich auch nur empfehlen

Werd ich gleich mal testen DANKE!

ich habe das gleiche vor. Ich möchte gerne das Hintergrundbild des Topmenus bei aktivierung verändern. mit dem css Eintrag geht das ganz gut: ul#mainlevel-nav li a#active_menu-nav { aber jetzt habe ich das Problem, dass es ein abgerundetes Menu sein soll. Also ein Bild für die rechte und ein Bild für die linke Seite braucht. Wie mache ich das jetzt dem Menu klar, dass es bei aktivierung zwei bilder in den Hintergrund legen soll?

Bei normalzustand sehen die CSS einträge so aus:

}

ul#mainlevel-nav li a{
display: block;
padding: 0px 10px;
color: #000000;
text-decoration: none;
background: url(../images/menu_tab_left.png) no-repeat left top;
font-weight:bold
}

ul#mainlevel-nav li{
float: left;
padding: 0;
margin: 0;
padding-top: 0;
background: url(../images/menu_tab_right.png) no-repeat right top;
margin-right: 1px;
height:18px;
}

Also durch ein a in ul#mainlevel-nav li a{ unterschieden werden. Leider geht es nicht einfach das a im aktiv Eintrag wegzulassen, also ul#mainlevel-nav li a#active_menu-nav { zu schreiben.
Wie müssten die zwei CSS Einträge für die Hintergrundbilder im aktivierten Zustand lauten?

Hallo ihr,

hab mir diesen und viele andere threads durchgelesen aber bei meinem Mainmenu klappt das leider nicht. Mit dem TopMenu war ich erfolgreich.

Obwohl ich den ...

Code:

ul#mainlevel-nav #active_menu-nav
{
  color: #ffff00;
}

...drin habe möchten die aktiven links nicht gelb bleiben.

Würde mich freuen wenn jemand mal kurz drüber schauen könnte.
Kann doch nicht so schwer sein

Danke schonmal!


mein template: mont_darkpipes

Code:

/* CSS Document */

body {
	background-color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	line-height: 120%;
	height: 100%;
}

.clr {
	clear: both;
}
a:link, a:visited {
	color: #CCCCCC;
	font-weight: bold;
}
a:active, a:hover {
	color: #FFFF00;
	font-weight: bold;
}
hr {
	line-height: 1px;
}

ul#mainlevel-nav
{
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 0.8em;
}



ul#mainlevel-nav li
{
	background-image: none;
	padding-left: 0px;
	padding-right: 0px;
	float: left;
	margin: 0;
	font-size: 11px;
	line-height: 21px;
	white-space: nowrap;
	border-right: 1px solid #cccccc;
}

ul#mainlevel-nav li a
{
	display: block;
	padding-left: 15px;
	padding-right: 15px;
	text-decoration: none;
	color: #CCCCCC;
	background: transparent;
}

#buttons>ul#mainlevel-nav li a { width: auto; }

	ul#mainlevel-nav li a:hover
{
	color: #ffff00;
	background: #555555;
}


#search_outer {
	float: left;
	width: 165px;
}

#search_inner {
  border: 1px solid #cccccc;
	padding: 0px;
  height: 21px !important;
  height: 23px;
  overflow: hidden;
}

#search_inner form {
  padding: 0;
  margin: 0;
}

#search_inner .inputbox {
	border: 0px;
	padding: 3px 3px 3px 5px;
	font-family: arial, helvetica, sans-serif;
	font-size: 11px;
	color: #c64934;
}

#header_outer {
	text-align: left;
	border: 0px;
	margin: 0px;
}

#header {
	float: left;
	padding: 0px;
	margin-right: 2px;
	width: 635px;
	height: 150px;
	background: url(../images/header_short.jpg) no-repeat;
}

#top_outer{
	float: left;
	width: 165px;
}

#top_inner {
  border: 1px solid #cccccc;
	padding: 2px;
  height: 144px !important;
  height: 150px;
  overflow: hidden;
  float: none !important;
  float: left;
}

#left_outer {
  float: left;
	margin-top: 2px;
	width: 165px;
}

#left_inner {
  border: 1px solid #cccccc;
	padding: 2px;
  float: none !important;
  float: left;
}

#content_outer {
	padding: 0px;
	margin-top: 0px;
	margin-left: 2px;
	/** border: 1px solid #cccccc; **/
	float: left;
	width: 635px;
}

#content_inner{
  float: none !important;
  float: left;
  padding: 0;
  padding-top: 2px;
  margin: 0;
}

table.content_table {
  width: 100%;
	padding: 0px;
	margin: 0px;
}

table.content_table td {
	padding: 0px;
	margin: 0px;
}


#banner_inner {
	float: left;
	padding: 0px;
	height: 70px;
}

#poweredby_inner {
	float: right;
	padding: 0px;
	margin-left: 0px;
	height: 70px;
}

#right_outer {
	margin-left: 2px;
	width: 165px;
}

#right_inner {
  float: none !important;
  float: left;
  border: 1px solid #cccccc;
  padding: 2px;
}


.user1_inner {
	border: 1px solid #cccccc;
  float: none !important;
  float: left;
	margin: 0px;
	padding: 2px;
}

.user2_inner {
	border: 1px solid #cccccc;
  float: none !important;
  float: left;
	margin: 0px;
	padding: 2px;
}

table td.body_outer {
	padding: 2px;
	border: 1px solid #cccccc;
}

.maintitle {
	color: #ffffff;
	font-size: 40px;
	padding-left: 15px;
	padding-top: 20px;
}

.error {
  font-style: italic;
  text-transform: uppercase;
  padding: 5px;
  color: #cccccc;
  font-size: 14px;
  font-weight: bold;
}

/** old stuff **/

.back_button {
	float: left;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #cccccc;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 10px;
  line-height: 20px;
  margin: 1px;
}

.pagenav {
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #cccccc;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 10px;
  line-height: 20px;
  margin: 1px;
}

.pagenavbar {
	margin-right: 10px;
	float: right;
}

#footer {
	text-align: center;
	padding: 3px;
}

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

li
{
line-height: 15px;
padding-left: 15px;
padding-top: 0px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
background-position: 0px 2px;
}


td {
	/* text-align: left; */
	font-size: 12px;
}




table.contentpaneopen {
  width: 100%;
	padding: 0px;
	border-collapse: collapse;
	border-spacing: 0px;
	margin: 0px;
}

table.contentpaneopen td {
   padding-right: 5px;
}

table.contentpaneopen td.componentheading {
	padding-left: 4px;
}



table.contentpane {
  width: 100%;
	padding: 0px;
	border-collapse: collapse;
	border-spacing: 0px;
	margin: 0px;
}

table.contentpane td {
	margin: 0px;
	padding: 0px;
}

table.contentpane td.componentheading {
	padding-left: 4px;
}

table.contentpaneopen fieldset {
	border: 0px;
	border-bottom: 1px solid #eee;
}

.button {
  color: #ffff00;
  font-family: Arial, Hevlvetica, sans-serif;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #cccccc;
  width: auto;
  background: url(../images/subhead_bg.png) repeat-x;
  padding: 0px 5px;
  line-height: 18px !important;
  line-height: 16px;
  height: 26px !important;
  height: 24px;
  margin: 1px;
}

.inputbox {
	padding: 2px;
	border:solid 1px #cccccc;
	background-color: #ffffff;
}

#mod_login_remember.inputbox { /* Extra wegen MS-IE, damit kein verrutschter Border */
	 border: none;		       /* das Layout verunstaltet                           */
     background: transparent;
}

.componentheading {
	background: url(../images/subhead_bg.png) repeat-x;
	color: #cccccc;
	text-align: left;
	padding-top: 4px;
	padding-left: 4px;
	height: 21px;
	font-weight: bold;
	font-size: 12px;
	text-transform: uppercase;

}

.contentcolumn {
	padding-right: 5px;
}

.contentheading {
	height: 30px;
	color: #cccccc;
	font-weight: bold;
	font-size: 14px;
	white-space: nowrap;
	background: url(../images/contentheading_bg.png) repeat-x;
	padding-left: 4px;
}



.contentpagetitle {
	font-size: 13px;
	font-weight: bold;
	color: #cccccc;
	text-align:left;
}

table.searchinto {
	width: 100%;
}

table.searchintro td {
	font-weight: bold;
}

table.moduletable {
	width: 100%;
	margin-bottom: 5px;
	padding: 0px;
	border-spacing: 0px;
	border-collapse: collapse;
}

div.moduletable {
	padding: 0;
	margin-bottom: 2px;
}

table.moduletable th, div.moduletable h3 {
	background: url(../images/subhead_bg.png) repeat-x;
	color: #cccccc;
	text-align: left;
	padding-left: 4px;
	height: 21px;
	line-height: 21px;
	font-weight: bold;
	font-size: 10px;
	text-transform: uppercase;
	margin: 0 0 2px 0;
}

table.moduletable td {
	font-size: 11px;
	padding: 0px;
	margin: 0px;
	font-weight: normal;
}

table.pollstableborder td {
  padding: 2px;
}

.sectiontableheader {
  font-weight: bold;
  background: #555555;
  padding: 4px;
}

.sectiontablefooter {

}

.sectiontableentry1 {
	background-color : #3e3e3e;
}

.sectiontableentry2 {
	background-color : #2a2a2a;
}

.small {
	color: #999999;
	font-size: 11px;
}

.createdate {
	height: 15px;
	padding-bottom: 10px;
	color: #999999;
	font-size: 11px;
}

.modifydate {
	height: 15px;
	padding-top: 10px;
	color: #999999;
	font-size: 11px;
}

table.contenttoc {
  border: 1px solid #cccccc;
  padding: 2px;
  margin-left: 2px;
  margin-bottom: 2px;
}

table.contenttoc td {
  padding: 2px;
}

table.contenttoc th {
  background: url(../images/subhead_bg.png) repeat-x;
  color: #666666;
	text-align: left;
	padding-top: 2px;
	padding-left: 4px;
	height: 21px;
	font-weight: bold;
	font-size: 10px;
	text-transform: uppercase;
}

a.mainlevel:link, a.mainlevel:visited {
	display: block;
	background: url(../images/menu_bg.png) no-repeat;
	vertical-align: middle;
	font-size: 11px;
	font-weight: bold;
	color: #ccc;
	text-align: left;
	padding-top: 5px;
	padding-left: 18px;
	height: 20px !important;
	height: 25px;
	width: 100%;
	text-decoration: none;
}

a.mainlevel:hover {
	background-position: 0px -25px;
	text-decoration: none;
	color: #ffff00;
}

#active_menu {
	background-position: 0px -25px;
	color:#ffff00;
	font-weight: bold;
}

a.mainlevel#active_menu:hover {
	color: #ffff00;
}


#header ul.menu .active a {
background-color:#FFFF00;
}


#left li#current a {
background-color:#FFFF00;
}

ul#mainlevel-nav #active_menu-nav
{
  color: #ffff00;
}



a.sublevel:link, a.sublevel:visited {
	padding-left: 1px;
	vertical-align: middle;
	font-size: 11px;
	font-weight: bold;
	color: #c64934;
	text-align: left;
}



a.sublevel:hover {
	color: #900;
	text-decoration: none;
}

.highlight {
	background-color: Yellow;
	color: Blue;
	padding: 0;
}
.code {
	background-color: #ddd;
	border: 1px solid #bbb;
}


a.sublevel-nav li a#active_menu-nav
{
  color: #ffff00;
}


form {
/* removes space below form elements */
	margin: 0;
 	padding: 0;
}

div.mosimage {
  border: 1px solid #ccc;
}

.mosimage {
  border: 1px solid #cccccc;
  margin: 5px
}

.mosimage_caption {
  margin-top: 2px;
  background: #efefef;
  padding: 1px 2px;
  color: #666;
  font-size: 10px;
  border-top: 1px solid #cccccc;
}

span.article_seperator {
	display: block;
	height: 1.5em;
}