I am having some grave difficulty to center a silly menu on the pages of my website. I know I can set the width of an outer div to a px value, but how can I make it so it centers for a responsive website? Here's the page:
http://103.4.17.225/~america/index.php/product-menu/vertical-garden/gro-wall-3
The menu is the benefits,gallery,etc.
Thanks guys , you're the bomb.
First, remove the float from the ul and set it to inline block;
.met_main_nav ul {
float: none;
display: inline-block;
}
Then use it's parent (the nav element) to center it, This will center any inline-block elements inside it (i.e the ul):
.met_main_nav {
text-align: center;
}
To center horizontal menus I often use a inline-block approach instead of a float one, try adding this to your stylesheet:
.sidemen .nav { text-align: center }
.sidemen ul li {
float: none; /* this will override your current line, just for testing */
display: inline-block;
}
If you add the code into your stylesheet, you can delete your current float rule, and just adding the display one.
The menu will be centered, no mater if you resize the browser, unless you do up to extreme narrow size, in which I'd recommend using media queries to adapt the menu rendering (reducing the margin or adapting styles to show in two lines perhaps).
Related
As can be demonstrated in this fiddle, adding too many elements in a Bootstrap .nav causes it to just add items vertically down. How would I go about limiting its height and making it horizontally scrollable?
First you need to tell the ul to not wrap and overflow into a scroll bar. Then the li elements need to not be floated and display inline. This will do it:
ul.nav {
white-space: nowrap;
overflow-x: auto;
}
ul.nav li {
display: inline-block;
float: none;
}
Fiddle: http://jsfiddle.net/bmfcd3zt/8/
Try this:
.nav{flex-wrap:nowrap;overflow-x:auto}
First, here is a fiddle that I've found on a scrolling implementation of tabs.
Second, I don't think that it's a good UX to provide so many links in a tabbar. I recommend you to use dropdown menus or mega menu.
I have searched for quite a while and read many of the other answers on this topic. I have a set of image links for which the clickable areas overextend the images, but only on the bottom. The images are the social icons in the site header.
Website link: http://brendanbikes.org/
stylesheet: http://brendanbikes.org/wp-content/themes/casper-wp-master/style.css?ver=3.9.1
Relevant class: .social-icons
I've tried changing the float of the individual images, line height, div container height, all to no avail. Why do the links only overextend on the bottom, and how can I prevent this?
It's caused by the default display of the a tags (display: inline;).
Add this CSS, and everything will be OK :
.social-icons a {
display: inline-block !important; /* !important could be omitted */
}
You can't change height and width of inline elements. By specifying display: inline-block, you can then adjust the height of your .social-icons a objects:
Add to .social-icons a rule:
display: inline-block;
height: 1em;
The solution is a bit hacky, but adding the following forces cutoff of anything outside the container, and accounts for horizontal cutoff:
.social-icons a{
overflow:hidden;
padding-left:0.1vw;
padding-right:0.1vw;
}
Hope this helps others with this.
I have an issue with inline list elements.
The issue is that when I limit the width of my menu, which contains inline list elements, to put it onto multiple lines (for mobile devices) the right-side of elements is being cut off.
Here's a JSFiddle showing this: http://jsfiddle.net/vk2bK/7/
The menu in the orange with:
width: 210px;
background-color: #ffc20e;
In this JSFiddle the right-side of the 2nd list element is cut off. There's lots of space beside it in the div with the class 'menu', so it's not because of that. I assume it's because of some inline list property I'm unaware of.
How do I prevent the right-sides of inline list elements being cut off when the list expands onto a second line?
Simple CSS fix should do it.
You need to modify the li elements so they are inline block with a defined width:
.menu li {
display: inline-block;
width: 90px;
}
See it here: http://jsfiddle.net/vk2bK/21/
EDIT
I played around with it, see if this is what you want: http://jsfiddle.net/vk2bK/22/
ok i found a solution : JsFiddle
.menu a {
display: inline-block;
}
.menu a {
width:80px;
background-color: #7dc242;
line-height: 30px;
margin: 3px;
}
i removed the lists and made all elements inline-block u can edit their width and height if u need to.
What I want to do is, to vertically align collapsed blocks on give website:
http://maliyyemenecment.com/?language=en
I tried all possible ways, to align words with bottom side. I mean, constant margin from bottom side. The problem is, can't achieve any good result. Any suggestions?
Thx in advance
.kwicks.horizontal li .block .collapsed has a text-align:right; replace it with text-align: left; (as the "bottom" is actually the left side of the element) and set a text-indent (works for me when making this edit in developer tools)
.kwicks.horizontal li .block .collapsed {
text-align: left;
text-indent: 17px;
}
I have dropdown menu and its made via a list and position absolute, however the dropdown links are very very very small area and do not cover the text completely.
How can I fix this?
Example http://outreviews.com/v%202/index.html (the dropdown menus)
Remove the padding from the sub menu's UL and LI and give the A element "display:block" This will make the A element take up the entire width of the menu.
You can fiddle with the padding to get it the way you want it.
If you add:
ul li a {
display: inline-block;
width: 100%;
height: 100%;
}
It should work okay, and since even IE allows display: inline-block; on natively in-line elements it should be relatively cross-browser friendly (certainly under a valid doctype).
It's worth remembering that padding on the parent li will also reduce the possible width of the child a element, and the display: inline on the same parent li is also likely to cause you a little trouble (since display: block; on the a would be so much simpler).
Edited to note that #Chris Bentley correctly noted the points in my final paragraph (above the hr) just prior to my answer.
make the following changes:
in #headermenu li change the padding:20px; to padding :0 20px;
add delete the top:55px; from #headermenu li ul
What you can do is make the li elements display:list-item and the a elements display:block. That's what's being done on the site you're linking to.