Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Nov 2010
    Posts
    432
    Thanks
    56
    Thanked 1 Time in 1 Post

    Obvious but I cannot resolve...

    Hello,

    I've been working on making my website mobile compatible to then move on to larger screens as I started with my 21" screen so if the website doesn't appear correctly, this is why.

    Basically I changed the menu background images and the .active is being pushed out due to the padding-left: 40px;, however I cannot resolve this apart from on the mobile version...

    I could do with a little help please!

    Best Regards,
    Tim

    Edit: Having one of those days sorry, here is the url: http://sunlightgardenservices.co.uk/index-new.html
    Last edited by MrTIMarshall; 11-19-2012 at 08:17 PM.

  • #2
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,531
    Thanks
    8
    Thanked 1,091 Times in 1,082 Posts
    Hard to see without a URL to your site.

  • #3
    Regular Coder
    Join Date
    Nov 2010
    Posts
    432
    Thanks
    56
    Thanked 1 Time in 1 Post
    Quote Originally Posted by mlseim View Post
    Hard to see without a URL to your site.
    Sorry about that, I am having one of those days....

  • #4
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,531
    Thanks
    8
    Thanked 1,091 Times in 1,082 Posts
    My thoughts below ... untested.
    So make a safe copy of what you have before modifying it.

    Let's take a look at this line:
    PHP Code:
    <a href="home.html"><li class="active">Home</li></a
    And here is your CSS:
    Code:
    #Menu .active {
    padding-left: 40px;
    background: url(../images/m1.gif) no-repeat;
    }
    So you're giving it a background image and then you are padding it.
    That means you are padding the whole thing <li>, including the background image.


    How about this? ...
    PHP Code:
    // see how the <li> has it's class for the graphic ... but the <a href> does not ...
    // also notice that the <a href> is nested inside the <li>, not the other way around.
    <li class="active"><a href="home.html">Home</a></li>
    <
    li class="non-active"><a href="news.html">Latest News</a></li
    And here is the CSS:
    Code:
    /* no padding here */
    #Menu .active {
    background: url(../images/m1.gif) no-repeat;
    }
    
    /* the padding is in the links themselves */
    #Menu a:link,a:active,a:visited,a:hover {
    background-color: transparent;
    padding-left:40px;
    }

    EDIT:

    This might also work ... adding spaces before the link text.

    <li class="active"><a href="home.html">&nbsp;&nbsp;&nbsp;&nbsp; Home</a></li>

    But &nbsp; is not my preference for spacing content.


    ANOTHER EDIT:

    I didn't think of this before now, but if a link is "active", it won't be an <a href>.
    Example, you're on your home page, the word HOME will have the little graphic
    on the left, but it won't be a link because you're already on that active page.

    So, you may have to add a class for menu items that are NOT links.
    You can do that by putting the 'Home' into a span, with a class defined.

    <li class="active"><span class="selected">Home</span></li>
    <li class="non-active"><a href="news.html">Latest News</a></li>

    /* also pad non-links */
    #Menu .selected {
    background-color: transparent;
    padding-left:40px;
    }

    By still using the CSS style for #Menu a (link hover, etc), you now have
    the ability to add a mouseover feature for each link. Example:
    Separate the hover event and change the text color when the mouse moves over the link.

    Code:
    /* no padding here */
    #Menu .active {
    background: url(../images/m1.gif) no-repeat;
    }
    
    /* the padding is in the links themselves */
    #Menu a:link,a:active,a:visited {
    background-color: transparent;
    padding-left:40px;
    }
    
    #Menu a:hover {
    background-color: transparent;
    padding-left:40px;
    color:#a00;
    }
    .
    Last edited by mlseim; 11-19-2012 at 09:46 PM.

  • Users who have thanked mlseim for this post:

    MrTIMarshall (11-20-2012)

  • #5
    Regular Coder
    Join Date
    Nov 2010
    Posts
    432
    Thanks
    56
    Thanked 1 Time in 1 Post
    Thank your replies mlseim.

    I would like the the '<a href...' to span the '<li></li>' the make the entire section a link.

    The best fix you've mentioned so far seems to be implementing the &nbsp; as I removed the link which has no effect either.

    I just really cannot understand this at all as I think I have done the same on the mobile version which works perfectly fine...

    Best Regards,
    Tim

  • #6
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,531
    Thanks
    8
    Thanked 1,091 Times in 1,082 Posts
    How about making the menu item (text) a graphic image?
    Each one has two images ... the one with the shamrock and one without.
    You could even create a third one for a mouseover effect.

  • #7
    Regular Coder
    Join Date
    Nov 2010
    Posts
    432
    Thanks
    56
    Thanked 1 Time in 1 Post
    Woohoo! I slept on it and thought of another way which has worked. I added the following to the .active style; text-indent: 40px;

  • #8
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,531
    Thanks
    8
    Thanked 1,091 Times in 1,082 Posts
    good one!
    I didn't think of that one.
    It's a property I've actually never used.


  •  

    Posting Permissions

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