Center Menu and Footer Items With CSS

[flynempire]

Hello I have this template here: http://www.kleinerts.com/Untitled-5.php?prod=U4903TEST

 

I have it almost done but I cannot get the drop down menu nor the items in the footer to be centered.

When I move the browser over to a smaller monitor the items do become centered. How can I have it both ways?

 

Thanks

[DeathLace]

Line 329 of stylef.css

 

Change:

.footer .center {

 width: 100%;

}

 

Change the 100% to 1004px;

 

Line 21 of menuTemplate1.css

 

remove:

.menuTemplate1 li {

float: left;

height: 25px;

}

 

Add: display: inline-block;

 

Should do it.

[flynempire]

Thanks for responding. My issue is 1004px;

 

Will that look ok on the 1024 x 768 monitor?

[Guth]

It all looks pretty centred to me?

[Sandor]

960px is close to "standard"

[flynempire]

Hello I am back. I am having issues again with my footer but this time is different.

I have IE 10, Firefox and Chrome. All have this problem. This was fixed before by using <br style="clear: both;"> as suggested but it also affects something that it should not.

http://www.kleinerts.com/productdetail.php?prod=1239S-Test

If you visit that page you will see at the bottom of the white area I added a free shipping truck icon and to the left social media buttons.

I have in another thread talked about the social media and truck disappearing.

Anyways when you look at the page the footer is below but not at 100% width. The sides are cut off.

Also if I remove the truck and social media then the footer jumps up. Why is that affecting the footer?

This could also explain why when click on other tabs it causes it them to disappear.

 

Thanks for continued help on here. Much appreciated

[the better twin]

Your footer is cut off because even though you set a width of 100% it is inside the content div which has a fixed width of 980px so it will be constrained to this. You should move it to after this.

Your detail tabs are also before your shipping label in the document flow. change these around. The structure of your html should mirror the flow of the document from top to bottom.

[flynempire]

Thank you so much! I did not realize this..

[flynempire]

I fixed the footer. How did you see that the tabs were before the shipping truck? Was it in the code?

[the better twin]

I fixed the footer. How did you see that the tabs were before the shipping truck? Was it in the code?

Yep. Press F12 in browsers to access developer tools. Great for debugging errors.