So i was playing around with CSS and i found a way to make lines appear beetween my navigation tabs.
So for example it would be
Home | About etc etc
I wanted to know how i would change the size of the "|"
The way i have got it coded is
li+li {
border-left: 1px solid #00FFFF;
}
I have tried height etc but it does nothing to change the size of the actual line. It just stays the same. So anyway which changes the actual height would be great
You can use pseudo element :before or :after to create the line.
.nav li {
display: inline-block;
}
.nav li + li:before {
content: "";
display: inline-block;
vertical-align: middle;
border-left: 1px solid;
padding-left: 8px;
margin-left: 4px;
height: 8px;
}
<ul class="nav">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
You should surround the list elements with a div in the actual HTML and give that a border-left: 1px solid #00FFFF; with CSS.
The height on the border should work.
Examples
Compare the two nav listed below and check the height on the border.
<nav>
<li class="navlinks">Home</li>
<li class="navlinks">About</li>
<li class="navlinks">Contact</li>
</nav>
<br>
<br>
<nav>
<li class="navlinks2">Home</li>
<li class="navlinks2">About</li>
<li class="navlinks2">Contact</li>
</nav>
nav{
height:50px;
background-color: #9e9e9e;
width:100%;
}
li{
position:relative;
display: block;
float:left;
padding:15px 5px 5px 5px;
}
.navlinks{
border-right: 1px solid red;
height: 5px;
}
.navlinks2{
border-right: 1px solid red;
height: 30px;
}
http://codepen.io/Bespinoza10/pen/LGeyXe
nav{
height:50px;
background-color: #9e9e9e;
width:100%;
}
li{
position:relative;
display: block;
float:left;
padding:15px 5px 5px 5px;
}
.navlinks{
border-right: 1px solid red;
height: 5px;
}
.navlinks2{
border-right: 1px solid red;
height: 30px;
}
<nav>
<li class="navlinks">Home</li>
<li class="navlinks">About</li>
<li class="navlinks">Contact</li>
</nav>
<br>
<br>
<nav>
<li class="navlinks2">Home</li>
<li class="navlinks2">About</li>
<li class="navlinks2">Contact</li>
</nav>
I put the example on here just run the script and also on codepen.io
Related
I am designing a simple tab bar with a content panel.
To hide the bottom border for the current active tab, I use a negative margin-bottom and a border-bottom to hide the border for that tab.
* {
box-sizing: border-box;
}
#container {
width: 500px;
height: 200px;
border: 1px solid black;
background-color: lightgray;
}
#wrapper {
}
ul {
display: flex;
margin: 0;
padding: 2px 2px 0 2px;
border-bottom: 1px solid black;
}
li {
padding: 10px;
margin: 0 2px -1px 0;
list-style: none;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 0;
}
li.active {
border-bottom: 2px solid lightgray;
}
#content {
padding: 10px;
}
<div id="container">
<div id="wrapper">
<ul>
<li class="active">Tab 1 (active)</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="content">
My content
</div>
</div>
It works perfect.
The problem comes when I want to add more tabs, so it overflows the container. The solution that comes to my mind is using overflow-x: auto;. The problem is that this also adds a vertical scrollbar, and I am not sure why. I could overcome this by using overflow-y: hidden;. But the real problem is that it makes impossible to "delete" the black bottom border of the current active tab anymore.
You can run the snipped below, also you can uncomment the commented html li elements.
* {
box-sizing: border-box;
}
#container {
width: 500px;
height: 200px;
border: 1px solid black;
background-color: lightgray;
}
#wrapper {
}
ul {
display: flex;
margin: 0;
padding: 2px 2px 0 2px;
border-bottom: 1px solid black;
overflow-x: auto;
}
li {
padding: 10px;
margin: 0 2px -1px 0;
list-style: none;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 0;
white-space: nowrap;
}
li.active {
border-bottom: 2px solid lightgray;
}
#content {
padding: 10px;
}
<div id="container">
<div id="wrapper">
<ul>
<li class="active">Tab 1 (active)</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
<li>Tab 5</li>
<li>Tab 6</li>
<li>Tab 7</li>
<!--<li>Tab 8</li>
<li>Tab 9</li>
<li>Tab 10</li>-->
</ul>
<div id="content">
My content
</div>
</div>
Does anyone has a solution? If not, what would be an alternate way to accomplish this?
What I really want is to keep hiding the bottom border of the active tab, and also have the possibility of showing an horizontal scroll bar when there is horizontal overflow.
Thank you.
To hide the bottom border for the current active tab, I use a negative
margin-bottom and a border-bottom to hide the border for that tab.
Instead, you can use box-shadow: 0 -1px black inset; for <ul> and box-shadow: 1px -1px lightgray inset; for li.active.
Once you have done all of this, you don't need negative margin-bottom anymore.
The problem is that this also adds a vertical scrollbar, and I am not
sure why. I could overcome this by using overflow-y: hidden;.
It adds a vertical scrollbar to ul because you added margin-bottom: -1px; to it's child (li) and it overflows Y axis.
I don't know how to fix horizontal scrollbar but i think you can fix it with a javascript carousel like owlcarousel, slick carousel etc.
Here is the example working:
* {
box-sizing: border-box;
}
#container {
width: 500px;
height: 200px;
border: 1px solid black;
background-color: lightgray;
}
#wrapper {
}
ul {
display: flex;
margin: 0;
padding: 2px 2px 0 2px;
/* border-bottom: 1px solid black; */
box-shadow: 0 -1px black inset;
overflow-x: auto;
}
li {
padding: 10px;
margin: 0 2px 0 0; /* you don't need to use bottom margin anymore. */
list-style: none;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 0;
white-space: nowrap;
}
li.active {
/* border-bottom: 2px solid lightgray; */
box-shadow: 1px -1px lightgray inset;
}
#content {
padding: 10px;
}
<div id="container">
<div id="wrapper">
<ul>
<li class="active">Tab 1 (active)</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
<li>Tab 5</li>
<li>Tab 6</li>
<li>Tab 7</li>
<!--<li>Tab 8</li>
<li>Tab 9</li>
<li>Tab 10</li>-->
</ul>
</div>
<div id="content">
My content
</div>
</div>
"delete" the black bottom border of the current active tab
You can use border-bottom-color: transparent.
* {
box-sizing: border-box;
}
#container {
width: 500px;
height: 200px;
border: 1px solid black;
background-color: lightgray;
}
#wrapper {
}
ul {
display: flex;
margin: 0;
padding: 2px 2px 0 2px;
}
li {
padding: 10px;
margin: 0 2px 0 0;
list-style: none;
border: 1px solid black;
}
li.active {
border-bottom-color: transparent;
}
#content {
padding: 10px;
}
<div id="container">
<div id="wrapper">
<ul>
<li class="active">Tab 1 (active)</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div>
<div id="content">
My content
</div>
</div>
showing an horizontal scroll bar when there is horizontal overflow
I think you forgot to close one of your divs, and your content was inside .wrapper! So just fix that up, and stick on overflow: auto and a max width to make sure it doesn't expand.
* {
box-sizing: border-box;
}
#container {
width: 500px;
height: 200px;
border: 1px solid black;
background-color: lightgray;
}
#wrapper {
overflow-x: auto;
max-width: 100%;
}
ul {
display: flex;
margin: 0;
padding: 2px 2px 0 2px;
}
li {
padding: 10px;
margin: 0 2px 0 0;
list-style: none;
border: 1px solid black;
}
li.active {
border-bottom-color: transparent;
}
#content {
padding: 10px;
}
<div id="container">
<div id="wrapper">
<ul>
<li class="active">Tab 1 (active)</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 3</li>
<li>Tab 3</li>
<li>Tab 3</li>
<li>Tab 3</li>
<li>Tab 3</li>
<li>Tab 3</li>
<li>Tab 3</li>
<li>Tab 3</li>
<li>Tab 3</li>
</ul>
</div>
<div id="content">
My content
</div>
</div>
I have two lists sitting side-by-side. In the full code there will be the ability to select one of the list items from the MainList which will show the relevant list items from the SubList. What I would like is for the border-right of the MainList to overlap the border-left of the SubList to make it look like the SubList items are being shown as a result of the selection in the MainList.
ul {
list-style: none;
}
.BigContainer {
border: 2px solid #d50f67;
border-radius: 5px;
margin: 10px 0;
padding: 5px;
overflow: auto;
}
.MainListContainer {
width: 50%;
float: left;
}
.MainListItem {
border-bottom: 1px solid #ddd;
border-right: 1px solid white;
padding: 5px;
z-index: 2;
}
.MainListItem:last-of-type {
border: none;
}
.SubListContainer {
width: 45%;
float: left;
border: 1px solid #ddd;
border-radius: 5px;
}
.SubListItem {
padding: 5px;
z-index: 1;
}
<div class="BigContainer">
<div class="MainListContainer">
<ul class="MainList">
<li class="MainListItem">List Option A</li>
<li class="MainListItem">List Option B</li>
<li class="MainListItem">List Option C</li>
</ul>
</div>
<div class="SubListContainer">
<ul class="SubList">
<li class="SubListItem">Sub-Option 1</li>
<li class="SubListItem">Sub-Option 2</li>
<li class="SubListItem">Sub-Option 3</li>
<li class="SubListItem">Sub-Option 4</li>
<li class="SubListItem">Sub-Option 5</li>
</ul>
</div>
</div>
So, the border-right of the MainList would be white/transparent to basically erase a portion of the SubList border. I appreciate that, at the moment, making this happen would remove more of the SubList border than desired, but I will code the selection process properly to ensure only the selected item has the relevant border styling applied.
Add selected class to the selected item, then add
.selected:after{
content:"";
position: absolute;
right:-2px;
top:0;
width: 1px;
height: 100%;
background-color: white;
}
This will be placed right where you want it to. Note that MainListItem needs to have a position: relative; for the position to work.
.selected:after{
content:"";
position: absolute;
right:-2px;
top:0;
width: 1px;
height: 100%;
background-color: white;
}
ul {
list-style: none;
}
.BigContainer {
border: 2px solid #d50f67;
border-radius: 5px;
margin: 10px 0;
padding: 5px;
overflow: auto;
}
.MainListContainer {
width: 50%;
float: left;
}
.MainListItem {
border-bottom: 1px solid #ddd;
border-right: 1px solid white;
padding: 5px;
z-index: 2;
position: relative;
}
.MainListItem:last-of-type {
border: none;
}
.SubListContainer {
width: 45%;
float: left;
border: 1px solid #ddd;
border-radius: 5px;
}
.SubListItem {
padding: 5px;
z-index: 1;
}
<div class="BigContainer">
<div class="MainListContainer">
<ul class="MainList">
<li class="MainListItem">List Option A</li>
<li class="MainListItem selected">List Option B</li>
<li class="MainListItem">List Option C</li>
</ul>
</div>
<div class="SubListContainer">
<ul class="SubList">
<li class="SubListItem">Sub-Option 1</li>
<li class="SubListItem">Sub-Option 2</li>
<li class="SubListItem">Sub-Option 3</li>
<li class="SubListItem">Sub-Option 4</li>
<li class="SubListItem">Sub-Option 5</li>
</ul>
</div>
</div>
I am experimenting with a navigation bar, and I am unsure of how to float part of the list to the right, without the text becoming laterally inverted. I want the first link to be on the very left side, whilst all the rest of the links are on the right side. Also, using float: right makes the list items very compressed, and I was wondering on how to get past this? I have chosen to do it this way so that I could use a line when hovering over the links. https://codepen.io/anon/pen/xQjozy
html:
<div class="navigationbar">
<ul>
<li class="one">Link 1</li>
<li class="two rightside">Link 2</li>
<li class="three rightside">Link 3</li>
<li class="four rightside">Link 4</li>
<li class="five rightside">Link 5</li>
<li class="six rightside">Link 6</li>
<hr />
</ul>
</div>
css:
ul li {
display: inline;
text-align: center;
}
a {
display: inline-block;
width: 16%;
padding: .15rem 0;
margin: 0;
text-decoration: none;
color: #fff;
font-size: 1.5vw;
}
.two:hover ~ hr {
margin-left: 16%;
}
.three:hover ~ hr {
margin-left: 32%;
}
.four:hover ~ hr {
margin-left: 48%;
}
.five:hover ~ hr {
margin-left: 64%;
}
.six:hover ~ hr {
margin-left: 80%;
}
hr {
height: .25rem;
width: 16%;
margin: 0;
background: blue;
border: none;
transition: .3s ease-in-out;
}
.navigationbar{
background-color: green;
overflow: hidden;
}
ul{
margin:0.7vh 0vh 0.7vh 0vh;
}
/*
.rightside{
float:right
}*/
Thanks
I think this is closer to what you want I hope.
Also using border bottom is much better way to handle a link underline. It will always line itself up under the content perfectly. I would also suggest changing the font size from vw to px or em and use media queries to change the font as the browser width gets smaller/larger.
EDIT: This is how I would correct your code but I don't think this is the correct way to accomplish this.
ul li {
display: inline;
text-align: center;
border-bottom:3px solid transparent;
}
a {
display: inline-block;
padding: .15rem 0;
margin: 0;
text-decoration: none;
color: #fff;
font-size: 1.5vw;
padding:6px 15px; /*add more spacing to links*/
}
li:hover {
border-bottom:3px solid blue;
}
.navigationbar{
background-color: green;
overflow: hidden;
}
ul{
margin:0.7vh 0vh 0.7vh 0vh;
}
.leftside {
float:left;
}
.right_side_container{
float:right
}
<div class="navigationbar">
<ul>
<li class="one leftside">Link 1</li>
<div class="right_side_container">
<li class="two">Link 2</li>
<li class="three">Link 3</li>
<li class="four">Link 4</li>
<li class="five">Link 5</li>
<li class="six">Link 6</li>
</div>
</ul>
</div>
You could set a certain width to each of the links you floated to the right,that way it wont be compressed
I have the following code:
.menu{
border: solid red;
border-width: 1px 1px 0px 1px;
background-color:black;
color:white;
width: 60px;
}
.dropdown{
position:absolute;
background-color: grey;
width:100px;
}
.dropdown ul{
list-style:none;
padding:10px;
margin: 0;
}
.zoom{
zoom:300%;
}
<div class="menu zoom">
Click me
<div class="dropdown">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
How can I place my dropdown menu to the same x position as the parent, without removing the border? I already tried 'box-sizing: border-box', but somehow it doesn't work.
Set position: relative on parent element and on child set position left to same negative value as left border width of parent element.
.menu {
border: solid red;
border-width: 1px 1px 0px 1px;
background-color: black;
color: white;
width: 60px;
position: relative;
}
.dropdown {
position: absolute;
background-color: grey;
width: 100px;
left: -1px;
}
.dropdown ul {
list-style: none;
padding: 10px;
margin: 0;
}
.zoom {
zoom: 300%;
}
<div class="menu zoom">
Click me
<div class="dropdown">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
Keeping the parent as positon:relative and giving the child position:absolte with top:100%; and left:-1px ( where -1 is taken because the width of border is 1 from left)
Here is the working snippet:
.menu {
border: solid red;
border-width: 1px 1px 0px 1px;
background-color: black;
color: white;
width: 60px;
position: relative;
}
.dropdown {
position: absolute;
background-color: grey;
width: 100px;
left: -1px;
top:100%
}
.dropdown ul {
list-style: none;
padding: 10px;
margin: 0;
}
.zoom {
zoom: 300%;
}
<div class="menu zoom">
Click me
<div class="dropdown">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
I have the following HTML:
#main-menu {
background-color: blue;
border: 1px solid black;
width: 600px;
}
.menu {
list-style: none outside none;
text-align: center;
}
.menu-item {
float: left;
}
.menu-item a {
border: 1px solid red;
}
<div id="main-menu">
<ul class="menu">
<li class="menu-item">Item #1</li>
<li class="menu-item">Item #2</li>
<li class="menu-item">Item #3</li>
<li class="menu-item">Item #4</li>
</ul>
</div>
How do I make the li elements automatically expand euqally to the fixed width of the container?
Thanks in advance! :-)
CodePen link: http://codepen.io/anon/pen/JoKgXz
I've updated you codepen codes..
CSS
#main-menu {
background-color: blue;
border: 1px solid black;
width: 600px;
overflow: hidden;
}
ul, li{
margin:0;
padding:0;
}
.menu {
list-style: none outside none;
text-align: center;
}
.menu-item {
float: left;
width:25%;
}
.menu-item a {
border: 1px solid red;
}
Demo
Ensure you have a proper CSS reset and use the box-sizing:border-box property.
This option has the virtue of not requiring set widths on the li
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#main-menu {
background-color: blue;
border: 1px solid black;
width: 600px;
}
.menu {
list-style: none outside none;
text-align: center;
display: table;
width: 100%;
}
.menu-item {
display: table-cell;
}
.menu-item a {
border: 1px solid red;
color: white;
display: block;
}
<div id="main-menu">
<ul class="menu">
<li class="menu-item">Item #1
</li>
<li class="menu-item">Item #2
</li>
<li class="menu-item">Item #3
</li>
<li class="menu-item">Item #4
</li>
</ul>
</d
First remove all margin and padding from the .menu. As you have four items in the menu, add width: 25% to the .menu-item. I've added a display: block to the <a> tag to make it fill the entire width of the .menu-item. As you use float: left the menu-items won't make the .menu container grow. The .menu:after adds a clearfix to have the menu contain all menu items.
Instead of float: left you could also have opted for a display: inline-block. In this case the clearfix wouldn't be necessary, but you need to make sure that the menu items don't have any whitespace (e.g. a newline) between them. Put them on one line like ...</li><li>... otherwise there will be some space between the menu items.
If you need some padding on the menu item make sure to add box-sizing: border-box as otherwise the width will refer to the content only. This means that after adding the padding the menu item will take up more than 25% of the width, which makes the last menu item wrap to a new line.
#main-menu {
background-color: blue;
border: 1px solid black;
width: 600px;
}
.menu {
list-style: none;
text-align: center;
margin: 0;
padding: 0;
}
.menu:after {
content: '';
display: block;
clear:both;
}
.menu-item {
float: left;
width: 25%;
}
.menu-item a {
display: block;
border: 1px solid red;
}
<div id="main-menu">
<ul class="menu">
<li class="menu-item">Item #1</li>
<li class="menu-item">Item #2</li>
<li class="menu-item">Item #3</li>
<li class="menu-item">Item #4</li>
</ul>
</div>