For some reason my list items are not sitting within my UL element which is disturbing the flow of the page, and doesn't look right. I have tried every position element under the sun but nothing works. I wondered is it because I'm styling a different div instead of the UL element?
Please see example here
The red border is suppose to hold the list elements and if one list description becomes longer, then the red background should grow as well.
Thanks
Your LI have float in it so you have to clear his parent which is UL. Write like this:
ul{
overflow:hidden;
}
Check this http://jsfiddle.net/Uc5cr/1/
Try this one
ol, ul
{
overflow:auto;
}
See the updated fiddle: http://jsfiddle.net/Uc5cr/8/
What's happening is that the LI elements are floating, and therefor going over the UL outlines. You'd typically solve this by clearing your LI elements with a element using clear: left; property in CSS, when you want to clear the floating.
But since this is in an un-ordered list, it is probably best to use a CSS hack called "clearfix" on your UL-element to solve this. That way the UL element will follow the LI elements in height.
Example: http://jsfiddle.net/mikaelbr/JkGRj/
Note: There are many versions of the clearfix hack. Do a google search to find some, if you are interessted in seeing how they work.
give overflow:hidden to the div erd background in order to contain the ul element
Check this out http://jsfiddle.net/Uc5cr/7/
Related
I'm making a dropdown menu, but all the styles from the first ul is being added to the styles on every ul beneath the first ul.
I've tried overriding the styles using !important, and moving the css to different levels.
Anyone got a clue about whats going on here?
This image probaly explains it the best way: http://screencast.com/t/UrkRbjjaYctp
Thanks.
#menuwrapper > ul{
padding-left:37px;
}
#menuwrapper ul ul {
padding-left:40px;
}
This should solve your issue
This is expected behavior. Paddings are added relatively.
If you don't want the nested ul to be padded 37px you have to remove the padding from parent ul (or use some hack as negative margin e.g. margin-left: -37px).
If you remove padding from the parent you will probably need to add some margin to each its child to preserve the layout. I'd suggest to reconsider the HTML structure.
I setup a jsFiddle to show what I'm doing:
http://jsfiddle.net/UfzCS/
Basically the border I set (needs to go all the way across) on the UL is showing up over (instead of under) the LI's because the LI's are floated left. Is there any workaround for this? I know I can set a height, but I may make the text a variable size so the height may dynamically change.
Your LI are floated, so the UL does not know where to wrap them.
An easy way to fix this is to make the UL float: left or add a overflow: hidden to it.
<ul>
<li>Brantford Grandview</li>
<li>Brantford Vintage</li>
<li>Kingston <br/>River Park</li>
<li>Paris</li>
</ul>
It's a pretty basically drop down menu Im building. Right now, I'm just adding a top border to every li giving it a grey line. However, what I want is a 1or 2px gap between the links so the user can see the bg behind. I tried add a div tab in between the li with a height of 1px, but it does not work.
Thanks
A padding inside the li would work.
li{
padding-top:2px;
}
would leave a 2px space inside the li and show the background.
It's hard to tell without seeing the CSS, but I would try fooling around with margin-top or something. It mainly depends on what element the background is being applied to, in your case you would need to apply it to the <li>. Let me know if I need to elaborate.
How to reduce gap between two display:inline items?
gap is showing on all browser?
ul.tabs li {
display:inline;
margin:0 padding:0;}
alt text http://img167.imageshack.us/img167/7283/pruebank5.gif
I can fix the problem using float:left in the LI elements but I need
to understand why it's happening.
You have whitespace between your inline elements. float: left fixes the problem, because floating implicitely converts the element to a block element, regardless of display: inline.
And you need a ; between margin:0 and padding: 0.
... but I need to understand why it's happening.
You may have whitespace or new lines between your inline elements.
For further reading, you may want to check out the following Stack Overflow post:
Best way to manage whitespace between inline list items
Reduce the word-spacing CSS property to less than 1em.
Someone told me once they it is possible to create menu's via CSS only, how can you?
It's done through the selector. You use a pseudo class to specify a particular element to only be displayed when its parent element is being hovered over.
#nav li:hover > ul {
display: block;
}
This will only get the ul to display if its parent element, #nav is being hovered over. The ul now is the drop down menu into which you can place more list items. This will work with however many levels you want your drop down menu to have.
This technique is showcased very nicely in this tutorial: CSS3 Dropdown Menu
I was typing up an answer, but this simple, short page goes over it better than I could say. Basically you do display: hidden on the expanded part, and then add a display: block to the trigger element on its hover state.