Printable View
Hi Everyone,
I'm having real trouble styling active links with CSS.
My site is http://www.racheleasmith.com/
I used to ".active" to target this e.g. ".mainnav .active" but this doesn't seem to work anymore and I can't work it out :?
I have used the custom html module to create the navigation as I wasn't able to centre the standard navigation module for some reason.
Please help!
Thanks a lot :)
HTML required to answer your question.
Here you go:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!--
This website is powered by Contao Open Source CMS :: Licensed under GNU/LGPL
Copyright ©2005-2013 by Leo Feyer :: Extensions are copyright of their respective owners
Visit the project website at http://www.contao.org for more information
//-->
<base href="http://www.racheleasmith.com/"></base>
<title>home - racheleasmith</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="description" content="racheleasmith - Welcome to racheleasmith - We photograph, consult, develop and design brands, corporate identities, print and screen graphics, and websites." />
<meta name="keywords" content="racheleasmith, rachel smith, website, website design, branding, logo, logo design, photography, children photographs, products, seo, search engine optimisation, surrey, sussex, design" />
<meta name="robots" content="index,follow" />
<style type="text/css" media="screen">
<![CDATA[/*><!--*/
#wrapper { width:1000px; margin:0 auto; }
#header { height:120px; }
#footer { height:40px; }
/*]]>*/-->
</style>
<link rel="stylesheet" href="system/contao.css" type="text/css" media="screen" />
<link rel="stylesheet" href="system/modules/subcolumns/html/subcols.css" type="text/css" media="all" />
<link rel="stylesheet" href="Home.css?1370529686" type="text/css" media="screen" />
<link rel="stylesheet" href="Navigation.css?1370600779" type="text/css" media="screen" />
<script type="text/javascript" src="plugins/mootools/mootools-core.js?1.2.4"></script>
<script type="text/javascript" src="plugins/mootools/mootools-more.js?1.2.4.4"></script>
<meta name="google-site-verification" content="fRZsiv-36P9Wv2mgdKbv9yy5ZkVYOVWzEXJx1zukF7s" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-20781261-1']);
_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>
</head>
<body id="top" class="black">
<div id="wrapper">
<div id="header">
<div class="inside">
<div class="logo">[img]tl_files/graphics/head_logo.jpg[/img]</div>
</div>
</div>
<div id="container">
<div id="main">
<div class="inside">
<div class = "mainnav">homephotographywebsite designbranding & designwho are we<span class="darkgreen">get in touch</span></div>
<div class="mod_article block" id="home-20">
<div class="ce_colsetStart subcolumns">
<div class="c50l first">
<div class="subcl" style="padding-right:0px;">
</div>
</div>
<div class="mod_colsetPart c50r ">
<div class="subcr" style="padding-left:0px;">
<div class="ce_text welcome_text block">
<h1>hello!</h1>
do you want your business to be more irresistible?</p>
your goals are extremely important because they drive your business, generate your values and translate into what is unique about you. with clear thinking and sound advice, together we can visually communicate with your potential customers, attracting and winning that essential business!</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="clear"></div>
</div>
</div>
<div id="footer">
<div class="inside">
<div class="footer_nav">© racheleasmith</div>
</div>
</div>
http://www.racheleasmith.com/cron.php
</div>
</body>
</html>
You use custom templates, and there is no active class being added. You'll find it in the default templates and can add it to yours. To get it in I would add code to your a element like:
Code:<?php if ($item['isActive']): ?> class="active"<?php endif; ?>
If you used the Custom HTML module then it's just static HTML. This means it will always be the same no matter what page you're on.Code:I have used the custom html module to create the navigation as I wasn't able to centre the standard navigation module for some reason.
You need to use the Navigation module, which dynamically builds the menu and will add the active classes for you. If you use the navigation module it will automatically keep your menu updated whenever you add/remove, publish/unpublish, rename, re-order pages etc in your Site Structure.
It will also take into account other Contao features such as permissions that can let you control which users see which pages.
Thanks guys!! :)
Do you know how to move the navigation module so it sits in the centre of the page?
I have tried with CSS text alignment and element alignment but this hasn't worked.
Thanks!
Try changing this:
to this:Code:.mod_navigation li {
float: left;
display:block;
}
Then add a text-align:center; rule to the ul. See if that works.Code:.mod_navigation li {
float: left;
display:inline;
}
You might also need to set the ul width to 100%.
Tried but failed :(
Thanks so much for your help!
I see you've updated it but it's not working.
Try removing the 'float:left;' from the li, I think that should sort it.
You're a genius!!
Thank you SO much for your help :D :D :D
You're welcome :)