Jump to content



Photo

Center Menu and Footer Items With CSS

website css center items

  • Please log in to reply
9 replies to this topic

#1 flynempire

flynempire

    It's called the bat and yes Mr. Wayne it comes in black :)

  • Joined: 19-January 10
  • Location: Sunny - Miami, FL
  • OS: Windows 7 Pro SP-1, Windows 8.1 (RT) Android 4.1.2, 2.3.6, Windows 8.1
  • Phone: Samsung Exhibit (Latest Model)

Posted 27 August 2013 - 13:52

Hello I have this template here: http://www.kleinerts...?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




#2 DeathLace

DeathLace

    Neowinian God!

  • Joined: 27-November 01
  • Location: Toronto, Canada

Posted 27 August 2013 - 14:16

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.



#3 OP flynempire

flynempire

    It's called the bat and yes Mr. Wayne it comes in black :)

  • Joined: 19-January 10
  • Location: Sunny - Miami, FL
  • OS: Windows 7 Pro SP-1, Windows 8.1 (RT) Android 4.1.2, 2.3.6, Windows 8.1
  • Phone: Samsung Exhibit (Latest Model)

Posted 27 August 2013 - 14:26

Thanks for responding. My issue is 1004px;

 

Will that look ok on the 1024 x 768 monitor?



#4 Guth

Guth

    Alba Gu Bráth

  • Joined: 30-December 05
  • Location: Scotland
  • OS: Windows 8 Pro
  • Phone: iPhone 5

Posted 29 August 2013 - 22:56

It all looks pretty centred to me?



#5 PhilTheThrill

PhilTheThrill

    Neowinian Senior

  • Joined: 28-November 03
  • Location: Canada
  • OS: Win 8.1
  • Phone: WP8

Posted 29 August 2013 - 23:55

960px is close to "standard"



#6 OP flynempire

flynempire

    It's called the bat and yes Mr. Wayne it comes in black :)

  • Joined: 19-January 10
  • Location: Sunny - Miami, FL
  • OS: Windows 7 Pro SP-1, Windows 8.1 (RT) Android 4.1.2, 2.3.6, Windows 8.1
  • Phone: Samsung Exhibit (Latest Model)

Posted 12 September 2013 - 21:28

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



#7 the better twin

the better twin

    Neowinian Senior

  • Tech Issues Solved: 2
  • Joined: 26-January 10
  • OS: Win 8
  • Phone: Nokia Lumia

Posted 13 September 2013 - 09:17

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.



#8 OP flynempire

flynempire

    It's called the bat and yes Mr. Wayne it comes in black :)

  • Joined: 19-January 10
  • Location: Sunny - Miami, FL
  • OS: Windows 7 Pro SP-1, Windows 8.1 (RT) Android 4.1.2, 2.3.6, Windows 8.1
  • Phone: Samsung Exhibit (Latest Model)

Posted 14 September 2013 - 00:42

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



#9 OP flynempire

flynempire

    It's called the bat and yes Mr. Wayne it comes in black :)

  • Joined: 19-January 10
  • Location: Sunny - Miami, FL
  • OS: Windows 7 Pro SP-1, Windows 8.1 (RT) Android 4.1.2, 2.3.6, Windows 8.1
  • Phone: Samsung Exhibit (Latest Model)

Posted 14 September 2013 - 01:05

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



#10 the better twin

the better twin

    Neowinian Senior

  • Tech Issues Solved: 2
  • Joined: 26-January 10
  • OS: Win 8
  • Phone: Nokia Lumia

Posted 16 September 2013 - 11:14

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.