i want to add drop-down list for every menu but its showing only for "Products". Firstly i made drop-down list only for "Products" menu.But for others menu its not working.
Html code is:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to Cctvcart store</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div class="header_wrap">
<div class="header_top_wrap">
<div class="header_top">
</div>
</div>
<!--end of header top wrap -->
<div class="header_bottom_wrap">
<div class="header_bottom">
<ul class="bottom_menu">
<li class="dropdown"><li>Company
<ul class="submenu">
<li>About us
</li>
<li>New Realeses
</li>
<li>Contact us
</li>
</ul>
</li>
<li class="dropdown">Products
<ul class="submenu">
<li>DVR & Kits
</li>
<li>Seurity Cameras
</li>
<li>Spy Camreas</li>
<li>Wireless & IP Cameras</li>
<li>Accessories</li>
<li>Mini Video</li>
</ul>
</li>
<li>Services
</li>
<li class="dropdown"><li>Support
<ul class="submenu">
<li>Support Home
</li>
<li>Warranty
</li>
<li>Feedback
</li>
<li>Contact Tech Support
</li>
</li>
<li class="dropdown"> <li>Multimedia
<ul class="submenu">
<li>Video
</li>
<li>Podcasts
</li>
</li>
</ul>
</div>
</div>
<!--end of bottom wrap -->
</div>
<!--end of header wrap -->
<div class="main_wrap">
<div class="main">
</div>
<!--end of main -->
</div>
<!--end of main wrap -->
<div class="footer_wrap">
<footer></footer>
</div>
<!--end of footer wrap -->
</body>
</html>
style.css:
* {
margin: 0px;
padding: 0px;
}
.header_wrap {
width: 100%;
height: 160px;
background: red;
position: relative;
}
.main_wrap {
width: 100%;
height: 1475px;
background: green;
}
.footer_wrap {
width: 100%;
height: 325px;
background: aqua;
}
.main {
width: 1000px;
height: 100%;
background: blue;
margin: auto;
}
footer {
width: 1000px;
height: 100%;
background: aqua;
margin: auto;
}
.header_top_wrap {
width: 100%;
height: 23px;
background: #ccc;
}
.header_bottom_wrap {
width: 100%;
height: 40px;
background: #06F;
position: absolute;
bottom: 0px;
left: 0px;
}
.header_top {
width: 1000px;
height: 100%;
background: purple;
margin: auto;
}
.header_bottom {
width: 1000px;
height: 100%;
background: black;
margin: auto;
}
.bottom_menu > li {
display: inline-block;
}
.bottom_menu a
{
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
color: #fff;
}
.bottom_menu > li >a {
display: block;
text-decoration: none;
padding: 0px 30px;
height: 40px;
line-height: 35px;
text-align: center;
}
.bottom_menu > li:hover >a
{
background:#fff;
color:#151716;
}
.submenu a:active, .submenu a:visited{
display: block;
color: #fff;
text-decoration: none;
z-index: 21;
}
.submenu {
position: absolute;
display: none;
width:160px;
height:250px;
background:white;
list-style:none;
}
.dropdown:hover > .submenu{
display: block;
}
.submenu>li>a
{
display:block;
width:100%;
height:42px;
background:black;
text-decoration:none;
line-height:58px;
padding-left:50px;
border:1px dashed white;
}
The issue is here:
<li class="dropdown"><li>Company
You have two <li>s. Please remove one. Also you forgot to include this after the </ul>:
</li>
</ul>
</li>
</ul>
Here's a working snippet:
* {
margin: 0px;
padding: 0px;
}
.header_wrap {
width: 100%;
height: 160px;
background: red;
position: relative;
}
.main_wrap {
width: 100%;
height: 1475px;
background: green;
}
.footer_wrap {
width: 100%;
height: 325px;
background: aqua;
}
.main {
width: 1000px;
height: 100%;
background: blue;
margin: auto;
}
footer {
width: 1000px;
height: 100%;
background: aqua;
margin: auto;
}
.header_top_wrap {
width: 100%;
height: 23px;
background: #ccc;
}
.header_bottom_wrap {
width: 100%;
height: 40px;
background: #06F;
position: absolute;
bottom: 0px;
left: 0px;
}
.header_top {
width: 1000px;
height: 100%;
background: purple;
margin: auto;
}
.header_bottom {
width: 1000px;
height: 100%;
background: black;
margin: auto;
}
.bottom_menu > li {
display: inline-block;
}
.bottom_menu a
{
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
color: #fff;
}
.bottom_menu > li >a {
display: block;
text-decoration: none;
padding: 0px 30px;
height: 40px;
line-height: 35px;
text-align: center;
}
.bottom_menu > li:hover >a
{
background:#fff;
color:#151716;
}
.submenu a:active, .submenu a:visited{
display: block;
color: #fff;
text-decoration: none;
z-index: 21;
}
.submenu {
position: absolute;
display: none;
width:160px;
background:white;
list-style:none;
}
.dropdown:hover > .submenu{
display: block;
}
.submenu>li>a
{
display:block;
width:100%;
height:42px;
background:black;
text-decoration:none;
line-height:58px;
padding-left:50px;
border:1px dashed white;
}
<div class="header_wrap">
<div class="header_top_wrap">
<div class="header_top">
</div>
</div>
<!--end of header top wrap -->
<div class="header_bottom_wrap">
<div class="header_bottom">
<ul class="bottom_menu">
<li class="dropdown">Company
<ul class="submenu">
<li>About us</li>
<li>New Realeses</li>
<li>Contact us</li>
</ul>
</li>
<li class="dropdown">Products
<ul class="submenu">
<li>DVR & Kits</li>
<li>Seurity Cameras</li>
<li>Spy Camreas</li>
<li>Wireless & IP Cameras</li>
<li>Accessories</li>
<li>Mini Video</li>
</ul>
</li>
<li>Services</li>
<li class="dropdown">
Support
<ul class="submenu">
<li>Support Home</li>
<li>Warranty</li>
<li class="dropdown">
Multimedia
<ul class="submenu">
<li>Video</li>
<li>Podcasts</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!--end of bottom wrap -->
</div>
<!--end of header wrap -->
<div class="main_wrap">
<div class="main">
</div>
<!--end of main -->
</div>
<!--end of main wrap -->
<div class="footer_wrap">
<footer></footer>
</div>
<!--end of footer wrap -->
Just take down the <li>, because you did it twice.
here is a working Jsfiddle https://jsfiddle.net/v7dLps8b/
Related
I have the topnav bar in the middle and when zooming out it stays there, but the picture(logo) and the tickets thing don't. Like you can see everythings is position relative. Also tried with margin auto, margin-left and margin-right auto but it just doesnt stay there. Also tried making the div just in the middle but that didn't work either. Every help is appreciated. :)
body{
margin: 0;
}
#header{
background-color: #a61b2b;
display: grid;
grid-template-columns: 20% 80%;
height: 120px;
align-content: center;
justify-content: flex-end
}
#topnav li{
margin: 0px 5px;
}
#topnav{
position: relative;
top: 40px;
right: 460px;
font-family: 'Open Sans',arial,sans-serif;
color: #f2f2f2;
padding: 14px 16px;
font-size: 12px;
font-weight: bold;
list-style: none;
display: flex;
margin: auto;
}
#topnav a:hover {
background-color: #eb0627;
}
#topnav a{
text-decoration:none;
color: #fff
}
#topnav li:hover ul{
display: block;
list-style: none;
background: black;
color: #fff;
padding: 10px;
position: absolute;
left: 0;
}
#topnav li ul li{
margin: 10px 0px;
}
#logo{
position: relative;
left: 500px;
width: 55%;
}
#tickets{
position: relative;
left: 450px;
background-color: black;
}
.hidden{
display:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Granada Club de Fútbol | Granada </title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<script src="scripts.js"></script>
</head>
<body>
<div id="header">
<img alt="Logo" id="logo" src="https://i.ibb.co/gTqYynf/logo.png">
<ul id="topnav">
<li>NEWS
<ul class="hidden">
<li>CLUB
</li>
<li>FIRST TEAM
</li>
</ul>
</li>
<li>
THE CLUB
<ul class="hidden">
<li>CLUB INFORMATION
</li>
<li>STRUCTURE
</li>
</ul>
</li>
<li>
FIRST TEAM
<ul class="hidden">
<li>SQUAD </li>
<li>TRAINING</li>
</ul>
</li>
<li>TEAMS
<ul class="hidden">
<li>GRANADA B </li>
<li>GFC LADIES</li>
</ul>
</li>
<li>GRANADA TV
</li>
<li><a id="tickets" href="#">TICKETS</a>
</li>
</ul>
</div>
</body>
</html>
For everyone having a similiar problem, i found a solution. just make a second div tag under the header tag which has a fixed with and margin left and right auto. this makes a div tag in the middle which won't move.
Here's the code of how i fixed it.
body{
margin: 0;
}
a{
transition: all .25s;
}
#header{
background-color: #a61b2b;
display: flex;
grid-template-columns: 20% 80%;
height: 110px;
align-content: center;
justify-content: flex-end;
}
#h2{
width: 975px;
margin-left: auto;
margin-right: auto;
padding-top: 6px;
}
#topnav li{
margin: 0px 5px;
}
#topnav{
position: relative;
font-family: 'Open Sans',arial,sans-serif;
color: #f2f2f2;
padding: 14px 16px;
font-size: 12px;
font-weight: bold;
list-style: none;
display: flex;
margin: auto;
}
#topnav a:hover {
background-color: #eb0627;
}
#topnav a{
text-decoration:none;
color: #fff
}
#topnav li:hover ul{
display: block;
list-style: none;
background: black;
color: #fff;
padding: 10px;
position: absolute;
left: 0;
}
#topnav li ul li{
margin: 10px 0px;
}
#logo{
position: relative;
width: 20%;
}
#tickets{
position: relative;
left: 480px;
background-color: #343434;
padding: 8px;
}
#search{
position: relative;
top: -30px;
left: 650px;
width: 20px;
}
#fb{
padding-right: 5px;
width: 10px;
}
.hidden{
display:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Granada Club de Fútbol | Granada </title>
</head>
<body>
<div id="header">
<div id="h2">
<img alt="Logo" id="logo" src="https://i.ibb.co/gTqYynf/logo.png">
<img id="search" src="https://cdn.discordapp.com/attachments/629756354701295616/707198877857480744/search-icon.png">
<ul id="topnav">
<li>NEWS
<ul class="hidden">
<li>CLUB
</li>
<li>FIRST TEAM
</li>
</ul>
</li>
<li>
THE CLUB
<ul class="hidden">
<li>CLUB INFORMATION
</li>
<li>STRUCTURE
</li>
</ul>
</li>
<li>
FIRST TEAM
<ul class="hidden">
<li>SQUAD </li>
<li>TRAINING</li>
</ul>
</li>
<li>TEAMS
<ul class="hidden">
<li>GRANADA B </li>
<li>GFC LADIES</li>
</ul>
</li>
<li>GRANADA TV
</li>
<li><a id="tickets" href="#"><img id="fb" src="https://image.flaticon.com/icons/svg/27/27212.svg">TICKETS</a>
</li>
</ul>
</div>
</div>
</body>
</html>
I'm pulling my hair out trying to get two div tags to align. I've read page after page of solutions on here but I've not been able to get any of them to work. I'm not sure if this is related to this being a Visual Studio project using MVC. It seems unlikely but I thought I'd mention it.
So this is for a header bar on a company website. Logo should be on the left and the menu should be on the right. It must be responsive. Here's what I've got so far:
header {
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ffffff;
}
logo {
float: none;
width: 215px;
}
nav {
width: 100%;
height: 100%;
float: left;
}
nav ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
nav li {
display: inline;
padding: 20px;
}
nav a {
text-decoration: none;
color: #171581;
padding: 8px 8px 8px 8px;
}
nav a:hover {
color: #D60053;
}
And here is the HTML
<div style="opacity: 1;" class="wrapper">
<header class="">
<div class="container">
<div class="logo">
<a href="/" class="glyphicon-log-out top-menu">
<img src="~/assets/images/sunwavelogo.png" alt="Sunwave Logo" />
</a>
</div>
<div class="hamburger"></div>
<nav>
<ul>
<li>About</li>
<li>Residential & Business</li>
<li>My Accounts Details</li>
<li>FAQ</li>
<li>Contact us</li>
</ul>
</nav>
</div>
</header>
By changing your CSS like this (note the added dot in .logo)
.logo {
float: left;
width: 215px;
}
nav {
margin-left: 215px;
}
header {
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ffffff;
}
.logo {
float: left;
width: 215px;
}
nav {
margin-left: 215px;
}
nav ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
nav li {
display: inline;
padding: 20px;
}
nav a {
text-decoration: none;
color: #171581;
padding: 8px 8px 8px 8px;
}
nav a:hover {
color: #D60053;
}
<div style="opacity: 1;" class="wrapper">
<header class="">
<div class="container">
<div class="logo">
<a href="/" class="glyphicon-log-out top-menu">
<img src="~/assets/images/sunwavelogo.png" alt="Sunwave Logo" />
</a>
</div>
<div class="hamburger"></div>
<nav>
<ul>
<li>About</li>
<li>Residential & Business</li>
<li>My Accounts Details</li>
<li>FAQ</li>
<li>Contact us</li>
</ul>
</nav>
</div>
</header>
You have many problems in your code:
logo in your css should be .logo to refer to the class of the logo.
The property float:none should be set to float:left; so it should be correctly floated.
And for the nav you shouldn't specify a width:100% because it will be forced to take the whole width of the header, you need to set it to auto for example.
This is a working snippet:
header {
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ffffff;
}
.logo {
float: left;
width: 215px;
}
nav {
width: auto;
height: 100%;
float: left;
}
nav ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
nav li {
display: inline;
padding: 20px;
}
nav a {
text-decoration: none;
color: #171581;
padding: 8px 8px 8px 8px;
}
nav a:hover {
color: #D60053;
}
<div style="opacity: 1;" class="wrapper">
<header class="">
<div class="container">
<div class="logo">
<a href="/" class="glyphicon-log-out top-menu">
<img src="~/assets/images/sunwavelogo.png" alt="Sunwave Logo" />
</a>
</div>
<div class="hamburger"></div>
<nav>
<ul>
<li>About
</li>
<li>Residential & Business
</li>
<li>My Accounts Details
</li>
<li>FAQ
</li>
<li>Contact us
</li>
</ul>
</nav>
</div>
</header>
1.Your code was badly formatted.I have formatted it.
2..logo should be set to "float:left".
3..container should have"overflow:hidden"
I have also made Your li straight.(I have made it in one line )
This contains your html formatted code,Css which You may need to change as well as add
<div style="opacity: 1;" class="wrapper">
<header class="">
<div class="container">
<div class="logo">
<a href="/" class="glyphicon-log-out top-menu">
<img src="~/assets/images/sunwavelogo.png" alt="Sunwave Logo" />
</a>
</div>
<div class="hamburger">
<nav>
<ul>
<li>About</li>
<li>Residential & Business</li>
<li>My Accounts Details</li>
<li>FAQ</li>
<li>Contact us</li>
</ul>
</nav>
</div>
</div>
</header>
</div>
Your css code:
* {
margin: 0px;
padding: 0px;
}
header{
width:700px;
margin:0 auto;
}
.container {
overflow: hidden;
}
.logo {
float: left;
margin-right:100px;
}
.hamburger {
/* float: left; */
overflow: hidden;
}
li {
float: left;
padding: 5px;
list-style-type: none;
}
Hope This Is what You had expected
Fixed div is getting down when I give margin-top to the div below it...why?
* {
margin: 0;
padding: 0;
}
.header_bg {
width: 100%;
height: 100px;
position: fixed;
background: black
}
.container {
width: 960px;
height: auto;
margin: 0 auto
}
ul.menu {
list-style: none;
}
ul.menu li {
display: inline-block
}
ul.menu li a {
text-decoration: none;
color: white
}
.content {
margin-top: 140px
}
<div class="header_bg">
<div class="container">
<ul class="menu">
<li>Home
</li>
<li>About
</li>
<li>Service
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div class="container">
<div class="content">
/* Content Goes here*/
</div>
</div>
you need to add top:0 to your .header_bg, see more about position
* {
margin: 0;
padding: 0;
}
.header_bg {
width: 100%;
height: 100px;
position: fixed;
background: black;
top:0
}
.container {
width: 960px;
height: auto;
margin: 0 auto
}
ul.menu {
list-style: none;
}
ul.menu li {
display: inline-block
}
ul.menu li a {
text-decoration: none;
color: white
}
.content {
margin-top: 140px
}
<div class="header_bg">
<div class="container">
<ul class="menu">
<li>Home
</li>
<li>About
</li>
<li>Service
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div class="container">
<div class="content">
/* Content Goes here*/
</div>
</div>
In my project
{"company","products","service","support","multimedia"}
should be left side of the content area where green color is and while clicking any of these link like
{"company","products","service","support","multimedia"}
Its drop down menu should come on right hand side
<div class="header_wrap">
<div class="header_top_wrap">
<div class="header_top">
</div>
</div>
<!--end of header top wrap -->
<div class="header_bottom_wrap">
<div class="header_bottom">
<ul class="bottom_menu">
<li class="dropdown">Company
<ul class="submenu">
<li>About Cctvcart</li>
<li>New Releases</li>
<li>Contact us</li>
</ul>
</li>
<li class="dropdown">Products
<ul class="submenu">
<li>DVR & Kits</li>
<li>Seurity Cameras</li>
<li>Spy Camreas</li>
<li>Wireless & IP Cameras</li>
<li>Accessories</li>
<li>Mini Video</li>
</ul>
</li>
<li class="dropdown">Services
<ul class="submenu">
<li>Warranty Registration</li>
<li>Professional Installation</li>
</ul>
</li>
<li class="dropdown">Support
<ul class="submenu">
<li>Support Home</li>
<li>Support Center</li>
<li>Customer Feedback</li>
<li>Contact Tech Support</li>
<li>DVR DDNS Portal</li>
</ul>
</li>
<li class="dropdown">Multimedia
<ul class="submenu">
<li>Cctvcart Videos</li>
<li>Podcasts</li>
<li>Video Instruction Guides</li>
</ul>
</li>
</ul>
</div>
</div>
<!--end of bottom wrap -->
</div>
<!--end of header wrap -->
<div class="main_wrap">
<div class="main">
</div>
<!--end of main -->
</div>
<!--end of main wrap -->
<div class="footer_wrap">
<footer></footer>
</div>
CSS-
* {
margin: 0px;
padding: 0px;
}
.header_wrap {
width: 100%;
height: 160px;
background: red;
position: relative;
}
.main_wrap {
width: 100%;
height: 1475px;
background: green;
}
.footer_wrap {
width: 100%;
height: 325px;
background: aqua;
}
.main {
width: 1000px;
height: 100%;
background: blue;
margin: auto;
}
footer {
width: 1000px;
height: 100%;
background: aqua;
margin: auto;
}
.header_top_wrap {
width: 100%;
height: 23px;
background: #ccc;
}
.header_bottom_wrap {
width: 100%;
height: 40px;
background: #06F;
position: absolute;
bottom: 0px;
left: 0px;
}
.header_top {
width: 1000px;
height: 100%;
background: purple;
margin: auto;
}
.header_bottom {
width: 1000px;
height: 100%;
background: black;
margin: auto;
}
.bottom_menu > li {
/*display: inline-block;*/
display : list-item;
}
.bottom_menu a
{
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
color: #fff;
}
.bottom_menu > li >a {
display: block;
text-decoration: none;
padding: 0px 30px;
height: 40px;
line-height: 35px;
text-align: center;
}
.bottom_menu > li:hover >a
{
background:#fff;
color:#151716;
}
.submenu a:active, .submenu a:visited{
display: block;
color: #fff;
text-decoration: none;
z-index: 21;
}
.submenu {
/*position: absolute;
display: none;
width:200px;
height:auto;
background:white;
list-style:none;*/
position: absolute;
margin: 0 auto;
left: calc(30% - 50px);
display: none;
width: 200px;
height: auto;
background: #FFF;
list-style: none;
}
.dropdown:hover > .submenu{
display: block;
}
.submenu>li>a
{
display:block;
width:100%;
height:42px;
background:black;
text-decoration:none;
line-height:58px;
padding-left:20px;
border:1px dashed white;
}
add position:relative to .bottom_menu
* {
margin: 0px;
padding: 0px;
}
.header_wrap {
width: 100%;
height: 160px;
background: red;
position: relative;
}
.main_wrap {
width: 100%;
height: 1475px;
background: green;
}
.footer_wrap {
width: 100%;
height: 325px;
background: aqua;
}
.main {
width: 1000px;
height: 100%;
background: blue;
margin: auto;
}
footer {
width: 1000px;
height: 100%;
background: aqua;
margin: auto;
}
.header_top_wrap {
width: 100%;
height: 23px;
background: #ccc;
}
.header_bottom_wrap {
width: 100%;
height: 40px;
background: #06F;
position: absolute;
bottom: 0px;
left: 0px;
}
.header_top {
width: 1000px;
height: 100%;
background: purple;
margin: auto;
}
.header_bottom {
width: 1000px;
height: 100%;
background: black;
margin: auto;
}
.bottom_menu {
list-style: none;
position: relative;
}
.bottom_menu > li {
/*display: inline-block;*/
display: list-item;
}
.bottom_menu a {
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
color: #fff;
}
.bottom_menu > li >a {
display: block;
text-decoration: none;
padding: 0px 30px;
height: 40px;
line-height: 35px;
text-align: center;
}
.bottom_menu > li:hover >a {
background: #fff;
color: #151716;
}
.submenu a:active,
.submenu a:visited {
display: block;
color: #fff;
text-decoration: none;
z-index: 21;
}
.submenu {
/*position: absolute;
display: none;
width:200px;
height:auto;
background:white;
list-style:none;*/
position: absolute;
/* margin: 0 auto; */
/* left: calc(30% - 50px); */
right: calc(20% - 50px);
display: none;
width: 200px;
height: auto;
background: #FFF;
list-style: none;
}
.dropdown:hover > .submenu {
display: block;
}
.submenu>li>a {
display: block;
width: 100%;
height: 42px;
background: black;
text-decoration: none;
line-height: 58px;
padding-left: 20px;
border: 1px dashed white;
}
<div class="header_wrap">
<div class="header_top_wrap">
<div class="header_top">
</div>
</div>
<!--end of header top wrap -->
<div class="header_bottom_wrap">
<div class="header_bottom">
<ul class="bottom_menu">
<li class="dropdown">Company
<ul class="submenu">
<li>About Cctvcart</li>
<li>New Releases</li>
<li>Contact us</li>
</ul>
</li>
<li class="dropdown">Products
<ul class="submenu">
<li>DVR & Kits</li>
<li>Seurity Cameras</li>
<li>Spy Camreas</li>
<li>Wireless & IP Cameras</li>
<li>Accessories</li>
<li>Mini Video</li>
</ul>
</li>
<li class="dropdown">Services
<ul class="submenu">
<li>Warranty Registration</li>
<li>Professional Installation</li>
</ul>
</li>
<li class="dropdown">Support
<ul class="submenu">
<li>Support Home</li>
<li>Support Center</li>
<li>Customer Feedback</li>
<li>Contact Tech Support</li>
<li>DVR DDNS Portal</li>
</ul>
</li>
<li class="dropdown">Multimedia
<ul class="submenu">
<li>Cctvcart Videos</li>
<li>Podcasts</li>
<li>Video Instruction Guides</li>
</ul>
</li>
</ul>
</div>
</div>
<!--end of bottom wrap -->
</div>
<!--end of header wrap -->
<div class="main_wrap">
<div class="main">
</div>
<!--end of main -->
</div>
<!--end of main wrap -->
<div class="footer_wrap">
<footer></footer>
</div>
I am trying to make a miniature vertical bar like in this site, where they have the navigation and the vertical bars in between each link. I have tried the solution to a previous question, but when I tried to use 'margin-left' to move the text, the bar wouldn't stay between each link, it'd to this.
HTML
<div id="nav-clearfix">
<div id="nav">
<ul class="nav-pages">
<li>HOME</li>
<li><div class="mini-divider"></div></li>
<li>ROSTER</li>
<li><div class="mini-divider"></div></li>
<li>GALLERY</li>
<li><div class="mini-divider"></div></li>
<li>ABOUT US</li>
<li><div class="mini-divider"></div></li>
<li>SPONSORS</li>
</ul>
</div>
</div>
CSS
#nav-clearfix {
width: 100%;
height: 100px;
background: #000;
}
#nav {
margin-left: 10%;
width: 100%;
}
.nav-pages {
padding-top: 10px;
}
.mini-divider {
position: absolute;
top: 26%;
bottom: 71%;
border-left: 1px solid white;
}
.nav-pages li, .mini-divider {
float: left;
margin-left: 50px;
}
CSS
.nav-pages li:not(:last-child) a:after{
content: "";
/* width: 0px; */
background: white;
margin-left: 20px;
position: absolute;
height: inherit;
color: white;
border: 1px solid white;
height: 15px;
}
Remove The Border Related HTML & CSS
<li><div class="mini-divider"></div></li>
DEMO
You can also use + css selector to give border to the next element no need to add extra element for border
added
*{
margin: 0;
padding: 0;
}
for removing default styles given by browsers
* {
margin: 0;
padding: 0;
}
#nav-clearfix {
width: 100%;
height: 100px;
background: #000;
}
#nav {
width: 100%;
}
.nav-pages {
padding-top: 10px;
text-align:center;
}
.nav-pages li {
display: inline-block;
padding: 0 10px;
}
.nav-pages li + li {
border-left: 1px solid white;
}
<div id="nav-clearfix">
<div id="nav">
<ul class="nav-pages">
<li>HOME</li>
<li>ROSTER</li>
<li>GALLERY</li>
<li>ABOUT US</li>
<li>SPONSORS</li>
</ul>
</div>
</div>
Use this .separator class for vertical separator.
CSS
ul > li{
float: left;
display: block;
position: relative;
}
ul > li > a{
padding: 4px 6px;
display: block;
}
.separator {
background: none repeat scroll 0 0 #222;
border-left: 1px solid #333;
float: left;
height: 30px;
width: 1px;
}
HTML
<ul>
<li >
<a href="#" >Home</a>
</li> <span class="separator"></span>
<li> Link 1 </li> <span class="separator"></span>
<li > Link 2 </li> <span class="separator"></span>
<li> Link3 </li> <span class="separator"></span>
<li > Contact </li>
</ul>
jsfiddle: demo