• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Falscher Codelink in der Navigation wird markiert

JolloyRoger

Neues Mitglied
Hallo zusammen,
ich habe folgendes Problem und bitte um Hilfe. Ich möchte ein bereits erstelltes Template etwas abwandeln. Da es nicht genug Unterseiten waren, habe ich einige Unterseiten kopiert, mit neuen Namen versehen und anschließend neu verlinkt. Der jeweils benutzte Link der Navigation wird dabei weiß unterlegt. Bei den kopierten Unterseiten markiert er jedoch jetzt den falschen/ursprünlichen Link.

Die Menüführung wäre:
Startseite/News Schach-AG Termine Turniere Training Links Gästebuch Kontakt Impressum

Z.B. ist die Untersite Training die kopierte Untersite Schach-AG. Wenn ich jetzt die Site Training ansteuern möchte, markiert er die Site Schach-AG weiß.

Ich habe mir schon einen "Wolf" gesucht aber ich finde die Verbindung nicht. Hat jemand einen Tipp?

Hier der Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<title>GSO-MSO-Schach Startseite_News</title>
<meta name="description" content="free website template" />
<meta name="keywords" content="enter your keywords here" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
/*
* Examples - images
*/

$("a#example1").fancybox();

$("a#example2").fancybox({
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});

$("a#example3").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none'
});

$("a#example4").fancybox({
'opacity' : true,
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'none'
});

$("a#example5").fancybox();

$("a#example6").fancybox({
'titlePosition' : 'outside',
'overlayColor' : '#000',
'overlayOpacity' : 0.9
});

$("a#example7").fancybox({
'titlePosition' : 'inside'
});

$("a#example8").fancybox({
'titlePosition' : 'over'
});

/*
* Examples - various
*/

$("#various1").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none'
});

$("#various2").fancybox();

$("#various3").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});

$("#various4").fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
</script>
</head>

<body>
<div class="container_header"><p>&nbsp;</p></div>
<div id="main">
<div id="header">
<div id="banner">
<h1>GSO-MSO-SCHACH</h1>
</div><!--close banner-->
</div><!--close header-->
<div class="container_footer">&nbsp;</div>
<div id="menubar">
<ul id="menu">
<li class="selected"><a href="index.html">Startseite/News</a></li>
<li><a href="Schach-AG_Startseite.html">Schach-AG</a></li>
<li><a href="Termine_Startseite.html">Termine</a></li>
<li><a href="Turniere_Startseite.html">Turniere</a></li>
<li><a href="Training_Startseite.html">Training</a></li>
<li><a href="Links_Startseite.html">Links</a></li>
<li><a href="Gastbuch_Startseite.html">Gästebuch</a></li>
<li><a href="Kontakt_Startseite.html">Kontakt</a> </li>
<li><a href="Impressum_Startseite.html">Impressum</a></li>
</ul>
</div>
<div class="container_header"><p>&nbsp;</p></div>
<div id="site_content">
<div id="content">
<div class="content_item">
<h1>Welcome to your website</h1>
<p>TEXT<br />
<br />
<br />
</p>
<h3>Place your heading here</h3>
<div style="width:250px; float:left; padding: 0px 20px 20px 0px;"><a id="example1" href="images/fancybox_large.jpg"><img alt="image" src="images/fancybox_small.jpg" /></a></div>
<div style="width:75px; float:left;"><img src="images/icons/home.png" alt="news"/></div>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT&nbsp; TEXT
TEXT </p>
<p>&nbsp;</p>
<p>TEXT TEXT TEXT TEXT TEXT TEXT <br />
<br />
<br />
<br />
<br />
<br />
</p>
</div><!--close content_item-->
<div class="sidebar_container">
<div class="sidebar">
<div class="sidebar_item">
<h2>Latest Blog</h2>
<h4>March 2012</h4>
<p>TEXT</p>
<div class="button_small">
<a href="#">Read more</a>
</div><!--close button_small-->
</div><!--close sidebar_item-->
</div><!--close sidebar-->
<div class="sidebar">
<div class="sidebar_item">
<h2>Latest Blog</h2>
<h4>March 2012</h4>
<p>TEXT</p>
<div class="button_small">
<a href="#">Read more</a>
</div><!--close button_small-->
</div><!--close sidebar_item-->
</div><!--close sidebar-->
<div class="sidebar">
<div class="sidebar_item">
<h2>Latest Blog</h2>
<h4>March 2012</h4>
<p>TEXT</p>
<div class="button_small">
<a href="#">Read more</a>
</div><!--close button_small-->
</div><!--close sidebar_item-->
</div><!--close sidebar-->
</div><!--close sidebar_container-->
<br style="clear:both;" />
</div><!--close content-->
</div><!--close site_content-->
<div id="footer">
<div id="footer_content">
<div><a href="http://validator.w3.org/check?uri=referer">Valid XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS</a> | <a href="http://dryicons.com/">Icons</a> | website template by <a href="http://www.araynordesign.co.uk">ARaynorDesign</a></div>
</div><!--close footer_content-->
</div><!--close footer-->
</div><!--close main-->
<div class="container_footer">&nbsp;</div>
<p style="float: left;padding: 0;">&nbsp;</p>
</body>
</html>
 
Zuletzt bearbeitet:
Werbung:
Sorry, ich habe den Post zu schnell auf die Reise geschickt.
Hier noch der CSS-Code:
html
{ height: 100%;}

*
{ margin: 0;
padding: 0;}

body
{ font: normal 14px sans-serif;
background: #1D1D1D url('images/Holzhintergrund.jpg');
color: #5D5D5D;
margin-top: 30px;
}

p
{ padding: 0 0 20px 0;
line-height: 1.7em;}

img
{ border: 0;}

h1, h2, h3, h4, h5, h6, h7, h8,
{ font: bold 175% 'liberation sans', arial, sans-serif;
color: #1D1D1D;
margin: 0 0 15px 0;
padding: 15px 0 5px 0;}

h2
{ font: bold 165% 'liberation sans', arial, sans-serif;}

h3
{ font: bold 125% 'liberation sans', arial, sans-serif;
padding: 0 0 5px 0;
color: #1D1D1D;}

h4, h5, h6
{ margin: 0;
padding: 0 0 5px 0;
font: bold 110% 'liberation sans', arial, sans-serif;
color: #1D1D1D;
line-height: 1.5em;}

h5, h6
{ font: italic 95% arial, sans-serif;
color: #1D1D1D;
padding-bottom: 15px;}

h6
{ color: #362C20;}

a, a:hover
{ background: transparent;
outline: none;
text-decoration: underline;
color: #5D5D5D;}

a:hover
{ text-decoration: underline;
color: #1D1D1D;}

ul
{ margin: 2px 0 22px 17px;}

ul li
{ margin: 2px 0 15px 17px;}

ol
{ margin: 8px 0 22px 20px;}

ol li
{ margin: 0 0 11px 0;}

#main, #header, #banner, #menubar, #site_content, #footer, .container_footer, .container_header
{ margin-left: auto;
margin-right: auto;}

#main
{ width: 920px;
background: transparent;}

#header
{ background: #FFF;
width: 920px;}

#banner
{ width: 880px;
position: relative;
height: 250px;
background: #FFF url('images/Holzfigurenbanner.jpg') no-repeat;
}

#banner H1
{ float: right;
font: bold 300% 'liberation sans', arial, sans-serif;
color: #FFF;
padding: 0px 20px 0px 0px;}

#menubar
{ width: 920px;
height: 30px;
text-align: center;
margin: 0 auto;
background: transparent;
color: #000;
padding-top: 30px;}

ul#menu
{
margin:0}

ul#menu li
{ list-style: none;
margin: 2px 0 0 1px;
display: inline;
background: transparent;}

ul#menu li a
{ font: normal 120% arial, sans-serif;
display: inline;
letter-spacing: -1px;
height: 60px;
padding: 10px 15px 8px 15px;
text-align: center;
color: #FFF;
text-decoration: none;
background: transparent;}

ul#menu li.selected
{ background: transparent;}

ul#menu li.selected a, ul#menu li.selected a:hover
{ background: #FFF;
color: #000;}

ul#menu li a:hover
{ color: #000;
background: #FFF;}

#site_content
{ width: 920px;
overflow: hidden;
margin: 0 auto;
padding: 0;
background: #FFF;}

.sidebar_container
{ float: left;
width: 230px;
margin: 0 0 20px 20px;
background: #E2E2E2;}

.sidebar
{ float: left;
width: 210px;
padding-left: 10px;
margin-bottom: 10px;}

.sidebar_item
{ font: normal 100% Arial, Helvetica, sans-serif;
padding: 0 15px 0 0;
width: 201px;}

.sidebar h4
{ font-size: 125%;
color: #000;}

.sidebar ul li, .sidebar ul li.selected
{ list-style: none;
margin: 15px 0;
padding: 0;}

.sidebar li.selected, .sidebar li:hover
{ color: #5D5D5D;
text-decoration: none;}

#content
{ text-align: left;
width: 900px;
padding: 0;
margin: 0 20px 0 0;
float: left;}

.content_item
{ width: 620px;
margin: 0 0 20px 20px;
float: right;}

.content_image
{ width: 250px;
padding: 0px 20px 20px 0px;
float: left;}

.container_header
{ margin-top: 20px;
height: 15px;
width: 920px;
background: url('images/container_header.png') repeat-x 50% top;
}

.container_footer
{ height: 20px;
width: 920px;
background: url('images/container_footer.png') repeat-x 50% top;
}

#footer
{ width: 880px;
padding: 0 20px 0 20px;
background: #FFF;}

#footer_content
{ width: 880px;
font: normal 115% "liberation sans", arial, sans-serif;
height: 45px;
padding: 30px 0 5px 0;
text-align: center;
background: #1D1D1D url('images/footer.png') no-repeat 50% bottom;
color: #FFF;
}

#footer a, #footer a:hover
{ color: #FFF;
background: #1D1D1D;
text-decoration: underline;}

#footer a:hover
{ text-decoration: none;}

ul.links
{ margin: 0;}

ul.links li
{ list-style: none;
padding: 8px 0;}

ul.links li a, ul.links li a:hover
{ padding: 0 0 0 28px;
background: transparent url(../images/page.png) no-repeat left center;
color: #06C4E6;
text-decoration: underline;}

ul.links li a:hover
{ color: #5D5D5D;
text-decoration: none;}
 
Werbung:
Könntest Du bitte Code-Tags verwenden, wenn Du Codes hier postest? So kann man das kaum lesen.

Außerdem wäre für dein Problem eher ein Link zur betroffenen Seite hilfreich.
 
Hallo,
ich habe mal einige Seiten auf die Schnelle online gestellt. Wenn man jetzt auf der Startseite auf Training geht, wird das Problem deutlich, denn dann ist Schach-AG markiert. Vielleicht hängt das an der im CSS zugewiesenen "selected" - Regel ?

http://www.gso-schulschach.bplaced.net/NeueGSOHomepage/HPGSO-SchachNeu/index.html

Wie man unschwer erkennen kann, fehlt jetzt auch der Banner mit den Schachfiguren im Kopf der Homepage. Ich vermute wegen konkurierenden CSS Anweisungen. Hat jemand einen Tipp dazu?
Vielen Dank!
 
Ich vermute mal, dass du die Klasse .selected den entsprechenden Seiten nicht richtig zuordnest. Also muss in Bspw. Termine.html folgendes stehen
Code:
<li><a href="index.html">Startseite/News</a></li>
<li><a href="Schach-AG_Startseite.html">Schach-AG</a></li>
<li><a href="Termine_Startseite.html">Termine</a></li>
<li><a href="Turniere_Startseite.html">Turniere</a></li>

<li class="selected"><a href="Training_Startseite.html">Training</a></li>

<li><a href="Links_Startseite.html">Links</a></li>
<li><a href="Gastbuch_Startseite.html">Gästebuch</a></li>
<li><a href="Kontakt_Startseite.html">Kontakt</a> </li>
<li><a href="Impressum_Startseite.html">Impressum</a></li>
 
Werbung:
Zurück
Oben