Can someone help me put my menu on the left next to my navbar.
As you can see the icon floats above the navigation which extends the top bar,
both the icon and navigation inside the top bar need to be aligned next to each other.
body{
margin: 0;
padding: 0;
}
#top-bar{
background-color: black;
padding: 1%;
width: auto;
}
#left-menu{
display: inline-block;
}
#navigation{
width: 100%;
text-align: center;
background-color: red;
}
#navigation ul{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
position: relative;
display: inline-block;
overflow: hidden;
}
#navigation ul li{
float: left;
}
#navigation ul li a{
text-decoration: none;
margin-left: 5px;
}
<body>
<div id="top-bar">
<div id="left-menu">
<img src="icons/menu.png"/>
</div>
<div id="navigation">
<ul>
<li><a class="link" href="#"> Home </li>
<li><a class="link" href="#"> About Us </li>
<li><a class="link" href="#"> Contact </li>
</ul>
</div>
</div>
</body>
What you want to do is remove width: 100% from #navigation, and instead give it float: left.
You've also forgotten to close your <a> tags.
I've fixed this in the following:
body {
margin: 0;
padding: 0;
}
#top-bar {
background-color: black;
padding: 1%;
width: auto;
}
#left-menu {
display: inline-block;
}
#navigation {
/* width: 100%; */
float: left;
text-align: center;
background-color: red;
}
#navigation ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
position: relative;
display: inline-block;
overflow: hidden;
}
#navigation ul li {
float: left;
}
#navigation ul li a {
text-decoration: none;
margin-left: 5px;
}
<body>
<div id="top-bar">
<div id="left-menu">
<img src="http://placehold.it/100" />
</div>
<div id="navigation">
<ul>
<li><a class="link" href="#">Home</a></li>
<li><a class="link" href="#">About Us</a></li>
<li><a class="link" href="#">Contact</a></li>
</ul>
</div>
</div>
</body>
If you want to ensure that they're the same height, you're looking to give your #navigation a line-height property that equals the height of the image, along with display: block. This can be seen in the following:
body {
margin: 0;
padding: 0;
}
#top-bar {
background-color: black;
padding: 1%;
width: auto;
}
#left-menu {
display: inline-block;
}
#navigation {
/* width: 100%; */
float: left;
text-align: center;
background-color: red;
}
#navigation ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
position: relative;
/* display: inline-block; */
display: block;
line-height: 100px; /* Equal to the height of the image */
overflow: hidden;
}
#navigation ul li {
float: left;
}
#navigation ul li a {
text-decoration: none;
margin-left: 5px;
}
<body>
<div id="top-bar">
<div id="left-menu">
<img src="http://placehold.it/100" />
</div>
<div id="navigation">
<ul>
<li><a class="link" href="#">Home</a></li>
<li><a class="link" href="#">About Us</a></li>
<li><a class="link" href="#">Contact</a></li>
</ul>
</div>
</div>
</body>
Hope this helps! :)
Related
I have an unordered linked list. I'm trying to shift one of the items in the navigation all the way to the right (Order) as if it had text-align: right;. I tried using float: right; and text-align: right;, but none of them seemed to work. If I set the margin-left to a really high number (such as 100px) it does shift to the right, but if I resize my window then I can't see it anymore or it's not on the right side of the page. Here is the HTML:
nav {
position: fixed;
}
.navigation-links-no-style a {
text-decoration: none;
position: relative;
margin: 15px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
.navigation-links li {
padding-top: 1.3em;
}
.navbar {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
border-bottom: solid 1px black;
background: white;
padding-left: 5em;
}
.navbar a {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
margin-left: 20px;
color: black;
font-size: 14pt;
}
.order {
color: #FFFFFF !important;
background: #1419e2;
text-decoration: none;
padding: 8px;
border-radius: 5px;
margin-top: 15px;
}
<div class="navbar">
<a class="glacier-hills" href="glacier_hills.html">
<img src="Images/Glacier-Hills-Logo.svg" alt="" width="182" height="90">
</a>
<ul class="navigation-links">
<div class="navigation-links-no-style">
<li>
<a class="menu" href="menu.html">Menu</a>
</li>
<li>
<a class="location" href="location.html">Hours and Location</a>
</li>
</div>
<li>
<a class="order" href="order.html">Order</a>
</li>
</ul>
</div>
Any help would be greatly appreciated. Thanks!
Assuming you're looking to move your .order element, you'll want to apply the float: right rule to the parent (<li>) element. I've added a class to this, .order-container, to make this easier to achieve in the following example.
Note also that once you float to the right, it will be off the screen by default. You'll want to set a negative margin-right to circumvent this. I've gone with margin-right: -10em in the following, to match the offset from the image on the left.
Ultimately, you may wish to consider using a framework to achieve responsive design, ensuring that the offset is correct regardless of screen size.
nav {
position: fixed;
}
.navigation-links-no-style a {
text-decoration: none;
position: relative;
margin: 15px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
.navigation-links li {
padding-top: 1.3em;
}
.navbar {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
border-bottom: solid 1px black;
background: white;
padding-left: 5em;
}
.navbar a {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
margin-left: 20px;
color: black;
font-size: 14pt;
}
.order {
color: #FFFFFF !important;
background: #1419e2;
text-decoration: none;
padding: 8px;
border-radius: 5px;
margin-top: 15px;
float: right;
}
.order-container {
float: right;
margin-right: 10em;
}
<div class="navbar">
<a class="glacier-hills" href="glacier_hills.html">
<img src="Images/Glacier-Hills-Logo.svg" alt="" width="182" height="90">
</a>
<ul class="navigation-links">
<div class="navigation-links-no-style">
<li>
<a class="menu" href="menu.html">Menu</a>
</li>
<li>
<a class="location" href="location.html">Hours and Location</a>
</li>
</div>
<li class="order-container">
<a class="order" href="order.html">Order</a>
</li>
</ul>
</div>
MDN still advises that <div> is not a valid child of <ul>. Furthermore float adds a whole heap of side effects by removing the items from the natural flow of the document. To modernize this we can make use of display:flex
/*Normalise body*/
body {
margin:0;
}
/*Set flex on the nabar top position logo and links*/
.navbar {
display: flex;
}
/*Ad a maring to the logo link*/
.navbar > a:first-of-type {
margin-left: 5em;
}
nav {
position: fixed;
}
.navigation-links-no-style a {
text-decoration: none;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
/*Ad flex to the nav link element*/
display: flex;
/*Vertically center the links*/
align-items:center;
}
/*Push the last element right but give it a little margin to the right*/
.navbar ul>li:last-of-type {
margin-left: auto;
margin-right:1em;
}
.navigation-links li {
padding-top: 1.3em;
}
.navbar {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
border-bottom: solid 1px black;
background: white;
}
.navbar a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
margin-left: 20px;
color: black;
font-size: 14pt;
}
.order {
color: #FFFFFF !important;
background: #1419e2;
text-decoration: none;
padding: 8px;
border-radius: 5px;
margin-top: 15px;
}
<div class="navbar">
<a class="glacier-hills" href="glacier_hills.html">
<img src="Images/Glacier-Hills-Logo.svg" alt="" width="182" height="90">
</a>
<ul class="navigation-links">
<li>
<a class="menu" href="menu.html">Menu</a>
</li>
<li>
<a class="location" href="location.html">Hours and Location</a>
</li>
<li>
<a class="order" href="order.html">Order</a>
</li>
</ul>
</div>
You should use media queries for making navbar responsive.
a {
text-decoration: none;
color: black;
}
.navbar {
width: 100%;
overflow: hidden;
position: fixed;
top: 0;
display: flex;
justify-content: space-between;
border-bottom: solid 1px black;
}
.div-links {
display: flex;
align-items: center;
width: 70%;
}
.nav-links {
width: 100%;
display: flex;
justify-content: end;
align-items: center;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.nav-links li {
padding: 2rem;
}
.nav-items {
width: 30%;
display: flex;
justify-content: space-around;
}
.order {
overflow: hidden;
color: #ffffff !important;
background: #1419e2;
text-decoration: none;
padding: 0.8rem;
border-radius: 5px;
}
<div class="navbar">
<a href="glacier_hills.html">
<img
src="Images/Glacier-Hills-Logo.svg"
alt=""
width="182"
height="90"
/>
</a>
<div class="div-links">
<ul class="nav-links">
<div class="nav-items">
<li>
<a class="menu" href="menu.html">Menu</a>
</li>
<li>
<a class="location" href="location.html">Hours and Location</a>
</li>
</div>
<li class="btn">
<a class="order" href="order.html">Order</a>
</li>
</ul>
</div>
</div>
I have a question in which I can't find answer or don't know how to search for answer.
I don't know how to position text above image in a way that I want them to align. The following image will clarify what I am asking.
Next is my HTML and CSS code, I only provided the HTML for about page, but CSS is for the whole website. This isn't anything professional, I am just trying to learn by doing. My idea is to use those images as links ( I know how to do that ). If there is similar question already asked, I apologize, I tried searching here and on YouTube, but could not find solution for this problem. If nothing I will edit pictures in GIMP with text in them.
body {
background: #e5fcf4;
font-family: Arial;
}
header {
text-align: center;
}
header nav {
display: inline-block;
}
header nav ul {
list-style: none;
margin: 0;
padding: 0;
}
header ul li {
float: left;
color: white;
width: 200px;
height: 40px;
background-color: #0d3801;
opacity: .9;
line-height: 40px;
text-align: center;
font-size: 20px;
}
header ul li a {
text-decoration: none;
color: white;
display: block;
}
header ul li a:hover {
background-color: green;
color: black;
}
header ul li ul li {
display: none;
}
header ul li:hover ul li {
display: block;
}
div.maincontent {
width: 70%;
padding: 2px;
margin: 2px;
float: left;
}
div.sidecontent {
width: 23%;
float: right;
padding: 2px;
margin: 2px;
margin-top: 10px;
}
div.maincontent img {
width: 900px;
height: 400px;
}
.clear {
clear: both;
}
footer {
background-color: #0d3801;
text-align: center;
}
footer img {
width: 200px;
height: 200px;
margin: 5px;
}
footer h2 {
font-size: 2rem;
color: white;
}
img.aboutimage {
width: 450px;
height: 400px;
float: left;
padding: 5px;
margin-left: 125px;
margin-top: 100px;
}
<header>
<nav>
<ul>
<li> Home </li>
<li> About
<ul>
<li><a> Our team </a></li>
<li><a> Camp sites </a></li>
<li><a> Mission & Vision </a></li>
</ul>
</li>
<li> Things to do
<ul>
<li><a> Activities </a></li>
<li><a> Parks </a></li>
<li><a> Coffee bars </a></li>
</ul>
</li>
<li> Contact
<ul>
<li><a> Map </a></li>
<li><a> Directions </a></li>
</ul>
</li>
<li> News </li>
</ul>
</nav>
</header>
<div>
<a href="">
<img class="aboutimage" src="https://images.pexels.com/photos/7097/people-coffee-tea-meeting.jpg?w=1260&h=750&auto=compress&cs=tinysrgb">
</a>
<a href="">
<img class="aboutimage" src="https://images.pexels.com/photos/803226/pexels-photo-803226.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb">
</a>
<a href="">
<img class="aboutimage" src="https://images.pexels.com/photos/462353/pexels-photo-462353.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb">
</a>
</div>
wrap each image in div and before that add your text
<div >
<div style="width: 33%; float: left">
<h3>sample title</h3>
<a href="">
<img class="aboutimage">
</a>
</div>
...
</div>
Position your "a" depending on intended result. Now it only makes image to be link
Please check with this snippet
body {
background: #e5fcf4;
font-family: Arial;
}
header {
text-align: center;
}
header nav {
display: inline-block;
}
/* PRVI KORAK*/
header nav ul {
list-style: none;
margin: 0;
padding: 0;
}
/*DRUGI KORAK*/
header ul li {
float: left;
color: white;
width: 200px;
height: 40px;
background-color: #0d3801;
opacity: .9;
line-height: 40px;
text-align: center;
font-size: 20px;
}
/*TREĆI KORAK*/
header ul li a {
text-decoration: none;
color: white;
display: block;
}
/*ČETVRTI KORAK*/
header ul li a:hover {
background-color: green;
color: black;
}
/*PETI KORAK*/
header ul li ul li {
display: none;
}
header ul li:hover ul li {
display: block;
}
div.maincontent {
width: 70%;
padding: 2px;
margin: 2px;
float: left;
}
div.sidecontent {
width: 23%;
float: right;
padding: 2px;
margin: 2px;
margin-top: 10px;
}
div.maincontent img {
width: 900px;
height: 400px;
}
.clear {
clear: both;
}
footer {
background-color: #0d3801;
text-align: center;
}
footer img {
width: 200px;
height: 200px;
margin: 5px;
}
footer h2 {
font-size: 2rem;
color: white;
}
img.aboutimage {
width: 450px;
height: 400px;
float: left;
padding: 5px;
margin-left: 125px;
margin-top: 100px;
}
.img-block a{
position:relative;
}
.img-block a span{
position:absolute;
width:100%;
top:0;
left:0;
background:rgba(0,0,0,0.5);
padding:5px;
font-size:14px;
color:#fff;
font-weight:700;
text-align:center;
}
.img-block img{
padding:0;
width:100%;
margin:0;
height:auto;
}
.img-block a{
overflow:hidden;
float:left;
width:calc( 33.33% - 20px );
margin:0 10px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li> Home </li>
<li> About
<ul>
<li><a> Our team </a></li>
<li><a> Camp sites </a></li>
<li><a> Mission & Vision </a></li>
</ul>
</li>
<li> Things to do
<ul>
<li><a> Activities </a></li>
<li><a> Parks </a></li>
<li><a> Coffee bars </a></li>
</ul>
</li>
<li> Contact
<ul>
<li><a> Map </a></li>
<li><a> Directions </a></li>
</ul>
</li>
<li> News </li>
</ul>
</nav>
</header>
<div class="img-block">
<a href="">
<span>Text1</span>
<img class="aboutimage" src="https://images.pexels.com/photos/7097/people-coffee-tea-meeting.jpg?w=1260&h=750&auto=compress&cs=tinysrgb">
</a>
<a href="">
<span>Text2</span>
<img class="aboutimage" src="https://images.pexels.com/photos/803226/pexels-photo-803226.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb">
</a>
<a href="">
<span>Text3</span>
<img class="aboutimage" src="https://images.pexels.com/photos/462353/pexels-photo-462353.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb">
</a>
</div>
</body>
</html>
You can use figure and figcaption to have text and an image aligned with each other.
I've used flex to make sure everything lines up how it should.
.imageblock {
display: flex;
justify-content: space-between;
}
.imageblock figure {
display: inline-flex;
flex-direction: column;
text-align: center;
width: 30vw;
margin: 0;
}
.imageblock figure * {
width: 100%;
}
<div class="imageblock">
<figure class="aboutimage">
<figcaption>How to add text here?</figcaption>
<img src="https://images.pexels.com/photos/7097/people-coffee-tea-meeting.jpg?w=1260&h=750&auto=compress&cs=tinysrgb">
</figure>
<figure class="aboutimage">
<figcaption>How to add text here?</figcaption>
<img src="https://images.pexels.com/photos/803226/pexels-photo-803226.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb">
</figure>
<figure class="aboutimage">
<figcaption>How to add text here?</figcaption>
<img src="https://images.pexels.com/photos/462353/pexels-photo-462353.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb">
</figure>
</div>
First you should wrap image with div and add following style for that div
Example:
<div style="width:33%; float:left">Sample Text</div>
Try this.
I'm trying to make a menu bar that is divided in three columns, where the left and the right side are links HOME and SEARCH, but in the center part of the menu there are several links nested inside a list. The columns are showing nicely, but for some mystical reason the HOME and SEARCH links are shown higher than the center content. I tried nesting the links HOME and SEARCH inside lists as well, but then everything in the menu-bar offsets to the right by a little bit and I would love it to be symmetrical without using padding or margins if possible.
It's probably something very simple and absolutely my fault, but here's me hoping.
So the question is how to either disable the offset to the right or how to make everything be on one line without using those in my opinion unnecessary <li>?
nav {
padding-left: 3em;
padding-right: 3em;
overflow: hidden;
}
nav div {
display: inline;
}
.area-center .menu li {
display: inline;
padding-right: 1em;
padding-left: 1em;
padding-top: none;
}
.menu ul {
list-style: none;
padding-left: 0;
}
.menu li {
list-style: none;
padding-left: 0;
}
.menu a {
text-decoration: none;
}
.area-right {
float: left;
width: 20%;
text-align: right;
}
.area-center {
float: left;
width: 60%;
text-align: center;
}
.area-left {
float: left;
width: 20%;
text-align: left;
}
<div id="menu_bar">
<nav id="main-menu" class="section">
<div class="area-left">
<a class="order">Home</a>
</div>
<div class="area-center">
<ul class="menu">
<li class="order"><a class="order">a</a></li>
<li class="order"><a class="order">b</a></li>
<li class="order"><a class="order">c</a></li>
<li class="order"><a class="order">d</a></li>
</ul>
</div>
<div class="area-right">
<a class="order">SEARCH</a>
</div>
</nav>
</div>
Browsers sets the default margin to <ul> elements if you didn't specify it. You can see this in below image
You have to set margin:0 to your <ul>
Stack Snippet
nav {
padding-left: 3em;
padding-right: 3em;
overflow: hidden;
}
nav div {
display: inline;
}
.area-center .menu li {
display: inline;
padding-right: 1em;
padding-left: 1em;
padding-top: none;
}
.menu ul {
list-style: none;
padding-left: 0;
}
.menu li {
list-style: none;
padding-left: 0;
}
.menu a {
text-decoration: none;
}
.area-right {
float: left;
width: 20%;
text-align: right;
}
.area-center {
float: left;
width: 60%;
text-align: center;
}
.area-left {
float: left;
width: 20%;
text-align: left;
}
ul {
margin: 0;
}
<div id="menu_bar">
<nav id="main-menu" class="section">
<div class="area-left">
<a class="order">Home</a>
</div>
<div class="area-center">
<ul class="menu">
<li class="order"><a class="order">a</a></li>
<li class="order"><a class="order">b</a></li>
<li class="order"><a class="order">c</a></li>
<li class="order"><a class="order">d</a></li>
</ul>
</div>
<div class="area-right">
<a class="order">SEARCH</a>
</div>
</nav>
</div>
You can fix it by adding line-height to area-left & area-right, maybe this isn't the best way, you can find better way
nav{
padding-left: 3em;
padding-right: 3em;
overflow:hidden;
}
nav div{
display:inline;
}
.area-center .menu li{
display:inline;
padding-right: 1em;
padding-left: 1em;
padding-top:none;
}
.menu ul{
list-style:none;
padding-left:0;
}
.menu li{
list-style:none;
padding-left:0;
}
.menu a{
text-decoration: none;
}
.area-right{
float: left;
width: 20%;
line-height:45px;
text-align: right;
}
.area-center{
float: left; width: 60%;
text-align: center;
}
.area-left{
float: left;
width: 20%;
line-height:45px;
text-align: left;
}
<div id="menu_bar">
<nav id="main-menu" class="section">
<div class="area-left">
<a class="order">Home</a>
</div>
<div class="area-center">
<ul class="menu">
<li class="order"><a class="order">a</a></li>
<li class="order"><a class="order">b</a></li>
<li class="order"><a class="order">c</a></li>
<li class="order"><a class="order">d</a></li>
</ul>
</div>
<div class="area-right">
<a class="order">SEARCH</a>
</div>
</nav>
</div>
There is an error in your CSS. .menu ul doesn't exist.
Update the selector to simply .menu, and also remove the default margin applied to the ul by the browser.
nav {
padding-left: 3em;
padding-right: 3em;
overflow: hidden;
}
nav div {
display: inline;
}
.area-center .menu li {
display: inline;
padding-right: 1em;
padding-left: 1em;
padding-top: none;
}
/* this is incorrect
.menu ul {
list-style: none;
padding-left: 0;
}*/
.menu {
margin: 0;
padding: 0;
}
.menu li {
list-style: none;
padding-left: 0;
}
.menu a {
text-decoration: none;
}
.area-right {
float: left;
width: 20%;
text-align: right;
}
.area-center {
float: left;
width: 60%;
text-align: center;
}
.area-left {
float: left;
width: 20%;
text-align: left;
}
<div id="menu_bar">
<nav id="main-menu" class="section">
<div class="area-left">
<a class="order">Home</a>
</div>
<div class="area-center">
<ul class="menu">
<li class="order"><a class="order">a</a></li>
<li class="order"><a class="order">b</a></li>
<li class="order"><a class="order">c</a></li>
<li class="order"><a class="order">d</a></li>
</ul>
</div>
<div class="area-right">
<a class="order">SEARCH</a>
</div>
</nav>
</div>
Im trying to make so the H1 is vertically aligned with the other divs.
This is the code.
header {
padding: 0;
background-color: #000032;
}
header div {
display: inline-block;
text-align: center;
padding: 0;
}
header ul {
list-style-type: none;
margin: 0;
padding: 0;
}
header #social {
float: left;
}
header li img {
height: 30px;
margin: 15px;
margin-right: 0;
}
header img {
display: block;
}
header h1 {
font-size: 45px;
margin: 0;
display: block;
}
header h1 a {
color: #FFF;
text-decoration: none;
}
header #menu {
float: right;
}
main {
height: 100vh;
}
<header class="row--no-gutter">
<div class="col--1-of-3">
<ul>
<li id="social"><img src="../img/_f_logo_online/png/FB-f-Logo__blue_100.png" alt="Facebook"></li>
<li id="social"><img src="../img\Twitter_Starter_Kit\Twitter_Social_Icon_Rounded_Square/Twitter_Social_Icon_Rounded_Square_Color.png" alt="Twitter"></li>
<li id="social"></li>
<li id="social"></li>
</ul>
</div><div class="col--1-of-3">
<h1>Lorem.</h1>
</div><div class="col--1-of-3">
<ul>
<li id="menu">Om</li>
<li id="menu">lorem1</li>
<li id="menu">ipsun</li>
</ul>
</div>
</header>
But as you can see on the picture the H1 does not align with the top. Why does it do so and how can i fix it?
make header h1 an inline-block; and assign it vertical-align: middle;, plus also assign vertical-align: middle; to the DIV that contains the ul with the social icons:
header {
padding: 0;
background-color: #000032;
}
header div {
display: inline-block;
text-align: center;
padding: 0;
vertical-align: middle;
}
header ul {
list-style-type: none;
margin: 0;
padding: 0;
}
header #social {
float: left;
}
header li img {
height: 30px;
margin: 15px;
margin-right: 0;
}
header img {
display: block;
}
header h1 {
font-size: 45px;
margin: 0;
display: inline-block;
vertical-align: middle;
}
header h1 a {
color: #FFF;
text-decoration: none;
}
header #menu {
float: right;
}
main {
height: 100vh;
}
<header class="row--no-gutter">
<div class="col--1-of-3">
<ul>
<li id="social">
<img src="../img/_f_logo_online/png/FB-f-Logo__blue_100.png" alt="Facebook">
</li>
<li id="social">
<img src="../img\Twitter_Starter_Kit\Twitter_Social_Icon_Rounded_Square/Twitter_Social_Icon_Rounded_Square_Color.png" alt="Twitter">
</li>
<li id="social"></li>
<li id="social"></li>
</ul>
</div>
<div class="col--1-of-3">
<h1>Lorem.</h1>
</div>
<div class="col--1-of-3">
<ul>
<li id="menu">Om</li>
<li id="menu">lorem1</li>
<li id="menu">ipsun</li>
</ul>
</div>
</header>
The problem is the h1's parent element, the div:
header div {
display: inline-block;
}
since it behave like an inline-block things like this happen, change it to block to avoid this problem:
header {
padding: 0;
background-color: #000032;
}
header div {
display: block;
text-align: center;
padding: 0;
}
header ul {
list-style-type: none;
margin: 0;
padding: 0;
}
header #social {
float: left;
}
header li img {
height: 30px;
margin: 15px;
margin-right: 0;
}
header img {
display: block;
}
header h1 {
font-size: 45px;
margin: 0;
display: block;
}
header h1 a {
color: #FFF;
text-decoration: none;
}
header #menu {
float: right;
}
main {
height: 100vh;
}
.col--1-of-3 {
float: left;
}
<header class="row--no-gutter">
<div class="col--1-of-3">
<ul>
<li id="social"><img src="../img/_f_logo_online/png/FB-f-Logo__blue_100.png" alt="Facebook"></li>
<li id="social"><img src="../img\Twitter_Starter_Kit\Twitter_Social_Icon_Rounded_Square/Twitter_Social_Icon_Rounded_Square_Color.png" alt="Twitter"></li>
<li id="social"></li>
<li id="social"></li>
</ul>
</div><div class="col--1-of-3">
<h1>Lorem.</h1>
</div><div class="col--1-of-3">
<ul>
<li id="menu">Om</li>
<li id="menu">lorem1</li>
<li id="menu">ipsun</li>
</ul>
</div>
<div style="clear:left;"></div>
</header>
Also you have to use float: left in order to keep the structure of the layout
Your header div rule sets display: inline-block; and inline elements have a default vertical alignment of baseline. Try changing it to top instead.
Also note that your IDs must be unique.
header {
padding: 0;
background-color: #000032;
}
header div {
display: inline-block;
text-align: center;
padding: 0;
vertical-align:top;
}
header ul {
list-style-type: none;
margin: 0;
padding: 0;
}
header #social {
float: left;
}
header li img {
height: 30px;
margin: 15px;
margin-right: 0;
}
header img {
display: block;
}
header h1 {
font-size: 45px;
margin: 0;
display: block;
}
header h1 a {
color: #FFF;
text-decoration: none;
}
header #menu {
float: right;
}
main {
height: 100vh;
}
<header class="row--no-gutter">
<div class="col--1-of-3">
<ul>
<li id="social">
<img src="../img/_f_logo_online/png/FB-f-Logo__blue_100.png" alt="Facebook">
</li>
<li id="social">
<img src="../img\Twitter_Starter_Kit\Twitter_Social_Icon_Rounded_Square/Twitter_Social_Icon_Rounded_Square_Color.png" alt="Twitter">
</li>
<li id="social"></li>
<li id="social"></li>
</ul>
</div>
<div class="col--1-of-3">
<h1>Lorem.</h1>
</div>
<div class="col--1-of-3">
<ul>
<li id="menu">Om</li>
<li id="menu">lorem1</li>
<li id="menu">ipsun</li>
</ul>
</div>
</header>
How to center ul inside of div.
A common advice are
left:50%
some variations of display:inline
but it does not work. How to fix this?
body {
margin: 0;
background: #f4f5f5;
}
.menu {
text-align: center;
margin: 0 auto;
width: 1023px;
background: #f4f5f5;
}
.picture {
margin: 0 auto;
width: 1023px;
height: 255px;
background: green;
}
ul {
list-style: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<div class="content">
<div class="menu">
<ul>
<li><a>Test</a>
</li>
<li><a>Test</a>
</li>
<li><a>Test</a>
</li>
<li><a>Test</a>
</li>
<li><a>Test</a>
</li>
<li><a>Test</a>
</li>
<li><a>Test</a>
</li>
</ul>
</div>
<div class="picture">
</div>
</div>
set text-align:center and to ul and inline-block to li(removing float:left)
Tweaked your code, by removing duplicated code.
body {
margin: 0;
background: #f4f5f5;
}
.content {
margin: 0 auto;
width: 1023px;
}
.picture {
height: 255px;
background: green;
}
ul {
list-style: none;
background: #f4f5f5;
padding: 0;
margin: 0;
text-align: center;
}
li {
display: inline-block
}
li a {
display: block;
padding: 14px 16px;
text-decoration: none;
}
<div class="content">
<ul>
<li><a>Test</a>
</li>
<li><a>Test</a>
</li>
<li><a>Test</a>
</li>
<li><a>Test</a>
</li>
<li><a>Test</a>
</li>
<li><a>Test</a>
</li>
<li><a>Test</a>
</li>
</ul>
<div class="picture">
</div>
</div>
This should solve the problem
body{
margin:0;
background:#f4f5f5;
}
.menu {
text-align: center;
margin: 0 auto;
width: 1023px;
background: #f4f5f5;
}
.picture {
margin:0 auto;
width: 1023px;
height: 255px;
background: green;
}
ul {
list-style: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
display: inline-block;
}
li{
float:left;
}
li a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<div class="content">
<div class="menu">
<ul>
<li><a>Test</a></li>
<li><a>Test</a></li>
<li><a>Test</a></li>
<li><a>Test</a></li>
<li><a>Test</a></li>
<li><a>Test</a></li>
<li><a>Test</a></li>
</ul>
</div>
<div class="picture">
</div>
</div>
Use a CSS3 Layout mode called Flexbox.
.menu {
display: flex; // <-- necessary to activate flexbox
justify-content: center; // <-- centers horizontally
// align-items: center; // <-- would center vertically
margin: 0 auto;
width: 1023px;
background: #f4f5f5;
}
learn more:
http://flexboxin5.com/
http://flexboxfroggy.com/