Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Themes /

Discuss SilverStripe Themes.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba

Problem with footer links *solved*


Go to End
Reply


787 Views

Avatar
Nachos

Community Member, 22 Posts

29 April 2013 at 5:45pm

Edited: 11/05/2013 6:27am

Hello,

I'm having a weird problem with the links in my footer. I'm starting to learn how code works so there might be an obvious mistake that I don't see. I would appreciate if you would have a quick look.

There are 8 images with links (link 1-8) and a footer text with another link (link 9). My problem is that the text before link 9 turns into a link for link 8 - which I don't want, it's supposed to be normal Text. This is the code of the footer.ss (I changed the links and text for privacy):

<ul id="navmenu">
     <li id="link1"><a href="http://www.link1.com" target="_blank"><img src="themes/TEST/images/FooterImages/image1.png" alt="" width="76" height="47" /></a></li>
     <li id="link2"><a href="http://www.link2.com" target="_blank"><img src="themes/TEST/images/FooterImages/image2.png" alt="" width="98" height="34" /></a></li>
     <li id="link3"><a href="http://www.link3.com" target="_blank"><img src="themes/TEST/images/FooterImages/image3.png" alt="" width="54" height="54" /></a></li>
     <li id="link4"><a href="http://www.link4.com" target="_blank"><img src="themes/TEST/images/FooterImages/deutscher_schulpreis.png" alt="" width="114" height="40" /></a></li>
     <li id="link5"><a href="http://www.link5.com" target="_blank"><img src"themes/TEST/images/FooterImages/image5.png" alt="" width="130" height="24" /></a></li>
     <li id="link6"><a href="http://www.link6.com" target="_blank"><img src="themes/TEST/images/FooterImages/image6.png" alt="" width="153" height="33" /></li>
     <li id="link7"><a href="http://www.link7.com" target="_blank"><img src="themes/TEST/images/FooterImages/image7.png" alt="" width="126" height="43" /></li>
     <li id="link8"><a href="http://www.link8.com" target="_blank"><img src="themes/TEST/images/FooterImages/image8.png" alt="" width="57" height="55" /></li>
     </ul>
<div class="footerTop">
    <!-- -->
</div>
<p>Blah blah blah blah blah<br>
blah blah blah blah blah blah <a href="http://www.link9.com" title="link 9">Text for link 9</a></p>

Here is the css part:

						#navmenu {
							background: #fff url(../images/containerbg.gif) repeat-y;
							padding-left: 12px;
						}
						
						#navmenu li {
							font-family: Tahoma;
							font-size: 12px;
							padding: 8px;
							list-style: none;
							text-align: center;
							float: left;
						}
						
						#Footer {
							clear: both;
							width: 960px;
							height: 12.7em;
							background: url(../images/footerBottom.gif) no-repeat bottom left;
							text-align: center;
						}
							#Footer .footerTop {
							width: 100%;
							background: url(../images/containerbg.gif) repeat-y;
							display: block;
							height: 5.7em;
							}
							#Footer p {
							color: #666;
							font-size: 1.1em;
							text-align: center;
							position:relative;
							top: -5px;
							margin-top: -1.5em;
							}
								#Footer a {
							color: #f39001;
							text-decoration: none;
								}
									#Footer a:hover {
							color: #f39001;
							text-decoration: underline;
									}

If I look at the code in chrome everything seems fine, but if I save the page on my hard drive to get a closer look this weird code shows up. Starting at link 7 it seems to wreak havoc:

<div id="Footer">
		
        <ul id="navmenu">
     <li id="link1"><a href="www.link1.com" target="_blank"><img src="./Home » Your Site Name_files/image1.png" alt="" width="76" height="47"></a></li>
     <li id="link2"><a href="http://www.link2.com" target="_blank"><img src="./Home » Your Site Name_files/image2.png" alt="" width="98" height="34"></a></li>
     <li id="link3"><a href="http://www.link3.com" target="_blank"><img src="./Home » Your Site Name_files/image3.png" alt="" width="54" height="54"></a></li>
     <li id="link4"><a href="http://www.link4.com" target="_blank"><img src="./Home » Your Site Name_files/image4.png" alt="" width="114" height="40"></a></li>
     <li id="link5"><a href="http://www.link5.com" target="_blank"><img src="./Home » Your Site Name_files/image5.png" alt="" width="130" height="24"></a></li>
     <li id="link6"><a href="http://www.link6.com" target="_blank"><img src="./Home » Your Site Name_files/image6.png" alt="" width="153" height="33"></a></li><a href="http://www.link6.com" target="_blank">
     </a><li id="link7"><a href="http://www.link6.com" target="_blank"></a><a href="http://www.link7.com" target="_blank"><img src="./Home » Your Site Name_files/image7.png" alt="" width="126" height="43"></a></li><a href="http://www.link7.com" target="_blank">
     </a><li id="link8"><a href="http://www.link7.com" target="_blank"></a><a href="http://www.link8.com" target="_blank"><img src="./Home » Your Site Name_files/image8.png" alt="" width="57" height="55"></a></li><a href="http://www.link8.com" target="_blank">
     </a></ul><a href="http://www.link8.com" target="_blank">
<div class="footerTop">
    <!-- -->
</div>

</a><p><a href="http://www.link8.com" target="_blank">Blah blah blah blah blah<br>
blah blah blah blah blah blah</a><a href="http://www.link9.com" title="link 9">Text for link 9</a></p>

	</div> 

I really don't have a clue why this is happening. Any help would be appreciated! Thank you!

Edit: nevermind, figured it out - there were some </a> missing. Greetings from the noob!