Sign in to follow this  
Followers 0

Center Menu and Footer Items With CSS


10 posts in this topic

Posted

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

Share this post


Link to post
Share on other sites

Posted

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.

Share this post


Link to post
Share on other sites

Posted

Thanks for responding. My issue is 1004px;

 

Will that look ok on the 1024 x 768 monitor?

Share this post


Link to post
Share on other sites

Posted

It all looks pretty centred to me?

Share this post


Link to post
Share on other sites

Posted

960px is close to "standard"

Share this post


Link to post
Share on other sites

Posted

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

Share this post


Link to post
Share on other sites

Posted

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.

Share this post


Link to post
Share on other sites

Posted

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

Share this post


Link to post
Share on other sites

Posted

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

Share this post


Link to post
Share on other sites

Posted

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. 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.