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.
Related
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
While looking for keyboard-accessible menus, I stumbled across this question, which has as its answer a CSS drop-down menu http://jsfiddle.net/cfWpE/. It seems to use styling on the anchors in the menu rather than :hover on the <ul> items to display the submenus without any Javascript, but I can't figure out how.
Could someone who's better than me at CSS explain how this works? I'd like to try to extend this to a 3-level menu, but without understanding how it works for two levels, that's going to be difficult.
edited for clarity:
It's not actually the keyboard part that confuses me; I understand that tabbing through updates :focus on the current focus link, but the only CSS rule that seems to be applied to those elements is
ul.menu li.list a.category:hover,
ul.menu li.list a.category:focus,
ul.menu li.list a.category:active {
margin-right:1px;
background: black;
}
I don't understand how setting margin-right to 1 pixel makes the parent <li> visible.
This is an interesting Technique to achieve a dropdown menu.
The list items .list have a very high negative margin-top and a width of 250px. This places their content out of the viewport of the browser. The child anchors a.category have a positive margin-top with exact the same value, so they are visible to the user as if they were positioned normally. Now both, the a.category and the ul.submenu have a float:left applied. that's why the submenu does not appear beneath the anchor, but beside it. (But it has no margin-top, so it is still "invisible") Both elements (a.category and ul.submenu) have 125px width and fit perfectly into the parent li which has a width of 250px. Now on hover the anchor gets an additional 1px margin. This makes both elements too wide to fit into the parent container side to side and so the floated submenu breaks onto a newline and suddenly appears below the anchor - TADA:-D
I hope you could follow my explanation - if not ask please which part I need to clarify;)
Extending this to a third level is not possible - I would just go with a regular css-menu with display:block; and hide. However, you can use absolute positioning and switch the top value from a very high negative value to 0 when hovering, which would have the same effect.
Generally, i would use this with care. Some searchengines consider text that is hidden via negative margins or text-indent as blackhat SEO and may penalize one for that. Although it might be possible that Google is clever enough to recognize this as a regular dropdown-menu
I am working on a website that has these tabs at the top which I need to have automatically spaced inside a div. The reason for this, is that the div below it has a border that needs to line up with the borders on the tabs. See my jsfiddle below for what I'm talking about. I currently have them all spaced correctly, but the nature of this site is that the words in the tabs will change, making my spacing incorrect. How can I automatically space them inside my div so I don't have to tinker with all the individual padding to make them line up with the div below?
http://jsfiddle.net/g7c5X/
Should be able to achieve it by adding to your CSS something like this:
#navMenu ul {display:table; width:100%}
#navMenu li {display:table-cell}
I think older versions of IE may ignore the display type can't remember which. The other option would be some javascript to calculate the margins.
I was playing around with the new CSS3 transitions and I seem to have hit a little road block. I am using transitions to scale links being held within an unordered list, but this is creating some unwanted behaviour. It will be easier to just show you: http://jsfiddle.net/xARug/
Now everything is working as expected, however when the text scales up it must stretch the list upwards which makes the other links within it rise up a little bit. I'm looking for a way to "stick" the text to the bottom of their parent element. I tried using position:absolute but because it pulls the text out of flow it doesn't seem to work.
What would be the best solution to this problem?
Try switching your floats to inline-block. The floated elements are changing position when one of them grows.
http://jsfiddle.net/xARug/1/
nav ul li{
display: inline-block;
padding-left:0.5em;
}
I have a slight problem with a background image on a block element that is preceded by a floating element.
I float an image to the left, followed by a H1. As expected, the H1 (which is a blocl-level element) flows behind the image, but it's contents (the actual title) appear to the right of the image.
Unfortunately, the background-image I'm using on the H1 has to be aligned to the left, and thus appears behind the actual img, because unlike the contents this is not pushed by the floating behaviour.
Example:
http://jsfiddle.net/WwuqG/
(I set the second title to clear: left to show what it should look like).
One solution is to set the left-margin of the title to a little more than the floating image's width, but that would require me to know it's width beforehand.
Another option is adding the title's icon in an element inside the h1, but that's not semantically correct.
Is there a better css-only solution that doesn't require additional elements?
add overflow:hidden to the h1
new fiddle
I'm slightly confused.
If I do what you suggested:
set the left-margin of the title to a
little more than the floating image's
width
It looks like this: http://jsfiddle.net/WwuqG/1/
My confusion comes from the fact that your problem seems to be.. really simple to fix.
Also add float: left to the <h1>: http://jsfiddle.net/WwuqG/2/
This works with whatever width image: http://jsfiddle.net/WwuqG/3/
Is that it, or have I misunderstood?