For the purpose of learning flexbox i did recreation of Google front page in my language. I did it a couple of times because some things were not chear (when to use display: flexbox). But now i hit a wall. How to position footer so that it is on bottom and that Slovenia is on one line, the two UL lists on same line but one on left and one on right?
I put html and body height to 100% and also footer height to 100%. But as i did this the footer jumped up for some reason. Why is that? Slovenia and "Google je na voljo v: English" had been pushed up.
Here is my codepen: https://codepen.io/jernejt/pen/KooWwy
And this is final screenshot: https://imgur.com/bBjMvxS
Here is my markup (CSS somehow i can not paste it here)
/* Fake Google CSS */
* {
margin: 0;
padding: 0;
}
html,
body {
font-family: Arial, sans-serif;
font-size: 13px;
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
header {
margin: 20px 20px 0 0;
}
header ul {
display: flex;
list-style-type: none;
align-items: center;
justify-content: flex-end;
}
header ul li {
padding-left: 10px;
}
header ul li a {
color: rgba(0, 0, 0, 0.87);
text-decoration: none;
}
header ul li a:hover {
text-decoration: underline;
}
#app {
margin-top: 3px;
}
main {
display: flex;
flex-flow: column;
align-items: center;
}
#google_logo {
width: 272px;
height: auto;
margin: 150px 0 30px 0;
}
form {
display: flex;
flex-flow: wrap;
justify-content: center;
width: 500px;
}
form input {
width: 100%;
width: 528px;
height: 44px;
padding: 6px 9px 6px 16px;
border: 1px solid #EAEAEA;
font-size: large;
box-shadow: 0 2px 3px #EAEAEA;
margin-bottom: 40px;
}
button {
display: flex;
color: #757575;
font-size: 13px;
font-weight: bold;
background-color: #F2F2F2;
border: none;
padding: 10px;
border-radius: 5px;
margin-bottom: 40px;
}
button:nth-child(2) {
margin-right: 10px;
}
main p a {
text-decoration: none;
color: #1a0dab;
}
main p a:hover {
text-decoration: underline;
}
footer {
display: flex;
flex-flow: wrap;
height: 100%;
/*Why does this push Slovenia up?*/
}
footer p {
display: block;
width: 100%;
}
footer ul {
display: flex;
list-style: none;
align-self: flex-end;
}
footer #neki1 {}
footer #neki2 {}
<html>
<head>
<title>Fake Google</title>
<link rel="stylesheet" type="text/css" href="google.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<ul>
<li>Gmail</li>
<li>Slike</li>
<li><i class="material-icons" id="app">view_module</i></li>
<li>
<img src="http://via.placeholder.com/32x32" alt="User photo">
</li>
</ul>
</header>
<main>
<img id="google_logo" src="http://via.placeholder.com/272x92" alt="Google logo">
<form>
<input type="text">
<button>Iskanje Google</button>
<button>Klik na srečo</button>
</form>
<p>Google je na voljo v: English</p>
</main>
<footer>
<p>Slovenija</p>
<ul id="neki1">
<li>Oglaševanje</li>
<li>Posel</li>
<li>Predstavitev</li>
</ul>
<ul id="neki2">
<li>Zasebnost</li>
<li>Pogoji</li>
<li>Nastavitve</li>
<li>Uporabi Google.com</li>
</ul>
</footer>
</body>
</html>
The set value of height (in a flex-direction:column parent) - or width (in a flex-direction:row parent) is setting the initial value of flex-basis.
This means the distribution of free space is starting from:
<header>: 35px
<main>: 460px
<footer>: 100% (of parent height).
Flexbox starts from the initial value of calc(100% + 495px), and tries to shrink them back to 100%, based on their flex-shrink properties. And all three of them have default flex-shrink value, which is 1 ( = shrinkable).
If you don't want <footer> to overlap <main>, don't let <main> shrink:
main {
flex-shrink: 0
}
in addition to Andrei's explanation for why your footer is overlapping the main , if you want the footer to be always in the bottom, reduce its height and use margin-top:auto
main {
flex-shrink: 0;
}
footer{
height: 50px; // or %
margin-top: auto;
}
here's a fiddle : https://jsfiddle.net/f9e74L3c/1/
Related
Code: https://hastebin.com/otemiveduh.xml
Problem Description: There are two problems being that when another element, such as p-tag, is added underneath the section for the navigation bar. It'll be hidden underneath the navigation bar. In addition, the second error is that when highlighting over the image it doesn't change the background-colour of the whole entire height and if I change any of the other code in different sections, it ruins the vertical aligning of the image. I've been stuck with this error(s) for awhile and have to turn to the community for aid.
<HTML>
<Head>
<style>
body {
margin: 0;
}
div.Header {}
div.Navigation {
padding: 0;
margin: 0;
list-style: none;
line-height: 50px;
height: 50px;
width: 100%;
background-color: #001a33;
position: absolute;
overflow: hidden;
z-index: 2;
flex-direction: row;
display: flex;
align-items: center;
justify-content: space-around;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
div.Navigation>a {
display: block;
flex-grow: 1;
text-align: center;
}
div.Navigation a img {
height: 22.1;
width: 44;
vertical-align: middle;
}
div.Navigation a:visited,
div.Navigation a:active,
div.Navigation a:link {
color: white;
text-decoration: none;
}
div.separator {
margin-left: 60%;
}
div.Navigation a:hover {
background-color: #000d1a;
}
</style>
</Head>
<Body>
<div class="Header">
<div class="Navigation">
<img src="icons/home-button.png" />
Ongoing Projects
Purchase Service
<div class="separator"></div>
Employment
Portfolio
About
</div>
</div>
<div class="Main">
</div>
<div class="Footer">
</div>
</Body>
</HTML>
You are using absolute position on the navigation so you need to add padding to main content in order to be able to add content without going under the navigation. You have also a useless element to make the separation between both parts of the navigation. Instead you can simply use margin-left:auto.
You are also missing units in the height/width of the image :
body {
margin: 0;
}
div.Navigation {
padding: 0;
margin: 0;
list-style: none;
line-height: 50px;
height: 50px;
width: 100%;
background-color: #001a33;
position: absolute;
overflow: hidden;
z-index: 2;
flex-direction: row;
display: flex;
align-items: center;
justify-content: space-around;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
div.Navigation>a {
display: block;
text-align: center;
padding:0 10px;
}
div.Navigation>a:nth-child(4) {
margin-left: auto;
}
div.Navigation a img {
height: 22.1px;
width: 44px;
vertical-align: middle;
}
div.Navigation a:visited,
div.Navigation a:active,
div.Navigation a:link {
color: white;
text-decoration: none;
}
div.Navigation a:hover {
background-color: #000d1a;
}
.Main {
padding-top:55px;
}
<div class="Header">
<div class="Navigation">
<img src="https://lorempixel.com/100/100/" />
Ongoing Projects
Purchase Service
Employment
Portfolio
About
</div>
</div>
<div class="Main">
<p>Content</p>
</div>
<div class="Footer">
</div>
I'm new to HTML and CSS.
I'm trying to do a website, and I'm starting by the navbar, but this navbar is not "scalable" for every screen side, when it is on full screen fine but when I minimize it it does not load the part on the right side wich is "About". All of the menus are pointing to the same page and for now that's the objective.
Here's the Code:
body {}
.navbardiv {}
.navbar_ul {
list-style-type: none;
margin: 0;
padding: 0;
/*overflow:hidden;*/
background-color: #333;
border: 5px solid gray;
margin: -8px;
width: auto;
min-width: 600px;
height: 70px;
}
li {
float: left;
padding: 10px 150px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<!--NAVBAR-->
<div class="navbardiv">
<ul class="navbar_ul">
<li class="navbar_li_Contact">Contact</li>
<li class="navbar_li_WebHosting">Webhosting</li>
<li class="navbar_li_About">About</li>
</ul>
</div>
You are setting the padding for li to 150px which is very high, you need to reduce.
But if you want the links to take the whole width and to be evenlly spaced, then you can use flex box and justify-content: space-between;
see code snippet:
body {}
.navbardiv {}
.navbar_ul {
list-style-type: none;
margin: 0;
padding: 0;
/*overflow:hidden;*/
background-color: #333;
border: 5px solid gray;
margin: -8px;
width: auto;
min-width: 600px;
height: 70px;
display: flex;
justify-content: space-between;
}
li {
float: left;
padding: 10px 20px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<!--NAVBAR-->
<div class="navbardiv">
<ul class="navbar_ul">
<li class="navbar_li_Contact">Contact</li>
<li class="navbar_li_WebHosting">Webhosting</li>
<li class="navbar_li_About">About</li>
</ul>
</div>
Your navbar is not responsive because of min-width: 600px; part. What this one will do is that when screen resolution is below 600px in width it will keep your navbar at 600 px. Thus it will align it to leftmost part of the screen which will leave you a cropped right edge.min-width:100%; wont work either since it will start to crop when inner elements of the navbar will not fit.
It is easy to fix this. Just change it to width:100%;.
im getting a white space when im putting text into the div. How to remove that ? i would like to ask you aswell how to make the text "welkom op dennis website" automatic center in the middle of the div.
here you can see the code :
.container {
max-width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
display: inline-block;
}
html,
body {
margin: 0px;
padding: 0px;
}
.nav {
height: 5%;
width: 100%;
background-color: white;
}
.top {
height: 40%;
width: 100%;
background-color: #1E90FF;
}
.nav {
background-color: #444;
}
.nav a {
display: inline-block;
background-color: #444;
font-family: Arial;
padding: 10px 20px;
text-decoration: none;
color: white;
float: right;
}
.nav a:hover {
background-color: #1E90FF;
}
.logo {
color: white;
display: inline-block;
padding: 10px 20px;
font-family: Arial;
text-decoration: none;
}
p.center {
padding: 150px 550px;
color: white;
font-family: Arial;
font-size: 25px;
{}
<header>
<title>Dennis Zwart Home Pagina</title>
<link href="css/MyStyle.css" rel="stylesheet" style="css" />
</header>
<body>
<div class="container">
<div class="nav">
<text class="logo">Dennis Zwart</text>
Contact
Games
Foto's
Hobby's
Home
</div>
<div class="top">
<p class="center">Welkom op de website van Dennis Zwart</p>
</div>
</div>
</body>
The space between your navigation and blue text field is from collapsing margins. You'll need to remove the margins created by your <p> element in .top, more on Collapsing Margins.
If you need the text vertically centered as well, you can use relative positioning and translate.
Other Notes
<text> is not a valid HTML element, use <p>, <span>, <div>, <a> etc. instead. I switched it to an <a> in my answer.
I see that you're using percentage heights. Those can be tricky. In order for percentage heights to work a height has to be set on the parent element. If that parent element's height is a percentage, then it's parent needs a height set. So on and so forth all the way to the root element <html> if percentages are used. In my answer I switch the heights to px values.
A number of block level elements (<div>, <nav>) had width: 100%; applied to them, I removed them as they're not needed. A block level element will always take up 100% width of it's containing element by default.
To vertically center your navigation items I set the line-height of the <a> elements equal to the height of the <nav> element.
I removed your .container element as it wasn't doing anything useful. You might need it later (likely in a different location) if you decide to add media queries and limit it's width for various viewport sizes.
html,
body {
margin: 0px;
padding: 0px;
}
.nav {
height: 45px;
background-color: white;
}
.top {
height: 300px;
background-color: #1E90FF;
}
.nav {
background-color: #444;
}
.nav .logo {
float: left;
}
.nav a {
display: inline-block;
background-color: #444;
font-family: Arial;
padding: 0 20px;
text-decoration: none;
line-height: 45px;
color: white;
float: right;
}
.nav a:hover {
background-color: #1E90FF;
}
p.center {
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0;
color: white;
font-family: Arial;
font-size: 25px;
text-align: center;
}
<header>
<title>Dennis Zwart Home Pagina</title>
<link href="css/MyStyle.css" rel="stylesheet" style="css" />
</header>
<body>
<div class="nav">
<a class="logo" href="#">Dennis Zwart</a>
Contact
Games
Foto's
Hobby's
Home
</div>
<div class="top">
<p class="center">Welkom op de website van Dennis Zwart</p>
</div>
</body>
This is because p element has natural margins (defined by browser). Remove it:
p {
margin-top: 0;
}
Then remove the p horizontal padding and center your text with
text-align: center;
In order to remove the blank area on the right side of the screen.
p {
margin-top: 0;
text-align: center;
}
.container {
max-width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
display: inline-block;
}
html,
body {
margin: 0px;
padding: 0px;
}
.nav {
height: 5%;
width: 100%;
background-color: white;
}
.top {
height: 40%;
width: 100%;
background-color: #1E90FF;
}
.nav {
background-color: #444;
}
.nav a {
display: inline-block;
background-color: #444;
font-family: Arial;
padding: 10px 20px;
text-decoration: none;
color: white;
float: right;
}
.nav a:hover {
background-color: #1E90FF;
}
.logo {
color: white;
display: inline-block;
padding: 10px 20px;
font-family: Arial;
text-decoration: none;
}
p.center {
padding: 150px 0px;
color: white;
font-family: Arial;
font-size: 25px;
}
<header>
<title>Dennis Zwart Home Pagina</title>
<link href="css/MyStyle.css" rel="stylesheet" style="css" />
</header>
<body>
<div class="container">
<div class="nav">
<text class="logo">Dennis Zwart</text>
Contact
Games
Foto's
Hobby's
Home
</div>
<div class="top">
<p class="center">Welkom op de website van Dennis Zwart</p>
</div>
</div>
</body>
Okay so I'm in the process of learning flexbox but I cannot understand why my navigation title is above the links.
HTML:
<style>
#import url(https://fonts.googleapis.com/css?family=Oswald:400,700);
.box {
display: flex;
}
.item {
width: 100px;
height: 100px;
background-color: red;
margin: auto;
color: #fff;
}
nav {
font-family: "Oswald", sans-serif;
display: flex;
min-width: 100%;
background-color: #181818;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
max-width: 960px
}
nav a {
display: block;
padding: 1rem;
text-decoration: none;
color: #fff;
font-weight: 400;
transition: all 0.3s ease-in-out;
}
nav a:hover {
color: #343434;
}
.title {
margin: 0 35px 0 10px;
color: #1BC;
}
</style>
<nav>
<div class="container">
<a class="title">Architect</a>
<ul>
<li>Getting Started</li>
<li>Examples</li>
<li>Blog</li>
<li>Forum</li>
</ul>
</div>
</nav>
Container CSS:
.container{
width: 100%;
margin: 0 auto:
max-width: 1200px;
}
Code Pen Link: http://codepen.io/ZoidCraft/pen/XKMewy
I would like the title "Architect" to be align to the left of the links.
You set <a class="title">Architect</a> to display: block; in your css. Block level elements will take up their own line. display: flex; elements will also take up their own line.
To fix your problem you could first remove that display: block; from your nav a style. Then change your nav ul from display: flex; to display: inline-flex;. Now you just need to add some padding back to your nav since everything is display inline now, so add padding: 1em 0; to your nav
Here is an updated CodePen of what I am talking about.
I've created the header and a section on my site. I want to center text within the section. I used Flexbox to center horizontally and vertically. In the screen shots you'll see that part of the "hero-text" section which should be below the header is behind the header. I know that I could fix this using positioning hacks but is there a better way?
Here is the HTML:
<body>
<header>
<img src="images/lookout-logo-small.png" alt="LookOut Software Logo" id="logo">
<nav class="main-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section id="hero-text">
<h1>LookOut Software</h1>
<p>Made in Canada</p>
</section>
</body>
And the CSS:
header{
width: 100%;
background: white;
height: 4.75rem;
box-shadow: 0 0 2px rgba(6,8,8,0.15);
position: fixed;
top: 0px;
}
#logo{
margin: 1rem;
}
nav{
top: 0;
right: 0;
position: absolute;
margin: .5rem;
}
.main-nav ul{
list-style-type: none;
font-weight: bold;
}
.main-nav li{
display: inline-block;
margin: 0 .5rem;
}
.main-nav a{
text-decoration: none;
color: #3a3a3a;
font-size: 0.85rem;
}
a:hover{
text-decoration: none;
color: #FF6952;
border-bottom: 2px solid #30C0D8;
}
/* Content area */
#hero-text{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #FF6952;
}
Instead of using absolute positioning on the nav section, which removes it from the document flow, consider using flexbox for the entire layout.
Try this:
remove absolute positioning from nav
add this to your CSS: body { display: flex; flex-direction: column; }