Just a forewarning, I am aware for the most part of how float works, and I understand that a div will not wrap floating objects. However, a came across a section of code on w3 schools and I'm a bit confused. Essentially, they use a ul and they float the li items, but the ul wraps to fit the height of the list items. If i were to do the same thing with a div, the div and the list items would not line up, I'm just curious as to why it works with the ul but not with div?
the code can be found here
https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black_right
The CSS for the ul in that example contains overflow: hidden;. This makes an element wrap floating child elements. There's no difference in that respect whether it's a ul or div.
Related
I have a very basic CSS problem.
I have a floating image in my top-left corner with a margin-right. The content is made of paragraphs and lists with bullets. I want my lists to have a padding-left for more visibility and my bullets appear in "list-style-position: outside" (text must be aligned).
My problem is, when a list is displayed next to my floating image, ul padding is not applying.
Here is an annotated screenshot for your comprehension :
This kind of behavior happens with FF and Chrome. With IE, it is worse because the bullets appear at the very left of the floating image...
Edit : css property "ul{overflow: hidden;}" is not an option because I want to avoid this :
I'm sorry I can't show you a piece of code because it is a Drupal website and the content of the node is generated by wysiwyg module and written by webmaster and editors. I have no access to the generated structure. The content is not fixed and lists could appear everywhere in the text.
This Fiddle represents well my situation: http://jsfiddle.net/34Cuf/
I think you have to get rid of this:
list-style-position: outside
This is putting your bullets points outside of padding. In the box model, anything outside the border box collapses during a float.
Lists have initial left padding on them (so there is enough space to show the bullet) so unless you give the ul a padding that is greater than this initial value, your list will actually move left instead of right.
Have a look at this example
To make your ul behave properly next to a floated element you just need to float it too: Example
Padding won't apply to list at right of floating div, because it stays behind floating div.
It doesn't count from after div, it still counting from left as ul after floating div.
It happens because the div "floats" with text.
To understand it better, play it ul li padding in my example in fiddle
See that a put a little margin in floating div to you see that the content of ul extends form the left margin behind floating div.
You'll have to apply a bigger right margin to the floating div.
I'm having some real trouble with CSS here... it's very odd.
I have a UL element wrapped within a Nav tag. I'm trying to apply some padding to the individual links and for some reason the padding isn't moving the element down and expanding the container as a result.
Here's a screenshot of what's happening:
As you can see, the padding is being noticed by the browser, but it's just overlapping with the element above (which is being floated). I can't find a way to push it down, or at the very least make the container expand to hold it properly.
For reference, I'm using the Skeleton responsive boilerplate as a base.
Here's a link to it live: http://richardsonweb.co.uk/
Try display:inline-block; on your li elements
I have this code here and I am trying to make the ul.submenu li to stretch according to its contents. As you can see, the 3rd li of the ul.submenu has a long text which hides instead of stretching the li.
I have tried changing the display property of all elements on the DOM with various combinations but I cannot get it right.
What am I doing wrong and why this happens? What am I missing?
Any help will be very much appreciated! :)
Currently the text has little bearing on the layout, because of block display and absolute positioning.
You can change this by giving the lis display: inline-block and white-space: nowrap. I've forked an example where the sub-menu is as long as the longest item requires.
Explanation
inline-block gives the element properties of inline and block display: inline in that the element should flow like text, and take its initial layout and dimensions from the text it contains. But the block part means you can also specify top and bottom padding and margin, clears, etc. Even with this set, the containing element is still absolutely positioned (most text content just flows as long as it needs because normally the containing block element fills 100% width - not the case for absolute, relative and fixed elements), so its instinct is to collapse to the minimum width, that of the first word. But if we use white-space: nowrap, we can force the text to extend as much as it needs, so the full sentence is used as the measure.
You could just change the min-width to:
min-width: 240px;
View Example
the behaviour problem explained in the title is understandable but I need a workaround.
I made an example in JSfiddle: http://jsfiddle.net/TBXr4/2/
See in the first LI I have a couple of words. They are not getting lined up like I need them to but they are getting listed. How do i resolved this?
Let me make this a little more specific, I don't want to set the width of the child UL manually, in fact I don't want one to be set. I need a way sothat the parent UL will have a width set whilst the child UL will be the smallest possible width to inherit the text.
You could just set the white-space property of the li element:
li {
/* other stuff */
white-space: nowrap;
}
JS Fiddle demo.
The problem with this is that while the text will be visible outside of the parent ul's assigned width, the style of the li (it's background-color / background-image) won't carry over.
References:
CSS white-space property.
Demo is here
i think you want this only.
The reason why the text is not displaying the sentence on one line is because you have set the width of the li, remove style="width:35px".
Why are you specifying a width to the exact element (UL) where you do not wish to adhere to it?
Apply the width setting to the main list and assign a new width to the sub-list as shown in this jsfiddle example
So essentially I have a horizontal menu using ul and li elements styled with CSS which has a fixed height attribute for the ul but since the number of li elements are too many they are spilling over into multiple lines ...since the height of the ul is fixed, the li elements appear on the next line just fine but they are outside of the 'block' of the ul...so any further html content that appears starts showing inline with the li elments on the 2nd line?
I hope I have been able to describe the problem. I wish this was a publicly accessible site, for the CSS gurus to help with using firebug or web inspector.
use min-height on your UL, not height
use float:left on your LIs
use display:block on your A tags and put all other styling on the A tags. (DO NO STYLE THE LI TAGS OTHER THAN FLOAT:LEFT)
you can expand the width of the
container tag holding the ul, you do not have enough width for all the list elements
if you can not enlarge the container try to cut down the width of the li's, using less padding and margin in between them.
you can all so use a min-width property to bee sure that they will have enough space