-i set the background on black
-i set an image and changed the opacity so that it will blend in with the background.
-tried to create a text above the image but it wont show.
Here is a preview of the website:
and the following are the code that i did :)
/* Unfortunately the "---Greetings" text cant be seen in the preview and i tried finding it by changing colors just in case it was just misplaced but it didnt.
I tested another picture without the opacity, it worked but when i tried lessening it it disappears again :( */
body {
background-color: black;
}
.container img {
position: absolute;
top: 430px;
left: 670px;
right: 0;
bottom: 0;
margin: auto;
width: 101%;
min-height: 50%;
}
.container {
display: inline-block;
opacity: 0.8;
position: relative;
top: -50%;
left: -50%;
width: 100%;
height: 100%;
color: red;
}
.mid-left h1 {
position: absolute;
left: 25px;
top: 10px;
}
.navbar {
text-align: center;
width: 100%;
overflow: hidden;
position: fixed;
bottom: 5px;
right: 0px;
background-color: black;
}
.navbar a {
text-decoration: none;
color: white;
font-family: "montserrat-extrabold", sans-serif;
font-size: 15px;
letter-spacing: 3px;
}
.navbar ul {
display: inline-block;
list-style: none;
padding: 10px;
margin: 20px;
}
.navbar li {
float: left;
}
.navbar li+li {
margin-left: 20px;
}
/*changing of color when hover*/
.navbar a:hover {
text-decoration: underline;
color: red;
transition: 0.6s;
}
/*add color to the selective link*/
.navbar a:active {
background-color: transparent;
}
<!DOCTYPE html>
<html>
<head>
<title> R E S U M E</title>
<link rel="stylesheet" href="home.css">
<link rel="stylesheet" type="text/css" href="font.css">
<meta charset="utf-8">
</head>
<body>
<!-- <div id="bg">
<img src="Cover1.jpg" alt="">
</div>
-->
<div class="container">
<img src="Cover1.jpg" alt="Me">
<div class="mid-left">
<h1>----- Greetings!</h1>
</div>
</div>
<header class="flex flex-vertical-center">
<div class="navbar flex flex-horizontal-center">
<ul>
<li class="navitem"> Home </li>
<li class="navitem"> Personal</li>
<li class="navitem"> Education</li>
<li class="navitem"> Experience</li>
s
</ul>
</div>
</header>
</body>
</html>
You don't see .mid-left because
.container {
...
top: -50%;
left: -50%;
}
You have to remove top and left with these value. Furthermore I suggest to you to use background-image: url('Cover1.jpg') on .container and remove <img src="Cover.jpg" alt="Me">
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mountains</title>
<link rel="stylesheet" href="/css/style.css">
<style>
/*css stylization*/
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
header{
justify-content: space-between;
align-items: center;
display: flex;
padding: 10px 50px;
}
.logoname{
margin-bottom: 10px;
}
.logo img{
height: 50px;
width: 50px;
cursor: pointer;
}
.navlinks{
list-style-type: none;
}
.navlinks li{
display: inline-block;
padding: 20px;
}
.navlinks li a{
transition: all 0.3s ease 0s;
text-decoration: none;
font-family: roboto;
}
.navlinks li a:hover{
color: aquamarine;
}
/*hero image code*/
.herobanner {
background-image:url(/image/herobanner.jpg);
width: 100%;
}
.herotext {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #000;
}
</style>
</head>
<body>
<header>
<figure class="logo">
<img src="\image/logo.png" alt="logo">
</figure>
<nav>
<ul class="navlinks">
<li>HOME</li>
<li>ABOUT US</li>
<li>GALERY</li>
</ul>
</nav>
</header>
<div class="herobanner">
<span class="herotext">
<h1>LIVE HIGH</h1>
</span>
</div>
</body>
</html>
I have made a simple navigation bar and under it I want to put a hero banner under it, the image URL does not work and the image does not get displayed but the text gets centered as the code for class='herotext' works properly.
please help me out with the code. Thanks to everyone who took their time out to help me.
The hero div has no content inside it which means the height is ZERO(The span positioned absolute so its height will not calculated), just add a 'min-height' and it will work:
/*css stylization*/
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
header {
justify-content: space-between;
align-items: center;
display: flex;
padding: 10px 50px;
}
.logoname {
margin-bottom: 10px;
}
.logo img {
height: 50px;
width: 50px;
cursor: pointer;
}
.navlinks {
list-style-type: none;
}
.navlinks li {
display: inline-block;
padding: 20px;
}
.navlinks li a {
transition: all 0.3s ease 0s;
text-decoration: none;
font-family: roboto;
}
.navlinks li a:hover {
color: aquamarine;
}
/*hero image code*/
.herobanner {
background-image: url(https://www.artonicweb.com/learn/wp-content/uploads/2018/05/12-HERO-IMAGES-1024x536.jpg);
width: 100%;
min-height: 500px;
}
.herotext {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mountains</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header>
<figure class="logo">
<img src="\image/logo.png" alt="logo">
</figure>
<nav>
<ul class="navlinks">
<li>HOME</li>
<li>ABOUT US</li>
<li>GALERY</li>
</ul>
</nav>
</header>
<div class="herobanner">
<span class="herotext">
<h1>LIVE HIGH</h1>
</span>
</div>
</body>
</html>
**you just use this **
.herobanner {
background-image: url(https://cdn.pixabay.com/photo/2020/06/17/18/03/lights-5310589_960_720.jpg);
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.herotext {
text-align: center;
position: relative;
color: #000;
}
I can see from your code that the .herobanner don't have any height because you defined the position of the span element inside it as absolute so you have several options to fix this either by removing the absolute position so the height of .herobanner will be based on the content or define a fixed height for it.
See the example below:
1st option
.herotext {
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #000;
}
2nd option
.herobanner {
background-image:url(/image/herobanner.jpg);
background-size:cover;
background-repeat:no-repeat;
width: 100%;
height:20vh;
}
and repositon the span element so it fits inside it
i prefer the first solution so it will take the height of it's content.
codepen https://codepen.io/ahamdan/pen/OJXyWrv
I am pretty new to web-development and as I'm making the navbar, the positioning is off. This is a picture of what's happening. The right side of the navbar entailing the links/other pages are going under, but when I make the right-side logo smaller, they go back up. I'm not sure what is happening. My code is as follows:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Speech and Debate</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<!-- inline css styling to reset margins/padding -->
<body style="margin: 0; padding: 0">
<header style="width: 100%; height: 10vh; background: #002654; top: 2.5vh">
<div id="green-strip"></div>
<div class="container">
<img src="../img/sd-logo.png" alt="logo" class="logo" width="300vw">
<nav>
<ul>
<li>Home</li>
<li>Debate</li>
<li>Speech</li>
<li>Schedule</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
CSS
#green-strip{
width: 100%; height: 2.5vh;
border-style: solid;
border-color: #026f4d;
background-color: #026f4d;
}
// nav bar container
.container {
width: 100%;
margin: 0 auto;
}
// nav bar background
// header {
// width: 100%; height: 10vh;
// background: #002654;
// top: 2.5vh;
//}
// prevents container from shrinking after nav bar elements float
header::after {
content: '';
display: table;
clear: both;
}
.logo {
text-align: left;
}
nav {
text-align: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 2vw;
margin-right: 2vw;
position: relative;
}
nav ul li a {
font-family: 'Work Sans', sans-serif;
font-weight: 500;
font-style: normal;
letter-spacing: 0.05vw;
font-smooth: 2em;
font-size: 13px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover {
color: #b6b8b6;
}
nav a::before {
content: '';
display: block;
height: 0.35vh;
width: 100%;
background-color: #fff;
position: absolute;
top: -2vh;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
Thank you very much.
You can ensure the content inside navigation is adjusted to center by setting display to flex just like what #somedev said.
#green-strip{
width: 100%; height: 2.5vh;
border-style: solid;
border-color: #026f4d;
background-color: #026f4d;
}
// nav bar container
.container {
width: 100%;
margin: 0 auto;
}
// nav bar background
// header {
// width: 100%; height: 10vh;
// background: #002654;
// top: 2.5vh;
//}
// prevents container from shrinking after nav bar elements float
header::after {
content: '';
display: table;
clear: both;
}
.logo {
text-align: left;
}
nav {
display: flex;
text-align: right;
justify-content: center;
}
nav img{
position: absolute;
left: 0;
}
nav ul {
position: absolute;
margin: 0;
padding: 0;
list-style: none;
right: 0;
}
nav li {
display: inline-block;
margin-left: 2vw;
margin-right: 2vw;
position: relative;
}
nav ul li a {
font-family: 'Work Sans', sans-serif;
font-weight: 500;
font-style: normal;
letter-spacing: 0.05vw;
font-smooth: 2em;
font-size: 13px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover {
color: #b6b8b6;
}
nav a::before {
content: '';
display: block;
height: 0.35vh;
width: 100%;
background-color: #fff;
position: absolute;
top: -2vh;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
<!-- inline css styling to reset margins/padding -->
<body style="margin: 0; padding: 0">
<header style="width: 100%; height: 10vh; background: #002654; top: 2.5vh">
<div id="green-strip"></div>
<div class="container">
<nav>
<img src="../img/sd-logo.png" alt="logo" class="logo" width="300vw">
<ul>
<li>Home</li>
<li>Debate</li>
<li>Speech</li>
<li>Schedule</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
Its becouse your logo element has wrong position set.
Try adding this:
.logo {
text-align: left;
position: absolute;
}
"position: absolute;" means that your logo will be ignored by other elements and will always be right there where you want it to be
Also when designing a page it is always a good idea to remove margin and padding in a very beginning of css file, like this:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
I use a div tag but my about division is still overlapping my navbar division.
This is my demo:
#import url('https://fonts.googleapis.com/css?family=Fredoka+One&display=swap');
#import url('https://fonts.googleapis.com/css?family=Lobster&display=swap');
body {
background: url(boba.jpg);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Fredoka One', cursive;
}
.menu ul {
margin: 0;
padding: 0;
list-style: none;
text-align: right;
}
.menu ul {
margin: 0 auto;
width: 1170px;
padding-top: 100px;
}
.menu ul li {
float: none;
display: inline-block;
}
.menu ul li:nth-child(1) {
float: left;
}
.menu ul li:nth-child(2) {
float: left;
}
.menu ul li:nth-child(3) {
float: left;
}
.menu ul li a {
color: #262626;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
display: block;
padding: 10px 20px;
font-family: 'Fredoka One', cursive;
font-size: 23px;
}
.menu ul li a:hover {
background-color: #77DF79;
color: black;
}
#navbar {
width: 100%;
position: relative;
}
.logo {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 0;
content: "";
margin-left: -205px;
}
#descrip p {
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 16px;
}
#descrip h1 {
position: absolute;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Lobster', cursive;
font-size: 10vw;
}
.button {
background-image: linear-gradient(to right, #56ab2f 0%, #a8e063 51%, #56ab2f 100%);
border: none;
color: black;
font-family: 'Fredoka One', cursive;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
}
.button:hover {
background-position: right center;
}
.slicknav_menu {
font-size: 16px;
padding: 5px;
position: fixed;
right: 0;
background: none;
display: none;
}
#media (max-width: 767px) {
.slicknav_menu {
display: block;
}
.menu {
display: none;
}
body {
background-image: url(m3.jpg);
}
.button {
margin-top: 50px;
}
}
.about {}
<!DOCTYPE html>
<html>
<head>
<title>Smile to Go! </title>
<link rel="icon" href="logo1.png">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="slicknav.min.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="logo">
<img src="logo1.png" alt="">
</div>
<div class="container">
<div id="navbar">
<div class="menu">
<ul id="list">
<li> Home </li>
<li> About </li>
<li> Products </li>
<li> Branches </li>
<li> Gallery </li>
<li> Contact </li>
</div>
</div>
<div id="descrip">
<h1> Smile to Go! </h1>
<p>Smile to go milktea serves a wide variety of tasy and refreshing authentic pearl milktea drinks. uaranteed made from 100% freshly brewed loose-leaf teas of high quality for an overall healthier lifestyle. We also serve variety of iced coffees,slush,cream
and latte drinks and toppings for your freshly cool drinks!.</p>
<button type="button" class="button"> Learn More </button>
<br>
<br>
</div>
<div class="about">
<hr>
<h1> Welcome to Smile to Go!</h1>
<p> Sip up a refreshin milktea that will give you a large smile on your face!<br> Enjoy different variety of coffees, tea,slush and cream lattes. <br>Share the cool refreshing drink now to your friends and families. <br>Visit us on our stores nationwide!</p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.slicknav.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#list').slicknav();
});
</script>
</body>
</html>
<!----- references and resources
https://www.w3schools.com/html/default.asp
https://www.facebook.com/SmileToGoHongKong/
https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog
https://www.w3schools.com/css/default.asp
https://www.youtube.com/watch?v=hp-LP8Nv18s
https://www.youtube.com/watch?v=svv7jOxaSzw
https://slicknav.io/----->
I think this will help.
#import url('https://fonts.googleapis.com/css?family=Fredoka+One&display=swap');
#import url('https://fonts.googleapis.com/css?family=Lobster&display=swap');
body {
background: url(boba.jpg);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Fredoka One', cursive;
}
.menu ul {
margin: 0;
padding: 0;
list-style: none;
text-align: right;
}
.menu ul {
margin: 0 auto;
width: 1170px;
padding-top: 100px;
}
.menu ul li {
float: none;
display: inline-block;
}
.menu ul li:nth-child(1) {
float: left;
}
.menu ul li:nth-child(2) {
float: left;
}
.menu ul li:nth-child(3) {
float: left;
}
.menu ul li a {
color: #262626;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
display: block;
padding: 10px 20px;
font-family: 'Fredoka One', cursive;
font-size: 23px;
}
.menu ul li a:hover {
background-color: #77DF79;
color: black;
}
#navbar {
width: 100%;
position: relative;
}
.logo {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 0;
content: "";
margin-left: -205px;
}
#descrip{text-align:center;}
#descrip p {
text-align: center;
font-size: 16px;
}
#descrip h1 {
font-family: 'Lobster', cursive;
font-size: 10vw;
}
.button {
background-image: linear-gradient(to right, #56ab2f 0%, #a8e063 51%, #56ab2f 100%);
border: none;
color: black;
font-family: 'Fredoka One', cursive;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button:hover {
background-position: right center;
}
.slicknav_menu {
font-size: 16px;
padding: 5px;
position: fixed;
right: 0;
background: none;
display: none;
}
#media (max-width: 767px) {
.slicknav_menu {
display: block;
}
.menu {
display: none;
}
body {
background-image: url(m3.jpg);
}
.button {
margin-top: 50px;
}
}
.about {}
<!DOCTYPE html>
<html>
<head>
<title>Smile to Go! </title>
<link rel="icon" href="logo1.png">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="slicknav.min.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="logo">
<img src="logo1.png" alt="">
</div>
<div class="container">
<div id="navbar">
<div class="menu">
<ul id="list">
<li> Home </li>
<li> About </li>
<li> Products </li>
<li> Branches </li>
<li> Gallery </li>
<li> Contact </li>
</div>
</div>
<div id="descrip">
<h1> Smile to Go! </h1>
<p>Smile to go milktea serves a wide variety of tasy and refreshing authentic pearl milktea drinks. uaranteed made from 100% freshly brewed loose-leaf teas of high quality for an overall healthier lifestyle. We also serve variety of iced coffees,slush,cream
and latte drinks and toppings for your freshly cool drinks!.</p>
<button type="button" class="button"> Learn More </button>
<br>
<br>
</div>
<div class="about">
<hr>
<h1> Welcome to Smile to Go!</h1>
<p> Sip up a refreshin milktea that will give you a large smile on your face!<br> Enjoy different variety of coffees, tea,slush and cream lattes. <br>Share the cool refreshing drink now to your friends and families. <br>Visit us on our stores nationwide!</p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.slicknav.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#list').slicknav();
});
</script>
</body>
</html>
so I will explain cause i have been in your place before ..
first you are making the elements inside #descrip position absolute and that's okay if u add position relative and a height to #descrip .. cause now the elements are flowing out of that #descrip container and that container's height is small so the about is coming after it therefore under the element
what would be better is using the margins and so on to place the element in the place u want .. read about margin auto also is really help full .. and be careful with float .. read about flex box also really helpful
So I cant find a way to keep this navbar in my website from automatically putting itself over top of a header image! I try setting the navbar's position to relative, but that doesn't do anything! I wanna keep my header image's position to be both top and left 0, but without setting the images position to absolute, I cannot get the image to stay at 0 top and left on the screen!
body {
font-family: Roboto;
background-color: #F0F0F0;
}
.header-img {
position: absolute;
background-repeat: no-repeat;
top: 0px;
left: 0px;
}
.navbar ul {
list-style-type: none;
color: white;
position: relative;
}
.navbar ul li {
border: 1px solid black;
padding-right: 2em;
padding-left: 2em;
display: inline;
}
<!DOCTYPE html>
<head>
<title>Official Rusty Ohio Server</title>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<img src="rusty ohio background.png" class="header-img" width="100%" height="95%">
<nav class="navbar">
<ul>
<li>Plugins</li>
<li>Server Status</li>
<li>Donate</li>
</ul>
</nav>
</body>
</html>
try this in css
.navbar{
position: absolute;
z-index: 11;
}
.header-img{
z-index:10;
}
I would recommend using a background image which will give you more control over the image re-sizing respective to your container. You can implement something like below to achieve what you want.
body {
font-family: Roboto;
background-color: #F0F0F0;
}
#header-wrapper {
width: 100%;
height: 50px;
}
.header-img {
float: left;
width: 100px;
margin: 0px;
height: 100%;
background-image: url("http://cdn6.bigcommerce.com/s-kjbnzo2/products/12634/images/13240/LP_8206__81949.1444680903.500.500__96128.1446754363.1280.1280.jpg?c=2");
background-repeat: no-repeat;
background-size: auto 100%;
top: 0px;
left: 0px;
}
.navbar {
float: left;
width: 80%;
}
.navbar ul {
list-style-type: none;
color: white;
position: relative;
}
.navbar ul li {
border: 1px solid black;
padding-right: 2em;
padding-left: 2em;
display: inline;
}
<div id="header-wrapper">
<div class="header-img"></div>
<nav class="navbar">
<ul>
<li>Plugins</li>
<li>Server Status</li>
<li>Donate</li>
</ul>
</nav>
</div>
I have to make a website for computer science at school and I have a problem with centering the menu bar. I want it to be centered around the menu button, but it puts the icon off-center the way I do it.
How can I center the entire menu around the central li element?
Here's the code:
body {
background-color: /*#C94421*/
#353535;
margin: 0;
/* reset de standard marges van de body -> geen randen links en rechts naast .menuBar div */
text-align: center;
}
.menuBar {
height: 70px;
width: 100%;
}
.menuBar img {
text-align: center;
}
.menuBar ul li {
display: inline;
padding-right: 65px;
line-height: 70px;
}
.menuBar ul li a {
color: white;
text-decoration: none;
line-height: 70px;
font-family: 'Raleway', sans-serif;
font-size: 36px;
width: 100px;
}
.menuBar a:hover {
border-bottom: 1px solid white;
}
.jumbotron .container {
height: 550px;
width: 60%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
border-top: 4.5px double white;
border-bottom: 4.5px double white;
}
<!DOCTYPE html>
<html>
<head>
<title> Homepagina </title>
<link rel="stylesheet" type="text/css" href="main.css">
<link href='https://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
</head>
<body>
<div class="menuBar">
<ul>
<li> Over mij </li>
<li> Hobbies </li>
<li>
<img src="logoNaam.jpg">
</li>
<li> Muziek </li>
<li> Waarom informatica </li>
</ul>
</div>
<div class="jumbotron">
<div class="container">
hoi
</div>
</div>
</body>
</html>
Here are the changes in the code :
You have to add :
.menuBar ul{
padding-left: 0px;}
also relace this :
.menuBar ul li {
display: inline;
padding-right: 65px;
line-height: 70px;}
with
.menuBar ul li {
display: inline-block;
width: 150px;
padding-right: 15px;
line-height: 70px;}
Also remove width: 100px; from .menuBar ul li a
Better to reduce the font size to get it well aligned in the frame.
I got the image centered using a flexbox layout. The image is always in the exact center of the page, and the menu items flow to the left and right of the centered image.
I adjusted the font sizes and padding so that it shows up well in the demo. I also needed to change the li to div to get the menu to work semantically after the changes.
Live Demo:
body {
background-color: /*#C94421*/ #353535;
margin: 0; /* reset de standard marges van de body -> geen randen links en rechts naast .menuBar div */
text-align: center;
}
.menuBar {
height: 70px;
width: 100%;
}
.menuBar img {
text-align: center;
}
.menuBar {
display: flex;
}
.menuBar > div {
display: block;
line-height: 70px;
flex-basis: 0;
flex-grow: 1;
}
.left {
text-align: right;
}
.right {
text-align: left;
}
.menuBar > div > div {
display: inline-block;
padding: 0 15px;
}
.menuBar > div.central {
flex-basis: auto;
flex-grow: 0;
padding: 0 15px;
}
.menuBar > div a {
color: white;
text-decoration: none;
line-height: 70px;
font-family: 'Raleway', sans-serif;
font-size: 14px;
width: 100px;
}
.menuBar a:hover {
border-bottom: 1px solid white;
}
.jumbotron .container {
height: 550px;
width: 60%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
border-top: 4.5px double white;
border-bottom: 4.5px double white;
}
<div class="menuBar">
<div class="left"><div> Over mij </div>
<div> Hobbies </div></div>
<div class="central"> <img src="logoNaam.jpg"> </div>
<div class="right">
<div> Muziek </div>
<div> Waarom informatica </div>
</div>
</div>
<div class="jumbotron">
<div class="container">
hoi
</div>
</div>
JSFiddle Version: https://jsfiddle.net/2ejfdoc3/1/