Help Fixing Home Page Buttons

Hey Guys,

I need a little help here, using 1.5.5 with Sheffield Responsive Blue 2.0. I finally finished my website on my local server and just uploaded it to an online server so I could get some help.

I have a really frustrating issue with the main menu buttons which you can see here - http://www.westnewtonsupply.com. For the life of me, I just cannot get them to align, I've spent literally 4 days going through the CSS and header.php/mobile files and tried to change every attribute I could find but nothing.

I've completely run out of ideas.

Please help,

Thanks in advance.

Ash

CSGODeimos:

Hey Guys,

I need a little help here, using 1.5.5 with Sheffield Responsive Blue 2.0. I finally finished my website on my local server and just uploaded it to an online server so I could get some help.

I have a really frustrating issue with the main menu buttons which you can see here - http://www.westnewtonsupply.com. For the life of me, I just cannot get them to align,

They kinda look ok to me - but having said that, I don't know how you expect them to look. Perhaps a screenshot will be helpful?

CSGODeimos:

I've spent literally 4 days going through the CSS and header.php/mobile files and tried to change every attribute I could find but nothing.

You probably shouldn't be editing the .php files for this - The entire point of using .css is to separate style from content.

If you are editing the .css files, and checking the results, that is the wrong way to do it - Well, perhaps not 'wrong' - but certainly the most difficult and time consuming.

What you should be doing is using a developer tool - these are built into most web browsers - most being activated by pressing the F12 key.

These tools will give you a spit screen display - the webpage on the left, and the styleheet stuff on the right. From here you can make 'live edits' and instanlty see the effects. If you mess up, refresh the page and start again. When you have things the way you want, take note of the file containing the .css as well as the changes, and then change the actual file to make them 'stick'.

This may take a little getting used to - but believe it or not, it can actually be fun - and who knows, you could even stumble across a change that you like, but hadn't even thought of doing.

Cheers
RodG

CSGODeimos:

I just cannot get them to align,

Align to what ? You mean center the first ul ? Or removing the padding-left of the li of the sub-menu ?

RodG:

They kinda look ok to me - but having said that, I don't know how you expect them to look. Perhaps a screenshot will be helpful?

You probably shouldn't be editing the .php files for this - The entire point of using .css is to separate style from content.

If you are editing the .css files, and checking the results, that is the wrong way to do it - Well, perhaps not 'wrong' - but certainly the most difficult and time consuming.

What you should be doing is using a developer tool - these are built into most web browsers - most being activated by pressing the F12 key.

These tools will give you a spit screen display - the webpage on the left, and the styleheet stuff on the right. From here you can make 'live edits' and instanlty see the effects. If you mess up, refresh the page and start again. When you have things the way you want, take note of the file containing the .css as well as the changes, and then change the actual file to make them 'stick'.

This may take a little getting used to - but believe it or not, it can actually be fun - and who knows, you could even stumble across a change that you like, but hadn't even thought of doing.

Cheers
RodG

I sorted it thankfully. Sorry for the delay in response, This forum isn't the most active at times so I just forgot to check back. I have firebug installed but I don't really know what I'm doing aha. It sounds like you're experienced so I was wondering if I could ask you a few questions since I'm a noob.

On the home page(here), you see those blue boxes below the paragraph of text (has all the manufacturers listed here)

How do I make all of the boxes clickable? Instead of having to hover over the text to click to go to the next page?

mesnitu:

Align to what ? You mean center the first ul ? Or removing the padding-left of the li of the sub-menu ?

I sorted it thankfully. Sorry for the delay in response. I fixed it.

CSGODeimos:

On the home page(here), you see those blue boxes below the paragraph of text (has all the manufacturers listed here)

How do I make all of the boxes clickable?

Go here:
http://www.w3schools.com/html/html_images.asp

Then scroll down to the section labeled "Using an Image as a Link"

Cheers
RodG

RodG:

Go here:
http://www.w3schools.com/html/html_images.asp

Then scroll down to the section labeled "Using an Image as a Link"

Cheers
RodG

I just had a go at doing that and I broke the site, backed up. No idea what I did lol. It's working as normal now. Those boxes are a class in CSS, link I can remove them by commenting out the code in CSS. They're not a physical image so I have no idea what to do. I'm a novice when it comes to code mate, sorry if I'm just confusing the situation more lol.