Problem mit Template (wahrscheinlich a:focus)

**Chris-AT** · 23.12.2010 16:17

Hallo!
Ich bin gerade dabei, eine neue Homepage für meine Feuerwehr aufzusetzen und habe dafür das template von LernVid genommen.
Eine Vorschau des Templates findet ihr hier:
http://joomla15.lernvid.com/?templat..._4_lernvid.com

Mein Problem:
Wenn man einen Menüeintrag anklickt, wird die Schrift dann rot. Fährt man dann aber wieder über den Menüpunkt, wird die Schrift schwarz. Ich möchte aber, dass die Schrift, wenn der link gerade angesehen wird (daher glaube ich a:focus?) immer rot bleibt. (Wenn ihr also im beispiel mit der Maus über "Startseite" fährt, dann wird die schrift wieder schwarz.)

Ich hoffe ich hab mein Problem nicht zu umständlich erklart

edit:
habe gerade noch eine hover.js gefunden, vermute das problem liegt da drin.
hier der code:

Code:

window.addEvent('domready', function() {
		
				

	 	var list = $$('.module_menu ul.menu li a, a.mainlevel, a.sublevel');
		list.each(function(element) {
		 
			var fx = new Fx.Styles(element, {duration:550, wait:false, transition: Fx.Transitions.Expo.easeOut});
		 
			element.addEvent('mouseenter', function(){
				fx.start({
					'padding-left': 30,			        
			         'color': '#ff0000'			
				});
			});
		 
			element.addEvent('mouseleave', function(){
				fx.start({
				    'padding-left': 15,			        
			        'color': '#000'
				});
			});
		 
		});
		
			var list = $$('ul#mainlevel-nav li a, .pagenav');
		list.each(function(element) {
		 
			var fx = new Fx.Styles(element, {duration:500, wait:false, transition: Fx.Transitions.linear});
		 
			element.addEvent('mouseenter', function(){
				fx.start({
			         'color': '#ff0000'			
				});
			});
		 
			element.addEvent('mouseleave', function(){
				fx.start({				    		        
			        'color': '#000'
				});
			});
		 
		});

		
						var list = $$('a.latestnews, a.mostread, .blogsection');
		list.each(function(element) {
		 
			var fx = new Fx.Styles(element, {duration:350, wait:false, transition: Fx.Transitions.linear});
		 
			element.addEvent('mouseenter', function(){
				fx.start({							        
			         'color': '#000'			
				});
			});
		 
			element.addEvent('mouseleave', function(){
				fx.start({				    		        
			        'color': '#ff0000'
				});
			});
		 
		});
							var list = $$('.readon');
		list.each(function(element) {
		 
			var fx = new Fx.Styles(element, {duration:350, wait:false, transition: Fx.Transitions.linear});
		 
			element.addEvent('mouseenter', function(){
				fx.start({							        
			         'color': '#000'			
				});
			});
		 
			element.addEvent('mouseleave', function(){
				fx.start({				    		        
			        'color': '#ff0000'
				});
			});
		 
		});	

		var scroll = new Fx.Scroll(Window, {
		    wait: false,
		    duration: 800,
		    offset: {'x': 0, 'y': 0},
		    transition: Fx.Transitions.Quad.easeInOut
		});
		 
		$('gotop').addEvent('click', function(event) {
		    event = new Event(event).stop();
		    scroll.toElement('wrapper');
		}); 

});

Danke für eure Hilfe!

**Complex** · 23.12.2010 17:41

Na dann Versuch doch mal die #000 auszutauschen.

Kenne das Template vom Sehen her. Bastel auch grad an einer Seite für die Feuerwehr. ^^

**Chris-AT** · 23.12.2010 17:47

Das hilft nichts, denn dann werden die Links rot, sobald ich sie nur mit der Maus berühre...

aber danke

**anka** · 23.12.2010 17:50

Versuche es mal damit im template.css:

Code:

.module_menu ul.menu li#current.active a {
color: #ff0000 !important;
}

**Chris-AT** · 23.12.2010 17:52

anka, dein Titel "joomlagott" scheint zu stimmen

Super, alles funktioniert, danke dafür!
edit:
Im Firefox funktioniert es aber leider nicht, nur im IE?!

**anka** · 23.12.2010 18:05

Hast du den Browsercache gelöscht?

**Chris-AT** · 23.12.2010 18:10

ja, geht leider trotzdem nicht...

**anka** · 23.12.2010 18:19

Beim Demotemplate funktioniert es auch im FF, daher kann ich ohne einen Link zu deiner Seite leider nicht sagen, warum es bei dir nicht geht...

**Chris-AT** · 23.12.2010 18:26

Meine Seite ist nicht online, nur offline die später online gebracht werden soll...
hier meine template.css:

Code:

@charset "utf-8";
/*---------------------------------------------------
Desidgned by Juergen Koller
Designers Home: http://www.LernVid.com
---------------------------------------------------*/

html {
	height : 100%;
}
body {
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 12px;
	color: #505050;
	background-color: #f3f3f3;
	margin:0;
	padding:0;
}
#wrapper {
	background-image: url('../images/bg.jpg');
	background-position:center top;
	background-repeat: repeat-y;
	width: 99.8%;
	margin: 0 auto;
	background-color: transparent;
}
#spacer {
    height: 5px;
	width: 100%;
	margin: 0;
	padding:0;
	background-color: #f3f3f3;
}
#masthead_container {
    height: 150px;
	width: 100%;
	background-color: transparent;	
	margin: 0;
	padding:0;
	background-image:url('../images/masthead.jpg');
	background-position: center bottom;
	background-repeat:no-repeat;
	background-color: #f3f3f3;
}
#masthead {
    height: 150px;
	width: 980px;
	margin: 0 auto;
	background-image:url('../images/header.jpg');
	background-position: center top;
	background-repeat:no-repeat;
	background-color: transparent;	
	background-color: #f3f3f3;
}
#logo {
	height: 120px;
	width: 120px;
	float:left;
	margin: 15px 0 0 15px;
	background-image: url('../images/LOGOerersdfsgt');
	background-repeat: no-repeat;
}
#feuerwehr {
	float:left;
	text-align: left;
	overflow:hidden;
	color: #fff;
	font-family: "Arial Black";
	text-transform:uppercase;
	line-height: normal;
	height: auto;
	width: 750px;
	overflow:hidden;
	padding:0;
	margin: 0 0 0 20px;
	text-shadow: 1px 1px 1px #000;
	filter:Glow(color=#000000, strength=2);
}
#feuerwehr div {
	margin:0;
	padding:0;
	width:auto;
}
#feuerwehr a {
	color: #fff;
	text-decoration:none;
}
#feuerwehr a:hover {
	color: #fff;
	text-decoration:none;	
}
#slogan {
	float:left;
	text-align: left;
	overflow:hidden;
	color: #fff;
	font-family: "Arial Black";
	height: auto;
	line-height: normal;
	width: 704px;
	overflow:hidden;
	padding:0 3px;
	margin: 0 0 0 60px;
}
#slogan div {
	margin:0;
	padding:0;
	width:auto;
}
#searchbox {
	float:right;
	height: 20px;
	width: 180px;
	margin-top: 15px;
}
#search {
	float: left;
	width: 160px;
	height: 20px;
}
#search_inner {
	margin: 0;
}
#search_inner input, 
#search_inner .inputbox {
	float: left;
	margin: 0;
	padding: 4px 0 0 30px;
	border:0;
	height: 16px;
	font-size: 11px;
	background-image: url('../images/search.gif');
	background-position: left top;
	background-repeat:no-repeat;
}
#search_inner .inputbox:hover {
	color: #ff0000;
	background-color: #fff;
}

#container {
	text-align:left;
	width: 980px;
	background-color: #e9e9e9;
	padding: 0;
	margin: 0 auto;
}
#container2 {
	text-align:left;
	background-color: transparent;
	margin:auto;
}
/* Navigation oben quer */
#navigation {
	background-image:url('../images/navi.gif');
	height: 30px;
    margin:auto;
    background-color: #ddd;
	color: #000;
}
#breadcrumb {
	height: 25px;
	padding: 0;
	margin: 0;
	width: 100%;
	background-image:url('../images/breadcrumb.gif');
	background-repeat:repeat-x;
}
#breadcrumbs {
	height: 25px;
	line-height: 25px;
	padding-left: 182px;
}
#top{
	clear:both;
	float:left;
	margin: 0;
	padding:3px 0 3px 0;
	width: 100%;
	height: auto;
	background-image : url(../images/user_modules.gif);
	background-repeat:repeat-x;
	margin-bottom: 5px;
	border-bottom: 1px solid #ccc;
}
#top_inner {
	padding:0 10px;
	margin: 0 auto;
}
#page_content {
	padding: 0px;
	margin: 0px;
	width: 100%;
}
#sidebar_left {
	position: relative;
	float: left;
	width: 168px;
	background-color: #fff;
	border: 1px solid #ddd;
	padding:0;
	margin:0;
	padding: 5px;
	padding-bottom: 10px;
}
#sidebar_right {
	position: relative;
	float: right;
	width: 180px;
	background-color: #fff;
	border: 1px solid #ddd;
	padding:0;
	margin:0;
	padding: 5px;
	padding-bottom: 10px;
}
/* breite left und right*/
#sidebar_left .module, #sidebar_left .module_menu, #sidebar_left .module_text {
	width: 170px;
	overflow:hidden;
	padding:0;
	margin-bottom: 30px;
}
#sidebar_right .module, #sidebar_right .module_menu, #sidebar_right .module_text {
	text-align: center;
	overflow:hidden;
	padding:0;
	margin-bottom: 30px;
}
/* Beispielseiten Links */
#sidebar_left ul#mainlevel a {
	color: #666;
}
#sidebar_left div.module h3, #sidebar_left div.module_text h3 {
	color: #D60700;
	background-image : url(../images/left_h3.gif);
}
#sidebar_right div.module h3, #sidebar_right div.module_text h3 {
	color: #fff;
	background-image : url(../images/right_h3.gif);
	text-shadow: 1px 1px 1px #000;
	filter:Glow(color=#000000, strength=1);
}
/* hauptmenüs - h3 styles */
.module_menu h3 {
	color: #fff;
	background-image : url(../images/module_menu_h3.gif);
	text-shadow: 1px 1px 1px #000;
	filter:Glow(color=#000000, strength=1);
}
.componentheading {
	font-size: 14px;
	background-image : url(../images/componentheading.gif);
	background-position:center top;
	background-repeat: no-repeat;
	height: 25px;
	line-height:25px;
	text-align:center;
}
.contentheading {
	color : #e81a1c;
	font-size: 13px;
	background-image : url(../images/contentheading.gif);
	background-repeat:no-repeat;
	line-height:20px;
	padding-left: 20px;
}
.contentheading a {
	font-size: 13px;
	line-height:20px;
	text-decoration:none !important;
}
.contentheading a:hover {
	font-size: 13px;
	line-height:20px;
	text-decoration:none;
}
.article_separator {
	clear : both;
	display : block;
	height : 10px;
	margin-bottom : 30px;
	background-image : url(../images/sep.gif);
	background-repeat:repeat-x;
	background-position: left bottom;
}
#content_outleft {
	margin: 0 0 0 182px;
}
#content_outmiddle {
	margin: 0 194px 0 182px;
}
#content_outright {
	margin: 0 194px 0 0;
}
#content {
	background-color: #fff;
	color: #505050;
	padding: 10px;
	min-height: 600px;
	border: 1px solid #ddd;
	overflow:auto;
}
.clr {
	clear:both;
}
#user_modules0 {
	float:left;
	margin: 0;
	padding:5px 0 0 0;
	width: 100%;
	height: auto;
	background-image : url(../images/user_modules.gif);
	background-repeat:repeat-x;
	margin-bottom: 5px;
	border-bottom: 1px solid #ccc;
}
#user8 {
	width:30%;
	float:left;
	min-height: 100px;
	height: auto;
	padding-bottom: 20px;
	overflow:hidden;
	margin-left: 2%;
}

Teil 2 beim nächsten Post (ist zu lang für einen)

**Chris-AT** · 23.12.2010 18:27

Teil 2:

Code:

#user9 {
	width:30%;
	float:left;
	min-height: 100px;
	height: auto;
	padding-bottom: 20px;
	margin-left: 2%;
	overflow:hidden;
}
#user10 {
	width:30%;
	float:left;
	min-height: 100px;
	height: auto;
	padding-bottom: 20px;
	overflow:hidden;
	margin-left: 2%;
}
#user_modules1 {
	float:left;
	margin: 0;
	padding:5px 0 0 0;
	width: 100%;
	height: auto;
	background-image : url(../images/user_modules.gif);
	background-repeat:repeat-x;
	margin-bottom: 5px;
	border-bottom: 1px solid #ccc;
}
#user1 {
	float:left;
	width:45%;
	min-height: 100px;
	overflow:hidden;
	margin-left: 2.5%;
}
#user2 {
	float:left;
	width:45%;
	min-height: 100px;
	overflow:hidden;
	margin-left: 2.5%;
}
#user_modules2 {
	float:left;
	margin: 0;
	padding:5px 0 0 0;
	width: 100%;
	height: auto;
	background-image : url(../images/user_modules.gif);
	background-repeat:repeat-x;
	margin-bottom: 5px;
	border-bottom: 1px solid #ccc;
}
#user5 {
	width:30%;
	float:left;
	min-height: 100px;
	height: auto;
	padding-bottom: 20px;
	overflow:hidden;
	margin-left: 2%;
}
#user6 {
	width:30%;
	float:left;
	min-height: 100px;
	height: auto;
	padding-bottom: 20px;
	margin-left: 2%;
	overflow:hidden;
}
#user7 {
	width:30%;
	float:left;
	min-height: 100px;
	height: auto;
	padding-bottom: 20px;
	overflow:hidden;
	margin-left: 2%;
}
#footer {
	clear: both;
	width: 99%;
	overflow: hidden;
	padding-top: 1%;
	padding-right: 0;
	padding-bottom: 1%;
	padding-left: 0;
	background-color: transparent;
	text-align:center;
}
#footer a {	
	border:none;
}
#bottom {
	clear: both;
	height: 80px;
	background-color: #fff;
	font-size: 9px;
	color: #666;
	text-align:center;
	background-image:url('../images/bottom.gif');
	background-repeat: repeat-x;
	margin:0;
	padding:0;
}
#bottom a {
	font-size: 9px;
	color: #666;
	text-align:center;
	text-decoration:none;
}
#date {
	font-size:11px;
	width: auto;
	background-color: transparent;
	padding-top: 17px;
	overflow:hidden;
	color: #e81a1c;
}
#scroll_up {
	float: right;
	text-align: left;
	background-color: transparent;
	background-repeat:no-repeat;
	margin:0;
	padding:0;
}
#scroll_up a {
	text-align: center;
	color: #000;
	font-size: 10px;
	text-decoration:none;
}
#scroll_up a:hover {
	font-size: 12px;
	color: #000;
}
#copyright_info {
	width: 100%;
	height: 18px;
	line-height: 18px;
	clear: both;
	font-size: 10px;
	padding:0;
	margin:0;
	text-align:center;
	overflow:hidden;
	background-image:url('../images/copy.gif');
	background-repeat: repeat-x;
}
#copyright_info p {
	font-size: 10px;
	padding:0;
	margin:0;
	text-align:center;
}
#designed_by {
	clear: both;
	background-color: transparent;
	color: #999;
	padding:0;
	margin:0;
	text-align:center;
	height: 15px;
	line-height: 15px;
	border: none;
	background-color:#ccc;
	border-top: 1px solid #bbb;
	background-image:url('../images/designed_by.gif');
	background-repeat: repeat-x;
}
#designed_by p {
	letter-spacing: 1px;
	color: #999;
	font-size: 10px;
	text-align:center;
	padding:0;
	margin:0;
}	
#designed_by a {
	color: #999;
	text-decoration:none;
}
#designed_by a:hover {
	color: #ff0000;
}
.module h3 {
	font-size: 13px;
	height: 25px;
	line-height:25px;
}
#sidebar_left h3 {
	font-size: 13px;
	height: 25px;
	line-height:25px;
	padding-left:10px;
	margin:0;
}
#sidebar_right h3 {
	font-size: 13px;
	height: 25px;
	line-height:25px;
	padding:0;
	margin:0;
}
h1,h2,h3,h4,h5,h6 {
	font-family:Arial, Helvetica, Sans-Serif;
	text-shadow: 1px 1px 1px #666;
}
h1 {
	font-size : 40px;
	line-height : 40px;
}
h2 {
	font-size : 35px;
	line-height : 35px;
}
h3 {
	font-size : 30px;
	line-height : 30px;
}
h4 {
	font-size : 25px;
	line-height : 25px;
}
h5 {
	font-size : 20px;
	line-height : 20px;
}
h6 {
	font-size : 15px;
	line-height : 15px;
}
#footer a {
	color: #666;
	text-decoration: underline;
}
#footer a:hover {
	color: #101010;
	text-decoration: none;
}
ul, ol, li {
	margin : 0;
	padding : 0;
}
ul, ol {
	margin : 10px 0;
	padding-left : 10px;
}
ol li {
	list-style-type : decimal;
	line-height : 14px;
}
ul {
	margin : 5px;
	padding : 2px;
	list-style : none;
}
li {
	text-align : left;
	line-height : 14px;
	padding-left : 18px;
	background-image : url(../images/list.gif);
	background-repeat : no-repeat;
	background-position : 0 2px;
	list-style-type : none;
}
li:hover {
	text-align : left;
	line-height : 14px;
	padding-left : 18px;
	background-image : url(../images/list_hover.gif);
	background-position : 0 2px;
	background-repeat : no-repeat;
}
td {
	font-size: 12px;
	margin : 0;
	padding : 0;
}
p {
	margin : 0;
    padding: 5px 0 0 0;	
}
a, a:link, a:visited, a:focus, a:active {
	text-decoration : underline;
	outline : none;
	color : #e81a1c;
}
a:hover {
	color : #999;
	text-decoration : none;
}
#sidebar_left .module div div div, #sidebar_left .module_text div div div, #sidebar_left .module_menu div div div   {
	padding-bottom: 23px;
	background-image : url(../images/module_left_bottom.gif);
	background-repeat : no-repeat;
	background-position:left bottom;
	background-color: #fff;
}
#sidebar_right .module div div div, #sidebar_right .module_text div div div, #sidebar_right .module_menu div div div   {
	padding-bottom: 23px;
	background-image : url(../images/module_right_bottom.gif);
	background-repeat : no-repeat;
	background-position:left bottom;
	background-color: #fff;
}
#sidebar_left .module div div, #sidebar_left .module_text div div, #sidebar_left .module_menu div div {
	padding:0;
	margin: 0;
}
#sidebar_right .module div div, #sidebar_right .module_text div div, #sidebar_right .module_menu div div {
	padding:0;
	margin: 0;
}
#sidebar_left .module div, #sidebar_left .module_text div, #sidebar_left .module_menu div {
	padding:0;
	margin: 0;
}
#sidebar_right .module div, #sidebar_right .module_text div, #sidebar_right .module_menu div {
	padding:0;
	margin: 0;
}
#sidebar_left .module div div div div, #sidebar_right .module div div div div {
	padding: 0;
	margin: 0;
	background-image:none;
}
#sidebar_left .module_text div div div div, #sidebar_right .module_text div div div div {
	padding: 0;
	margin: 0;
	background-image:none;
}
.module_menu ul.menu {
	padding : 0;
	list-style : none;
	margin: 0;
}
.module_menu ul.menu li {
	margin : 0;
	padding : 0;
	list-style : none;
	overflow:hidden;
}
.module_menu ul.menu li a {
	display : block;
	vertical-align : middle;
	font-size : 12px;
	color : #101010;
	text-align : left;
	height : 22px;
	line-height : 22px;
	text-decoration : none;
	padding:0;
	margin: 0;
	padding-left: 15px;
	background-image : url(../images/menu.jpg);
	background-repeat : no-repeat;
}
.module_menu ul.menu li a span {
	background : none;
}
.module_menu ul.menu li a:hover, .module_menu ul.menu li a:active, .module_menu ul.menu li a:focus {
	text-decoration : none;
	font-size : 12px;
	text-align : left;
	background-color: #fff;
	background-repeat : no-repeat;
}
.module_menu ul.menu li.active a {
	background-repeat : no-repeat;
	text-decoration : none;
	font-size : 12px;
	text-align : left;
	background-color: #fff;
}
.module_menu ul.menu li.active a:hover {
	text-decoration: none;
}
.module_menu ul.menu li.active a span {
}
.module_menu ul.menu li li a span {
	list-style : none;
}
.module_menu ul.menu li ul {
	margin : 0;
	padding : 0;
	list-style : none;
}
.module_menu ul.menu li li {
	list-style : none;
}
.module_menu ul.menu li li a {
	list-style : none;
	vertical-align : middle;
	font-size : 12px;
	color : #101010;
	text-align : left;
	text-decoration : none;
	height : 22px;
	padding-left: 15px;
	overflow:hidden;
}
.module_menu ul.menu li li a:hover, .module_menu ul.menu li li a:active {
	color : #101010;
	list-style : none;
	text-decoration : none;
}

.module_menu ul.menu li li a:focus {
	color : #101010;
	list-style : none;
	text-decoration : none;
}

.module_menu ul.menu li li.active a {
	color : #101010 !important;
	list-style : none;
	text-decoration : none;
}
.module_menu ul.menu li li a span {
	list-style : none;
	background-image:none;
	background-color: transparent;
	padding-left: 15px;
}
.module_menu ul.menu li li li a span {
	list-style : none;
	background-image:none;
	background-color: transparent;
	padding-left: 45px;
}
/* Formatvorlagen für die Navigation-Oben */
ul#mainlevel-nav {
	list-style : none;
	padding : 0;
	margin : 0 auto;
	font-size : 12px;
}
ul#mainlevel-nav li {
	background-image:none;
	color : #101010;
	font-weight : bold;
	float : left;
	margin : 0;
	padding : 0;
	font-size : 12px;
	height : 30px;
	line-height : 30px;
	white-space : nowrap;
	background-color: transparent;
}

Thema: Problem mit Template (wahrscheinlich a:focus)

LinkBack

Themen-Optionen

Thema durchsuchen

Anzeige

Problem mit Template (wahrscheinlich a:focus)

Erhielt Danksagungen von:

Erhielt Danksagungen von:

Lesezeichen

Lesezeichen

Berechtigungen