I am trying to create a grid-style navigation menu, which I have done. Here is a jsFiddle of what I have so far. If you hover over the links you can see there is a 1 or 2px gap between the left and right hand columns, and I can't seem to get rid of it.
At the moment I have:
#nav {
float:left;
width:230px;
display:inline;
text-align:right;
}
#footer li {
display:inline-block;
text-align:left;
line-height:32px;
text-indent:10px;
width:49%;
}
If I set the li {width:50%} the list doesn't fit into 2 columns, but when it is set to 49% I get the gap between list elements. There must be some padding or margin coming in somewhere but I can't see it. Any help would be great.
My favorite method of fixing this is to use a font-size: 0 in the parent and then restore the font size in the child. What happens is that a physical space in your html code (for example, pressing enter after an element) renders a physical space in the code, aka a space in between lis. The font-size: 0 renders that space as no physical width, thus allowing for two 50% lis.
#nav {
font-size: 0;
}
#nav ul li {
font-size: 15px;
}
Check it out: http://jsfiddle.net/3XqZ3/9/
Another option would be to use floats to get the elements right up next to each other. This also gets rid of the space in between.
#nav ul li {
float: left;
}
A third option would be to make sure that there are no breaks in between elements in the html. Like:
<li>This is an li</li><li>This is another li</li>
Or:
<li>This is an li</li><!--
--><li>This is another li</li>
That is white space caused by your inline-blocks. Because they are 'inline', your white space is taken into account.
There are a number of ways to overcome this. One is commenting out the whitespace:
<li class="green">Home</li><!--
--><li class="green">FAQs</li>
JSFiddle
Or you could use floating:
#footer li {
float:left;
}
JSFiddle
You should use float instead of display, like this:
#footer li {
text-align:left;
line-height:32px;
text-indent:10px;
width:49%;
float: left;
}
Demo: http://jsfiddle.net/3XqZ3/11/
Related
I'm trying to make a simple menu bar using the ul tag,which has 4 links.
The ul width is 100% of the screen width,so according to this every li should be 25%.
i've tried doing this,but the last list item just falls down to the next line..
However if i will use width:23% for each li,it would look good.
But im very curious why this is happening,why 25% is not good enough?
This is my pen:
http://codepen.io/anon/pen/XKryKW
I would appreciate any help!
Thanks.
Simple. You have spaces in your html. This is always a problem with inline block elements. Remove them and the spaces in your result go away. See this explanation: https://css-tricks.com/fighting-the-space-between-inline-block-elements/
http://codepen.io/ruchiccio/pen/YWKRVQ
<ul>
<li><a> first</a></li><li><a> second</a></li><li><a> third</a></li><li><a> fourth</a></li>
</ul>
First of: display: inline-block will alway leave a few pixels between the block, so it would alway be more than 100%. You're also adding 22px padding, making the width: 25% + 22px +22px (left and right) to avoid this use box-sizing: border-box;
li {
font-size:25px;
padding: 22px;
width:25%;
text-align:center;
float: left;
display: block;
box-sizing: border-box;
}`
https://jsfiddle.net/wietsedevries/kmzym3xL/
First thing you need to remove padding right and left from lis , then you need also to add font-size:0 to ul to make it ignore spacing between lis
*{
margin:0;
padding:0;
}
ul
{
height:70px;
background-color:#e1973d;
list-style-type:none;
width:100%;
font-size:0;
}
li
{
font-size:25px;
padding: 22px 0;
width:25%;
text-align:center;
display:inline-block
}
<ul>
<li><a> first</a> </li>
<li><a> second</a> </li>
<li><a> third</a> </li>
<li><a> fourth</a> </li>
</ul>
I have a wordpress theme whose list is in the following format,
<ul class="ozy-custom-list wpb_content_element ">
<li>
<span class="oic oic-dot" style="color:#2f75aa"></span>
<span>Personalised Services</span>
</li>
<li>
<span class="oic oic-dot" style="color:#2f75aa">
</span><span>Complete support – from Port to Destination</span>
</li>
</ul>
The first span is for the bullet and the second contains the text that goes after the bullet.
Now in the case of the second li element the text goes to the next line and below the bullet. I would like to add some padding to the second line so it doesn't do below the bullet.
Here's a picture to show whats happening,
How can I target the second line (i.e "destination") ?
You can fix that by displaying the dot-span as an inline-block. Then you can give it a fix width and move it with a negative margin:
.oic-dot {
display: inline-block;
width: 15px;
margin-left: -20px;
}
I made you this lookalike demo.
You will probably need to play a bit with the width and margin to adjust it to your website.
You want the "text-indent" css property:
li span {
padding-left: 1.5em;
text-indent:-1.5em;
}
Text-indent indents the first line, so we push it backwards, but only after we pushed the ENTIRE text to the right.
If you want to select 2nd line you can use following:
li+li span+span:first-line{
color: black;
}
li+li span+span{ /*second line*/
display: block;
float: left;
color: red;
}
JSFiddle: https://jsfiddle.net/ws5rk0sx/
If you only need to align all lines equally use just:
li+li span+span{
display: block;
float: left;
}
Yes, you can use the following:
li:last-child > span:last-child {
...
}
It would probably help however to give your ul an id, so that you could use:
#ulid > li:last-child > span:last-child {
...
}
Without messing up any other UL's on the page. If it wasn't the last li in the ul you can use nth type instead of last-child for the li tag ^^
I've created a JsFiddle here
I've applied the below css to the span:
.text-span{
display:block;
margin-left:5px;
}
If you prefer not to set a class on the element you could also use:
ul > li span:nth-of-type(2){
display:block;
margin-left:5px;
}
you could simply use a table without border ;)
first colm would contain the bullet and the second colm the info...
Good afternoon,
I am trying to create a menu bar with a sub-nav under some parents, however the childs are not aligning.
I have change the child bicolour to red to highlight the concern.
There is a chance that by entering the sub-nav text may cure the concern.
I have listed below the CSS and HTML.
Kind regards
Gary.
Danceblast
Your problem is this:
#dropnav ul li {
margin-left: 20px;
}
It's being applied to the subnav's child li's aswell, you can target the subnav directly and set the margin to 0
#subnav li {
margin-left:0px !important;
}
OR
#dropnav #subnav li {
margin-left:0px;
}
if you dont want to use !important.
#dropnav ul li {
margin-left: 20px;
}
You want to remove the margin as well as you want to check for your text-alignment.
At the moment your elements use
text-align: center;
on all its parents and childs. You probably want that to be:
text-align: left;
Hope that helps.
I would like to know how to make an element with a hanging indent, along with a hidden overflow that does not hide said indent.
This demonstrates my problem:
http://jsfiddle.net/Skofo/qgd2p/
Thank you!
Based on your fiddle, swap the margin-left: 15px; for padding-left: 15px; on your li elements.
I've only checked this in chrome, mind. You might have to set box-sizing to something consistent to make it work cross-browser, like box-sizing: border-box;
Please see this fiddle: http://jsfiddle.net/saSna/
Is this the result you want to achieve?
I've added 15px padding to li, and removed :first-child so both ul's have the same styles:
ul li {
width:120px;
text-indent:-15px;
margin-left:15px;
margin-bottom:10px;
padding-left:15px;
}
ul li {
overflow:hidden;
text-overflow:ellipsis;
}
I have a horizontal <ul> menu. How can I fix the width of the <li> elements at, say, 250px each?
Styling the A tag can help maintain consistency and give you a little more flexibility than styling the LI tag, espeically if you end up making multi-line menu items.
ul li {
float:left;
}
ul li a {
display:block;
width:250px;
}
You should also use a CSS reset to maintain consistency between browsers.
You can do this via CSS:
ul > li { width: 250px; }
Depending on your you're doing the horizontal menu, you may need a display:block; style as well.
What Nick and Diodeus both say is right, but unless you want all of your list items to have that width, you better throw an id on that ul and then target it in your CSS.