how can i center the category links in the menu. if i add padding then it doesn't look good when you mouse over it.
“Anyone who stops learning is old, whether at twenty or eighty. Anyone who keeps learning stays young. The greatest thing in life is to keep your mind young.”
- Henry Ford
First, in order to make this work with the current CSS you need to figure out how wide your final menu will be in pixels from start to finish. See screen shot attached to see what I mean.
Open your stylesheet.css and find this:
Make it look like this, filling in your OWN width. You will know if it is not wide enough because it will line break. It needs to be an accurate width because Margin 0 auto will center an element according to it's size and the size of the container it is in.
P.S The default menu is supposed to be floating left with no width. This way it will stretch.
wide.jpg (26.63 KiB) Viewed 5440 times
Code: Select all
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}Code: Select all
#menu ul {
list-style: none;
width:367px;
margin: 0 auto;
padding: 0;
}
I think it would be best to use something like this instead:
#menu ul {
list-style: none;
margin: 0 auto;
padding: 0;
display: table;
This way if the size of the text changes, it does not throw and error, and you can add or modify the menu bar without messing with the css.
That being said, I think its browser support is less. some old browsers may not be able to take it, but every modern one will.
#menu ul {
list-style: none;
margin: 0 auto;
padding: 0;
display: table;
This way if the size of the text changes, it does not throw and error, and you can add or modify the menu bar without messing with the css.
That being said, I think its browser support is less. some old browsers may not be able to take it, but every modern one will.
Sorry to revive an 'old' topic, but I did a search first before starting a new one and this is what came up.
running opencart V1.5.6.1
This is how my 'splinks' appear before applying the fix above:
I am trying to center the categories that appear in the 'splinks' using the suggested method. so in my stylesheet line 1770 I have:
This causes everything except my first 'category link' to center:
What can I do to make the first category move over to center as well?
running opencart V1.5.6.1
This is how my 'splinks' appear before applying the fix above:
I am trying to center the categories that appear in the 'splinks' using the suggested method. so in my stylesheet line 1770 I have:
Code: Select all
#splinks ul {
list-style: none;
width: 440px;
margin: 0 auto;
padding: 0;
}What can I do to make the first category move over to center as well?
nevermind, I figured it out...
Code: Select all
#menu ul {
list-style: none;
margin: 0 auto;
width: 800px;
padding: 0;
}
#menu > ul > li {
position: relative;
float: left;
margin-left: 175px;
z-index: 20;
padding: 6px 5px 5px 6px;I do have another problem with this. I *did* fix it to where the links are centered and displays correctly in IE, FF, SeaMonkey, Safari, Mercury, Pale Moon, and Chrome browsers, however it does NOT display correctly in Opera browser... the first link is indented somewhat (about 1/3) in the green background box/container, but the other 4 links are left drifting in space well below the green background box/container and above the builtin slideshow... =S
Who is online
Users browsing this forum: No registered users and 21 guests
