I have this:
http://jsfiddle.net/Lehqyf1t
<ul class="myclass">
<li><span style="background-color:#f608ff"></span>Text 1</li>
<li><span style="background-color:#f608ff"></span>Text 2</li>
</ul>
css:
.myclass li span {
width: 25px;
height: 25px;
display: block;
float: left;
margin-right: 10px;
}
No matter what I try I cannot get both lines to be aligned properly. How could I solve it?
You have to clear the float in <li>.
http://jsfiddle.net/Lehqyf1t/2/
You can swap out the float for display:inline-block and then you don't have to worry about clearing floats at all.
li {
list-style:none;
}
.myclass li span{
width: 25px;
height: 25px;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
background-color:#f608ff;
}
<ul class="myclass">
<li><span></span>Text 1</li>
<li><span></span>Text 2</li>
</ul>
Related
I have a hoverable menu as you can see in the code. However, I got a problem when I hover, which the hover content goes out of the page. When I use "position: relative" for the div(content) it is okay but then the text "Example" goes to the left, wonder how to fix.
When I use position: absolute:
When I use position: relative:
ul {
float: right;
position: relative;
}
div {
display: none;
background-color: red;
position: relative;
width: 200px;
}
ul:hover div {
display: block;
}
<ul>
<li>Example</li>
<div>
<ol>
<li>Link 1</li>
<li>Link 2</li>
</ol>
</div>
</ul>
due to lack of space u'r getting this issue make width:200px; for ul
ul {
float: right;
position: relative;
width: 200px;
}
div {
display: none;
background-color: red;
position: relative;
width: 200px;
}
ul:hover div {
display: block;
}
<ul>
<li>Example</li>
<div>
<ol>
<li>Link 1</li>
<li>Link 2</li>
</ol>
</div>
</ul>
You could use position absolute, and manipulate its positions setting a negative margin...
ul {
float: right;
position: relative;
}
div {
display: none;
background-color: red;
position: absolute;
width: auto;
margin-left: -26px;
}
ul:hover div {
display: block;
}
<ul>
<li>Example</li>
<div>
<ol>
<li>Link 1</li>
<li>Link 2</li>
</ol>
</div>
</ul>
Erase the div, apply the width to the ul and apply the display: none and hovering to the ol.
ul {
float: right;
width: 200px;
}
ol {
display: none;
background-color: red;
}
ul:hover ol {
display: block;
}
<ul>
<li>Example</li>
<ol>
<li>Link 1</li>
<li>Link 2</li>
</ol>
</ul>
Second version: If you want everything to be floated right, apply float: right; to ul and li in the HTML structure as used before:
ul {
float: right;
}
ol {
display: none;
background-color: red;
}
li {
float: right;
clear: right;
}
ul:hover ol {
display: block;
}
<ul>
<li>Example</li>
<ol>
<li>Link 1</li>
<li>Link 2</li>
</ol>
</ul>
It's natural behavior, it will depend on header text lenght, it will set your max lenght for below text, you'll need to define a fixed width for the header element and not on child one as you did.
Example of dynamic width (natural div property as a flex container):
ul {
float: right;
position: relative;
}
div {
display: none;
background-color: red;
position: relative;
}
ul:hover div {
display: block;
}
<ul>
<li>ExampleOfMagicMenu</li>
<div>
<ol>
<li>Link 1</li>
<li>Link 2</li>
</ol>
</div>
</ul>
Second example, setting fixed width to the parent box, letting child/s element/s with auto-width (they will never occupy more width than parent, as they can grow in height, overriding height auto with a fixed one will cause overflow):
ul {
float: right;
position: relative;
width: 100px;
text-align: right;
list-style: none;
}
div {
display: none;
background-color: red;
position: relative;
}
ul:hover div {
display: block;
}
<ul>
<li>Example</li>
<div>
<ol>
<li>Link 1</li>
<li>Link 2</li>
</ol>
</div>
</ul>
You can do it with the Flexbox without unnecessary floats and positioning.
Solution with the container as you wrote in the comment:
.container {
max-width: 960px;
margin: 0 auto;
border: 1px solid;
}
ul {
display: flex; /* displays children inline by default that's why you need to change its direction */
flex-direction: column; /* stacks children vertically */
align-items: flex-end; /* places them far right */
}
ul > div { /* modified for accuracy */
display: none;
background-color: red;
width: 200px;
}
ul li:hover + div { /* modified for accuracy since the inner div is the next element after the li */
display: block;
}
li + div:hover {display:block} /* needs to be in order to be displayed when hovering over */
<div class="container">
<ul>
<li>Example</li>
<div>
<ol>
<li>Link 1</li>
<li>Link 2</li>
</ol>
</div>
</ul>
</div>
If you don't fancy the above solution then you can simply add right: 0 to the absolutely positioned div:
.container {
max-width: 960px;
margin: 0 auto;
border: 1px solid;
}
.container:after {
content: "";
display: block;
clear: both;
}
ul {
float: right;
position: relative;
}
ul > div {
display: none;
background-color: red;
position: absolute;
right: 0; /* added */
width: 200px;
}
ul:hover div {
display: block;
}
<div class="container">
<ul>
<li>Example</li>
<div>
<ol>
<li>Link 1</li>
<li>Link 2</li>
</ol>
</div>
</ul>
</div>
I have menu like this: jsfiddle. If in your browser start zoomin (Firefox ctrl+roller on mouse) elements will be enlarging. But not disproportionately. In some steps of zoom last menu element (my text 3) jumps to another row...
How ensure some scale ratio? (Without javascript)
EDIT:
Now I see in chrome with 100% zoom element (my text 3) is on another row but problem is still the same but reversed - if you will zooming element (my text 3) jumps back to row 1...
HTMl:
<ul>
<li>my text 1</li>
<li>my text 2</li>
<li>my text 3</li>
</ul>
CSS:
ul {
display: inline-block;
background-color: blue;
width: 298px;
padding: 0;
}
ul li {
display: block;
float: left;
margin-right: 20px;
}
ul li a {
display: inline-block;
background-color: red;
padding: 10px;
}
This is not a browser zoom feature issue.
You have limited the space in which your floated <li> can be contained. On my browser the text of each <li> takes up approximately 80px. Each <li> is approximately 100px because you added margin to the right side of each one. So, 100px * 3 = 300px and your container is only 298px.
There are multiple solutions to this problem like flexbox, inline-block, etc. but the easiest for you might be to remove the margin from the last <li>.
ul {
display: inline-block;
background-color: blue;
width: 298px;
padding: 0;
}
ul li {
display: block;
float: left;
margin-right: 20px;
}
ul li:last-child {
margin: 0;
}
ul li a {
display: inline-block;
background-color: red;
padding: 10px;
}
<ul>
<li>my text 1</li>
<li>my text 2</li>
<li>my text 3</li>
</ul>
But then you end up with extra background blue. To fix this don't set a set width on the <ul> and clear the floated elements within the <ul> so you can still see the background blue.
ul {
display: inline-block;
background-color: blue;
padding: 0;
overflow: hidden; /* clearfix: clears floats */
}
ul li {
display: block;
float: left;
margin-right: 20px;
}
ul li:last-child {
margin: 0;
}
ul li a {
display: inline-block;
background-color: red;
padding: 10px;
}
<ul>
<li>my text 1</li>
<li>my text 2</li>
<li>my text 3</li>
</ul>
I building a header and I have HTML code below
#header{
height:50px;
border-bottom: 1px solid #000;
}
.left{
display: inline-block;
float: left;
}
.right{
display: inline-block;
float: right;
}
.logo{
display: inline-block;
font-size: 40px;
}
.slogan{
display: inline-block;
vertical-align: middle;
}
.menu{
margin: 0px;
}
.menu li {
display: inline;
}
<div id="header">
<div class="left">
<div class="logo">LOGO</div>
<div class="slogan">SLOGAN HERE</div>
</div>
<div class="right">
<nav>
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</nav>
</div>
</div>
I want Slogan and Menu is middle of header div so I use CSS vertical-align: middle; but it's not working. It only working with vertical-align: top;
How to fix it ?
Thanks you so much.
Change display: inline-block to display: table on element .left, then on .slogan change display: table-cell;to display: inline-block;.
#header{
height:50px;
border-bottom: 1px solid #000;
}
.left{
/*display: inline-block;*/
display: table;
float: left;
}
.right{
display: inline-block;
float: right;
}
.logo{
display: inline-block;
font-size: 40px;
}
.slogan{
vertical-align: middle;
display: table-cell;
/*display: inline-block;*/
}
.menu{
margin: 0px;
}
.menu li {
display: inline;
}
<div id="header">
<div class="left">
<div class="logo">LOGO</div>
<div class="slogan">SLOGAN HERE</div>
</div>
<div class="right">
<nav>
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</nav>
</div>
</div>
You could use line-height to achieve the effect you want. The headers height is 50px, so you should give the list items a line-height of 50px. I think this will solve your problem in this case but it wouldn't work if your text has multiple lines.
I am trying to create a vertical navigation in my HTML document, but I cannot seem to get the main menu to line up evenly. Here is my HTML for the vertical navigation:
<div id="navbar">
<ul>
<li>Menu 1</li>
<li>Menu 2
<ul>
<li>Drop 1</li>
<li>Drop 2</li>
<li>Drop 3</li>
</ul></li>
<li>Menu 3</li>
<li>Menu 4
<ul>
<li>Drop 1</li>
<li>Drop 2</li>
</ul></li>
<li>Menu 5</li>
</ul>
</div>
And my CSS:
#navbar {
margin-left: -40px;
}
#navbar li{
list-style: none;
position: relative;
width: 209px;
padding: 6px;
line-height: 20pt;
cursor: pointer;
}
#navbar ul ul{
margin-left: 100px;
margin-top: -28px;
visibility:hidden;
height: 100px;
}
#navbar ul li:hover ul{
visibility:visible;
}
This is my first post ever, so I apologize if I didn't post in the correct format. This code is also from a much larger HTML/CSS file, so I just copy/pasted the only part I'm having an issue with. If I need to post a screenshot of what I'm talking about I can do that.
Thank you in advance!!
demo - http://jsfiddle.net/uab2hr50/2/
if you are looking to align the sub menu below the main menu
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#navbar ul {
border: 1px solid red;
display: inline-block;
padding: 6px;
}
#navbar li {
list-style: none;
position: relative;
width: 209px;
line-height: 20pt;
cursor: pointer;
}
#navbar ul ul {
display: none;
padding: 0;
border: 0;
}
#navbar ul li:hover ul {
display: block;
}
<div id="navbar">
<ul>
<li>Menu 1
</li>
<li>Menu 2
<ul>
<li>Drop 1
</li>
<li>Drop 2
</li>
<li>Drop 3
</li>
</ul>
</li>
<li>Menu 3
</li>
<li>Menu 4
<ul>
<li>Drop 1
</li>
<li>Drop 2
</li>
</ul>
</li>
<li>Menu 5
</li>
</ul>
</div>
There are a few problems here preventing the display you expect:
First: the fiddle
CSS CHANGES
#navbar li{
list-style: none;
position: relative;
/*width: 209px;*/
padding: 6px;
line-height: 20pt;
cursor: pointer;
display: block;
}
#navbar li:after {
content: '';
display: table;
clear: both;
}
#navbar ul a {
display: inline-block;
}
#navbar ul ul{
margin-top: 0;
visibility:hidden;
height: 100px;
padding: 0;
display: inline-block;
vertical-align: top;
margin-bottom: -9000px;
}
#navbar ul ul li:first-child {
padding-top: 0;
}
We removed quite a bit of your padding and margin rules here, and stopped setting a width on the li that you went ahead and broke out of anyway in the original code.
Then, we told both the a and ul elements to display as inline-block, told them they were to vertically align at the top and removed the padding-top off the first child of your sub-nav.
Then, we way over-compensate for the height of your lists by setting a margin-bottom of -9000px to pull your subsequent list items up to where they belong.
No absolute positioning needed, which would probably require some JavaScript to position everything reliably for you given different conditions.
Hope that helps.
i know there are serveral ways to justify a horizontal list. but not like in my screendesign:
you see my result on top and below the screendesign. any ideas how to improve the space between the items to have them more evenly? (2nd and 3rd item is to long)
this is my code:
.navi {
text-align: center;
display: table;
width: 100%;
ul {
display:table-row;
}
li {
display:table-cell;
a {
display: block;
border: 1px solid #000;
}
}
}
While this is solved by Flexbox, you can still use CSS Tables - for the sake of browser support - to achieve the desired result:
.navi {
text-align: center;
display: table;
width: 100%;
}
.navi ul { display: table-row; }
.navi li { display: table-cell; width: 20%; }
.navi li a { display: block; border: 1px solid #000; }
<div class="navi">
<ul>
<li>Link No.1</li>
<li>Link No.2 has much text</li>
<li>Link No.3 has much more text</li>
<li>Link No.4</li>
<li>Link No.5</li>
</ul>
</div>
In order to keep text in one line, then you could give white-space: nowrap to the table-cells as follows:
.navi { text-align: center; display: table; width: 100%; }
.navi ul { display: table-row; }
.navi li { display: table-cell; width: 20%; white-space: nowrap; }
.navi li a { display: block; border: 1px solid #000; }
<div class="navi">
<ul>
<li>Link No.1</li>
<li>Link No.2 has much text</li>
<li>Link No.3 has much more text</li>
<li>Link No.4</li>
<li>Link No.5</li>
</ul>
</div>
I like the use of the table, table-row and table-cell method. In my example I have 2 links that need to be horizontally aligned but I wanted some space between them. I added an empty item between the links to create a spacer. Then added css to style only the odd cells.
<div class="aff">
<ul class="buttons">
<li>Link1</li>
<li> </li>
<li>Link 2</li>
</ul>
</div>
.aff {display:table; text-align:center; width:100%; box-sizing:border-box;}
.aff ul.buttons {display:table-row;list-style-type:none; margin:0; padding:0;}
.aff ul.buttons li:nth-child(odd) {display:table-cell; width:47%; background:#acacac; padding:10px; border-radius:.44em}
.aff ul.buttons li a {display:block; line-height:45px; font-size:1.2em; text-decoration:none; font-weight:bold;}
.aff ul.buttons li a:hover {text-decoration:underline;}