I am developing website and I have a problem,
<li> elements aren't inside <ul>
#category_select {
margin: 0 auto;
width: 97%;
height: 50%;
list-style: none;
text-align: center;
border: 1px solid black;
}
#category_select li {
display: inline;
padding: 10px;
border: 1px solid black;
}
<ul id="category_select">
<li>Naslovnica</li>
<li>Elektronika</li>
<li>Bijela tehnika</li>
<li>Vozila</li>
<li>Sport</li>
<li>Dom i vrt</li>
<li>Odjeća i obuća</li>
<li>Moda</li>
<li>Literatura</li>
<li>Ručni radovi</li>
<li>Igračke</li>
<li>O nama</li>
<li>Kontakt</li>
</ul>
Please try this
#category_select li {
display: inline-block; //change display:inline to display:inline-block
padding:10px;
border:1px solid black;
}
DEMO
Related
I have a simple <ul> menu with some list items. I used the :last-child pseudo class to apply a right border to the last list item. Each previous list item has only a left border. It looked fine, until I modified my HTML code to surround the list items with <a> tags. I did this because I wanted the entire list item to be a clickable link. Unfortunately, that broke my design because now, each list item was the last-child since it was nested within an <a> tag. So now every list item has a left and right border. How can I have the the right border only on the last list item and still retain a full clickable list item?
Here's the HTML I was using to test:
<div class="tabs">
<div class="tabs__tab-list">
<ul>
<li class="tabs__tab-list-item tabs__tab-list-item--active">Look Ups</li><!--
--><li class="tabs__tab-list-item">Look Up Types</li><!--
--><li class="tabs__tab-list-item">Look Up Relationships</li><!--
--></ul>
</div>
</div>
And the CSS:
.tabs {
width: 70%;
margin: 20px;
min-height: 20px;
min-width: 700px;
display: block;
}
.tabs__tab-list {
display: block;
padding-left: 30px;
}
.tabs__tab-list-item {
display: inline-block;
border-left: 1px solid black;
border-top: 1px solid black;
background-color: lightgray;
padding: 5px 10px 5px 5px;
color: black;
}
.tabs__tab-list-item:hover {
background-color: #E8E8E8;
}
.tabs__tab-list-item:active {
background-color: white;
}
.tabs__tab-list-item:last-child {
border-right: 1px solid black;
}
.tabs__tab-list-item--current {
background-color: white;
}
I think you just need to move the <a/> tags inside the <li/> tags, and set the .tabs__tab-list-item to display: inline;. See the snippet below
html, body{
width: 100%;
}
.tabs {
width: 70%;
margin: 20px;
display: block;
}
.tabs__tab-list {
display: block;
padding-left: 30px;
}
.tabs__tab-list > ul{
list-style: none;
display: flex;
justify-content: space-between;
}
.tabs__tab-list-item{
flex: 1 1 auto;
border-left: 1px solid black;
border-top: 1px solid black;
background-color: lightgray;
color: black;
}
.tabs__tab-list-item a{
padding: 5px 10px 5px 5px;
display: block;
white-space: nowrap;
}
.tabs__tab-list-item:hover {
background-color: #E8E8E8;
}
.tabs__tab-list-item:active,
.tabs__tab-list-item--active{
background-color: white;
}
.tabs__tab-list-item:last-child {
border-right: 1px solid black;
}
.tabs__tab-list-item--current {
background-color: white;
}
<div class="tabs">
<div class="tabs__tab-list">
<ul>
<li class="tabs__tab-list-item tabs__tab-list-item--active">
Look Ups
</li>
<li class="tabs__tab-list-item">
Look Up Types
</li>
<li class="tabs__tab-list-item">
Look Up Relationships
</li>
</ul>
</div>
</div>
The correct selector is now
a:last-child .tabs__tab-list-item
.tabs {
width: 70%;
margin: 20px;
min-height: 20px;
min-width: 700px;
display: block;
}
.tabs__tab-list {
display: block;
padding-left: 30px;
}
.tabs__tab-list-item {
display: inline-block;
border-left: 1px solid black;
border-top: 1px solid black;
background-color: lightgray;
padding: 5px 10px 5px 5px;
color: black;
}
.tabs__tab-list-item:hover {
background-color: #E8E8E8;
}
.tabs__tab-list-item:active {
background-color: white;
}
a:last-child .tabs__tab-list-item {
background-color: lightblue;
border-right: 1px solid black;
}
.tabs__tab-list-item--current {
background-color: white;
}
<div class="tabs">
<div class="tabs__tab-list">
<ul>
<li class="tabs__tab-list-item tabs__tab-list-item--active">Look Ups</li><!--
--><li class="tabs__tab-list-item">Look Up Types</li><!--
--><li class="tabs__tab-list-item">Look Up Relationships</li><!--
--></ul>
</div>
</div>
Now you need to target the last <a> in the list, instead of
.tabs__tab-list-item:last-child
use
.tabs__tab-list a:last-child
Surrounding the list items with a tags is invalid HTML. Just place the content of the list items into divs, and surround these divs with a tags and style them.
<div class="tabs">
<div class="tabs__tab-list">
<ul>
<li class="tabs__tab-list-item tabs__tab-list-item--active">
<div>Look Ups</div>
</li>
<li class="tabs__tab-list-item">
<div>Look Up Types</div>
</li>
<li class="tabs__tab-list-item">
<div>Look Up Relationships</div>
</li>
</ul>
</div>
</div>
I have the following code :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="utf-8">
<style>
.nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
background-color: #333;
}
.navLi{
display:inline;
}
.nav ol{
display:flex;
}
.nav a{
display:inline-block;
padding:10px;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
color:white;
}
.green{
background-color:green;
}
.blue{
background-color:blue;
}
.sideBar{
width:25%;
background:#333;
height: 850px;
}
.whiteColor{
color:white;
}
.paragraph{
padding: 20px;
line-height: 150%;
font-family: ariel;
}
.div1{
width: 75%;
background: white;
}
.textSize{
font-size: 1px;
}
.div2{
border:solid 1px;
display:flex;
}
.image{
float:left;
}
.maxDiv{
max-width: 1000px;
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
</style>
</head>
<body>
<div class="maxDiv">
<div id="myTopnav">
<ul class="nav">
<li class="navLi"> 0</li>
<li class="navLi"><a href="#news" >1</a></li>
<li class="navLi">2</li>
<li class="navLi">3</li>
<li class="navLi">4</li>
<li class="navLi">5</li>
<li class="navLi">6</li>
<li class="navLi">7</li>
</ul>
</div>
I want each of the li to have an ordered list below it (I know that it won't look pretty)
I tried making an ol element and some li inside of it and it looks weird.
When I do the ol inside each li and inside that ol I put some li it looks something like:
Code :
<li class="navLi"> 0
<ol>
<li class="navLi"><a href="#news" >1</a></li>
<li class="navLi"><a href="#news" >1</a></li>
</ol>
</li>
The ol inside the li looks not good as marked in the red square in the photo.
Any idea ?
You can hover 4 to see a submenu. I cleaned up the CSS, deleted classes/IDs I couldn't find being used.
The submenu has absolute positioning. Both menus are now defined using flexbox.
.nav {
display: flex;
justify-content: center;
align-items: flex-start;
list-style: none;
margin: 0;
padding: 0;
}
.navLi {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
position: relative;
}
.nav ol {
display: none;
position: absolute;
background-color: red;
list-style: none;
padding: 0;
margin: 1px;
}
.navLi:hover ol {
display: flex;
justify-content: center;
align-items: center;
}
.navLi:hover ol li {
padding: 14px 16px;
}
a {
display: block;
padding: 14px 16px;
text-decoration: none;
background-color: #333;
font-size: 17px;
color: white;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.maxDiv {
max-width: 1000px;
margin: auto;
border: 3px solid green;
padding: 10px;
background-color: #333;
}
<div class="maxDiv">
<ul class="nav">
<li class="navLi">0</li>
<li class="navLi">1</li>
<li class="navLi">2</li>
<li class="navLi">3</li>
<li class="navLi">4
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
</li>
<li class="navLi">5</li>
<li class="navLi">6</li>
<li class="navLi">7</li>
</ul>
</div>
I'm trying to have these small left and right borders either side of the text. Here is what I'm trying to make:
http://imgur.com/xCZnGgJ
My problem is that the borders are not the same height of the surrounding div however they only go the same height of the text. Here is a screen shot:
http://imgur.com/I2jjsAm
I have dried adding height: 30px to the li and ul however this does not change anything.
*{margin:0;}
#header {
width:100%;
}
#pre_header {
width:100%;
height:30px;
background-color:#202020;
}
.pre_header_content {
margin:0 auto;
width:1040px;
}
#pre_header ul {
list-style-type: none;
margin: 0;
padding: 0;
line-height:30px;
}
#pre_header li {
display: inline;
border-right: .5px solid #414141;
border-left: .5px solid #414141;
}
#pre_header a {
text-decoration:none;
color:#fff;
padding:6px 15px 6px 15px;
}
#pre_header a:hover {
background-color:#4e4e4e;
}
<div id="header">
<div id="pre_header">
<div class="pre_header_content">
<ul>
<li>Voucher codes</li>
<li>In-store codes</li>
<li>Online codes</li>
<li>Free samples</li>
<li>Advertise</li>
</ul>
</div>
</div>
<div id="main_header">
<div class="main_header_content">
Test
</div>
</div>
</div>
If anyone knows is there also anyway to bring the two borders together closer also?
Add the padding:6px 15px 6px 15px; to the li instead of a. And also, 0.5px does not work. What's half a pixel? Updated your code. See below!
EDIT: Note: I also changed your hover effect to affect the li element instead of a.
*{
margin:0;
box-sizing: border-box;
}
#header {
width:100%;
}
#pre_header {
width:100%;
height:30px;
background-color:#202020;
}
.pre_header_content {
margin:0 auto;
width:1040px;
}
#pre_header ul {
list-style-type: none;
margin: 0;
padding: 0;
line-height:30px;
}
#pre_header li {
display: inline;
border-right: 1px solid #414141;
border-left: 1px solid #414141;
padding: 0 15px;
float:left;
margin-right: 2px;
}
#pre_header li:last-child{
margin-right: 0;
}
#pre_header a {
text-decoration:none;
color:#fff;
}
#pre_header li:hover {
background-color:#4e4e4e;
}
<div id="header">
<div id="pre_header">
<div class="pre_header_content">
<ul>
<li>Voucher codes</li>
<li>In-store codes</li>
<li>Online codes</li>
<li>Free samples</li>
<li>Advertise</li>
</ul>
</div>
</div>
<div id="main_header">
<div class="main_header_content">
Test
</div>
</div>
</div>
You could simply change the li to display: inline-block; I've created a jsfiddle for you.
#pre_header li {
display: inline-block;
border-right: 1px solid #414141;
border-left: 1px solid #414141;
}
Also, don't use .5px, use a single amount. I have used 1px.
http://jsfiddle.net/xeqsn83a/
If you want the borders to touch, you would need to float it. And as others have mentioned, your border width needs to be an actual pixel size. There is no such thing as .5px. Here is an example of what (I think) you are trying to do:
http://jsfiddle.net/tuc4Lwuu/
#pre_header li {
float: left;
border-right: 1px solid #414141;
border-left: 1px solid #414141;
margin-right: 2px;
}
Try this:
* {
margin: 0;
}
#header {
width: 100%;
}
#pre_header {
width: 100%;
height: 30px;
background-color: #202020;
}
.pre_header_content {
margin: 0 auto;
width: 1040px;
}
#pre_header ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 0;
}
#pre_header li {
display: inline-block;
border-right: 1px solid #414141;
border-left: 1px solid #414141;
margin-right: 1px;
}
#pre_header a {
text-decoration: none;
color: #fff;
padding: 6px 15px 6px 15px;
font-size: 16px;
line-height: 30px;
}
#pre_header a:hover {
background-color: #4e4e4e;
}
<div id="header">
<div id="pre_header">
<div class="pre_header_content">
<ul>
<li>Voucher codes</li>
<li>In-store codes</li>
<li>Online codes</li>
<li>Free samples</li>
<li>Advertise</li>
</ul>
</div>
</div>
<div id="main_header">
<div class="main_header_content">
Test
</div>
</div>
</div>
I changed display: inline to inline-block for li and border-width to 1px (it has to be an integer). Also made li items closer to each other with font-size: 0 technique (read this article for understanding).
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>
By default I have a <ul> that's hidden from view which becomes visible when hovering over the parent <li>. When it does come into view the parent <li> expands its width by 1px. For some reason this only happens when using display:table-cell on the list items, which I'd prefer to keep using given the ability to center vertically. But the 1px jump is unwanted.
<ul class="nav-menu">
<li class="downloads"><a>Downloads</a>
<ul class="downloads-menu">
<li>Download 1</li>
<li>Download 2</li>
<li>Download 3</li>
</ul>
</li>
<li class="about"><a>About</a></li>
<li class="resources"><a>Resources</a></li>
<li class="contact"><a>Contact</a></li>
</ul>
ul.nav-menu {
position: relative;
height: 50px;
width: 100%;
background: black;
color: white;
}
ul.nav-menu > li {
display: table;
float: left;
list-style: none;
height: 50px;
border-right: 1px solid #333;
padding: 0 20px;
}
li a {
display: table-cell;
vertical-align: middle;
}
ul.nav-menu li.downloads:hover ul.downloads-menu {
display: block;
}
ul.downloads-menu {
display: none;
position: absolute;
top: 50px;
left: 0;
height: 250px;
width: 200px;
background: red;
}
I've setup a fiddle here: http://jsfiddle.net/azoc8c4m/1/
ul.nav-menu > li {
float: left;
list-style: none;
height: 50px;
line-height: 50px;
border-right: 1px solid #333;
padding: 0 20px;
}
li a {
}