So I'm adding a CSS drop down menu to a site however I am unable to get it to display properly.
The site in question is here > http://www.grimeforum.com/
When you hover over "news" LI, the child UL appears squashed.
I've spent the past few hours messing with positions but it either displays in the correct place but very squashed, or it floats to the left (but not squashed).
When I remove
position: relative;
from
#menu-nav li {
float: left;
position: relative;
}
it appers unsquashed, but floated to the left outside of the parent LI.
Any ideas?
Here is the fiddle - http://jsfiddle.net/sCW9A/
Remove postition:relative from line 463
Giving it a width of 175px worked for me.
Okay I got the problem. Firstly change #menu-nav li to #menu-nav>li since you don't want all li's to float left under menu-nav
secondly add this to anchors under your submenu
white-space: nowrap;
the a element must be the one with display: block and padding.
#menu-nav ul li {
padding: 0;
}
#menu-nav ul li a {
width: 100%;
padding: 0 15px;
display: block;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
min-width: 180px;
}
Hmm, learnt something new.
Added white-space: nowrap; to #menu-nav ul li a{and hey presto, no need for when using multiple word page titles, and no more layout issues.
Not really a fix but a workaround until I learn to code better I guess...!
Related
So I'm developing a web page, and I'm making it now responsive. I managed to get everything responsive except the main menu nav.
It's a ul element and it has li inside with text. Here are some pictures about the problem
Full webpage:
On mobile:
I just want to adjust the text or the ul element to fit without making another line.
Here's the css ul element:
.main-menu ul {
display: table !important;
background-color: #98B709;
padding: 0;
margin: 0;
text-align: center;
}
And the li element:
.main-menu ul li {
display: inline-block;
float: left;
position: relative;
list-style: none;
}
I tried a lot of things but nothing works...
Thanks and hope you guys can help me!
I found a very useful Stackoverflow post that should answer your question:
Responsive Font Size
And I experienced that changing font size and other problematic parts from px to em generally helps to make is more responsive too.
Try to use different font size e.g
vw Relative to 1% of the width of the viewport
vh Relative to 1% of the height of the viewport
Here is a variation that does not use display:table, which I always avoid.
The important bit you can play with is the 'width' of the 'li' element. If you really want to squash them all on one line, you can make this a very small %.
If you do use the second line, the 'text-align:center' in the 'ul' element will keep everything centered, instead of floating left as you have it now.
I use this code block all the time; it's a common problem.
#main{
width:100%;
}
#main ul {
display: block;
text-align: center;
width: 100%;
padding: 0;
margin: 0;
}
#main li {
width:10%;
list-style: none;
display: inline-block;
padding: 0;
margin: 8px;
}
I am using this template on my website: http://www.css3templates.co.uk/templates/CSS3_gallery_grey/index.html
jsfiddle: http://jsfiddle.net/uPw85/
What I need help with:
1) Center the menu on the page, as you can see on the link it's left aligned.
2) Still keep the text in the drop down menus aligned to the left (just as in the link above).
I've searched this page and on Google a lot before asking for help and none of the results have worked for me. I've tried just about every tip I've found but the menu still won't be centered for me, the only thing that happens is that the text in the drop down menu is centered but I want to keep it to the left.
I've tried with multiple variations of these in different places (nav, menu, li, ul) in the CSS but with no luck:
display: inline-block;
margin-left: auto;
margin-right: auto;,
margin: 0 auto;
text-align: center;
width: auto;
EDIT 2/10, 1 PM EST: I appreciate you guys trying to help but so far none of the answers you've given has helped.
Try this:
ul.sf-menu {
text-align: center;
}
ul.sf-menu li {
display: inline-block;
}
ul.sf-menu li a {
display: block;
}
ul.sf-menu ul {
text-align: left;
}
EDIT:
I've edited the JSfiddle: http://jsfiddle.net/uPw85/3/
EDIT 2:
Remove float: left in ul#nav, or just remove the id="nav" in the ul-tag in the html
In order to center the menu you need to set the width of the child div to be smaller than a set width of a parent. Additionally need to remove the float of the menu as floating an element effectively takes it out of the parent div.
Try setting the following:
ul.sf-menu {
float: none;
width: 760px;
margin: 0 auto;
}
Works when inspecting element. Another alternative would be to try the following code.
ul.sf-menu {
float: none;
display: table;
margin: 0 auto;
}
Just add:
ul#nav {
float:left;
padding-left: 80px;
}
I have spent like 4 hours and still cannot fix it, I have 2 divs, one floated left and one right, in left div I have text and in right I have a <*ul>, when I use text-align:center; based on media query for the left template it works perfectly, but I also want the <*ul> to be centered when the browser width is reduced. Please take a look here and let me know what I am doing wrong and where exactly ? http://goo.gl/OJ5OHt THANKS A LOT to anyone who helps me get out of this..
The problem is not so much the UL but the children LI, that are floated left.
You have two options:
A)
Set a fixed width to UL and center via margin auto:
.social-icons ul {
margin: 5px auto;
width: 220px;
}
B) Remove the float from the children LI, set them to inline and set their children A to inline-block (and then UL text-align would work):
.social-icons ul {
text-align: center;
}
.social-icons ul li {
display: inline;
float: none;
}
.social-icons ul li a {
display: inline-block;
}
The only ways I can see to do this is to add the following to your ul style under your media query:
margin: 0 auto;
width: 217px;
It needs to be a fixed width.
OR
Change your ul to:
text-align: center;
And your li and a items to:
display: inline-block;
Either way should work.
I am curious if there's any way to correct this behavior using css only...
Notice that when you hover over the white space to the right of the menu it causes the blur of the menu items. If you hover over the white space to the left of the menu it does not blur the menu items.
I am sure that the float: left of the #centeredmenu ul rule is causing this blur. I would like to stop the blur when you hover over the white space to the right but this rule is necessary to center the menu.
I am trying to correct this page: http://www.soaringbirdstudios.com/help
As you can see in firebug I tried to add another div below the centermenu div with a style of clear both and enclosed both divs in an enclosing div but that didn't work. I just don't have enough experience to figure this one out.
Thanks.
Not sure if it will help your exact desired solution, but if you mean wanting to get rid of the floats, you can simply do the following:
Change:
.bmenu li {
display:inline-block;
/*float: left;*/ <-- can delete or comment out
list-style: none;
padding: 0;
position: relative;
/*right: 50%;*/ <-- can delete or comment out
margin: 100px 0 0;
font-size: 50px;
vertical-align:top; <--- added for making it pretty
}
Continue downwards with the following changes to get rid of floats completely:
delete <div style="clear:both;"></div>
#centeredmenu ul {
/*clear: left;*/ <-- can delete or comment out
/*float: left;*/ <-- can delete or comment out
list-style: none;
margin: 0;
padding: 0;
position: relative;
/*left: 50%;*/ <-- can delete or comment out
text-align: center;
}
#centeredmenu {
/*float: left;*/ <-- can delete or comment out
width: 100%;
overflow: hidden;
position: relative;
}
Is there a best choice out of float: left or display: inline for aligning list items horizontally?
eg: http://www.vanseodesign.com/css/simple-navigation-bar-with-css-and-xhtml/
Personally I dislike float, but that maybe more of an emotional thing rather than logical.
ul { list-style-type: none; overflow: hidden; width:200px; }
ul li { float:left; width: 100px; }
ul li a { display: block; padding: 10px; width:80px; }
ul li a:hover { background: black; }
<ul>
<li>Facebook</li>
<li>Google</li>
</ul>
This is what I prefer mostly because when you use display:inline you cannot set properties like width, padding (top and bottom), margin etc... which is an handicap for layout purposes.
EDIT 2014
It is also an option to use the display: inline-block property. One think to note is that once you make the list elements inline or inline-block, white-spaces will be taken into consideration. Hence, there will be unwanted spaces between elements.
ul { list-style-type: none; width: 300px; font-size: 0; }
ul li { display: inline-block; *display: inline; zoom: 1; margin-right: 10px; }
/* The *display and zoom is a IE hack, though can't remember
now which one (guess it is IE7) */
ul li a { display: inline-block; padding: 10px; font-size: 13px; }
Check the fiddle here.
If you don't want to use the font-size property (for browser compatibility issues), you can also use html comments to get rid off whitespaces! Though I prefer the method above.
<ul><!--
--><li>Facebook</li><!--
--><li>Google</li><!--
--></ul>
What about
li {
display:inline-block
};
You can then set properties like width, heigth, padding, margin, etc..
I have noticed some rendering bugs when displaying LI's Inline in chrome. My LI border sometimes does not render with the proper horizontal padding.
In general though, I like Inline, it still gives you horizontal margining and padding and you can do a nice text-align: center; on the UL and use the UL for vertical spacing.
I tend to use float purely because an LI is a block element by default and should be treated that way in my opinion but there are clear use cases for both.
It's personal preference.
From a CSS point, Display:Inline = Float:Left(Right).
When it comes to making elements horizontal, like <li>.
The css rule Float is newer than Display.