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; }
Related
So, I have a <nav> tag in <header> tag, but it is weirdly on the top, but I need it to be on the bottom.
Here is what I need it to look like:
And here it looks how it came out:
Here is the CSS code for the buttons and the header it is in.
#header {
background-color: #886D75;
position: absolute;
left: 10px;
top: 0px;
}
#nav {
text-align: right;
float: right;
}
And here is the HTML.
<header id="header">
<img id="logo" src="images/logo.png" alt="kasacast logo">
<nav id="nav">
home
help
tutturu
stream
about
</nav>
</header>
Though there is already an answer here I am giving an easier solution. You can simply use padding:
#header {
background-color: #886D75;
position: absolute;
left: 10px;
top: 0px;
padding-top:10px;
}
#nav {
text-align: right;
float: right;
}
Reference: https://www.w3schools.com/css/css_padding.asp
If i do understand, this will do the trick.
Here some info about it: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
header {
width: 100%;
height: 50px;
background-color: red;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
I fixed it just by doing:
float: right;
padding-top: 18px;
padding-right: 20px;
It gave me the results I wanted.
Not sure if this is what you need:
body {
margin: 0;
padding: 0;
}
#header {
background-image: url("https://i.pinimg.com/originals/75/2b/67/752b67b53f06b3707f133f8e81862ab8.jpg"); /* Use any image you need */
background-repeat: none;
background-size: cover;
height: 100vh;
}
#header #nav {
align-items: center;
background-color: red;
display: flex;
padding: 10px;
justify-content: space-between;
}
#header #nav #logo {
width: 50px;
height: auto;
}
#header #nav a {
color: white;
font-family: Arial; /* Change to whatever font you need */
padding: 10px;
text-decoration: none;
}
<header id="header">
<nav id="nav">
<!-- I'm just using a logo I have to load the image, replace it with your own again -->
<img id="logo" src="https://avatars2.githubusercontent.com/u/34989646?s=400&u=0bfacebf46980e16c03c3dfe62cc34e209be9e06&v=4" alt="kasacast logo">
<div id="navitems">
home
help
tutturu
stream
about
</div>
</nav>
</header>
I'm trying to align all navigation links, besides the logo, to the right side of the container/navigation. I want to keep 1rem margin on both sides so that the content has some space to breathe.
I've tried using the code below but nothing on the page changes:
.menu:not(:first-child){
text-align: right;
}
<body>
<div class="body-wrap">
<header class="header">
<nav role="navigation">
<ul class="menu">
<li class="home-link"><img src="https://www.nicolefenton.com/_/images/dec/circle-menu.svg" height="12" width="12" alt=""></li>
<li>About</li>
<li>Writing</li>
<li>Speaking</li>
<li>Projects</li>
</ul>
</nav>
</header>
</div>
</body>
* { box-sizing: inherit; margin: 0; padding: 0; }
body {
position: relative;
line-height: 1.5em;
min-width: 320px;
margin: 0 auto;
color: #222222;
border: 30px solid #ffffff;
background-color: #f8f7f3;
}
.body-wrap {
display: flex;
min-height: 100vh;
display: box;
}
.header {
width: 100%;
max-width: 960px;
margin-right: 1rem;
margin-left: 1rem;
}
.menu {
display: flex;
position: absolute;
top: -0.83rem;
width: 100%;
max-width: 960px;
}
.menu:not(:first-child){
text-align: right;
}
li {
flex-grow: 1;
position: relative;
margin-right: 1em;
display: inline-block;
}
I expect all the nav links to align to the right when using the :not(:first-child) selector.
This:
.menu:not(:first-child)
selects class menu items that aren't a first child.
What you want is:
.menu :not(:first-child)
which selects non-first-child elements within a .menu class.
Notice the space.
Or better yet, make it more obvious what you really mean:
.menu li:not(:first-child)
You might just have to change to this if all you are looking to do is align the text to the right.
.menu li:not(:first-child){
text-align: right;
}
basically i think its an easy task but i cannot get it right
I have a navigation bar with 5 elements. The third one, which is an round image should be in the center of the webbpage. but because the 4th list element is slightly longer (the word means opening hrs) it does shift to the right a bit. So altough my list (navigation bar) is in the middle of the webpage, the logo itself isnt. I tried a lot but couldnt figure it out.
heres the fiddle:
<header>
<nav>
<ul class="navi">
<li>Home</li>
<li>Gallerie</li>
<li><img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/7/72/Turkey_emblem_round.png" href="#" alt="LS-Lounge"></li>
<li>Öffnungszeiten</li>
<li>Kontakt</li>
</ul>
</nav>
</header>
css here:
nav {
width: 100%;
padding-top: 10px;
padding-bottom: 5px;
font-family: 'Lobster', sans-serif;
letter-spacing: 2px;
text-decoration: none;
background-color: #171717;
text-align: center;
}
ul .navi {
margin: 0 auto;
text-align: center;
}
.logo {
display: block;
height: 10vh;
width: auto;
margin: 0 auto;
padding: 0 5px;
}
.navi {
}
.navi li {
display: inline-block;
vertical-align: middle;
text-align: center;
padding: 0 20;
}
.navi li a{
color: white;
text-decoration: none;
font-size: 4vh;
position: relative;
}
https://jsfiddle.net/emw3b854/
Flexbox would work (You may need to remove the space in you css "ul .navi" should be "ul.navi"
ul.navi {
margin: 0 auto;
text-align: center;
display: flex;
}
.navi li {
display: inline-block;
vertical-align: middle;
text-align: center;
padding: 0 20;
flex-grow: 1;
}
Added demo:
https://jsfiddle.net/u0v6x5e3/
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/
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.