I want to create a webpage like this.So far I have written a code in html and css like this but I cannot align the top nav bar above the nav-menu items?
HTML
<body>
<div class="top-header">
<div class="header">
<div class="logo">
<div class="logo-left">
<img src="images/logo.jpg" alt="logo-truck">
</div>
<div class="logo-right">
<h3>kuncham</h3>
<p>logistic service</p>
</div>
</div>
<div class="top-bar">
<div class="top-bar__content">
<div class="top-bar-content">call:(007)123-456-7890</div>
<div class="top-bar-content">email:enquiry#domain.com</div>
<div class="top-bar-content">mon-sun:12pm to 12am</div>
<div class="top-bar-content">
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-google-plus"></i></div>
</div>
</div>
<ul class="nav__nav-bar">
<li><a class="active" href="#home">Home</a></li>
<li>about us</li>
<li>services</li>
<li>news</li>
<li>request a quote</li>
<li>contact us</li>
<li>track your item</li>
</ul>
</div>
</body>
CSS
-------------------------------------------------------------------------------------------------------
.nav__nav-bar {
flex-direction: row;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
color: black;
font-weight: bold;
margin-top: -102px;
margin-left: 184px;
}
.nav__nav-bar li {
float: left;
}
.nav__nav-bar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color:black;
font-weight:bold;
text-transform: uppercase;
}
.nav__nav-bar li a:hover {
background-color: yellow;
}
.top-bar__content{
display:inline-block;
}
.top-header {
border:2px solid black;
background-color: black;
}
.header {
background-color: #fff;
height: 80px;
width: 90%;
}
.logo {
padding: 17px;
}
.logo .logo-left {
float: left;
font-size:50px;
color: darkorange;
padding-right: 5px;
}
.logo .logo-right h3 {
padding: 0;
margin: 0;
font-family: serif;
}
.logo .logo-right p {
line-height: 0;
}
.top-bar {
border: 2px solid red;
display: inline-grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
width: 76%;
margin-left: 280px;
height: 52px;
margin-top: -100px;
}
.top-bar-content{
display:inline;
}
The top-nav bar is not getting aligned at the top.I tried using flex but it does not work properly. Also the menu items are not aligned properly.Can anyone help me regarding this issue?
Codepen
<div class="top-header">
<div class="header">
<div class="logo">
<div class="logo-left">
<img src="images/logo.jpg" alt="logo-truck">
</div>
<div class="logo-right">
<h3>kuncham</h3>
<p>logistic service</p>
</div>
</div>
<div class="header-right">
<div class="top-bar">
<div class="top-bar__content">
<div class="top-bar-content">call:(007)123-456-7890</div>
<div class="top-bar-content">email:enquiry#domain.com</div>
<div class="top-bar-content">mon-sun:12pm to 12am</div>
<div class="top-bar-content">
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-google-plus"></i></div>
</div>
</div>
<ul class="nav__nav-bar">
<li><a class="active" href="#home">Home</a></li>
<li>about us</li>
<li>services</li>
<li>news</li>
<li>request a quote</li>
<li>contact us</li>
<li>track your item</li>
</ul>
</div>
</div>
`.top-header {
border: 2px solid black;
background: black;
}
.header {
background: white;
height: 80px;
width: 100%;
display: flex;
}
.logo {
padding: 0 17px;
flex: 0 0 400px;
align-self: center;
}
.header-right {
flex: auto;
padding: 0 0 0 20px;
}
.top-bar {
background: #000000;
color: white;
padding: 8px 18px;
border-radius: 0 0 0 8px;
}
.nav__nav-bar {
margin: 0;
float: none;
list-style: none;
text-align: right;
display: flex;
padding: 0;
}
.top-bar__content {
display: flex;
}
.top-bar-content {
padding: 0 16px 0 0;
}
.nav__nav-bar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color: black;
font-weight: bold;
text-transform: uppercase;
}
.nav__nav-bar li a:hover {
background: yellow;
}
.logo .logo-left {
float: left;
font-size:50px;
color: darkorange;
padding-right: 5px;
}
.logo .logo-right h3 {
padding: 0;
margin: 0;
font-family: serif;
}
.logo .logo-right p {
line-height: 0;
}`
[https://codepen.io/kinjalpatel2207/pen/MWwapLz][1]
Related
I have written some code in CSS and HTML but float is not working. I want the site name and logo at left side and menu or nav at the right side of the navbar.
https://codepen.io/asfafasa/pen/NWWWzgd
Html:
<body>
<div class="page-wrapper">
<header>
<div class="banner-home">
<h1>
<div class="homepage"> <a href="index.html" title="CrazyPirates" target="new">
<span class="crazy"><img src="images/Logomakr_5MZbkZ.png" alt="" width="30px" class="logo">Sitename & logo </span>
</a>
</div>
</h1>
<div id="open">
<a href="#" onClick="openMenu()">
<i class="fas fa-ice-cream"></i>
</a>
</div>
<nav>
<div class="menu">
<div class="button">
<ul>
<!--<a href="#" onClick="closeMenu()">
<i class="fas fa-times">
</i>
</a>-->
<li>
<div class="homePage_re rd_button">
<a href="index.html" class="navigation_home">
Home
</a></div>
</li>
<li>
<div class="crazyGallary rd_button">
<a href="gallary.html">
Gallay
</a></div>
</li>
<li>
<div class="aboutUs rd_button">
<a href="aboutUs.html">
About Us
</a></div>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
<div class="space"></div>
CSS:
*{
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
div{
display: block;
}
body{
margin: 0;
font-size: 14px;
}
.space{
height: 50px;
}
.page-wrapper{
padding: 0 50px;
}
header{
background: darkgrey;
height: 120px;
color: azure;
z-index: 1;
margin: 0 auto;
padding: 5px 0;
text-align: center;
display: block;
}
header *{
display: inline-block;
}
.banner-home{
align-items: center;
overflow: auto;
}
.homepage{
padding-left: 20px;
float: left;
}
.menu{
display: inline-block;
float: right;
}
.rd_button a{
text-decoration: none;
display: block;
}
.rd_button{
list-style-type: none;
display: block;
}
.button a{
color: #fff;
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
padding: 0 0 0 50px;
font-size: 14px;
z-index: 1;
}
.button{
float: right;
}
.button a:hover{
background-color: tomato;
color: #fff;
}
.button a:hover:after{
transform: translateY(-50%) rotate(-35deg);
}
nav{
margin: 0 auto;
text-align: right;
float: right;
}
.logo{
display: inline;
height: 100%;
}
.banner-home h1 a{
text-decoration: none;
}
nav ul{
list-style: none;
padding: 0;
margin: 0;
}
main{
text-align: center;
}
The menu items should be on the right side of the bar while the logo and site name should be on the left side.
2 things:
.banner-home should have the float:left property
.banner-home div was not closed properly
Updated pen: https://codepen.io/david-somekh/pen/yLLLEEK
<body>
<style>
*{
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
div{
display: block;
}
body{
margin: 0;
font-size: 14px;
}
.space{
height: 50px;
}
.page-wrapper{
padding: 0 50px;
}
header{
background: darkgrey;
height: 120px;
color: azure;
z-index: 1;
margin: 0 auto;
padding: 5px 0;
text-align: center;
display: block;
}
header *{
display: inline-block;
}
.banner-home{
float:left;
align-items: center;
overflow: auto;
}
.homepage{
padding-left: 20px;
float: left;
}
.menu{
display: inline-block;
float: right;
}
.rd_button a{
text-decoration: none;
display: block;
}
.rd_button{
list-style-type: none;
display: block;
}
.button a{
color: #fff;
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
padding: 0 0 0 50px;
font-size: 14px;
z-index: 1;
}
.button{
float: right;
}
.button a:hover{
background-color: tomato;
color: #fff;
}
.button a:hover:after{
transform: translateY(-50%) rotate(-35deg);
}
nav{
margin: 0 auto;
text-align: right;
float: right;
}
.logo{
display: inline;
height: 100%;
}
.banner-home h1 a{
text-decoration: none;
}
nav ul{
list-style: none;
padding: 0;
margin: 0;
}
main{
text-align: center;
}
</style>
<div class="page-wrapper">
<header>
<div class="banner-home">
<h1>
<div class="homepage"> <a href="index.html" title="CrazyPirates" target="new">
<span class="crazy"><img src="images/Logomakr_5MZbkZ.png" alt="" width="30px" class="logo">Sitename & logo </span>
</a>
</div></div>
</h1>
<div id="open">
<a href="#" onClick="openMenu()">
<i class="fas fa-ice-cream"></i>
</a>
</div>
<nav>
<div class="menu">
<div class="button">
<ul>
<!--<a href="#" onClick="closeMenu()">
<i class="fas fa-times">
</i>
</a>-->
<li>
<div class="homePage_re rd_button">
<a href="index.html" class="navigation_home">
Home
</a></div>
</li>
<li>
<div class="crazyGallary rd_button">
<a href="gallary.html">
Gallay
</a></div>
</li>
<li>
<div class="aboutUs rd_button">
<a href="aboutUs.html">
About Us
</a></div>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
<div class="space"></div>
I've been going around the web trying to find an answer to how to center my navbar but none of the solution worked.
The code below will show what I have so far with both HTML and CSS.
header {
background: #ffffff;
color: #000000;
padding-top: 30px;
min-height: 70px;
border-bottom: #000000 3px solid;
}
header a {
color: #000000;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: center;
display: inline;
padding: 0 20px 0 20px;
}
header nav {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
header #smcontent {
float: left;
}
header #smcontent a {
margin: 0;
}
header #smcontent img {
width: 20px;
}
header .logoimg .center {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
<header>
<div class="container">
<div id="smcontent">
<a href="https://twitter.com/">
<img src="./images/twitter.png">
</a>
<a href="https://facebook.com/">
<img src="./images/facebook.png">
</a>
</div>
<div class="logoimg">
<a href="index.html">
<img class="center" src="./images/portfolio.png">
</a>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Story</li>
<li>Product</li>
<li>Clinique</li>
<li>Promotions</li>
</ul>
</nav>
</header>
This is how it looks like right now:
I have also noticed that in CSS, when I did "float: center;" it had no difference with when I did "float: left;". But when I did "float: right;" it would shift to the right.
ul {
margin: 0 auto;
text-align: center;
}
header {
background: #ffffff;
color: #000000;
padding-top: 30px;
min-height: 70px;
border-bottom: #000000 3px solid;
}
header a {
color: #000000;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: center;
display: inline;
padding: 0 20px 0 20px;
}
header nav {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin: 0 auto;
}
header #smcontent a {
margin: 0;
}
header #smcontent img {
width: 20px;
}
header .logoimg .center {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header>
<div class="container">
<div id="smcontent">
<a href="https://twitter.com/">
<img src="./images/twitter.png">
</a>
<a href="https://facebook.com/">
<img src="./images/facebook.png">
</a>
</div>
<div class="logoimg">
<a href="index.html">
<img class="center" src="./images/portfolio.png">
</a>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Story</li>
<li>Product</li>
<li>Clinique</li>
<li>Promotions</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
I have removed the below css from your code
header #smcontent {
float: left;
}
and added margin: 0 auto; text-align: center; to the ul
Try absolute position with float none, left 50% and a left translate of 50% to center your nav bar perfectly.
CSS: add
header .newCenter {
float: none;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
HTML: add
<nav class="newCenter">
<ul>
<li class="current">Home</li>
<li>Story</li>
<li>Product</li>
<li>Clinique</li>
<li>Promotions</li>
</ul>
</nav>
Float only applies to left and right. I added display: grid and justify-content: center to your header. I removed float: left; in header #smcontent.
header {
background: #ffffff;
color: #000000;
padding-top: 30px;
min-height: 70px;
border-bottom: #000000 3px solid;
display: grid; //or flex
justify-content: center;
}
header a {
color: #000000;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
display: inline;
padding: 0 20px;
}
header nav {
margin: 10px auto 0;
}
header #smcontent a {
margin: 0;
}
header #smcontent img {
width: 20px;
}
header .logoimg .center {
display: block;
margin: 0 auto;
width: 20%;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
<header>
<div class="container">
<div id="smcontent">
<a href="https://twitter.com/">
<img src="./images/twitter.png">
</a>
<a href="https://facebook.com/">
<img src="./images/facebook.png">
</a>
</div>
<div class="logoimg">
<a href="index.html">
<img class="center" src="./images/portfolio.png">
</a>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Story</li>
<li>Product</li>
<li>Clinique</li>
<li>Promotions</li>
</ul>
</nav>
</header>
To align text horizontally center use text-align:center. In your to align nav bar content center just add text-align:center to header nav
header nav {
margin-left: auto;
text-align:center;
margin-right: auto;
margin-top: 10px;
}
In below code snippet I have added some images for demonstration purpose.
header {
background: #ffffff;
color: #000000;
padding-top: 30px;
min-height: 70px;
border-bottom: #000000 3px solid;
}
header a {
color: #000000;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: center;
display: inline;
padding: 0 20px 0 20px;
}
header nav {
margin-left: auto;
text-align:center;
margin-right: auto;
margin-top: 10px;
}
header #smcontent {
float: left;
}
header #smcontent a {
margin: 0;
}
header #smcontent img {
width: 20px;
}
header .logoimg .center {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
<header>
<div class="container">
<div id="smcontent">
<a href="https://twitter.com/">
<img src="https://image.shutterstock.com/image-photo/kiev-ukraine-may-26-2015twitter-260nw-281505518.jpg">
</a>
<a href="https://facebook.com/">
<img src="https://image.shutterstock.com/image-photo/kiev-ukraine-april-27-2015-260nw-278925056.jpg">
</a>
</div>
<div class="logoimg">
<a href="index.html">
<img class="center" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png">
</a>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Story</li>
<li>Product</li>
<li>Clinique</li>
<li>Promotions</li>
</ul>
</nav>
</div>
</header>
<div id="hero" class="wrapper">
<div id="hero-left">
<div id="selectors-div">
<span>Some text</span>
</div>
</div>
<div id="hero-right">
</div>
</div>
As you can see, #hero-left, comes before #hero-right, but for some reason, #hero-left is being pushed down all the way to the bottom until the text in the <span> aligns with the baseline of #hero-right.
I thought it was very odd behaviour since this hasn't happened to me before, so I started messing around with setting vertical-align: top, but even stranger is that nothing happened when I set that property value in any of the relevant elements... eventually, I randomly tried placing that same property value into #hero-right, and Voila... by setting that value to the latter element, the former is affected...
Why does this happen? I was taught that vertical-align only affects itself and inherently the position of its children (based off itself), yet it won't affect itself, its parent, its parent's parent... What am I missing?
WORKING EXAMPLE:
body {
font-family: 'Kanit', sans-serif;
margin: 0;
}
.wrapper {
width: 80%;
margin: 0 auto;
}
#header {
height: 100px;
display: flex;
}
#header-left {
margin: auto 0 auto 25px;
}
#header-left>img {
height: 50px;
margin: auto 0;
}
#header-right {
margin: auto 0 auto auto;
}
#header-list {
list-style-type: none;
display: inline-block;
margin: auto 0;
}
#header-list>li {
display: inline;
font-weight: bold;
font-size: 13px;
}
#header-list>li>a {
text-decoration: none;
color: black;
}
#header-list>li>a:hover {
color: #2C85D0;
}
#vertical-spacer {
height: 26px;
width: 1px;
margin: 0px 5px;
display: inline-block;
background-color: darkgray;
vertical-align: middle
}
#navbar {
height: 60px;
background-color: #252835;
}
.menu-left {
margin: 0;
padding: 0;
height: 100%;
font-size: 0;
}
.menu-left>li {
text-decoration: none;
display: inline-block;
height: 100%;
}
.menu-item-div {
height: 100%;
width: 200px;
border-right: 1px solid darkgray;
}
.menu-item-div>span {
line-height: 60px;
margin-left: 20px;
font-size: 18px;
color: white;
}
#section-type {
height: 100px;
background-color: darkgrey;
}
#section-type>span {
line-height: 100px;
margin-left: 20px;
font-size: 35px;
}
#hero {
height: 1000px;
background-color: red;
font-size: 0;
}
#hero-left {
display: inline-block;
width: 20%;
height: 100%;
background-color: blue;
font-size: 13px;
}
#hero-right {
display: inline-block;
width: 70%;
height: 100%;
background-color: orange;
font-size: 18px;
}
#selectors-div {
height: 100%;
}
#selectors-div>span {}
<link href="https://fonts.googleapis.com/css?family=Kanit" rel="stylesheet">
<div id="header" class="wrapper">
<div id="header-left">
<img src="https://pcbuilding2017.files.wordpress.com/2017/03/pcpartpicker.png?w=669&h=144&crop=1" alt="">
</div>
<div id="header-right">
<ul id="header-list">
<li><span style="font-weight: normal;">Welcome</span></li>
<li>Username</li>
<li><span id="vertical-spacer"></span></li>
<li>Inventory</li>
<li><span id="vertical-spacer"></span></li>
<li>Favorite Parts</li>
<li><span id="vertical-spacer"></span></li>
<li>Saved Parts Lists</li>
<li><span id="vertical-spacer"></span></li>
<li>Log Out</li>
<li><span id="vertical-spacer"></span></li>
<li>Canada</li>
<li><span id="vertical-spacer"></span></li>
</ul>
</div>
</div>
<div id="navbar" class="wrapper">
<ul class="menu-left">
<li>
<div class="menu-item-div">
<span>Desktop</span>
</div>
</li>
<li>
<div class="menu-item-div">
<span>Laptop</span>
</div>
</li>
<li>
<div class="menu-item-div">
<span>All-in-One</span>
</div>
</li>
<li>
<div class="menu-item-div">
<span>Mini</span>
</div>
</li>
</ul>
</div>
<div id="section-type" class="wrapper">
<span>Choose a Desktop</span>
</div>
<div id="hero" class="wrapper">
<div id="hero-left">
<div id="selectors-div">
<span>a</span>
</div>
</div>
<div id="hero-right" style="vertical-align: top;">
</div>
</div>
BROKEN EXAMPLE
body {
font-family: 'Kanit', sans-serif;
margin: 0;
}
.wrapper {
width: 80%;
margin: 0 auto;
}
#header {
height: 100px;
display: flex;
}
#header-left {
margin: auto 0 auto 25px;
}
#header-left>img {
height: 50px;
margin: auto 0;
}
#header-right {
margin: auto 0 auto auto;
}
#header-list {
list-style-type: none;
display: inline-block;
margin: auto 0;
}
#header-list>li {
display: inline;
font-weight: bold;
font-size: 13px;
}
#header-list>li>a {
text-decoration: none;
color: black;
}
#header-list>li>a:hover {
color: #2C85D0;
}
#vertical-spacer {
height: 26px;
width: 1px;
margin: 0px 5px;
display: inline-block;
background-color: darkgray;
vertical-align: middle
}
#navbar {
height: 60px;
background-color: #252835;
}
.menu-left {
margin: 0;
padding: 0;
height: 100%;
font-size: 0;
}
.menu-left>li {
text-decoration: none;
display: inline-block;
height: 100%;
}
.menu-item-div {
height: 100%;
width: 200px;
border-right: 1px solid darkgray;
}
.menu-item-div>span {
line-height: 60px;
margin-left: 20px;
font-size: 18px;
color: white;
}
#section-type {
height: 100px;
background-color: darkgrey;
}
#section-type>span {
line-height: 100px;
margin-left: 20px;
font-size: 35px;
}
#hero {
height: 1000px;
background-color: red;
font-size: 0;
}
#hero-left {
display: inline-block;
width: 20%;
height: 100%;
background-color: blue;
font-size: 13px;
}
#hero-right {
display: inline-block;
width: 70%;
height: 100%;
background-color: orange;
font-size: 18px;
}
#selectors-div {
height: 100%;
}
#selectors-div>span {}
<link href="https://fonts.googleapis.com/css?family=Kanit" rel="stylesheet">
<div id="header" class="wrapper">
<div id="header-left">
<img src="https://pcbuilding2017.files.wordpress.com/2017/03/pcpartpicker.png?w=669&h=144&crop=1" alt="">
</div>
<div id="header-right">
<ul id="header-list">
<li><span style="font-weight: normal;">Welcome</span></li>
<li>Username</li>
<li><span id="vertical-spacer"></span></li>
<li>Inventory</li>
<li><span id="vertical-spacer"></span></li>
<li>Favorite Parts</li>
<li><span id="vertical-spacer"></span></li>
<li>Saved Parts Lists</li>
<li><span id="vertical-spacer"></span></li>
<li>Log Out</li>
<li><span id="vertical-spacer"></span></li>
<li>Canada</li>
<li><span id="vertical-spacer"></span></li>
</ul>
</div>
</div>
<div id="navbar" class="wrapper">
<ul class="menu-left">
<li>
<div class="menu-item-div">
<span>Desktop</span>
</div>
</li>
<li>
<div class="menu-item-div">
<span>Laptop</span>
</div>
</li>
<li>
<div class="menu-item-div">
<span>All-in-One</span>
</div>
</li>
<li>
<div class="menu-item-div">
<span>Mini</span>
</div>
</li>
</ul>
</div>
<div id="section-type" class="wrapper">
<span>Choose a Desktop</span>
</div>
<div id="hero" class="wrapper">
<div id="hero-left">
<div id="selectors-div">
<span>a</span>
</div>
</div>
<div id="hero-right">
</div>
</div>
</body>
</html>
body {
margin: 0px;
font-family: verdana, georgia;
overflow-x: hidden;
}
/*****************Blocks*********************/
.navbar {
background-color: #fff;
height: 90px;
width: 100%;
top:0px;
margin-left: 250px;
}
.topContent {
background-color: #eceff1;
height: 200px;
width:100%;
margin-left: 250px;
}
.mainContent {
background-color: #e5e5e5;
height: 800px;
width:800px;
margin-left: 250px;
}
.leftSideNav1 {
height: 100%;
width: 80px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #37474f;
}
.leftSideNav2 {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 80px;
background-color: #263238;
text-decoration: none;
}
/*****************Elements*********************/
.leftSideNav1__lists a{
font-size: 10px;
color: #eee;
padding-top: 30px;
margin-left: 10px;
text-decoration: none;
}
.leftSideNav2 {
font-size: 12px;
}
.leftSideNav2 .leftSideNav2__lists > ul{
padding-top: 80px;
}
.leftSideNav2__lists ul {
list-style: none;
padding-bottom: 10px;
}
<body>
<div class="container">
<div class="navbar">
</div>
<div class="topContent">
</div>
<div class="mainContent">
</div>
<div class="leftSideNav1">
<div class="leftSideNav1__lists">
<!-- <i class="fa fa-home w3-large"></i> -->
<i class="Tiny material-icons">home</i><br>
Home<br>
<i class="material-icons">pause</i><br>
YouTubers<br>
<i class="material-icons">assignment</i><br>
Campaigns<br>
<i class="material-icons">message</i><br>
Messages<br>
<i class="material-icons">pause</i><br>
Videos<br>
</div>
</div>
<div class="leftSideNav2">
<div class="leftSideNav2__lists">
<ul class="leftSideNav2__list1">Videos
<li>Action Required</li>
<li>Fund YouTuber</li>
<li>Hired & Funded</li>
<li>Edit Requested</li>
</ul>
<ul class="leftSideNav2__list2">Proposals
<li>New</li>
<li>Declined</li>
<li>Changes Required</li>
<li>Changes Declined</li>
</ul>
<ul class="leftSideNav2__list3">Approvals
<li>Waiting for Approval</li>
<li>Approved / Completed</li>
<li>Video in Dispute</li>
</ul>
</div>
</div>
</div>
</body>
Codepen
I have an issue with the anchor links and lists in the sidebars. I am unable to align the anchor links and lists in the 2 sidebars. I am trying to apply the CSS properties but they aren't applying perhaps due to improper hierarchical style of applying.
Currently, this is how it looks:
But this is how I want it to look:
you can do it setting the parent container
.leftSideNav1__lists{
text-align:center;
}
an also removing the left margin from each a tag..
codepen
body {
margin: 0px;
font-family: verdana, georgia;
overflow-x: hidden;
}
/*****************Blocks*********************/
.navbar {
background-color: #fff;
height: 90px;
width: 100%;
top:0px;
margin-left: 250px;
}
.topContent {
background-color: #eceff1;
height: 200px;
width:100%;
margin-left: 250px;
}
.mainContent {
background-color: #e5e5e5;
height: 800px;
width:800px;
margin-left: 250px;
}
.leftSideNav1 {
height: 100%;
width: 80px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #37474f;
}
.leftSideNav2 {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 80px;
background-color: #263238;
text-decoration: none;
}
/*****************Elements*********************/
.leftSideNav1__lists a{
display: block;
text-align: center;
font-size: 10px;
color: #eee;
text-decoration: none;
margin-bottom: 20px;
}
.leftSideNav2 {
font-size: 12px;
}
.leftSideNav2 .leftSideNav2__lists > ul{
}
.leftSideNav2__lists ul {
list-style: none;
}
.leftSideNav1__lists > i{
display: block;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<body>
<div class="container">
<div class="navbar">
</div>
<div class="topContent">
</div>
<div class="mainContent">
</div>
<div class="leftSideNav1">
<div class="leftSideNav1__lists">
<!-- <i class="fa fa-home w3-large"></i> -->
<i class="Tiny material-icons">home</i>
Home
<i class="material-icons">pause</i>
YouTubers
<i class="material-icons">assignment</i>
Campaigns
<i class="material-icons">message</i>
Messages
<i class="material-icons">pause</i>
Videos
</div>
</div>
<div class="leftSideNav2">
<div class="leftSideNav2__lists">
<ul class="leftSideNav2__list1">Videos
<li>Action Required</li>
<li>Fund YouTuber</li>
<li>Hired & Funded</li>
<li>Edit Requested</li>
</ul>
<ul class="leftSideNav2__list2">Proposals
<li>New</li>
<li>Declined</li>
<li>Changes Required</li>
<li>Changes Declined</li>
</ul>
<ul class="leftSideNav2__list3">Approvals
<li>Waiting for Approval</li>
<li>Approved / Completed</li>
<li>Video in Dispute</li>
</ul>
</div>
</div>
</div>
</body>
Try this.
Tried to google this but didn't find anything that helped me.
So I have button-text on the left and right but I want to center an image inside the top bar.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f3f3f3;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #3744a2;
}
<ul>
<li>home</li>
<li>news</li>
<li>services</li>
<li><a class="active" href="#">prices</a></li>
<li>contat</li>
<li><a class="image" href="#"><img src="https://dummyimage.com/150X38/000/fff"></a></li>
<li style="float:right"><i class="fa fa-envelope" aria-hidden="true"></i> enter#email.here</li>
<li style="float:right"><i class="fa fa-phone" aria-hidden="true"></i> 123 123 123</li>
</ul>
so what I basicly want is the image (class="image") to be centered, but the rest as it is.
Thanks alot!
Do it like this
Remove image class from a tag and give image class to it's parent li and try this with this example. it will helps you
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f3f3f3;
text-align: center;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #3744a2;
}
li.image {
float: none;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>home</li>
<li>news</li>
<li>services</li>
<li><a class="active" href="#">prices</a></li>
<li>contat</li>
<li class='image'><a class="" href="#"><img src="../image/image.png"></a></li>
<li style="float:right"><i class="fa fa-envelope" aria-hidden="true"></i> enter#email.here</li>
<li style="float:right"><i class="fa fa-phone" aria-hidden="true"></i> 123 123 123</li>
</ul>
a.image {
display: block;
margin-left: auto;
margin-right: auto
}
try adding that code in your css file . Also try have a look here
it has more info about centering things .
I used display:flex and flex property. by setting display: flex:0 I'm telling the browser I want this element take just the place he need, and with flex:1 on a single element I'm telling that I want it to take all the possible place
div.nav {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f3f3f3;
display: flex;
}
div.left-part, div.right-part {
flex: 0;
display:inline-block;
white-space: nowrap;
}
div.center-part {
flex: 1;
text-align: center;
}
div.nav-button {
display:inline-block;
}
div.nav-button a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
div.nav-button a:hover:not(.active) {
background-color: #ddd;
}
div.nav-button a.active {
color: white;
background-color: #3744a2;
}
<div class="nav">
<div class="left-part"><div class="nav-button">home</div>
<div class="nav-button">news</div>
<div class="nav-button">services</div>
<div class="nav-button"><a class="active" href="#">prices</a></div>
<div class="nav-button">contat</div>
</div>
<div class="center-part">
<div class="nav-button"><a class="image" href="#"><img src="../image/image.png"></a></div>
</div>
<div class="right-part">
<div class="nav-button"><i class="fa fa-envelope" aria-hidden="true"></i> enter#email.here</div>
<div class="nav-button"><i class="fa fa-phone" aria-hidden="true"></i> 123 123 123</div>
</div>
</div>