I want to add a bottom border to every list item with css. Here is my CSS code:
ul,ol{
li{
list-style-type: none;
margin: 0;
padding: 0;
padding-top: 3px;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #eeeeee;
ul,ol{
margin-left: 2em;
li{
border-bottom: 1px solid #eeeeee;
}
}
}
}
It gives an output like this:
Screenshot url: http://oi34.tinypic.com/ih1eea.jpg
The css code is working fine on top level item. But not on the sublists. Please see the screenshot and help me, Thanks in advance.
Demo
Give a class to your ul say demo
.demo li {
border-bottom: 1px solid #000;
}
If you want each and every li in your website should get border-bottom which won't be a great idea than use
ul li {
border-bottom: 1px solid #000;
}
If you want to indent your nested li you can use text
The syntax you have posted in the question is wrong. (you cannot do nesting in CSS rules)
The equivalent correct syntax is
li{
list-style-type: none;
margin: 0;
padding: 0;
padding-top: 3px;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #eeeeee;
}
li ul,
li ol{
margin-left: 2em;
}
i'm not sure i understund you very well, but there is simple code for You:
HTML
<div>
<ul class="list-1">
<li class="item-1">Item 1
<ul class="list-1-1">
<li>Item 1-1</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
CSS
ul.list-1 li.item-1, ol.list-1 li.item-1 {
list-style-type: none;
margin: 0;
padding: 0;
padding-top: 3px;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #eeeeee;
}
ul.list-1 li.item-1 ul.list-1-1 , ol.list-1 li.item-1 ul.list-1-1 {
margin-left: 2em;
}
ul.list-1-1 li {
border-bottom: 1px solid #eeeeee;
}
DEMO
http://jsfiddle.net/jVcFb/1/
Related
I want to have the entire tab menu to be clickable. In order to do that, I need the "a href" to fill the entire tab but doing so I lose the exact size and shape I want. I'm trying to accomplish by adding the :not(#sub_menu ul il) to the main ul, il{} css styles but it throws the portions out of whack.
So how can I accomplish this in HTML & CSS? Also, the bottom border is still viewable, so how can I fix this as well? Thank you
Adding :not(#sub_menu ul li) to the main p, il settings.
Then increasing the padding by 5px to "10px 20px" in #sub_nav ul li #selected.
Home Page
<body>
<main>
<h3>Home</h3>
<nav id="sub_nav">
<ul>
<li id="selected">Home</li>
<li>Away</li>
</ul>
</nav>
</body>
Away Page
<body>
<main>
<h3>Away</h3>
<nav id="sub_nav">
<ul>
<li>Home</li>
<li id="selected">Away</li>
</ul>
</nav>
</body>
CSS
#sub_nav {
float: left;
width: 100%;
font-weight: bold;
padding-bottom: 5px;
border-bottom: 1px solid;
}
#sub_nav ul {
list-style: none;
padding: 0;
margin: 0;
}
#sub_nav ul li {
display: inline;
border: 1px solid black;
}
#sub_nav ul li a {
padding: 5px 15px;
color: inherit;
text-decoration: none;
border-width: 1px 1px 0px 1px;
}
#sub_nav ul li#selected {
border-bottom: 1px solid white;
}
main {
margin-bottom: 1px;
padding: 1px;
height: 4000px;
width: 80%;
border: 1px solid black;
float: left;
}
main ul {
margin: 10px;
padding: 10px;
}
main p, li {
margin: 5px;
padding: 5px;
}
I have created an unsorted list/list that I would like the lines in between each word to show... so far I have this:`
#header {
position: absolute;
width: 100%;
}
#navbar {
position: relative;
padding-top: 0.8em;
padding-left: 31em;
}
ul {
list-style-type: ;
margin: 0;
padding: 0;
float: left;
}
li {
display: inline;
padding: 0.4em;
}
a {
text-decoration: none;
color: #FFFFFF;
font-family: "Century Gothic";
font-size: 100%;
<img id="header" src="images/headerfit.png" />
<div id="navbar">
<ul>
<li>HOME
</li>
<li>CUCINA
</li>
<li>ESPRESSO
</li>
<li>BAR
</li>
<li>FUNCTIONS
</li>
<li>CONTACT
</li>
</ul>
</div>
How do I make it so there is a line between each word (the space)... thankyou.
you need border for your list:
li {
display: inline;
padding: 0.4em;
border-right: 1px solid #000;
}
li:last-child {
border-right: none;
}
http://jsfiddle.net/4s2ho1kj/2/
If i have understood you right (not sure that i have) what you want is space between each word you could do this by saying
li{
margin-left:10px;
}
li:first-child{
margin-left:0px;
}
This way you will make the line that you want by adding a border to the right side of each menu item except the last.
li { border-right: 1px solid #000000; }
li:last-child { border-right: none }
here in this jsfiddle you can see what you need and try adjusting it a little till how you want it:
http://jsfiddle.net/9qdefux6/
I have a ul with two columns (of lis). I'm trying to make a visible separation between the two columns, but I can't get it to work. The goal is to make each li have a bottom-color line, but make those lines separated.
This is what I currently have: http://codepen.io/anon/pen/JeluB
HTML
<ul id="double">
<li>asdas</li>
<li>eee</li>
<li>iii</li>
<li>qqqq</li>
<li>yyyy</li>
<li>pppp</li>
<li>p222</li>
</ul>
CSS
ul{
width:200px;
overflow: hidden;
border: 1px solid red;
padding: 5px;
}
li{
line-height: 1.5em;
float: left;
display: inline;
border-bottom: 1px solid #DDDDDD;
border-right: 2px;
}
#double li {
width: 45%;
}
One solution is to apply border-right using :nth-child(odd):
ul {
width: 200px;
overflow: hidden;
border: 1px solid red;
padding: 5px;
}
li {
line-height: 1.5em;
float: left;
display: inline;
border-bottom: 1px solid #DDDDDD;
border-right: 2px;
}
#double li {
width: 45%;
}
#double li:nth-child(odd) {
border-right: solid 1px #DDDDDD;
}
#double li:nth-child(even) {
margin-left: 5px;
}
<ul id="double">
<li>asdas</li>
<li>eee</li>
<li>iii</li>
<li>qqqq</li>
<li>yyyy</li>
<li>pppp</li>
<li>p222</li>
</ul>
I think you simply need to give the li elements a margin.
For example
li {
...
margin: 0 5px;
...
}
just add margin-left and margin rigth in li element
it may be works. http://jsfiddle.net/vrajeshdave148/t89yvepj/3/
the property column-gap resolves it.
I have added the odd and even classes to the li tags
and I have added the float:right CSS rule to the li tags with even class
and I have added the float:left CSS rule to the li tags with odd class
and I have added a border-bottom to each of the li.even and li.odd separatly
here is I've achieved
ul{
width:200px;
overflow: hidden;
border: 1px solid red;
padding: 5px;
}
li{
line-height: 1.5em;
float: left;
display: inline;
}
#double li {
width:45%;
}
li.odd {border-bottom:3px solid #ccc;float:left;}
li.even {border-bottom:3px solid #ccc;float:right;}
<ul id="double">
<li class="odd">asdas</li>
<li class="even">eee</li>
<li class="odd">iii</li>
<li class="even">qqqq</li>
<li class="odd">yyyy</li>
<li class="even">pppp</li>
<li class="odd">p222</li>
</ul>
This is what I have created so far. I want to increase the height of the first li item, so that it covers the bottom border of its ul.
In my app I want to create the "selected" effect using this approach. Is this possible without JS?
CSS
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
border: 5px solid #999;
font-size: 0;
}
li {
padding: 25px;
font-size: 1rem;
border: 5px solid orange;
display: inline-block;
}
HTML
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
You can write like this:
li:first-child{
margin-bottom:-5px;
padding-bottom:30px;
}
Check this http://cssdesk.com/QWbvc
You need to add class like 'active' to your selected element, and then write some rules for your element. Check this jsfiddle.net/p85Ey/
you may refer sandeep's answer but also Try this one - just assign fix height to parent element and the see how it works after <li> height increases
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
border: 5px solid #999;
font-size: 0;
height:79px;
}
li{
padding: 25px;
font-size: 1rem;
border: 5px solid orange;
display: inline-block;
}
li:first-child {
height:25px;
}
OR
li:first-child {
padding-bottom:30px;
}
I'm trying to convert this PSD to HTML with CSS.
And this is what I've got so far (using CSS3).
But I've no idea how to put a divider between the menu items. Any ideas?
EDIT: Seems example images aren't showing. So here they are.
The PSD File
http://postimage.org/image/2qywn3nj8/
What I've got so far
http://postimage.org/image/1ylhjsv2c/
#nav
{
padding:0;
margin:0;
height: 35px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
background-image: -moz-linear-gradient(top, #ffffff, #eaecec);
-moz-box-shadow: 0 0 1px #888;
}
#nav ul
{
margin-top: 0px;
margin-left: 0;
Font-Family: Arial;
font-size: 10pt;
list-style: none;
padding-top: 8px;
color: #000000;
}
#nav ul li
{
display: inline;
padding-left: 30px;
}
You could try adding an empty li and style it as your separator. I think that would be ugly codewise, but something like this works:
CSS:
#nav
{
padding:0;
margin:0;
height: 35px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
background-image: -moz-linear-gradient(top, #ffffff, #eaecec);
-moz-box-shadow: 0 0 1px #888;
}
#nav ul
{
margin-top: 0px;
margin-left: 0;
Font-Family: Arial;
font-size: 10pt;
list-style: none;
padding-top: 8px;
color: #000000;
}
#nav ul li
{
display: inline;
padding-left: 15px;
}
#nav ul li.sep{
background-image: -moz-linear-gradient(top, #eaecec, #555555);
padding-left:1px;
margin-left: 15px;
}
HTML:
<div id="nav">
<ul>
<li>test</li>
<li class="sep"></li>
<li>test2</li>
<li class="sep"></li>
<li>test3</li>
<li class="sep"></li>
<li>test</li>
<li class="sep"></li>
<li>test2</li>
<li class="sep"></li>
<li>test3</li>
</ul>
</div>
Maybe put a 1px wide div in between each and give it some type of edged border like groove, ridge, inset, outset? Or you could use an image...but that seems silly for something so little.
You could use something like:
#nav ul li {
display: inline;
padding-left: 30px;
border-left: 1px solid #THE-WHITE-COLOR;
border-right: 1px solid #THE-GREY-COLOR;
}
and then just use border-left: none; and border-right: none; as some extra markup on the first and last #navl ul li's
Might get tricky with the space you got there at the top and bottom of the lines.. but you know.. you can do iit.
Your menus should like this :
HTML:
<div id="nav">
<ul>
<li>Rates & Plans</li>
<li>Phones</li>
<li>Rates</li>
<li>Booking</li>
<li>Coverage</li>
<li>FAQ</li>
<li>Support</li>
</ul>
</div>
CSS:
#nav{
// Background
}
#nav ul
padding:0;margin:0 0 0 30px;
}
#nav li{
background:url(separator.png) no-repeat 100% 0%;
padding: 10px 15px;
margin: 0 2px;
}
The easiest option would be to have an empty list element after each nav item and then style it accordingly, however this isn't very semantic.
You could also try using a CSS selector such as :after ( http://www.w3schools.com/cssref/sel_after.asp )