I'd like my website to look like this
I believe that I must use Flexbox if I want to make my navigation bar buttons the same length. Should I try to make my whole website using Flexbox, or just do the navigation bar?
I can make a website that looks like this codepen sample, with columns/rows inside columns/rows, but I don't know how to center the title (ignoring the other text areas). Can Flexbox containers be given absolute positions, and ignore other Flexbox containers?
Thanks, DMM
P.S. If I've said something 'wrong' or not clearly, please comment and I'll do my best to clear it up.
EDIT: This is the html on my current website (viewable at matt.matt.cat (need more rep to post more than 2 links :P))
<!DOCTYPE html>
<html>
<title>Just another website</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<style>
body,h1 {text-align:center; font-family: "Raleway", sans-serif}
body, html {height: 100%}
.bgimg {
background-image: url("http://www.w3schools.com/w3images/forestbridge.jpg");
/* leave 5% room for navbar */
min-height: 95%;
background-position: center;
background-size: cover;
}
.navbar-column {
text-align: center;
float: left;
width: 20%;
}
#navbar {
height: 5%;
background: #053a2b;
}
.navbar_link {
text-decoration: none;
background-color: transparent!important;
}
</style>
<body>
<!-- Dark olive green navbar at the top of the page, has links to other pages, can only be seen if auth -->
<div id="navbar" class="w3-animate-opacity w3-text-white">
<p id="navbar_left" class="navbar-column">
<a href="http://www.google.com" class="navbar_link">Navbar 1</a>
</p>
<p id="navbar_center_left" class="navbar-column w3-border-left">
<a href="http://www.google.com" class="navbar_link">Navbar 2</a>
</p>
<p id="navbar_center" class="navbar-column w3-border-left">
<a href="http://www.google.com" class="navbar_link">Navbar 3</a>
</p>
<p id="navbar_center_right" class="navbar-column w3-border-left">
<a href="http://www.google.com" class="navbar_link">Navbar 4</a>
</P>
<p id="navbar_right" class="navbar-column w3-border-left">
<a href="http://www.google.com" class="navbar_link">Navbar 5</a>
/
<a href="http://www.bing.com" class="navbar_link">Navbar 6</a>
</p>
</div>
<div class="bgimg w3-animate-opacity w3-text-white">
<div class="w3-display-middle w3-display-container w3-xxxlarge">
<!-- Main title -->
<h1 class="w3-animate-top">
(PROBABLY NOT) COMING SOON
</h1>
<hr class="w3-border-grey" style="margin:auto; width:40%">
<!-- Subheading -->
<p id="subheading" style="margin:auto; width: auto%;">
subheading
</p>
</div>
<!-- Top right caption -->
<p class="w3-display-topright w3-padding-large w3-large" style="top: 20px;">
Top right caption
</p>
<!-- Bottom right year -->
<p class="w3-display-bottomright w3-padding-small w3-medium">
2017
</p>
</div>
</body>
</html>
This is my converted HTML using Flexbox:
<!DOCTYPE html>
<html>
<title>Just another website</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<style>
body,h1 { font-family: "Raleway", sans-serif }
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.bgimg {
background-image: url("http://www.w3schools.com/w3images/forestbridge.jpg");
min-height: 100%;
}
#wrapper {
color: white;
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: center;
align-items: stretch;
}
#navbar {
border: 1px solid blue;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
align-items: center;
flex-shrink: 0;
}
#navbar .box {
background-color: #1b632a;
padding: 0 2em 0 1em;
margin: .2em .2em .2em 0;
}
#navbar .box a {
text-decoration: none;
color: inherit;
}
#main {
align-self: center;
text-align: center;
border: 1px solid blue;
}
#main h1 { font-family: "Raleway", sans-serif; }
#top_right {
border: 1px solid blue;
flex-shrink: 0;
}
</style>
<body>
<div id="wrapper" class="bgimg">
<div id="navbar">
<div class="box">
<h3><a href="http://www.google.com">Navbar 1</a></h3>
</div>
<div class="box">
<h3><a href="http://www.google.com">Navbar 2</a></h3>
</div>
<div class="box">
<h3><a href="http://www.google.com">Navbar 3</a></h3>
</div>
</div>
<div id="main">
<h1>I'd like this title to be centered on the webpage, not in between the other two 'rows'</h1>
<hr style="border-color: #9e9e9e; width: 40%;">
<p style="font-size: 60px; margin: auto;">∞</p>
</div>
<div id="top_right">
<h3><== I'd like this to go over the top of the title</h3>
</div>
</div>
</body>
</html>
