Here is the fiddle: https://jsfiddle.net/gnsho1br/2/
There were similar questions that suggests to set display to inline-block but I have done that. My container is col-1. I also tried to give my logo class of float: left but then the menu is off-center (maybe the left margin starts at the end of the logo???).
Use display: flex instead. If you want items to be centered, try align-items: center, justify-items: center. Refer to Flexbox for more info.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
li,
a,
button {
font-family: "Elliot-Sans", sans-serif;
font-weight: 300;
font-size: 14px;
color: #777777;
text-decoration: none;
}
#wrapper {
margin: 0 15px;
padding: 15px 0;
position: relative;
}
.row {
max-width: 65%;
margin: 0 auto;
padding: 75px 0;
position: relative;
}
.col-1 {
width: 100%;
padding: 20px;
display: flex;
}
#header {
height: 71px !important;
overflow: visible;
z-index: 9999;
width: 100%;
position: absolute !important;
}
#header .row {
padding: 0;
}
#header ul {
text-align: center;
}
.logo {
width: 150px;
height: auto;
cursor: pointer;
margin-right: auto;
background-color: inherit;
display: inline-block;
vertical-align: middle;
}
#topNavBar {
list-style: none;
margin: 0;
background-color: #ffffff;
}
ul{
display: flex;
}
#topNavBar li {
display: inline-block;
padding: 0px 20px;
background-color: inherit;
vertical-align: middle;
}
#topNavBar li a {
transition: all 0.2s ease 0s;
font-weight: 400;
text-transform: uppercase;
}
#topNavBar li a:hover {
color: #04ad9e;
text-decoration: none;
padding-bottom: 4px;
border-bottom: 3px solid #04ad9e;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
rel="stylesheet"
/> -->
<link
href="https://fonts.googleapis.com/css2?family=Rajdhani:wght#300;400&display=swap"
rel="stylesheet"
/>
<link
href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css"
rel="stylesheet"
/>
<link href="style.css" rel="stylesheet" />
<title>Title</title>
</head>
<body>
<div id="wrapper">
<header id="heroImage">
<div id="header" class="navCollapse">
<div class="row clearfix">
<div class="col-1">
<div class="logo">
<img class="logo" src="image.png" alt="logo" />
</div>
<nav id="topNavBar">
<ul>
<li>Home</li>
<li>About</li>
<li>Read</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
</div>
Related
I am trying to center everything vertically inside the container of the navbar, called (header-area) such that everything is inline. At the moment the img, left navigation and right navigation are all aligned differently in the container.
An alternative solution is welcome, too.
/*-----Global Styles-----*/
html {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
border: 0;
}
body {
font-family: 'HKGroteskRegular';
}
*, *:before, *:after {
box-sizing: inherit;
}
/*--------------Header-Navigation--------------*/
.header-area{
position: relative;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
padding: 9px 97px 26px 98px;
height: 105px;
margin: 0 auto;
}
.logo-wrap{
float: left;
width: auto;
}
.main-logo{
width: 212px;
float: left;
}
.main-logo a{
float: left;
}
.main-logo img{
width: 100%;
}
.main-nav{
float: left;
margin: 0;
}
.main-nav ul li{
display: inline-block;
padding: 0 25px;
position: relative;
}
.main-nav ul li:after{
position: absolute;
top: 50%;
right: 0;
width: 24px;
height: 2px;
}
.main-nav ul li:last-child{
padding-right: 21px;
}
.main-nav ul li:last-child:after{
display: none;
}
.main-nav ul li a{
color: #0c225f;
padding: 2.5px 0;
text-decoration: none;
font-family: 'HKGroteskBold';
font-size: 19px;
}
.header-right{
float: right;
width: auto;
display: flex;
align-items: center;
}
.header-right a{
vertical-align: middle;
display: flex;
align-items: center;
text-decoration: none;
}
.phone {
padding: 0 20px 0 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/hk-grotesk" type="text/css"/>
<link rel="stylesheet" href="css/untitled.css">
<title>Document</title>
</head>
<body>
<div class="mainwrap">
<!--Header-->
<header class="header-area">
<div class="logo-wrap">
<div class="main-logo">
<img src="Assets/logo.png" alt="pd-logo">
</div>
</div>
<div class="header-left">
<nav class="main-nav">
<ul id="menu-main-menu" class="menu">
<li>Who We Are</li>
<li>Products</li>
<li>Stories</li>
<li>Career</li>
<li>Contact</li>
</ul>
</nav>
<div class="header-right">
Give us a Call<img class="phone" src="Assets/Phone.svg">0123456789
</div>
</div>
</header>
</div>
</body>
</html>
Add the following styles to menu-main-menu ul
display: flex;
align-items: center;
Your .logo-wrap value has a float value of left, so you'll want to make sure the other children have a similar quality to appear inline. To do this, add a float: left; styling with your header-left class. For this example, I shrunk the font size and padding to demonstrate the new float value and padding.
I highly recommend researching 'flex' to align your navigation. With flex, you can treat each nav item (logo, links, buttons) as child, and align them vertically with justify-content: center;. This way you won't have to worry about floats or padding issues.
html {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
border: 0;
}
body {
font-family: 'HKGroteskRegular';
}
*, *:before, *:after {
box-sizing: inherit;
}
/*--------------Header-Navigation--------------*/
.header-area{
position: relative;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
padding: 9px 97px 26px 98px;
height: 105px;
margin: 0 auto;
}
.header-left {
float: left; /* added */
padding: 24px 0; /* updated */
}
.logo-wrap{
float: left;
width: auto;
}
.main-logo{
width: 48px; /* updated */
float: left;
padding: 24px 0; /* added */
}
.main-logo a{
float: left;
}
.main-logo img{
width: 100%;
}
.main-nav{
float: left;
margin: 0;
}
.main-nav ul {
padding: 0; /* added */
margin: 0; /* added */
}
.main-nav ul li{
display: inline-block;
padding: 0 6px;
position: relative;
}
.main-nav ul li:after{
position: absolute;
top: 50%;
right: 0;
width: 24px;
height: 2px;
}
.main-nav ul li:last-child{
padding-right: 21px;
}
.main-nav ul li:last-child:after{
display: none;
}
.main-nav ul li a{
color: #0c225f;
padding: 2.5px 0;
text-decoration: none;
font-family: 'HKGroteskBold';
font-size: 8px;
}
.header-right {
float: right;
width: auto;
display: flex;
align-items: center;
}
.header-right a {
vertical-align: middle;
display: flex;
align-items: center;
text-decoration: none;
font-size: 8px; /* added */
}
.phone {
padding: 0 20px 0 10px;
}
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/hk-grotesk" type="text/css"/>
<link rel="stylesheet" href="css/untitled.css">
<title>Document</title>
</head>
<body>
<div class="mainwrap">
<!--Header-->
<header class="header-area">
<div class="logo-wrap">
<div class="main-logo">
<img src="Assets/logo.png" alt="pd-logo">
</div>
</div>
<div class="header-left">
<nav class="main-nav">
<ul id="menu-main-menu" class="menu">
<li>Who We Are</li>
<li>Products</li>
<li>Stories</li>
<li>Career</li>
<li>Contact</li>
</ul>
</nav>
<div class="header-right">
Give us a Call<img class="phone" src="Assets/Phone.svg">0123456789
</div>
</div>
</header>
</div>
</body>
</html>
you achieve this using display: flex;align-items:center;. in ..header-area.
please run snippet in full page mode
/*-----Global Styles-----*/
html {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
border: 0;
}
body {
font-family: 'HKGroteskRegular';
}
*, *:before, *:after {
box-sizing: inherit;
}
/*--------------Header-Navigation--------------*/
.header-area{
position: relative;
width: 100%;
z-index: 9999;
padding: 9px 10px 26px 10px;
height: 105px;
margin: 0 auto;
display: flex;
align-items:center;
}
.main-logo img{
width: 100%;
}
.menu {
padding-left: 0;
display: flex;
}
.main-nav{
margin: 0;
}
.main-nav ul li{
display: inline-block;
padding: 0 25px;
position: relative;
}
.main-nav ul li:after{
position: absolute;
top: 50%;
right: 0;
width: 24px;
height: 2px;
}
.main-nav ul li:last-child{
padding-right: 21px;
}
.main-nav ul li:last-child:after{
display: none;
}
.main-nav ul li a{
color: #0c225f;
padding: 2.5px 0;
text-decoration: none;
font-family: 'HKGroteskBold';
font-size: 12px;
}
.header-right{
width: auto;
display: flex;
align-items: center;
margin-left:auto;
font-size: 12px;
}
.header-right a{
vertical-align: middle;
text-decoration: none;
}
.phone {
padding: 0 20px 0 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/hk-grotesk" type="text/css"/>
<link rel="stylesheet" href="css/untitled.css">
<title>Document</title>
</head>
<body>
<div class="mainwrap">
<!--Header-->
<header class="header-area">
<div class="logo-wrap">
<div class="main-logo">
<img src="Assets/logo.png" alt="pd-logo">
</div>
</div>
<div class="header-left">
<nav class="main-nav">
<ul id="menu-main-menu" class="menu">
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</nav>
</div>
<div class="header-right">
Give us a Call<img class="phone" src="Assets/Phone.svg">0123456789
</div>
</header>
</div>
</body>
</html>
I changed your font-size for demonstration purpose
I am just getting back to working with websites, and cannot for the life of me center this navigation bar. I have floated the header over to the left, and feel like I have tried every possibly property, but it just will not center. Any help would be very appreciated.
Not centered NavBar:
.container {
margin: 0 auto;
background-color: #fff;
}
.header-heading {
float: left;
padding-top: 8px;
padding-left: 5px;
color: #ddd;
font-size: 30px;
}
.nav-bar {
background: #000;
padding: 0;
width: 100%;
}
.nav {
margin: auto;
padding: 0;
list-style: none;
text-align: center;
width: 100%;
}
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Web Report Demo</title>
<styles></styles>
<link rel="stylesheet" href="ed.css">
</head>
<body>
<div class="container">
<h1 class="header-heading">Web Reporting Demo</h1>
<div class="nav-bar">
<ul class="nav">
<li>Daily Master</li>
<li>Route Progress</li>
<li>UL Move Query</li>
<li>Stock Query</li>
</ul>
</div>
</div>
</body>
This should work
.container {
margin: 0 auto;
background-color: #000;
position:relative;
width: 100%;
height: 40px;
}
.header-heading {
position: absolute;
top:-20px;
left:5px;
color: #ddd;
font-size: 30px;
}
.nav-bar {
padding-top: 5px;
}
.nav {
margin: auto;
padding: 5px;
list-style: none;
text-align: center;
width: 100%;
}
.nav li {
display: inline;
padding: 5px;
}
.nav li a {
text-decoration: none;
color: #fff;
}
You will need to do some changes as you work in your responsive design.
Try giving the .container text-align: center.
I have this html below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="event.css">
</head>
<body>
<header class="header-container">
<div class="navigation">
<div class="navigation-content">
<h1 class="heading">
Test
</h1>
<ul class="heading-list">
<li>Sell<img src="money.png"></li>
<li>Buy<span><img src="tickets.png"></li>
<li>Sign in<span><img src="locked.png"></li>
</ul>
</div>
</div>
</header>
</body>
</html>
And this css below:
body {
font-family: "Helvetica Neue",Helvetica,Roboto,Arial,"Lucida Grande",sans-serif;
margin: 0;
padding: 0;
font-size: 14px;
background-color: #F6F8F9;
}
.header-container {
background-color: #260354;
width: 100%;
position: relative;
}
.navigation {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.navigation-content {
padding: 15px 30px;
border-bottom: none;
}
.heading {
color: white;
margin: 0;
padding: 0;
display: inline-block;
}
.heading-list {
float: right;
list-style: none;
overflow: hidden;
}
.heading-list li {
color: white;
float: left;
padding-right: 30px;
}
.heading-list li img {
color: white;
width: 24px;
height: 24px;
margin-left: 10px;
text-align: center;
}
In the navigation list on the top right (ul) I want to center those images with the li text in my css. I tried putting text-align: center; on the .heading-list li img but it is not centering the image. Is there something else I have to do?
You can use flexbox, as I used in this example
body {
font-family: "Helvetica Neue",Helvetica,Roboto,Arial,"Lucida Grande",sans-serif;
margin: 0;
padding: 0;
font-size: 14px;
background-color: #F6F8F9;
}
.header-container {
background-color: #260354;
width: 100%;
position: relative;
}
.navigation {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.navigation-content {
padding: 15px 30px;
border-bottom: none;
}
.heading {
color: white;
margin: 0;
padding: 0;
display: inline-block;
}
.heading-list {
float: right;
list-style: none;
overflow: hidden;
}
.heading-list li {
color: white;
float: left;
padding-right: 30px;
display: flex;
align-items: center;
}
.heading-list li img {
color: white;
width: 24px;
height: 24px;
margin-left: 10px;
text-align: center;
}
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="event.css">
</head>
<body>
<header class="header-container">
<div class="navigation">
<div class="navigation-content">
<h1 class="heading">
Test
</h1>
<ul class="heading-list">
<li>
<span>Sell</span>
<img src="https://pbs.twimg.com/profile_images/3038657495/3d2f325c92060a35e7ac8c697c57d8d4.jpeg">
</li>
<li>
<span>Buy</span>
<img src="https://pbs.twimg.com/profile_images/630664501776527361/nIK2xTUE.jpg">
</li>
<li>
<span>Sign in</span>
<img src="http://www.dailyworldfacts.com/wp-content/uploads/2011/06/facts-about-cat-fallen-cat.jpg">
</li>
</ul>
</div>
</div>
</header>
</body>
</html>
So an image by default has a display type of inline-block. To enable it to be centered, include the following in your images css.
display: block;
margin-left: auto;
margin-right: auto
Here's the JsFiddle: https://jsfiddle.net/ztxmqyxg/
<!DOCTYPE html>
<link rel="stylesheet" href="styles/main.css">
<meta charset="utf-8">
<title>Apple - iPhone</title>
<ul>
<img src="images/logo.png">
<li>iPhone</li>
<li>Mac</li>
<li>iPad</li>
<li>iPod</li>
</ul>
<div id="ad">
<h1>Think different</h1>
</div>
<div id="product-container">
<div id="product" class="product2">
</div>
<div id="product" class="product1">
</div>
</div>
<div id="product-container2">
</div>
Here is the CSS:
html,body {
padding:0;
margin:0;
}
ul {
list-style-type: none;
margin: 0;
overflow: hidden;
background-color: #000000;
}
li {
float: left;
}
ul img {
margin-top: 7px;
margin-right:30px;
display: block;
float: left;
height: 40px;
}
li a {
font-family: 'Open Sans Condensed', sans-serif;
display: block;
color: #EDEDED;
text-align: center;
padding: 18px 16px;
text-decoration: none;
}
li a:hover {
background-color: #EEEEEE;
color:#000000;
text-decoration:none;
}
#ad {
padding: 5px 20px;
background-color: #000000;
height: 200px;
}
h1 {
font-family: 'Dosis', sans-serif;
color: #EDEDED;
}
#product-container {
margin: 0px;
padding: 0px;
}
#product {
padding: 5px 20px;
height: 300px;
display: inline-block;
}
.product1 {
background-color: #DAE7EB;
float: right;
width: 50%;
}
.product2 {
background-color: ;
width: 50%;
}
#product-container2 {
height: 300px;
background-color: #E9E9E9;
}
Well, in the JSfiddle there's a gap between the nav bar and the 2 first divs, that doesn't happen when I run it on my computer so don't mind that.
The problem is the gap between the white and blue boxes and the gray one on the bottom, as you see there's a small gap, but I don't see why that could be.
Actually I tried setting margin to 0 (to see if that worked) but it didn't.
It is for display: inline-block in #product div that cause to unwanted 5px margin. remove it and change .productcontainer to display:flex
html,body {
padding:0;
margin:0;
}
ul {
list-style-type: none;
margin: 0;
overflow: hidden;
background-color: #000000;
}
li {
float: left;
}
ul img {
margin-top: 7px;
margin-right:30px;
display: block;
float: left;
height: 40px;
}
li a {
font-family: 'Open Sans Condensed', sans-serif;
display: block;
color: #EDEDED;
text-align: center;
padding: 18px 16px;
text-decoration: none;
}
li a:hover {
background-color: #EEEEEE;
color:#000000;
text-decoration:none;
}
#ad {
padding: 5px 20px;
background-color: #000000;
height: 200px;
}
h1 {
font-family: 'Dosis', sans-serif;
color: #EDEDED;
}
#product-container {
margin: 0px;
padding: 0px;
display: flex;
}
#product {
padding: 5px 20px;
height: 300px;
}
.product1 {
background-color: #DAE7EB;
float: right;
width: 50%;
}
.product2 {
background-color: ;
width: 50%;
}
#product-container2 {
height: 300px;
background-color: #E9E9E9;
}
<!DOCTYPE html>
<html lang="es">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="styles/main.css">
<meta charset="utf-8">
<title>Apple - iPhone</title>
</head>
<body>
<ul>
<img src="images/logo.png">
<li>iPhone</li>
<li>Mac</li>
<li>iPad</li>
<li>iPod</li>
</ul>
<div id="ad">
<h1>Think different</h1>
</div>
<div id="product-container">
<div id="product" class="product2">
</div>
<div id="product" class="product1">
</div>
</div>
<div id="product-container2">
</div>
</body>
</html>
See this fiddle
It was the line height causing the issue. Update your CSS for #product-container as follows
#product-container {
margin: 0px;
padding: 0px;
line-height: 0; //<--- Add this
}
I have a div 'container' which holds all my content and is set for 80% width. Inside that div I have div 'tophead' which contains a logo and a nav bar at 100% (but it only reaches the parent 80%). Then I have 'maincont' which is inside the 'container' div and has an image. Id like this image to be left aligned with the side of the 'container' div so that there is still that 20% space left open. If I float left or align left it shows up all the way to the left of the screen over the 20% id like blank. Any idea how to fix this would be very much appreciated.
Bonus thanks if someone can figure out why the image overlaps my nav bar.
jsFiddle:
http://jsfiddle.net/4JKus/4/
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="ccoheader.css">
<title>Hello World</title>
</head>
<body>
<div id="container">
<div align="center" id="tophead">
<img src="images/logo.png" alt="logo">
<ul>
<li>About Us</li>
<li>Biographies</li>
<li>Services</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</div>
<div align="center" id="maincont">
<img src="images/secondimage.png" alt="image">
</div>
</div>
</div>
</body>
CSS:
html, body, #container {
height: 100%;
width: 100%;
margin: 0;
}
#tophead {
height: 20%;
width: 80%;
margin: auto;
}
#tophead img {
height: 100%;
width: auto%;
}
#tophead ul {
list-style: none;
display: inline-block;
font-size: 0;
}
#tophead li {
display: inline-block;
}
#tophead a {
background: #2dbaf0;
color: #fff;
display: block;
font-size: 16px;
font-family: "arial";
font-weight: bold;
padding: 0 20px;
line-height: 38px;
text-transform: uppercase;
text-decoration: none;
-webkit-transition-property: background;
-webkit-transition-duration: .2s;
-webkit-transition-timing-function: linear;
}
#tophead a:hover {
background: #f8a52b;
color: #fff;
}
#tophead li:first-child a {
border-left: none;
border-radius: 5px 0 0 5px;
}
#tophead li:last-child a {
border-right: none;
border-radius: 0 5px 5px 0;
}
#maincont {
height: 68%;
width: 80%;
padding-top: 2%;
}
#maincont img{
height: 100%;
width: auto;
border-radius: 30px;
float: left;
}
Not sure how far this gets to solving your problem(s), but its a start:
http://jsfiddle.net/4JKus/5/
Using the align attribute in div declarations is considered bad form. You had a stray /div hanging out. Not sure why you are forcing your images and the main container to 100% height.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="ccoheader.css">
<title>Hello World</title>
</head>
<body>
<div id="container">
<div id="tophead">
<img class="logo" src="images/logo.png" alt="logo">
<ul>
<li>About Us</li>
<li>Biographies</li>
<li>Services</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</div>
<div id="maincont">
<div class="maincont_col1">
</div>
<div class="maincont_col2">
<img src="images/secondimage.png" alt="image">
</div>
</div>
</div>
</body>
CSS
html, body, #container {
width: 100%;
margin: 0;
}
#tophead {
height: 20%;
width: 80%;
margin: auto;
}
#tophead img {
width: auto%;
}
#tophead ul {
list-style: none;
display: inline-block;
font-size: 0;
}
#tophead li {
display: inline-block;
}
#tophead a {
background: #2dbaf0;
color: #fff;
display: block;
font-size: 16px;
font-family: "arial";
font-weight: bold;
padding: 0 20px;
line-height: 38px;
text-transform: uppercase;
text-decoration: none;
-webkit-transition-property: background;
-webkit-transition-duration: .2s;
-webkit-transition-timing-function: linear;
}
#tophead a:hover {
background: #f8a52b;
color: #fff;
}
#tophead li:first-child a {
border-left: none;
border-radius: 5px 0 0 5px;
}
#tophead li:last-child a {
border-right: none;
border-radius: 0 5px 5px 0;
}
#maincont {
width: 100%;
padding-top: 2%;
overflow: hidden;
}
.maincont_col1{ width:20%; float:left; }
.maincont_col2{ width:80%; float:left; }
#maincont img{
border-radius: 30px;
}
Getting rid of float:left in your #maincont img selector solves the first problem.
Problem 2 is down to the fact that you have a topheader of 20% and the nav bar overlaps this.. You can fix this by removing the stipulation that the top and bottom are fixed in size.