Got a problem, where if an "a" inside of "li" has 2 lines of text, that "li" sits higher than "li" with one line.
html is a standard div>ul>li
here is the css
ul#menu-main-menu {
/*this is to make li's go beyond the container width*/
position:absolute;
left:16%;
right:-100%;
}
ul#menu-main-menu li {
display: inline-block;
width: 148px;
}
ul#menu-main-menu li a {
position: relative;
height: 70px;
margin: 0 5px;
display: block;
padding: 0 10px;
}
jsfiddle added
https://jsfiddle.net/dLmwp5kp/
when the property is set to display:inline-block the element which has biggest height is aligned to the middle of other element
more detailed explanation can be found here
http://www.w3.org/TR/CSS2/visuren.html#inline-formatting
add vertical-align: middle; for ul#menu-main-menu li it will align them vertically
demo - https://jsfiddle.net/dLmwp5kp/2/
Try to use like this: Demo
CSS:
ul#menu-main-menu li {
display: block;
width: 60px;
float:left;
}
ul#menu-main-menu li a {
height: 35px;
line-height:16px;
margin: 0 5px;
display: block;
padding: 0 2px;
background-color:red;
color:#fff;
}
.container {
position:relative;
width:400px;
margin:0 auto;
}
ul#menu-main-menu {
/*this is to make li's go beyond the container width*/
position:absolute;
left:16%;
right:-100%;
list-style:none;
}
ul#menu-main-menu li {
float: left;
width: 60px;
}
ul#menu-main-menu li a {
position: relative;
height: 35px;
margin: 0 5px;
display: block;
padding: 0 2px;
background-color:red;
color:#fff;
}
<div class="container">
<ul id="menu-main-menu">
<li><a>Test 1</a></li>
<li><a>Test 1</a></li>
<li><a>Test 2lines</a></li>
<li><a>Test 2lines</a></li>
<li><a>Test 1</a></li>
</ul>
</div>
Please check snippet for your answer.
Just put up display:inline-block and vertical-align:top; in both "li" and "a".
ul#menu-main-menu li {
display: inline-block;
width: 60px;
}
ul#menu-main-menu li a {
display: inline-block;
vertical-align:top;
position: relative;
height: 35px;
margin: 0 5px;
padding: 0 2px;
background-color:red;
color:#fff;
}
Related
I am practicing in making a css dropdown. However, in the following code, on hovering the "Hello" li , I want the dropdown li "Hello1" to drop just below it. It's happening. However unfortunately the other li's "Cool" and "World" also comes down. I wanna know both the reason and the solution. However I don't want to add float to any of the elements as it has created some issues previously.
html body {
height: 100%;
width: 100%;
}
.roundborder {
border-radius:5px
}
.container {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 75%;
/* [disabled]background-color: rgba(153,153,153,1); */
height: auto;
}
ul {
text-align: center;
border: thin solid rgba(0,0,0,1);
width: auto;
margin-top: 0;
margin-right: 10%;
margin-bottom: 0;
margin-left: 10%;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
background-color: rgba(255,0,0,1);
height: 30px;
}
li {
display: inline-block;
border: 1px solid black;
/* [disabled]padding: 5px; */
height: 30px;
width: auto;
margin-top: 0;
margin-right: 15px;
margin-bottom: 0;
margin-left: 15px;
}
ul > li > ul {
width: 100px;
display: none;
padding-left: 0px;
margin-top: 10px;
margin-left: 0px;
}
ul > li > ul > li {
display:block;
list-style-type:none;
}
ul li:hover > ul {
display: block;
}
<div class="container">
<ul class="roundborder">
<li>Hello
<ul>
<li> Hello1 </li>
</ul>
</li>
<li>Cool</li>
<li>World</li>
</ul>
</div>
Because your not specifically setting the 'position' attribute for your dropdown it will use the default positioning(position:relative) which will affect the positioning of the elements around it try position:absolute
i.e
ul > li{
position:relative;
...
}
ul > li > ul{
position:absolute;
left:0;
top: 30px;/*or height of header*/
...
}
This article explains the positioning attribute in depth https://developer.mozilla.org/en/docs/Web/CSS/position
I want to my nav-bar width fit automatically.
Here is part of my CSS
#nav-bar {
width: 960px;
margin: 0 auto;
}
Here is my whole working code
http://codepen.io/anon/pen/ogBxxN
Here is my result
When I adjust the width to 900, this is what I see
When I adjust the width to 1000, this is what I see
As you can see, none of them give me the best result.
I was wondering maybe some CSS expert can help me fixing this issue.
This should do it for you using flexbox
#nav-bar ul {
width: 100%;
margin: 0;
padding: 0;
border: 1px solid #c2c2c2;
float: left;
display:flex;
flex-direction:row;
}
#nav-bar li {
text-align: center;
float: left;
order:1;
flex-grow:1;
}
by the way you are styling the list items twice, with .inline li and #nav-bar li
Demo
Trying adding white-space: nowrap; to your ul element and only use display: inline-block; on your li elements as opposed to the float: left; that is there.
Example:
http://codepen.io/jessikwa/pen/YPNqpw
Using table layout:
*{margin:0;padding:0;}
#nav-bar ul {
width: 100%;
border: 1px solid #c2c2c2;
display:table;
white-space:nowrap;
text-align:center;
}
#nav-bar li { display:table-cell; }
#nav-bar li a{
position:relative;
display:block;
background:#eee; /*put back your gradients here */
line-height: 40px;
height: 41px;
font-size: 20px;
color:#000;
padding: 0 10px;
}
<div id="nav-bar">
<ul class="inline">
<li>Europe</li>
<li>Asia</li>
<li>North America</li>
<li>Oceania</li>
<li>South America</li>
<li>South America</li>
</ul>
</div>
That's it.
Using your current code, in your CSS:
.inline li {
width: 16.666%;} // 100 divided by number of items
#nav-bar li a {
padding: 0;} // remove the padding
JSFiddle: http://jsfiddle.net/BL5vd/
I'm trying to create a responsive menu with 4 links. The links should be VERTICALLY centered and the a should be larger as the li.
line-height: 100% on the ul li a doesn't work, unfortunately. Ideas?
here is a FIDDLE
html:
<ul>
<li><span>Link</span>
</li>
<li><span>Link</span>
</li>
<li><span>Link</span>
</li>
<li><span>Link</span>
</li>
</ul>
css (changed part):
ul li a {
display: block;
text-align: center;
background: orange;
overflow: hidden;
height: 100%;
}
ul li a span {
display: block;
position: relative;
top: 50%;
}
Try this using table-cell. Fiddle
CSS
ul {
height: 100%;
list-style: none;
display:table;
width:100%;
}
ul li {
height: 25%;
display:table-row;
}
ul li a {
display: table-cell;
text-align: center;
background: orange;
vertical-align:middle;
border-bottom:1px solid white;
}
Hi I am struggling to align my numbers under my images they don't want to be aligned. this is a list and in the each line there an image and a number.
.category_icon { height:100px; width:300px; position:absolute; left:350px; top:150px;
ul { list-style:none; height:70px; width:220px;
li { display: inline; margin-right: 4px; width:65px; height:90px;
img { width:65px; height:64px;}
span { font-family:Tahoma; font-weight:bold; font-size:12px; position:absolute; bottom:7px; width:64px; }
}
}
}
<div class="category_icon">
<ul>
<li><img src="<%=atm.buttonPath%>/family_category_btn.png" alt="" /><span>346</span></li>
<li><img src="<%=atm.buttonPath%>/camping_category_btn.png" alt="" /><span>12</span></li>
<li><img src="<%=atm.buttonPath%>/cooking_category_btn.png" alt="" /><span>546</span></li>
</ul>
Thanks you if someone can help me thanks.
solution with text below
solution with centralised text below
for images, you always have to change their diplay properties before you start playing around with them....add the same here and li to display: inline-block; that would help
To do :
li {
display: inline-block; /*changed */
margin-right: 4px;
width:65px;
height:90px;
text-align:center;
}
img {
display:block; /*added */
width:65px;
height:64px;
}
PS : I am not aware of LESS...so gave you a generalized solution
http://jsfiddle.net/Qm6Bm/
.category_icon {
height: 100px;
width: 300px;
position: absolute;
left: 350px;
top: 150px;
ul {
list-style: none;
height: 70px;
width: 220px;
li {
display: inline-block; /* CHANGED */
margin-right: 4px;
width: 65px;
height: 90px;
text-align: center; /* ADDED */
img {
display: block; /* ADDED */
width: 65px;
height: 64px;
margin-bottom: 8px; /* ADDED */
}
span {
font-family: Tahoma;
font-weight: bold;
font-size: 12px;
/* Removed positioning and width */
}
}
}
}
I made the li an inline-block and the img a block. This means the image will push the text (from the span) under it. Then, by putting text-align: center in the li, that text (from the span) is centred nicely.
I put margin-bottom: 8px on your img just like how you had the span's bottom: 8px :P
OK so here is my code, I don't understand why the first blank space is appearing to the left hand side of the page.
CSS
.header-left ol{
width: auto;
float: left;
display: block;
background-color: #6899D3;
}
.header-left li{
list-style:none;
float:left;
}
.header-left a {
color:#000;
display:block;
height: 50px;
text-align:center;
vertical-align:middle;
text-decoration:none;
min-width: 100px;
overflow: auto;
border-radius: 20px;
}
.header-left a:hover {
color:#000000;
text-decoration:none;
}
#nav1 a:hover { background-color: #FF5B0D; }
#nav2 a:hover { background-color:#00FF40;}
#nav3 a:hover { background-color:#FF0080;}
#nav4 a:hover { background-color:#00CCFF;}
#nav5 a:hover { background-color: #FFFF00; }
HTML
<div class="header-left">
<ol>
<li id="nav1">a</li>
<li id="nav2">b</li>
<li id="nav3">c</li>
<li id="nav4">d</li>
<li id="nav5">e</li>
</ol>
</div>
You need to reset the natural padding and margin of the body and ol. Set:
body{
margin: 0;
padding: 0;
}
.header-left ol{
width: auto;
float: left;
display: block;
background-color: #6899D3;
margin: 0; //RESET DEFAULT
padding: 0; // RESET DEFAULT
}
Add padding-left:0; to your .header-left ol rules.
.header-left ol {
width: auto;
float: left;
display: block;
background-color: #6899D3;
padding-left:0;
}
jsFiddle example
The reason to that is because u are using <ol><li></li></ol> which by default has a left padding. Even if you set list-type:none, you are not getting rid of the left padding. Instead, in the ol code block set padding:0; or padding-left:0 like this:
.header-left ol{
width: auto;
float: left;
display: block;
background-color: #6899D3;
padding-left:0;
}
This should solve your problem.
In your margin try putting in something like this as this will drag it up and pull the bottom up
This is to be put in your styles CSS sheet
margin: -30px 0px -30px 0px;