Results 1 to 12 of 12

Thread: Styling active links - Please help!

  1. #1
    New user
    Join Date
    04-24-13.
    Posts
    22

    Default Styling active links - Please help!

    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

  2. #2
    Experienced user
    Join Date
    01-12-10.
    Posts
    814

    Default Re: Styling active links - Please help!

    HTML required to answer your question.

  3. #3
    New user
    Join Date
    04-24-13.
    Posts
    22

    Default Re: Styling active links - Please help!

    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 &amp; 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>





    </div>

    </body>
    </html>

  4. #4
    Experienced user
    Join Date
    01-12-10.
    Posts
    814

    Default Re: Styling active links - Please help!

    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; ?>

  5. #5
    User
    Join Date
    04-10-11.
    Posts
    162

    Default Re: Styling active links - Please help!

    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.
    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.

    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.

  6. #6
    New user
    Join Date
    04-24-13.
    Posts
    22

    Default Re: Styling active links - Please help!

    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!

  7. #7
    User
    Join Date
    04-10-11.
    Posts
    162

    Default Re: Styling active links - Please help!

    Try changing this:

    Code:
    .mod_navigation li {
       float: left;
       display:block;
    }
    to this:

    Code:
    .mod_navigation li {
       float: left;
       display:inline;
    }
    Then add a text-align:center; rule to the ul. See if that works.

  8. #8
    User
    Join Date
    04-10-11.
    Posts
    162

    Default Re: Styling active links - Please help!

    You might also need to set the ul width to 100%.

  9. #9
    New user
    Join Date
    04-24-13.
    Posts
    22

    Default Re: Styling active links - Please help!

    Tried but failed

    Thanks so much for your help!

  10. #10
    User
    Join Date
    04-10-11.
    Posts
    162

    Default Re: Styling active links - Please 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.

  11. #11
    New user
    Join Date
    04-24-13.
    Posts
    22

    Default Re: Styling active links - Please help!

    You're a genius!!

    Thank you SO much for your help :D :D :D

  12. #12
    User
    Join Date
    04-10-11.
    Posts
    162

    Default Re: Styling active links - Please help!

    You're welcome

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •