PDA

View Full Version : Help needed with my navigation bar and a couple of other issues


Roy of the Rovers
08-28-2010, 06:15 PM
Hi everyone,

I have been lurking around on this (fantastic) forum for a long time now (well over a year or so). I have finally registered as I am looking for some advice on a site I am creating. It must be said that I am still a complete novice, and do this more of a hobby, but have been reading and learning, trying to teach myself CSS, Dreamweaver etc, so please be gentle!!!!

I am currently creating a template, which I will then obviously turn into web pages. I am nearly there with the main template, but there are a few issues I would be grateful if you could help me with.

1. I have created a navigation menu using <ul>. I have set the colour for the text as follows:
#navbar ul li a {
text-decoration: none;
display: block;
border-right-width: 1px;
border-right-color: #868789;
padding-right: 29px;
padding-left: 30px;
border-right-style: solid;
color: #868789;
}
I have also set the following which highlights each link when the user hovers over it with the mouse, basically changing the text colour to white with a dark background image I have created. This again works fine.
#navbar ul li a:hover {
background-image: url(../Images/navigationbackgournd.png);
color: #FFF;
} The issues arise when I create a class and apply it to a link to indicate the current page the user is on. It is basically the same as the one used for when the user hovers over the link e.g.

.pgehighlighted {
color: #FFF;
background-image: url(../Images/navigationbackgournd.png);
} This then displays the dark background image, but does not change the colour of the text to white. Now I am guessing that it is something to do with the way it is cascading, but I could (and most probably likely) be wrong!

I have got around this problem by applying a class (.pagenotshowing) to each individual link (#navbar ul li a) and then applying a class (.pageshowing) to the one link that I want highlighted. This seems to work but there has got to be an easier way of addressing the links as a whole, rather than applying the class individually to each.

2. I am using the JQuery Cycle Plugin for an image slideshow in the header of my site. This seems to work fine in all major browsers except IE which comes up with the following warning....

To help protect your security, Internet Explorer has restricted this webpage from running scripts or active x controls blah, blah, blah, blah....

Once you allow this it works fine, but you have to go through this every time the page is viewed. Is there a way of bypassing this/auto detecting IE and letting it run automatically as normal like in the other browsers?

3. In code view, as far as I can see everything is wrapped in a div #wrapper, however in design view for some reason it shows this wrapper as only surrounding the divs #header, #contact banner and #navbar.
Everything seems to be working fine when I view in various browsers (which is what I generally do anyway rather than using the design view). I guess it is nothing to worry about but just wondered what was causing it?

Sorry for the waffley post but if you guys and gals can help me out with any of these issues it would be greatly appreciated as I have now hit a stumbling block with the site.

Many thanks in advance.

Here is the code for the template.....
HTML...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Fusion Sound &amp; Vision - Audio and Visual Suppliers in Ipswich, Suffolk</title>
<!-- TemplateEndEditable -->
<meta name="description" content="Welcome to Fusion Sound And Vision Ltd Suffolk Hi-Fi & Home Cinema For Everyone" />
<meta name="keywords" content="Hi Fi in Suffolk, Fusionsv Suffolk, Fusion sound and vision Suffolk, Fusion Suffolk, Fusion, Leema Acoustics, Leema Acoustics Suffolk, Suffolk Hi-Fi, Suffolk Home cinema, Arcam Suffolk, Bechocolate Suffolk, Moon Audio Suffolk, Chord Company Suffolk, Hi-Fi in Suffolk, Home Cinema in Suffolk." />
<!--General Page Layout CSS-->
<link href="../Style Sheets/Layout.css" rel="stylesheet" type="text/css" />
<!--Page Content CSS-->
<link href="../Style Sheets/Content.css" rel="stylesheet" type="text/css" />
<!--Start of Slideshow Code-->
<!--jQuery Library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- Cycle Plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slideshow').cycle({
fx: 'fade'
});
});
</script>
<!--End of Slideshow Code-->
<!--Start of Google Analytics Code-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-12891362-2']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!--End of Google Analytics Code-->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<!-- TemplateParam name="Header Image 1" type="URL" value="../Images/Header Images/headerimage1.jpg" -->
<!-- TemplateParam name="Alternative Text" type="text" value="Antila II Player" -->
<!-- TemplateParam name="Header Image 2" type="URL" value="../Images/Header Images/headerimage2.jpg" -->
<!-- TemplateParam name="Alternative Text 2" type="text" value="Xone Speakers" -->
<!-- TemplateParam name="Header Image 3" type="URL" value="../Images/Header Images/headerimage5.jpg" -->
<!-- TemplateParam name="Alternative Text 3" type="text" value="Tucana II Amp" -->
<!-- TemplateParam name="Header Image 4" type="URL" value="../Images/Header Images/headerimage6.jpg" -->
<!-- TemplateParam name="Alternative Text 4" type="text" value="Xero Speakers" -->
</head>

<body>
<!--Start of Main Overall Wrapper-->
<div id="mainwrapper">

<!--Start of Header-->
<div id="header">
<a href="../HTML Files/Index.html"><img src="../Images/Header Images/fusionlogo.jpg" alt="Fusion SV Logo" border="0" /></a>
<!--Start of Slideshow Images-->
<div id="slideshow">
<img src="@@(_document['Header Image 1'])@@" alt="@@(_document['Alternative Text'])@@" width="610" height="170" />
<img src="@@(_document['Header Image 2'])@@" alt="@@(_document['Alternative Text 2'])@@" width="610" height="170" />
<img src="@@(_document['Header Image 3'])@@" alt="@@(_document['Alternative Text 3'])@@" width="610" height="170" />
<img src="@@(_document['Header Image 4'])@@" alt="@@(_document['Alternative Text 4'])@@" width="610" height="170" />
</div>
<!--End of Slideshow Images-->
</div>
<!--End of Header-->

<!--Start of Contact Banner-->
<div id="contactbanner"> <img src="../Images/Header Images/contactbanner.png" width="800" height="28" />
</div>
<!--End of Contact Banner-->

<!--Start of Navigation Bar-->
<div id="navbar"><!-- TemplateBeginEditable name="Navigation Bar" -->
<ul>
<li><a href="../HTML Files/Index(version3).html" class="firstlink">Audio</a></li>
<!--completes border on both sides of first link-->
<li><a href="../HTML Files/Index.html">Visual</a></li>
<li><a href="../HTML Files/Index.html">Accessories</a></li>
<li><a href="../HTML Files/Index.html" class="pgehighlighted">Latest News</a></li>

<li><a href="../HTML Files/Index.html">Installation</a></li>
<li><a href="../HTML Files/Index.html">About</a></li>
<li><a href="../HTML Files/contacttest.html">Contact</a></li>
<li></li>
</ul>
<!-- TemplateEndEditable --></div>
<!--End of Navigation Bar-->

<!--Start of Main Content Area-->
<div id="latest news"></div>
<div id="maincontent"><!-- TemplateBeginEditable name="Main Content To Go Here" -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
<p>Morbi consequat felis vitae enim. Nunc nec lacus. Vestibulum odio. Morbi egestas, urna et mollis bibendum, enim tellus posuere justo, eget elementum purus urna nec lacus. Nullam in nulla. Praesent ac lorem. Donec metus risus, accumsan ut, mollis non, porttitor eget, mi. Aliquam aliquet, tortor a elementum aliquam, erat odio sodales eros, suscipit blandit lectus dolor sit amet elit. In eros wisi, mollis vitae, tincidunt in, suscipit id, nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus ornare. Suspendisse potenti. Mauris convallis. Vestibulum nec mauris in augue porta mollis. Proin ut nunc. Mauris aliquam dui eget purus.</p>

<!-- TemplateEndEditable --></div>
<!--End of Main Content Area-->

<!--Start of Side Bar-->
<div id="sidebar"><a href="http://www.alphasondesigns.com/" target="_blank"><img src="../Images/Side Menu Images/alphason.jpg" alt="Alphason Logo" width="90" height="23" /></a><a href="http://www.arcam.co.uk/" target="_blank"><img src="../Images/Side Menu Images/arcam.jpg" alt="Arcam Logo" width="90" height="19" /></a><a href="http://www.atacama-audio.co.uk/" target="_blank"><img src="../Images/Side Menu Images/atacama.jpg" alt="Atacama Audio Logo" width="90" height="18" /></a><a href="http://www.chord.co.uk/" target="_blank"><img src="../Images/Side Menu Images/chord company.jpg" alt="The Chord Company Logo" width="90" height="36" /></a><a href="http://www.leema-acoustics.com/" target="_blank"><img src="../Images/Side Menu Images/leemaacoustics.jpg" alt="Leema Acoustics Logo" width="90" height="69" /></a><a href="http://www.marantz.com/" target="_blank"><img src="../Images/Side Menu Images/marantz.jpg" alt="Marantz Logo" width="90" height="21" /></a><a href="http://www.simaudio.com/" target="_blank"><img src="../Images/Side Menu Images/moon.jpg" alt="Sim Audio Logo" width="90" height="45" /></a><a href="http://www.totemacoustic.com/" target="_blank"><img src="../Images/Side Menu Images/totem.jpg" alt="Totem Acoustic Logo" width="90" height="28" /></a></div>
<!--End of Side Bar-->

<!--Start of Social Networking Icons Holder-->
<div id="socnetwork">
<img src="../Images/Footer Images/facebooklogo.png" alt="Join Us On Facebook" width="40" height="40" />
<img src="../Images/Footer Images/twitterlogo.png" alt="Follow Us On Twitter" width="40" height="40" />
</div>
<!--End of Social Networking Icons Holder-->

<!--Start of Footer Content-->
<div id="footercontent">
<ul>
<li><a href="../HTML Files/Index.html" class="firstlink">Audio</a></li>
<li><a href="../HTML Files/Index.html">Visual</a></li>
<li><a href="../HTML Files/Index.html">Peripherials</a></li>
<li><a href="../HTML Files/Index.html">Installation</a></li>
<li><a href="../HTML Files/Index.html">About</a></li>
<li><a href="../HTML Files/Index.html">Contact</a></li>
</ul>
<!-- TemplateBeginEditable name="Contact" -->
<p>Fusion Sound &amp; Vision, Martlesham Heath, Ipswich, Suffolk: Tel: 01473 625452 Mob: 07810 212420 E Mail:enquiries@fusionsv.co.uk</p>
<!-- TemplateEndEditable -->
<p><a href="../HTML Files/Index.html">Terms &amp; Conditions</a> - <a href="../HTML Files/Index.html">Complaints Procedure</a> -<a href="../HTML Files/Index.html"> Privacy Policy</a> - <a href="../HTML Files/Index.html">Site Map</a></p>
<!--Detects Current Year For Copyright Notice-->
<p>
Copyright &copy; 2008
<script language="JavaScript">
var d=new Date();
yr=d.getFullYear();
if (yr!=2008)
document.write("- "+yr);
</script>
Fusion Sound &amp; Vision
</p>
</div>
<!--End of Footer Content-->

</div>
<!--End of Main Overall Wrapper-->

</body>
</html>
CSS Layout....
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 75%;
margin: 0px;
padding: 0px;
}

#mainwrapper {
width: 800px;
margin-right: auto;
margin-left: auto;
padding: 0px;
margin-top: 10px;
margin-bottom: 0px;
height: auto;
}

#header {
height: 170px;
margin-bottom: 15px;
}

#slideshow {
width: 610px;
float: right;
height: auto;
}

#contactbanner {
height: auto;
}

#navbar {
height: auto;
font-size: 120%;
padding-bottom: 5px;
padding-top: 5px;
padding-right: 0px;
padding-left: 0px;
margin: 0px;
width: 800px;
}

#navbar ul {
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
}

#navbar ul li {
list-style-type: none;
float: left;
}

#navbar ul li a {
text-decoration: none;
display: block;
border-right-width: 1px;
border-right-color: #868789;
padding-right: 29px;
padding-left: 30px;
border-right-style: solid;
color: #868789;
}

#navbar ul li a:hover {

background-image: url(../Images/navigationbackgournd.png);
color: #FFF;

}



/*Styles left border for first link used in navbar and also footer navbar*/
.firstlink {
border-left-width: 1px;
border-left-color: #868789;
border-left-style: solid;
}
.pgehighlighted {
color: #FFF;
background-image: url(../Images/navigationbackgournd.png);
}

.pageshowing {
background-image: url(../Images/navigationbackgournd.png);
color: #FFF;
}

#maincontent {
width: 660px;
height: auto;
margin-top: 25px;
margin-right: 0px;
margin-bottom: 35px;
margin-left: 0px;
float: left;
clear: left;
}
.pgenottshowing {
color: #868789;
}


#sidebar {
height: auto;
border-left-color: #868789;
margin-bottom: 35px;
width: 105px;
border-left-width: 5px;
margin-top: 25px;
float: right;
clear: right;
padding-top: 10px;
}

#footercontent {
height: auto;
width: 565px;
float: left;
border-top-width: 5px;
border-top-style: solid;
border-top-color: #868789;
padding-top: 2px;
padding-bottom: 5px;
clear: left;
}

#socnetwork {
height: auto;
width: 235px;
float: right;
clear: right;
padding-top: 2px;
padding-bottom: 5px;
border-top-width: 5px;
border-top-style: solid;
border-top-color: #868789;
}
CSS Content...
@charset "utf-8";
#header img {
float: left;
}

#maincontent p {
margin-top: 0px;
padding-top: 0px;
color: #868789;
}

#sidebar img {
margin-bottom: 10px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
padding-left: 12px;
float: right;
clear: both;
}

#footercontent ul {
font-size: 95%;
padding: 0px;
margin: 0px;
}

#footercontent ul li {
list-style-type: none;
float: left;
}

#footercontent ul li a {
display: block;
padding-right: 3px;
padding-left: 3px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #868789;
color: #868789;
}

#footercontent p {
font-size: 75%;
color: #868789;
margin: 0px;
float: left;
clear: left;
padding: 0px;
}

#footercontent p a {
color: #868789;
}

#socnetwork img {
padding-top: 5px;
padding-bottom: 5px;
float: right;
padding-right: 8.33px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

DWcourse
08-28-2010, 07:23 PM
1. Try making the rule name a.pgehighlighted

2. This happens when you try to preview javascript from a local file in IE. Do a search for "mark of the web"

Roy of the Rovers
08-29-2010, 01:34 PM
Thanks so much for the prompt response DWcourse.

I have sorted out the IE issue no worries and that is working fine now, but I am still having trouble with the navigation menu not working correctly.

As suggested, I have created a rule a.pagehighlighted, set the back ground image and set font colour to white, but it is still only showing the background image, not changing the colour of the text, when I apply the rule.

This is probably something really basic, but I just cannot get me head around it. Just when I think I am making a bit of progress the basic things are stumping me and its back to square one.:confused:
css...

a.pagehighlighted {
color: #FFF;
background-image: url(../Images/navigationbackgournd.png);
}html...

<div id="navbar"><!-- TemplateBeginEditable name="Navigation Bar" -->
<ul>
<li><a href="../HTML Files/Index(version3).html" class="firstlink">Audio</a></li>
<!--completes border on both sides of first link-->
<li><a href="../HTML Files/Index.html">Visual</a></li>
<li><a href="../HTML Files/Index.html" class="pagehighlighted">Accessories</a></li>
<li><a href="../HTML Files/Index.html">Latest News</a></li>

<li><a href="../HTML Files/Index.html">Installation</a></li>
<li><a href="../HTML Files/Index.html">About</a></li>
<li><a href="../HTML Files/contacttest.html">Contact</a></li>
<li></li>
</ul>
<!-- TemplateEndEditable --></div>

Corrosive
08-29-2010, 04:40 PM
Have you got a visited style anywhere? Or the default could be interfering with the text colour.

Roy of the Rovers
08-29-2010, 05:36 PM
Hi Corrosive,
No I do not have a visited style, only #navbar ul li a:hover and the style #navbar ul li a which would seem to be the one causing problems.
When I do not specify a font colour for this style (so it shows as plain old linky blue) then the style (a.pagehighlighted) seems to work fine as I want it to with background image and white font.
Any ideas?

Corrosive
08-29-2010, 06:01 PM
Try using a whole set of link styles and see if that helps.

DWcourse
08-29-2010, 06:22 PM
or maybe try #navbar ul li a.pagehighlighted

Roy of the Rovers
09-06-2010, 09:23 PM
Hey Guys,

Sorry for the delay in getting back to this thread, it's been a manic week.

Just wanted to say thanks for taking the time to help me out with these issues. As DWcourse suggested I made the class #navbar ul li a.pagehighlighted and this did the trick - excellent!!:-D

Cheers!

Corrosive
09-07-2010, 08:23 AM
Glad you got it sorted mate.