Aktiven Link mit bestimmten Hintergrund hinterlegen (meine nicht a:active) - Seite 2

derexo · Registriert seit: 21.03.2006

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.

suncity · Registriert seit: 23.04.2006

Zitat:

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

derexo · Registriert seit: 21.03.2006

Werd ich gleich mal testen DANKE!

sombrero · Registriert seit: 19.11.2006

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?

klickjobs · Registriert seit: 26.10.2009

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;
}

Themen-Optionen	Thema durchsuchen
Druckbare Version zeigen Diese Seite per E-Mail verschicken	Thema durchsuchen: Erweiterte Suche
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln


derexo Joomla Supporter Registriert seit: 21.03.2006 Beiträge: 109 Bedankte sich: 17 9 Danksagungen in 9 Beiträgen	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.


sombrero Joomla Newbie Registriert seit: 19.11.2006 Beiträge: 47 Bedankte sich: 7 1 Danksagung in 1 Beitrag	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?