I dont get why there is a big space in the <li>s, why the border is not warping the text.
fiddle
i want the widht of every <li> to be like the biggest <li>
Thanks for the help :D
Removing width 100% from #settingNev a will reduce the size to the length of string in span element. Or you could set a specific width if you need them to all be the same.
http://jsfiddle.net/rtT8L/
#settingNev a {
float: left;
margin: 0 3px 0 3px;
text-decoration: none;
border-radius: 6px 6px 0px 0px;
/*width: 200px;*/
}
---------------UPDATE-----------------------------
http://jsfiddle.net/NZc6K/
These above fiddle should do the trick. Basically this was because of how 100% width works with padding so I moved the large padding you had on the ul to the div it is wrapped in.
To read more about the box model see http://www.addedbytes.com/articles/for-beginners/the-box-model-for-beginners/
Use css tables, see fiddle here http://jsfiddle.net/UWLzL/22/.
Css source:
#settingNev ul {
display:table;
}
#settingNev ul li {
display:table-row;
}
#settingNev ul li a {
display: table-cell;
border-radius: 6px 6px 0px 0px;
color: #666;
padding: 5px 3px;
border: 1px solid transparent;
}
#settingNev ul li a:hover {
border: 1px solid black;
border-bottom: 1px solid transparent;
}
Related
I am trying to implement LI items horizontally as seen in the screenshot however I am not able to increase the height of the li item. I tried creating a class and assigning it to the li item and that still doesnt seem to work. Tried applying the height to the UL item and still doesnt seem to work. Could somebody tell me what the problem is ?
html
<div id="navcontainer">
<ul class="liheight">
<li class="liheight">Team Management</li>
<li class="liheight">User Management</li>
</ul>
</div>
CSS
#navcontainer ul {
display: block;
list-style-type: disc;
padding-top:40px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
#navcontainer ul li {
display: inline;
border:5px solid #009ddc;
border-left: 5px solid #009ddc;
border-right: 5px solid #009ddc;
border-bottom:5px solid #009ddc;
border-top:5px solid #009ddc;
z-index: 0 !important;
padding: 0;
}
#navcontainer ul li a {
text-decoration: none;
padding: .1em 1em;
background: #fff;
color: #24387f !important;
}
#navcontainer ul li a:hover
{
color: #fff !important;
background-color: #009ddc;
}
.liheight {
min-height: 50px;
}
Desired height
Current implementation
Applying the solution
First answer explains it, but if you really want to keep 'inline' on li element, then just add line-height: 25px, or anything like that. It will increase line height and thus increase height of li element.
I am trying to implement LI items horizontally as seen in the
screenshot however I am not able to increase the height of the li item
This is accomplished using, display: inline-block. The reason is that when you try to increase the heigh of inline elements it has no effect, with inline-block it does.
Another way to make the li elements is to use floats: float: left
But it seems that what you are trying to accomplish is increase the height and width of the anchor tags, <a>, within the li elements and when the user hovers the pointer over it you get the blue color. This is done by making that inline element, the anchor tag, a block element and applying padding to make it grow.
Here are two possible solutions to your problem, you can choose the best one that fits your needs.
Solution one:
#navcontainer ul {
list-style-type: disc;
padding-top:40px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
#navcontainer ul li {
display: inline-block;
border:5px solid #009ddc;
border-left: 5px solid #009ddc;
border-right: 5px solid #009ddc;
border-bottom:5px solid #009ddc;
border-top:5px solid #009ddc;
z-index: 0 !important;
}
#navcontainer ul li a {
display: block;
text-decoration: none;
padding: 0.5em 4em;
background: #fff;
color: #24387f !important;
}
#navcontainer ul li a:hover
{
color: #fff !important;
background-color: #009ddc;
}
<div id="navcontainer">
<ul>
<li>Team Management</li>
<li>User Management</li>
</ul>
</div>
Solution two (using floats):
#navcontainer ul {
list-style-type: none;
padding-top:40px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
#navcontainer ul li {
float: left;
border:5px solid #009ddc;
border-left: 5px solid #009ddc;
border-right: 5px solid #009ddc;
border-bottom:5px solid #009ddc;
border-top:5px solid #009ddc;
z-index: 0 !important;
}
#navcontainer ul li a {
display: block;
text-decoration: none;
padding: 0.5em 4em;
background: #fff;
color: #24387f !important;
}
#navcontainer ul li a:hover
{
color: #fff !important;
background-color: #009ddc;
}
<div id="navcontainer">
<ul>
<li>Team Management</li>
<li>User Management</li>
</ul>
</div>
For further reading check out these articles:
CSS display: inline vs inline-block
https://developer.mozilla.org/en-US/docs/Web/CSS/display
https://alistapart.com/article/css-floats-101
https://developer.mozilla.org/en-US/docs/Web/CSS/float
Change #navcontainer ul li to use display: inline-block, as the use of inline is restricting its height.
Additionally:
I'd recommend you use classes rather than your very specific and non-reusable structure you're current implementing.
Do not use min-height, as this just prevents an element from going below this height, usually used when it's scalable.
Here's a js-fiddle, I've just changed the display property and added a height value. https://jsfiddle.net/g9aspo90/
EDIT:
To fix the background colour not filling out, you should set the background-color on the li tag, rather than the a tag. When you set the background-color on just the a tag, then it will only cover the a tag's area, which in our case was smaller than its parent (once we increased its size). And since in actuality all we want to do is give the li tag a white background, it makes much more sense to set it there.
Here's the fiddle: https://jsfiddle.net/g9aspo90/1/.
And these are the changes I made:
#navcontainer ul li a {
text-decoration: none;
padding: .1em 1em;
background: #fff;
color: #24387f !important;
}
#navcontainer ul li a:hover {
color: #fff !important;
background-color: #009ddc;
}
Becomes
#navcontainer ul li {
background: #fff;
color: #24387f !important;
}
#navcontainer ul li a {
text-decoration: none;
padding: .1em 1em;
color: #24387f !important;
}
#navcontainer ul li:hover {
color: #fff !important;
background-color: #009ddc;
}
Further comments:
I'd recommend you wrap the li tag in the a tag, rather than the other way around. This way the entire block will be a link, which I think is much nicer. So this:
<li class="liheight">
User Management
</li>
Would become this:
<a href="#">
<li class="liheight">
User Management
</li>
</a>
This messes up your styles a bit, but it should only take a few minutes to resolve. Good luck!
EDIT2: Here's how to resolve the styling issue, just changes the css selector #navcontainer ul li a to #navcontainer ul a li. https://jsfiddle.net/g9aspo90/3/
You can increase size of borders, your height and width will change according to that. Like this:
#navcontainer ul li {
display: inline;
border: 5px solid #009ddc;
border-left: 50px solid #009ddc;
border-right: 50px solid #009ddc;
border-bottom: 50px solid #009ddc;
border-top: 50px solid #009ddc;
z-index: 0 !important;
padding: 0;
}
My suggestion would be to use bootstrap, it has navigation class so you can group all things together and control all on same time.
There is this rule "when you do a line-height equal to your parent element's height - you center the text." Right ? And it works for letters LT and EN in my code. I set the height of ul 40px and line-height of li to 40px. And everything is beautiful.
But it doesnt work with border right. I need it to be as a 17px seperator between languages buttons in the center, but currently it is on top like so : http://jsfiddle.net/TomasRR/nxf5ey2a/
<ul class="lang">
<li class="lt">
LT
</li>
<li class="en">
EN
</li>
</ul>
CSS:
ul.lang {
float: left;
height: 40px;
list-style:none;
}
ul.lang li {
float: left;
line-height: 40px;
}
ul.lang li:first-child {
height: 17px;
line-height: 40px;
padding-right: 6px;
border-right: 1px solid black;
}
ul.lang li:last-child {
padding-left: 6px;
}
ul.lang li a{
text-decoration: none;
font-size: 12px;
color: black;
}
line-height should be set to ul and reset to normal to li.
For li to follow line-height, they must: not float and be formatted as an inline boxe (either inline-block or inline-table) wich triggers a proper layout.
DEMO
ul.lang {
float: left;
height: 40px;
list-style:none;
background:orange;
line-height: 40px;
padding:0 5px
}
ul.lang li {
display:inline-block;/*no float*/
vertical-align:middle;/* align from baseline/line-height of parent or highest box aside */
line-height:1.2em;/* reset line-height to regular value */
}
ul.lang li:first-child {
padding-right: 6px;
border-right: 1px solid black;
}
ul.lang li:last-child {
padding-left: 6px;
}
ul.lang li a {
text-decoration: none;
font-size: 12px;
color: black;
}
The vertical-alignment only works on inline elements.
Therefor, don't float the list-items, instead display them inline:
ul.lang li {
display: inline;
line-height: 40px;
}
Updated Fiddle
Add the padding and the border to the <a>, it should work:
ul.lang li:first-child a {
padding-right: 6px;
border-right: 1px solid black;
}
ul.lang li:first-child {
height: 17px;
}
How about you change that to the correct 40px if you want it to exactly fit inside its 40px high parent?
That fixes it.
Use
display:inline
property in place of
float:left
See this demo - http://jsfiddle.net/unicode/g846u1nv/
I'm creating header of one aplication nad I found strange problem, which never happentd to me before. The problem is, that i have two list inside header, one floated to left, one to right and between all li elements there are two types of border. That's ok, but there's creating space between them out of nowhere? Or at least, I can't find what is creating the space
Can someone tell me where's space created?
Here is jsFiddle: jsFiddle link
Or direct-input:
HTML:
<header id="header">
<ul class="left">
<li class="title">jedna</li>
<li class="new-task">dva</li>
<li class="new-comment">NC</li>
</ul>
<ul class="right">
<li class="logged">jedna </li>
<li class="logout">dva</li>
</ul>
CSS:
header
{
position: relative;
top: 0px;
min-height: 35px;
padding: 0px;
margin: 0px;
background-color: #efefef;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#efefef));
background: -webkit-linear-gradient(top, #efefef, #bbbbbb);
background: -moz-linear-gradient(top, #efefef, #bbbbbb);
background: -ms-linear-gradient(top, #efefef, #bbbbbb);
background: -o-linear-gradient(top, #efefef, #bbbbbb);
}
header ul
{
margin: 0px;
padding: 0px;
line-height: 35px;
list-style-type: none;
}
header ul li
{
margin: 0px;
display: inline;
padding: 5px 10px;
border-left: 1px solid #efefef;
border-right: 1px solid #bbbbbb;
}
header ul li:first-of-type
{
border-left: none;
padding-left: 20px;
}
header ul li:last-of-type
{
border-right: none;
padding-right: 20px;
}
header ul.left
{
float: left;
}
header ul.right
{
float:right;
}
EDIT:
This space:
Your li's are set to display: inline, so your browser is putting a space between each li just like it would between words. You can counter this default behavior in a few ways. You can float instead of using display: inline, you can put all your li's on one line without spaces, or you can add a negative margin to pull the li's together. This article explains your options better than I could:
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Set ul li to float:left; and set the line-height to 25 instead of 35 in header ul
Adding the following CSS code fixed it for me:
header ul.left li {
display:block;
margin: 0;
float: left;
line-height: 25px;
}
This is being caused by the display: inline;.
What is happening is the white space between the lis is being considered as a character.
To prevent this add font-size: 0; to the parent ul and then add the font-size: 16px; to the lis.
header ul {
margin: 0px;
padding: 0px;
line-height: 35px;
list-style-type: none;
font-size: 0;
}
header ul li {
margin: 0px;
display: inline;
padding: 5px 10px;
border-left: 1px solid #efefef;
border-right: 1px solid #bbbbbb;
font-size: 16px;
}
JSFIDDLE
Here is a good article on what options you can use.
Just add float: left; and reduce padding, here's a FIDDLE
header ul li {
display: inline;
float: left;
padding: 0 10px;
border-left: 1px solid #efefef;
border-right: 1px solid #bbbbbb;
}
*Note: Horizontal space with width of about 4px is always added on inline & inline-block elements and to fix that you must float them or write HTML code in line for that elements.
I really hope someone could help me. I want to justify my categories menu in a Wordpress website.
You can see it here, the colourful menu on the top: http://www.postscriptum.hostingas.in/
The menu in the HTML is called "section-bar".
Here is the CSS code:
.section-bar {
box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.65);
margin-bottom: 1px;
padding: 5px 0 5px 0;
background: #252525;
}
.section-bar ul li {
padding: 1px 1px 1px 0;
}
.section-bar ul li a {
display: block;
color: #fff;
padding: 3px 5px;
font-weight: bold;
}
I tried to put this but nothing changed:
.section-bar ul {
text-align:justify;
}
How can I make it fit nicely into the screen.
You have 5 elements in one row, split your wrapper size to 5 elements (for example 1000/5=200px) and set width li to 200px (in this example).
Looking at your site the first thing that comes to mind is to change the css of the li item so that every item is the same width and that it is big enough to put the biggest title on one line. So to do that I would change the width to be 356px.
.section-bar ul li {
padding: 1px 1px 1px 0;
width: 356px;
}
Here's my situation:
I want to make a CSS dropdown. Normally I can do this no problem with embedded ULs. However, I want to make a multi-column dropdown. I need the dropdowns to be of dynamic width though.
I have accomplished this with tables, but Id like to see if I could do it with DIVs.
My CSS for the drop down UL/LI is:
#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav ul li {
position: relative;
float:left;
margin-left:16px;
}
#nav li ul {
position: absolute;
display: none;
z-index:10;
}
#nav li:hover ul {
display:block;
}
#nav ul li a.main {
display: block;
height:47px;
text-decoration: none;
color: #fff;
padding: 0 16px 0 16px;
line-height: 48px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
border-left: 1px solid transparent;
font-weight:bold;
}
#nav ul li a.main:hover {
background:#FFF;
color:#222222;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
}
That creates the horizontal navigation with drop downs with this HTML:
<ul>
<li><a class="main">HO Scale</a>
<ul>
</ul>
</li>
</ul>
Using a table, I can put it inside the inner UL and use this CSS
.inner{
float:left;
background:#FFF;
border:1px solid #000;
border-top:0;
padding:12px 0 12px 12px;
}
By putting a Table with class of inner in those inner ULs it will work perfectly, space them out, 3 columns, all dynamic width.
I'd like to accomplish that with DIVs, but the problem is when I float (or don't float) the "inner" DIV it puts all of the links on the inside one to a line, I can't seem to make them go side by side. If I put the DIV OUTSIDE thee dropdown, it works just fine.
Any suggestions?
EDIT:
This is how it should look (and does with tables):
This is how it looks with DIVs (wrong)