Related
I am working on a supposedly simple drop down menu using HTML and CSS, and have encountered an issue. After scouring google and the forums to no avail, figured it was time to ask. I am trying to get the drop down menu to line up with it's parent element.
I have experimented with a few different methods, so far the most hopeful seems to be setting the "left:" value to the necessary percentage.
This brings up another issue though:
Issue: when I set the left value, I end up with a bunch of blank space to the right of the item that I can't seem to get rid of. Can't get the width right.
Code located here: https://jsfiddle.net/c6mz3t08/5/
HTML
<div id="navbar-top">
<ul class="horizontal">
<li>Home</li>
<li>About
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</li>
<li>Header</li>
<li>Header</li>
<li>Header</li>
</ul>
CSS for dropdown
.horizontal li ul {
opacity:0;
visibility:hidden;
text-align:left;
position:absolute;
top:50px;
left:-38%; //end up with blank space on right?
}
.horizontal li ul li {
position:relative;
background-color:#BBB;
display:block;
width:100%;
}
It seems the alignment problem happens because the <ul> starts after the word "About" in the second <li>.
a.) for positioning adjust the leftparameter in .horizontal li ul (-39px seems to work well).
b.) for the width of the submenus adjust the width parameter in .horizontal li ul li (70px worked well here, but depends on the content)
Do not guess on the left. The reason it is pushed to the right is because the ul has by default some padding.
Setting the padding to 0 and the left to 0 will fix this.
The space on the right is added because you set the width to 100%. If you remove the width it will fit its container. But that might not be what you want because the text will wrap, it might be better to set white-space:nowrap on it.
.horizontal li ul {
opacity:0;
visibility:hidden;
text-align:left;
position:absolute;
top:50px;
padding:0;
left:0; //using the LEFT parameter to get it in to alignment--end up with "blank" space on right?
}
.horizontal li ul li {
position:relative;
background-color:#BBB;
display:block;
white-space:nowrap;
}
Updated demo at https://jsfiddle.net/c6mz3t08/6/
The title probably doesn't actually describe the issue properly. I want to create a menu for my website that is a vertical menu on the left side, and when you hover over an option with sub-options those sub-options pop out to the side (doesn't really matter at the moment). The issue I'm having is that when they pop out they push down all the other options, and I get this navigation bar that doesn't look good at all. If someone could help me fix this so I don't shove everything else out of the way even though they aren't overlapping, that would be appreciated.
The HTML I use.
<ul id="nav">
<li>Work</li>
<li>Imaging
<ul>
<li>Photoshop
<ul>
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li>Illustrator</li>
</ul>
</li>
<li>Home</li>
The CSS I use.
ul {
list-style-type:none;
margin:0;
padding:0;
}
a {
display:block;
width:60px;
}
#nav ul {
display: none;
}
#nav li:hover > ul {
display: block;
position: relative;
float: left;
}
Thanks in advance if someone can help me with this.
that is because your document is having all the elements in a line and will always show them one after the other!
So my advice for you would be to just use
position: absolute;
This way you can align the elements over the document without interefering the current document style and element alignment!
For more: https://developer.mozilla.org/en-US/docs/Web/CSS/position
I would position the ul inside your li absolute.
position:absolute;
When you do this the element will hover above the li-parent. When you try a little with positive and negative margin you will be able to put the hover element next to it parent.
It will be something like this:
#nav li:hover > ul {
display: block;
position: absolute;
float: left;
margin-left:60px;
}
I have an (XHTML Strict) page where I float an image alongside regular paragraphs of text. All goes well, except when a list is used instead of paragraphs. The bullets of the list overlap the floated image.
Changing the margin of the list or the list items does not help. The margin is calculated from the left of the page, but the float pushes the list items to the right inside the li itself. So the margin only helps if I make it wider than the image.
Floating the list next to the image also works, but I don't know when the list is next to a float. I don't want to float every list in my content just to fix this. Also, floating left messes up the layout when an image is floated to the right instead of left of the list.
Setting li { list-style-position: inside } does move the bullets along with the content, but it also causes lines that wrap to start aligned with the bullet, instead of aligned with the line above.
The problem is obviously caused by the bullet being rendered outside the box, the float pushing the contents of the box to the right (not the box itself). This is how IE and FF handle the situation, and as far as I know, not wrong according to the spec. The question is, how can I prevent it?
I have found a solution to this problem. Applying an ul { overflow: hidden; } to the ul ensures that the box itself is pushed aside by the float, instead of the contents of the box.
Only IE6 needs an ul { zoom: 1; } in our conditional comments to make sure the ul has layout.
Adding an improvement to Glen E. Ivey's solution:
ul {
list-style: outside disc;
margin-left: 1em;
}
ul li {
position: relative;
left: 1em;
padding-right: 1em;
}
http://jsfiddle.net/mblase75/TJELt/
I prefer this technique, since it works when the list needs to flow around the floating image, while the overflow: hidden technique will not. However, it's also necessary to add padding-right: 1em to the li to keep them from overflowing their container.
This is where the "display" property comes into its own. Set the CSS below to make the list work alongside the floated content.
display: table; works alongside floated content (filling the gap) but without hiding content behind it. Much like a table does :-)
.img {
float: left;
}
.table {
display: table;
}
<img class="img" src="https://via.placeholder.com/350x350" alt="">
<ul>
<li>Test content</li>
<li>Test content</li>
<li>Test content</li>
</ul>
<ul class="table">
<li>Test content</li>
<li>Test content</li>
<li>Test content</li>
</ul>
EDIT: Remember to add a class to isolate which lists you wish to do this for. E.g. "ul.in-content" or more generally ".content ul"
Try list-style-position: inside to change the layout of the bullets.
Why overflow: hidden works
The solution is as easy as:
ul {overflow: hidden;}
A block box with overflow: other than visible establishes a new block formatting context for its contents. W3C recommendation: http://www.w3.org/TR/CSS2/visuren.html#block-formatting
Example
The buttons on my website, which are <li> in disguise, are made like this. Make the viewport (window) of your browser smaller to see the indenting in action.
Related answers
https://stackoverflow.com/a/710264/2192488
https://stackoverflow.com/a/16041390/2192488
Article with examples
Overflow – a secret benefit
At http://archivist.incutio.com/viewlist/css-discuss/106382 I found a suggestion that worked for me: style the 'li' elements with:
position: relative;
left: 1em;
Where you replace "1em" with the width of the left padding/margin that your list items would have if the float weren't present. This works great in my application, even handling the case where the bottom of the float occurs in the middle of the lists--the bullets shift back over to the (local) left margin just right.
By adding overflow: auto; to your ul works for me at least.
Update
I've updated my jsfiddle to visualize what's going on. When having the ul beside the floating img, the content of the ul will be pushed by the float, but not the actual container. By adding overflow: auto the whole ul-box will be pushed by the float instead of only the content.
You could assign position: relative; left: 10px; to the li. (You may additionally want to give it a margin-right: 10px;, otherwise it might become too wide on the right side.)
Or, if you want to use float for the ul -- as suggested by others -- you can probably stop the rest from floating right of the ul by using clear: left on the element that follows the ul.
Disclaimer
Lists next to floated elements cause issues. In my opinion, the best way to prevent these sorts of floating issues is to avoid floating images that intersect with content. It'll also help when you have to support responsive design.
A simple design of having centered images between paragraphs will look very attractive and be much easier to support than trying to get too fancy. It's also one step away from a <figure>.
But I really want floated images!
Ok, so if you're crazy persistent enough to continue down this path, there are a couple techniques that can be used.
The simplest is to make the list use overflow: hidden or overflow: scroll so that the list is essentially shrink wrapped which pulls the padding back to where it's useful:
img {
float: left;
}
.wrapping-list {
overflow: hidden;
padding-left: 40px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
This technique has a few problems though. If the list gets long, it doesn't actually wrap around the image, which pretty much defeats the entire purpose of using float on the image.
img {
float: left;
}
.wrapping-list {
overflow: hidden;
padding-left: 40px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
But I really want wrapping lists!
Ok, so if you're even crazier more persistent and you absolutely must continue down this path, there's another technique that can be used to wrap the list items and maintain bullets.
Instead of padding the <ul> and trying to get it to behave nicely with bullets (which it never seems to want to do), take those bullets away from the <ul> and give them to the <li>s. Bullets are dangerous, and the <ul> just isn't responsible enough to handle them properly.
img {
float: left;
}
.wrapping-list {
padding: 0;
list-style-position: inside;
}
.wrapping-list li {
overflow: hidden;
padding-left: 25px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
This wrapping behavior can do weird things to complex content, so I don't recommend adding it by default. It's much easier to set it up as something that can be opted into rather than something that has to be overridden.
I am using this to solve this problem:
ul {
display: table;
}
Try the following on your UL tag. This should take care of the bullets overlaying your image and you don't have to mess up your left allignment caused by list-position: inside.
overflow: hidden;
padding-left: 2em;
Struggled with this myself. Best I've managed is the following:
ul {
list-style-position: inside;
padding-left: 1em;
text-indent: -1em;
}
The text is not actually indented but the bullet shows.
After fighting with this interesting issue in several projects, and investigating why it happens, I finally believe I found both: a working and 'responsive' solution.
Here is the magic trick, live example: http://jsfiddle.net/superKalo/phabbtnx/
ul {
list-style: none;
position: relative;
padding-left: 0; /* remove any left padding */
margin-left: 0; /* remove any left margin */
left: 35px;
}
li {
padding-left: 0; /* remove any left padding */
margin-left: 0; /* remove any left margin */
text-indent: -19px; /* adjust as much as needed */
}
li:before {
content: '•\00a0\00a0\00a0';
color: #000; /* bonus: you can customize the bullet color */
}
Edited to update based on OP's comment
ok, then just break it up into 2 divs nested together
ul {background: blue; position:static;}
.therest {position:relative; width:100%}
.indent {float:left; }
<div class="therest">
<p>
Est tincidunt doming iis nobis nibh. Ullamcorper eorum elit lius me delenit.
</p>
<hr />
<h3>Lorem</h3>
<div class="indent">
<ul>
<li>list element</li>
<li>list element</li>
<li>list element</li>
</ul>
<div>
the rest now under the UL
</div>
try changing the ul li css to
ul {float:left; background: blue; }
Working inside an LMS without access to head of doc, found it easier to go with margin-right: 20px as an inline style for the image. Which I owe to this site.
try this:
li{
margin-left:5px;
}
If you want them to go left, just put in a -##px value.
or you could do this:
#content ul {
background:none repeat scroll 0 0 #AACCDD;
float:left;
margin-right:10px;
padding:10px;
and then remove all the styling from the li
How about this?
ul{float:left; clear:right}
width: 300px;
height: 30px;
margin-left: auto;
right: 10px;
margin-left: auto will cause the element itself to be right aligned.
Set height and width of the element you want - in my it's a background image in a div inside
You could try also floating the ul to the left, and define an appropriate width for it, so that it floats next to the image.
Something a little like this jsfiddle?
I fixed it with
div.class-name ul {
clear: both;
}
width: auto; overflow: hidden;
Add display:table; to ul:
ul{display:table;}
I have an (XHTML Strict) page where I float an image alongside regular paragraphs of text. All goes well, except when a list is used instead of paragraphs. The bullets of the list overlap the floated image.
Changing the margin of the list or the list items does not help. The margin is calculated from the left of the page, but the float pushes the list items to the right inside the li itself. So the margin only helps if I make it wider than the image.
Floating the list next to the image also works, but I don't know when the list is next to a float. I don't want to float every list in my content just to fix this. Also, floating left messes up the layout when an image is floated to the right instead of left of the list.
Setting li { list-style-position: inside } does move the bullets along with the content, but it also causes lines that wrap to start aligned with the bullet, instead of aligned with the line above.
The problem is obviously caused by the bullet being rendered outside the box, the float pushing the contents of the box to the right (not the box itself). This is how IE and FF handle the situation, and as far as I know, not wrong according to the spec. The question is, how can I prevent it?
I have found a solution to this problem. Applying an ul { overflow: hidden; } to the ul ensures that the box itself is pushed aside by the float, instead of the contents of the box.
Only IE6 needs an ul { zoom: 1; } in our conditional comments to make sure the ul has layout.
Adding an improvement to Glen E. Ivey's solution:
ul {
list-style: outside disc;
margin-left: 1em;
}
ul li {
position: relative;
left: 1em;
padding-right: 1em;
}
http://jsfiddle.net/mblase75/TJELt/
I prefer this technique, since it works when the list needs to flow around the floating image, while the overflow: hidden technique will not. However, it's also necessary to add padding-right: 1em to the li to keep them from overflowing their container.
This is where the "display" property comes into its own. Set the CSS below to make the list work alongside the floated content.
display: table; works alongside floated content (filling the gap) but without hiding content behind it. Much like a table does :-)
.img {
float: left;
}
.table {
display: table;
}
<img class="img" src="https://via.placeholder.com/350x350" alt="">
<ul>
<li>Test content</li>
<li>Test content</li>
<li>Test content</li>
</ul>
<ul class="table">
<li>Test content</li>
<li>Test content</li>
<li>Test content</li>
</ul>
EDIT: Remember to add a class to isolate which lists you wish to do this for. E.g. "ul.in-content" or more generally ".content ul"
Try list-style-position: inside to change the layout of the bullets.
Why overflow: hidden works
The solution is as easy as:
ul {overflow: hidden;}
A block box with overflow: other than visible establishes a new block formatting context for its contents. W3C recommendation: http://www.w3.org/TR/CSS2/visuren.html#block-formatting
Example
The buttons on my website, which are <li> in disguise, are made like this. Make the viewport (window) of your browser smaller to see the indenting in action.
Related answers
https://stackoverflow.com/a/710264/2192488
https://stackoverflow.com/a/16041390/2192488
Article with examples
Overflow – a secret benefit
At http://archivist.incutio.com/viewlist/css-discuss/106382 I found a suggestion that worked for me: style the 'li' elements with:
position: relative;
left: 1em;
Where you replace "1em" with the width of the left padding/margin that your list items would have if the float weren't present. This works great in my application, even handling the case where the bottom of the float occurs in the middle of the lists--the bullets shift back over to the (local) left margin just right.
By adding overflow: auto; to your ul works for me at least.
Update
I've updated my jsfiddle to visualize what's going on. When having the ul beside the floating img, the content of the ul will be pushed by the float, but not the actual container. By adding overflow: auto the whole ul-box will be pushed by the float instead of only the content.
You could assign position: relative; left: 10px; to the li. (You may additionally want to give it a margin-right: 10px;, otherwise it might become too wide on the right side.)
Or, if you want to use float for the ul -- as suggested by others -- you can probably stop the rest from floating right of the ul by using clear: left on the element that follows the ul.
Disclaimer
Lists next to floated elements cause issues. In my opinion, the best way to prevent these sorts of floating issues is to avoid floating images that intersect with content. It'll also help when you have to support responsive design.
A simple design of having centered images between paragraphs will look very attractive and be much easier to support than trying to get too fancy. It's also one step away from a <figure>.
But I really want floated images!
Ok, so if you're crazy persistent enough to continue down this path, there are a couple techniques that can be used.
The simplest is to make the list use overflow: hidden or overflow: scroll so that the list is essentially shrink wrapped which pulls the padding back to where it's useful:
img {
float: left;
}
.wrapping-list {
overflow: hidden;
padding-left: 40px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
This technique has a few problems though. If the list gets long, it doesn't actually wrap around the image, which pretty much defeats the entire purpose of using float on the image.
img {
float: left;
}
.wrapping-list {
overflow: hidden;
padding-left: 40px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
But I really want wrapping lists!
Ok, so if you're even crazier more persistent and you absolutely must continue down this path, there's another technique that can be used to wrap the list items and maintain bullets.
Instead of padding the <ul> and trying to get it to behave nicely with bullets (which it never seems to want to do), take those bullets away from the <ul> and give them to the <li>s. Bullets are dangerous, and the <ul> just isn't responsible enough to handle them properly.
img {
float: left;
}
.wrapping-list {
padding: 0;
list-style-position: inside;
}
.wrapping-list li {
overflow: hidden;
padding-left: 25px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
This wrapping behavior can do weird things to complex content, so I don't recommend adding it by default. It's much easier to set it up as something that can be opted into rather than something that has to be overridden.
I am using this to solve this problem:
ul {
display: table;
}
Try the following on your UL tag. This should take care of the bullets overlaying your image and you don't have to mess up your left allignment caused by list-position: inside.
overflow: hidden;
padding-left: 2em;
Struggled with this myself. Best I've managed is the following:
ul {
list-style-position: inside;
padding-left: 1em;
text-indent: -1em;
}
The text is not actually indented but the bullet shows.
After fighting with this interesting issue in several projects, and investigating why it happens, I finally believe I found both: a working and 'responsive' solution.
Here is the magic trick, live example: http://jsfiddle.net/superKalo/phabbtnx/
ul {
list-style: none;
position: relative;
padding-left: 0; /* remove any left padding */
margin-left: 0; /* remove any left margin */
left: 35px;
}
li {
padding-left: 0; /* remove any left padding */
margin-left: 0; /* remove any left margin */
text-indent: -19px; /* adjust as much as needed */
}
li:before {
content: '•\00a0\00a0\00a0';
color: #000; /* bonus: you can customize the bullet color */
}
Edited to update based on OP's comment
ok, then just break it up into 2 divs nested together
ul {background: blue; position:static;}
.therest {position:relative; width:100%}
.indent {float:left; }
<div class="therest">
<p>
Est tincidunt doming iis nobis nibh. Ullamcorper eorum elit lius me delenit.
</p>
<hr />
<h3>Lorem</h3>
<div class="indent">
<ul>
<li>list element</li>
<li>list element</li>
<li>list element</li>
</ul>
<div>
the rest now under the UL
</div>
try changing the ul li css to
ul {float:left; background: blue; }
Working inside an LMS without access to head of doc, found it easier to go with margin-right: 20px as an inline style for the image. Which I owe to this site.
try this:
li{
margin-left:5px;
}
If you want them to go left, just put in a -##px value.
or you could do this:
#content ul {
background:none repeat scroll 0 0 #AACCDD;
float:left;
margin-right:10px;
padding:10px;
and then remove all the styling from the li
How about this?
ul{float:left; clear:right}
width: 300px;
height: 30px;
margin-left: auto;
right: 10px;
margin-left: auto will cause the element itself to be right aligned.
Set height and width of the element you want - in my it's a background image in a div inside
You could try also floating the ul to the left, and define an appropriate width for it, so that it floats next to the image.
Something a little like this jsfiddle?
I fixed it with
div.class-name ul {
clear: both;
}
width: auto; overflow: hidden;
Add display:table; to ul:
ul{display:table;}
how do you achieve the effects when you hover the links at top(HOME,ABOUT , JOBS)
which you can see in http://www.webdesignerwall.com/ ,
can someone give me a hint ? or any?
A lot of people here are far too quick to whip out the scripting languages. Tsk, tsk. This is achievable through CSS. I'd even be inclined to say that there is no need for additional mark-up. One could use a background image on the :hover state. Simple.
Each link (#nav li a) contains the nav item text plus an additional span which is set to "display:none" by default. The span also has a set of other styles relating to its position and background-image (which is the text that appears).
On #nav li a:hover the span becomes display:block, which makes it visible at the defined position. No scripting needed.
HTML
<ul id="nav">
<li>Home <span></span></li>
<li>About <span></span></li>
<li>Jobs <span></span></li>
</ul>
CSS:
#nav li a span{display:none}
#nav li a:hover span{display:block}
This is a completely stripped down version of course, you will need to add your own positioning and other styles as appropriate.
There are many, many ways this could be acheived. The simplest would be to have each navigation item change the above image to reflect its corresponding graphic.
<div class="hoverImages">
<img src="blank.jpg" style="display:none;" />
</div>
<ul>
<li class="home">Home</li>
<li class="about">About</li>
<li class="contact">Contact</li>
</ul>
-- jQuery
$("li.home").hover(
function () {
$(".hoverImages img").attr("src", "hoverHome.jpg").show();
},
function () {
$(".hoverImages img").hide();
}
);
The way it's achieved is by using an empty <span>.
It's positioned off screen by default and move into view on hover
Like so:
<ul>
<li>Link<span> </span></li>
<li>Link<span> </span></li>
<li>Link<span> </span></li>
</ul>
And the CSS:
ul li a {
display: relative;
}
ul li a span {
position: absolute;
top: -50px; /* or however much above the a you need it to be */
left: -1000em;
}
ul li a:hover span {
left: 0;
}
It is probably a script on the Home, About and Jobs links that makes a floating div tag visible on mouseover and invisible on mouseout.
Here is a simple code example achieving a similar effect:
<html>
<body>
<a onmouseover="document.getElementById('my-hidden-div').style.display='block'" onmouseout="document.getElementById('my-hidden-div').style.display='none'">Hover Over This</a>
<div style="display:none" id="my-hidden-div">and I appear.</div>
</body>
</html>
Using jQuery you would just do something like
$(#MenuId).hover(function() { // show hidden image},
function() { // hide hidden image});
by the fact that you can rollover the whole area when on rollover i would suggest that it is simply an alternative background that appears on rollover using css. the elements themselves might then be positioned absolutely within the navigation container.
In this particular instance, the developer placed a span tag inside the li elements that make up the menu. That span has (most notably) these properties:
height: 33px;
top: -26px;
left: this varies to position the spans properly
position: absolute;
After that, just some JavaScript to make the span appear/disappear.
A pure CSS solution is explained on Eric Meyer site: Pure CSS Popups 2.