SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Flat list menu BG image

    I have spent hours online looking at many different tutorials and examples, I even tried a list apart sliding doors method but it didn't work either!!

    Ideally i want a rectangle with rounded corners that resizes depending on how long the menu item is. Like on this site

    http://www.forsten-pentti.com/site/?q=our-stable

    I only want it to highlight the current page? Is there a simple solution here? Can anyone point me to any other info or tutorials

    Thanks

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Current page can be achieved simply by a class
    http://www.visibilityinherit.com/code/current-page.php
    Do you have an attempt at this so far? If it's a fixed width element, you could apply an image (of hte topleft / top right rounded corners) to a parent, and then in another nested element, have the bottom part. This should make sense

    <div id="topLeftTopRightCornerElement">
    <div id="bottomLeftBottomRightCornerElement">
    <p>text</p>
    </div>
    </div>

    Images on appropriate elements (and of course update the ID's to a class or whatever you see fit.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply

    I have the current page class working, At the moment it just changes the background. My website is a joomla website that uses a plugin" etxended menu" to output a flatlist. I need my css to style a rounded corner backround for current page. Heres the code and my CSS. Really appreciate any help!!

    CSS

    #mainlevelmainnav {
    width: 100%;
    float: left;
    margin: 0 0 0em 0;
    padding: 0;
    list-style: none;
    background-color: transparent;

    }
    #mainlevelmainnav li {
    float: left; }
    #mainlevelmainnav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: normal;
    color: #036;
    font-size:16px

    }
    #mainlevelmainnav li a:hover {
    color: #000;
    background-color: #fff;
    text-decoration: underline;
    }

    a#active_menumainnav {
    background:#CCC}

    #mainlevelmainnav li a#active_menumainnav:hover {
    background:#CCC
    }


    XHTML


    <!--Begin Horizontal Menu-->
    <div id="horiz-menu" class="module">
    <div class="wrapper">
    <div class="padding">
    <div id="horizmenu-surround">
    <ul id="mainlevelmainnav"><li><a href="/selplus3/index.php?option=com_content&amp;view=frontpage&amp;Itemid=1" class="mainlevelmainnav" id="active_menumainnav">Merchant Enquiries & Testimonials</a></li><li><a href="/selplus3/index.php?option=com_content&amp;view=article&amp;id=19&amp;Itemid=27" class="mainlevelmainnav">Company/Personal Bio</a></li><li><a href="/selplus3/index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=2" class="mainlevelmainnav">Product Info</a></li><li><a href="/selplus3/index.php?option=com_content&amp;view=section&amp;id=4&amp;Itemid=37" class="mainlevelmainnav">Articles & Publishing</a></li><li><a href="/selplus3/index.php?option=com_content&amp;view=section&amp;id=3&amp;Itemid=41" class="mainlevelmainnav">Competition Horses for Sale</a></li></ul>

    </div>
    <div class="clr"></div>
    </div>
    </div>
    </div>
    <!--End Horizontal Menu-->


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
  •