How can I prevent the "about" section (flexcontainer div) from being moved by the header element?
I have a distance between the header element, a title and nav bar, and the "about" section. Upon resizing the window, the "about" section gets moved, when there is still space inbetween the elements.
HTML Code:
<body style="background-image: url(#); background-color: #a6afbe;">
<header>
<h1>Haruhi Suzumiya 3D School</h1>
<nav>
<ul class="nav-list">
<li><a class="noselect" href="#">Home</a></li>
<li><a class="noselect" href="#">About</a></li>
<li><a class="noselect" href="#">Pictures</a></li>
<li><a class="noselect" href="#">Contact</a></li>
<li><a class="noselect"
href="#"</a></li>
</ul>
</nav>
</header>
<div class="flexcontainer" style="top: 30rem">
<section>
<h2>About</h2>
<article>
<p class="main">
texttexttext
</p>
<img src="#" alt="">
</article>
</section>
</div>
</body>
CSS Syle:
.flexcontainer {
top: inherit;
display: -webkit-flex;
display: flex;
position:relative;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
justify-content: center;
}
header {
display: flex;
flex-flow: row wrap;
flex-direction: column;
justify-content: center;
}
Illustration displaying how it looks when not being moved:
Element not moved
Illustration displaying how it looks when being resized and moved:
Element being moved
The about section is moving away from the top thanks to style="top: 30rem. You should remove your inline style attribute and use a media query in the main css file for your "flexcontainer" class. My suggustion for any future webpage related projects is to build the site mobile first.
e.g:
#media screen and (max-width: 1000px){
top: 30rem
}
#media screen and (max-width: 500px){
top: 20rem
}
#media screen and (max-width: 300px){
top: 15rem
}
I found a solution! I used absolute positioning on the header.
Code:
<body style="background-image: url(#); background-color: #a6afbe;">
<div class="flexcontainer">
<header>
<h1>Haruhi Suzumiya 3D School</h1>
<nav>
<ul class="nav-list">
<li><a class="noselect" href="#">Home</a></li>
<li><a class="noselect" href="#">About</a></li>
<li><a class="noselect" href="#">Pictures</a></li>
<li><a class="noselect" href="#">Contact</a></li>
<li><a class="noselect" href="#">Wiki</a></li>
</ul>
</nav>
</header>
<section style="top: 45rem" >
<h2>About</h2>
<article>
<p class="main">
texttexttext
</p>
<img src="#" alt="">
</article>
</section>
</div>
</body>
CSS:
.flexcontainer {
position: relative;
top: inherit;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
justify-content: center;
text-align: center;
font-weight: bold;
}
header {
display: flex;
justify-content: center;
flex-direction: column;
position: absolute;
}
Illustration of not being moved: not being moved
Illustation of not being moved when resizing: enter image description here
Related
okay so, im trying to make my navigation bar responsive and im having some troubles
my html and my css
#media (max-width: 600px) {
.toggle-btn {
display: flex;
}
.logo {
display: none;
}
header {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.row ul {
display: flex;
flex-direction: column;
}
}
<header>
<div class="container">
<a href="" class="toggle-btn">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="row">
<img src="myLogo.png">
<nav>
<ul>
<li>Home</li>
<li>Work</li>
<li>About us</li>
<li>Support</li>
</ul>
</nav>
</div>
</div>
</header>
okay so, i made the li's display in a column so far. And now i want to get them to the center of the page. And i have tried so so much like justify-content: center; and justify-items: center; and text-align center; i dont know how to do this could someone help please?
Thanks :)
align-items: flex-start; should be align-items: center;
I would suggest going through a few articles on Flexbox, this would be a good start.
I am building an Angular app in electron. The app opens in full screen. And I have a requirement that footer always remain at bottom of the page. In spite user opening this app in different resolution.
Footer is 'Build was published on 20200309.'
I have attached a picture that shows footer is not exactly at bottom of the page.
Code snippets
app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>
<div class="footer">
<p>Build was published on 20200309.</p>
</div>
I have tried both the css style but both hasn't worked for me
app.component.css
.footer {
margin-bottom: 0px !important;
}
app.component.css
.footer {
/* margin-top: 25px; */
margin-right: 1280px;
display: flex;
flex-direction: row;
justify-content: flex-end;
height: 160px;
align-items: flex-end;
}
But when I make footer display flex and when screen resolution changes it doesn't display footer at bottom of the page.
I am not that good in css, can someone help me to get footer sticking bottom of the page aligned to left of the sceen inspite of screen resolution on application window size is changed.
Image 1 shows footer at bottom of screen
Image 2 shows after screen size is changed, you can see footer position is changed
Just try position: relative & bottom: 0 for this purpose,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
}
.footer {
display: flex;
flex-direction: row;
justify-content: flex-end;
height: 160px;
align-items: flex-end;
position: relative;
bottom: 0;
margin: 0;
}
<div class="main">
<div style="text-align:center">
<h1>
Welcome to Angular!
</h1>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>
<div class="footer">
<p>Build was published on 20200309.</p>
</div>
</div>
Was it necessary? In order to solve your problem, you can use flex rules. I wrapped your content in the parent div main, and set flex rules to it, which will allow your content to stretch across the height of the entire page, and also specified a height of 100vh. Also in the footer class you have the justify-content: flex-end rule, so margin-left 1280px does not make sense.
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
}
.footer {
/* margin-top: 25px; */
/*margin-right: 1280px;*/
display: flex;
flex-direction: row;
justify-content: flex-end;
height: 160px;
align-items: flex-end;
}
<div class="main">
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>
<div class="footer">
<p>Build was published on 20200309.</p>
</div>
</div>
You can do that using flexbox.
here's the template you will have to mimic in your app.
<div class="main-container">
<div class="content">content</div>
<div class="footer">footer</div>
</div>
Your css will look like this:
body, html {
height: 100%;
margin: 0;
}
.main-container {
height: 100%;
display: flex;
flex-direction: column;
}
.content {
background-color: green;
flex: 1;
}
.footer {
flex: 0 0 auto;
height: 100px;
background-color: red;
}
The hint is that your div content will take the remaining space, leaving your footer at the bottom of the page.
I am using the CSS framework Bulma (first time), though my question might not be Bulma specific, I thought I'd include that just be clear.
I have a navigation bar that has a centered set of links, but also right-align elements. Here is a screenshot:
You can ignore the fixed leaves on the left. I want to know how I can get the cart and the login button to be right aligned whilst having the other bits centre aligned.
Here is a codepen of what I have tried. I just do not know of the proper way to have the car and the login right aligned. I mean I can position absolute them, but that sounds silly.
HTML CODE
<nav class="navbar is-fixed-top">
Products
Our Story
<div id="logo">Logo placeholder</div>
Blog
Contact Us
</nav>
CSS CODE
nav {
display: flex;
width: 100%;
height: 100px;
align-items: center;
justify-content: center;
}
nav a {
text-decoration: none;
color: #194522;
font-weight: bold;
margin: 0 40px;
display: flex;
align-items: center;
}
nav a:hover {
color: #abcf39;
}
How can I get my navigation like that?
Bulma has two regions in its navbar called navbar-startand navbar-end for control of alignment. Just add an additonal class (in my example: navbar-start--centered) to adapt the "start region" to your needs:
.navbar-start--centered {
flex-grow: 1;
justify-content: center;
}
Here a codepen to play with.
Look at it with a wide viewport - it is desktop only. If you want the start region in the viewports center, you could additionally position the "end region" absolutely.
.navbar-start--centered {
flex-grow: 1;
justify-content: center;
}
<nav class="navbar" role="navigation" aria-label="main navigation">
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start navbar-start--centered">
<a class="navbar-item" href="">Products</a>
<a class="navbar-item" href="">Our Story</a>
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
</a>
<a class="navbar-item" href="">Blog</a>
<a class="navbar-item" href="">Contact Us</a>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<span class="icon">
<i class="fas fa-shopping-cart"></i>
</span>
<span>Cart</span>
</a>
<a class="button is-light">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>
You can add an empty element to the left (as a placeholder) and one to the right (to hold the links) and set them to be flex:1.
Then use normal flex positioning to set the contents of the second (right) container to be right aligned.
nav {
display: flex;
width: 100%;
height: 100px;
align-items: center;
justify-content: center;
}
nav a {
text-decoration: none;
color: #194522;
font-weight: bold;
margin: 0 40px;
display: flex;
align-items: center;
}
nav a:hover {
color: #abcf39;
}
.nav-container{
display:flex;
flex:1;
justify-content: flex-end;
}
.nav-container a {
margin:0 10px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" />
<nav class="navbar is-fixed-top">
<div class="nav-container"></div>
Products
Our Story
<div id="logo">Logo placeholder</div>
Blog
Contact Us
<div class="nav-container">
🛒
Login
</div>
</nav>
I'm sure this is due to some misunderstanding on my part, but it seems like setting flex-direction: column on an element should make the children of that element show up in a horizontal row.
I'm trying to do a very simple layout. At the top, you should see the standard logo, then some navigation links and I also have some controls. Below that the content should be showing up with in a single column which each entry below the previous.
The content is showing up as I expect, but inside the header tag, only the links are doing what I expect. Why is that? What needs to be changed to make logo, link #1, link #2, a, and b all show up in a single row?
* {
margin: 5px;
padding: 5px;
border: 1px #ccc solid;
}
html {
display: flex;
}
.App {
flex-direction: row;
}
header {
flex-direction: column;
}
.Content {
flex-direction: row;
}
<div class='App'>
<header>
<img src='#.png' alt='logo'>
<nav>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
</nav>
<div class='Controls'>
<button>a</button>
<button>b</button>
</div>
</header>
<div class='Content'>
<p>Lorem ipsum ...</p>
<p>Lorem ipsum ...</p>
</div>
</div>
Thanks for your help!
You are giving flex to the wrong element. You should give it to header because that's your parent element to all other elements in that div like this:
header{
display:flex;
flex-direction:row;
}
Check out this tutorial where they explain everything about Flexbox:
https://medium.freecodecamp.org/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af
Or quick guide here:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Hope this helps.
flex-direction: column will stack element vertically, as a column, not horizontally, like a row.
As Flexbox is a parent/child relation, adding display: flex to the html will only make the body a flex item.
The flex-direction is a flex container property, and needs to be combined with display: flex (which make the element a flex container) to apply and control the children's flex direction.
In below sample, the applied properties will make the App's children stack vertical, and the header's horizontal.
Stack snippet
* {
margin: 5px;
padding: 5px;
border: 1px #ccc solid;
}
.App {
display: flex;
flex-direction: column; /* stack vertically */
}
header {
display: flex;
flex-direction: row; /* default (can be omitted), horizontal */
}
<div class='App'>
<header>
<img src='#.png' alt='logo'>
<nav>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
</nav>
<div class='Controls'>
<button>a</button>
<button>b</button>
</div>
</header>
<div class='Content'>
<p>Lorem ipsum ...</p>
<p>Lorem ipsum ...</p>
</div>
</div>
because you're trying to use flex-direction on elements that are not flex-containers.
"Display" property is not inherited, so you're basically setting flex-direction on display:block items, which will do absolutely nothing.
You need to add display:flex to each element were you want the childrens to behave like flex-items.
<style>
* {
margin: 5px;
padding: 5px;
border: 1px #ccc solid;
}
html {
display: flex;
}
.App {
display: flex;
flex-direction: row;
}
header {
display: flex;
flex-direction: column;
}
.Content {
display: flex;
flex-direction: row;
}
</style>
<html>
<div class='App'>
<header>
<img src='#.png' alt='logo'>
<nav>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
</nav>
<div class='Controls'>
<button>a</button>
<button>b</button>
</div>
</header>
<div class='Content'>
<p>Lorem ipsum ...</p>
<p>Lorem ipsum ...</p>
</div>
</div>
</html>
Apply display:flex to the header.
The rest is unnecessary and the flex-direction statements at the moment will have no effect since you have not added display:flex to those elements.
* {
margin: 5px;
padding: 5px;
border: 1px #ccc solid;
}
header {
display: flex;
}
<div class='App'>
<header>
<img src='#.png' alt='logo'>
<nav>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
</nav>
<div class='Controls'>
<button>a</button>
<button>b</button>
</div>
</header>
<div class='Content'>
<p>Lorem ipsum ...</p>
<p>Lorem ipsum ...</p>
</div>
</div>
I am trying to space my navigation items in my header evenly for desktop display using flexbox, justify content: space-around.
However it seems as though having .header also set to flex is interfering, as I am able to implement space-around when I comment out .header as display flex.
Tried everything I can think of, so now I come to the experts!
Any ideas greatly appreciated. Thank you.
.header {
margin-bottom: 15%;
display: flex;
justify-content: space-between;
}
.header-ul {
display: flex;
justify-content: space-between;
}
<section class="home">
<header class="header">
<h1 class="h1">made tight</h1>
<i class="fa fa-bars is-hidden-tablet" aria-hidden="true"></i>
<!--non-mobile nav-->
<ul class="header-ul is-hidden-mobile">
<li href='#'>Home</li>
<li href='#'>Studio</li>
<li href='#'>Services</li>
<li href='#'>Careers</li>
<li class='contact-li' href='#'>Contact</li>
</ul>
</header>
You can add margin-left to ul.header-ul.is-hidden-mobile li
.header {
margin-bottom: 15%;
display: flex;
justify-content: space-between;
}
.header-ul {
display: flex;
justify-content: space-between;
}
ul.header-ul.is-hidden-mobile li {
margin-left:30px;
}
<section class="home">
<header class="header">
<h1 class="h1">made tight</h1>
<i class="fa fa-bars is-hidden-tablet" aria-hidden="true"></i>
<!--non-mobile nav-->
<ul class="header-ul is-hidden-mobile">
<li href='#'>Home</li>
<li href='#'>Studio</li>
<li href='#'>Services</li>
<li href='#'>Careers</li>
<li class='contact-li' href='#'>Contact</li>
</ul>
</header>
You can use flex-grow: 1 to make the nav fill the remaining space.
.header {
margin-bottom: 15%;
display: flex;
justify-content: space-between;
}
.header-ul {
display: flex;
justify-content: space-between;
flex-grow: 1;
}
<section class="home">
<header class="header">
<h1 class="h1">made tight</h1>
<i class="fa fa-bars is-hidden-tablet" aria-hidden="true"></i>
<!--non-mobile nav-->
<ul class="header-ul is-hidden-mobile">
<li href='#'>Home</li>
<li href='#'>Studio</li>
<li href='#'>Services</li>
<li href='#'>Careers</li>
<li class='contact-li' href='#'>Contact</li>
</ul>
</header>