Obvious but I cannot resolve...

[MrTIMarshall]

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

[mlseim]

Hard to see without a URL to your site.

[MrTIMarshall]

Originally Posted by mlseim

Hard to see without a URL to your site.

Sorry about that, I am having one of those days....

[mlseim]

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:

#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:

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

/* 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;
}

.

[MrTIMarshall]

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

[mlseim]

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.

[MrTIMarshall]

Woohoo! I slept on it and thought of another way which has worked. I added the following to the .active style; text-indent: 40px;

[mlseim]

good one!
I didn't think of that one.
It's a property I've actually never used.