I am trying to use margin:auto to center a ul tag into a parent div.
I am setting both to fixed widths, and display:block for the ul, but still nothing.
Here is my code
http://jsfiddle.net/7y9qV/3/
I think I know what you mean. The problem is, <ul> elements are actually rendered with a padding (in browsers that I've seen them in), which is causing the list to be pushed to the right.
To fix this, just add to your current definition for #thelist:
#thelist{
padding:0;
}
Here's a JSFiddle that shows what this achieves. I hope this is what you were looking for! If not, let me know and I'll be happy to help further.
Related
Hi so I am working on creating a wordpress template from an existing static website.
However I can't seem to get the CSS for the menu to work correctly.
I need a style that is applied to the menu to be applied to all of the li and not have to code each one individually.
The problem is I want to add a background-color to each item (making them look like buttons). If you look at the site again, it puts a huge box rather than putting a small background-color to each item. I hope that makes sense.
You can see the site here: http://lawrences.work/
First, remove your width:149px; on #menu-menu.
Second, on #menu-menu li, remove all margins, and try apply this code
# menu-menu li {
background-color: #FFC0CB;
display: inline;
padding: 10px 20px;
}
Alright, so I've checked it out and it appears to be that the div#logo is causing your menu to be vertically stretched.
I'm not entirely sure as to why since I didn't scan all the CSS or couldn't find anything related to it directly.
Either way I do have an explanation for what actually happened anyways.
So this div.menu-menu-container in your HTML is lexically positioned just below the div#logo - if you inspect element on them you should see highlighting overlap when hovering between the two.
An element that is float: left basically has no height. It is sort-of removed from the document flow unless the div below it has clear: both or the parent has overflow: hidden - both which have their own nasty side-effects.
Anyway, this div#logo caused your div.menu-menu-container to stretch vertically because the div#logo was floated and your div.menu-menu-container wasn't causing it to be quirky.
To fix this I added one property to div.menu-menu-container which should not harm your layout in any way except for keeping these floated elements out of your way.
the property clear: both allows you to clear a float so that the document flow after it turns back to normal. This shrunk your menu down to the size it's supposed to be in the position it's supposed to be in.
EDIT (18-11-2015)
I actually had a choice of using clear: both or float: left - both fix the issue since all floated elements do think about each other, just not about the non-floated elements as much.
clear: both however is the nicest solution in this case because it doesn't change the behaviour of that element specifically whereas floating it does.
Also, the snippet you're going to need for your code to work:
.menu-menu-container {
clear: both; // or float: left; for that matter
}
For more reading on MDN / css-tricks
float
clear
css-tricks on float
Hope this helps you understand your issue, if you need more information I'll see it in the comments!
Good luck
I have this code here. If you open it a browser other than IE, then you would be able to see that the 3rd and 5th li of the ul.submenu have also an img inside. In IE unfortunately it's not displayed on the 3rd li, and it's going underneath like in a different line as if it lacks floats. Normally, the img should just expand the li as in the rest browsers.
I have tried changing the display property of both li and img, as well as various margin and padding combinations of the img but with no luck.
Anyone knows why this happens and what should I do to reach the proper result? Any help will be very much appreciated! :)
Number 1 rule of styling lists: use display:block on the A-tag and put all styling there (other than things for positioning/hiding/showing your lists).
See my tutorail: I love lists.
It is my first qustion :)
Box shadow does not cover drop-down ul. See the screenshot, please - http://i31.fastpic.ru/big/2012/0202/7d/83a6dfa12f24ace82a3df52b6fe0587d.png. I am trying to solve it for a several hours but no result :(
It is strange I have gave z-index to parent element 500 and to the drop-down ul 1 but shadow is still under drop-down ul not over it.
Here is the link: http://layot.prestatrend.com/
Hope someone will help me, thanks.
That's an issue regarding the stacking context.
The point is you can't place the block lower than the closest parent with non-static position and positive z-index. So, you have the z-index:100 on the #categories_block_top .tree li, so you can't place the ul under it.
To fix that (one of the ways) you can remove this z-index, then add position:relative;z-index:1; to the #wrapper and then add the negative z-index like z-index:-1; to an ul. Doing so you'll put it on the same level as the #wrapper, so it would be over the content after it, but under the box-shadow of the #subheader.
Prepend an inner (or inset) shadow on the first li element of the dropdown list.
I guess because the element will always be inside the main menu, the shadow won't work or appear above the sub list.
I have a drop down navigation that works perfectly when positioned via a left CSS property.
http://jsfiddle.net/durilai/nmME4/1/
You can see that the dropdown adjusts to the width of the content, however I would like to position right. When I do the width of the drop down will not adjust to the content. You can see this behavior at the fiddle below.
http://jsfiddle.net/durilai/cTSJt/2/
Any help is appreciated, also any knowledge into what is causing this behavior is also appreciated.
The right: 100px in ul seems to be setting a width of 100px.
If that does not need to be positioned absolute, then use float: right; and use margin-right: 100px; instead.
JSFiddle: http://jsfiddle.net/cTSJt/12/
Ok so basically, from what I can see, the issue was being caused by using the element (in this case ul) directly as the selector.
I believe this was interfering with the below ul elements within your CSS. Simply changing the first CSS rule from ul to your ID (Navigation_Main) fixes the issue.
Fixed example > http://jsfiddle.net/cTSJt/10/
Thanks
Have you tried using div's instead of the unorder list (ul) element. As you are using CSS to striping off all the default styling that makes a "ul" a list element why not use a div to start with. I can't guarantee it will solve the problem but it eliminates unnecessary CSS and you might beable to spot the issue more easily
And in reality shouldn't a ul only be used for bullet point items, in a text document?
I have list items, with a span, set to inline-block and floated right. This is the result
Here's a link to jsFiddle: http://jsfiddle.net/8bR3u/.
I've seen several suggestions to fix this by putting the span in front of the rest of the list item content, but I want a solution that doesn't jack up the markup. Anyone know of one?
The fix required can be found at http://jsfiddle.net/8bR3u/4/
The fix is to add position:relative to the ul and add position:absolute and top:5px and right:0px to the span and remove the float.
The solution is to use Relatively Absolute positioning. More info on it can be found here http://css-tricks.com/absolute-positioning-inside-relative-positioning/