Hi guy i'm working on a portfolio for my freecodecamp responsive web design project i already made my wireframe as you can see above but im kind of stuck using flexbox to make a sticky side menu i can't get the 100% height for my main-menu secton here is what i wrote
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
nav,
ul,
#main-menu {}
.box {
height: 100%;
background: #DDD;
width: 15%;
display: flex;
flex-direction: column;
}
.menu-item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
text-align: center;
border: 1px solid black;
}
<main>
<section id="main-menu" class="menu">
<nav>
<ul class="box">
<li class="menu-item"></li>
<li class="menu-item"></li>
<li class="menu-item"></li>
<li class="menu-item"></li>
<li class="menu-item"></li>
<li class="menu-item"></li>
<li class="menu-item"></li>
</ul>
</nav>
</section>
<section id="main"></section>
</main>
use min-height: 100vh; this will change the height of the element to the height of the available viewport (visible area in the page). check the snippet below:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
nav,
ul,
#main-menu {
min-height: 100vh;
}
.box {
height: 100%;
background: #DDD;
width: 15%;
display: flex;
flex-direction: column;
}
.menu-item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
text-align: center;
border: 1px solid black;
}
<main>
<section id="main-menu" class="menu">
<nav>
<ul class="box">
<li class="menu-item"></li>
<li class="menu-item"></li>
<li class="menu-item"></li>
<li class="menu-item"></li>
<li class="menu-item"></li>
<li class="menu-item"></li>
<li class="menu-item"></li>
</ul>
</nav>
</section>
<section id="main"></section>
</main>
Related
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 7 months ago.
For a project, I need to create the following footer
However like I said in the title, my footer's background-color neither take the full width or 'bottom' of the screen, there is a white space.
I tried to apply width:100% on footer but it doesn't work. I also tried to fiddle a bit with flexbox, but it was also fruitless.
Here is my code:
footer {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
background-color: #F2F2F2;
margin-top: 30px;
}
footer a {
position: relative;
right: 36px;
color: black;
text-decoration: none;
}
footer a:hover {
color: #0065FC;
}
.footer-nav {
display: flex;
flex-flow: column wrap;
list-style: none;
}
.footer-item {
margin-top: 6px;
}
<footer>
<nav>
<h4>About</h4>
<ul class="footer-nav">
<li class="footer-item">Site Map</li>
<li class="footer-item">General Terms and Conditions</li>
<li class="footer-item">Data and Privacy</li>
</ul>
</nav>
<nav>
<h4>Our Accommodations</h4>
<ul class="footer-nav">
<li class="footer-item">Quality Assessments</li>
<li class="footer-item">You have a hotel ?</li>
</ul>
</nav>
<nav>
<h4>Assistance</h4>
<ul class="footer-nav">
<li class="footer-item">Help Desk</li>
<li class="footer-item">Contact Us</li>
</ul>
</nav>
</footer>
I thank in advance anybody who will take the time to help me.
for solving the issue about the space on the right and left use this code:
body {
margin: 0;
}
this happens because the browser applies by default some margin, you just need to reset it. (override it)
body {
margin: 0;
}
footer {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
background-color: #f2f2f2;
margin-top: 30px;
}
footer a {
position: relative;
right: 36px;
color: black;
text-decoration: none;
}
footer a:hover {
color: #0065fc;
}
.footer-nav {
display: flex;
flex-flow: column wrap;
list-style: none;
}
.footer-item {
margin-top: 6px;
}
<body>
<footer>
<nav>
<h4>About</h4>
<ul class="footer-nav">
<li class="footer-item">Site Map</li>
<li class="footer-item">
General Terms and Conditions
</li>
<li class="footer-item">Data and Privacy</li>
</ul>
</nav>
<nav>
<h4>Our Accommodations</h4>
<ul class="footer-nav">
<li class="footer-item">Quality Assessments</li>
<li class="footer-item">You have a hotel ?</li>
</ul>
</nav>
<nav>
<h4>Assistance</h4>
<ul class="footer-nav">
<li class="footer-item">Help Desk</li>
<li class="footer-item">Contact Us</li>
</ul>
</nav>
</footer>
</body>
another solution can be using a fixed position or something similar to remove the element from the normal flow of the page, so you can position it where you want to.
footer {
position: fixed;
bottom: 0;
left: 0;
}
but is better to use the <body> solution
We will have a background image on a <div> element and two further elements: a menu and a title. We are having trouble aligning the menu at the top and title in the middle of the banner image.
Here is the jsfiddle as well
How can we align the menu at the top and title in the middle of the image?
Current issue:
Expected outcome:
Here is what we tried, but cannot get it to align in all breakpoints. (min-width: 320px and min-width: 1440px)
.wrapper {
position: relative;
display: block;
}
.banner__img {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
position: absolute;
z-index: 1;
min-height: 300px;
}
.content__wrapper {
position: relative;
z-index: 2;
padding: 16px;
}
.menu-bar__list:hover > ul {
display: block;
}
.menu-bar__list {
position: relative;
margin-right: 16px;
}
.menu-bar__list__second {
display: none;
position: absolute;
}
.menu-bar {
display: flex;
flex-direction: row;
}
ul {
list-style: none;
}
.content__title {
text-align: center;
}
.logo > img {
max-width: 50px;
}
.content__menu {
display: flex;
flex-direction: row;
justify-content: space-between;
}
<div class="wrapper">
<div class="banner__img" style="background-image: url('http://www.ikozmik.com/Content/Images/uploaded/its-free-featured.jpg')"></div>
<div class="content__wrapper">
<div class="content__menu">
<div class="logo">
<img src="https://image.shutterstock.com/image-illustration/logo-g-letter-on-white-260nw-497276758.jpg">
</div>
<nav>
<ul class="menu-bar">
<li class="menu-bar__list">Home</li>
<li class="menu-bar__list">
Products
<ul class="menu-bar__list__second">
<li >Products Sub Menu 1</li>
<li>Products Sub Menu 2</li>
<li>Products Sub Menu 3</li>
<li>Products Sub Menu 4</li>
</ul>
</li>
<li class="menu-bar__list">
Services
<ul class="menu-bar__list__second">
<li>Services Sub Menu 1</li>
<li>Services Sub Menu 2</li>
<li>Services Sub Menu 3</li>
<li>Services Sub Menu 4</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="content__title">
<h1>Some title here</h1>
</div>
</div>
</div>
I simplified your code somewhat (possibly not enough), but you can get the idea (please check How to create a Minimal, Reproducible Example):
.banner {
position: relative;
overflow: hidden;
}
.background {
object-fit: cover;
width: 100%;
}
.logo {
float: right;
}
.logo > img {
max-width: 50px;
}
.content {
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
padding: 24px;
display: flex;
flex-direction: column;
}
.content__menu {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.content__title {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
}
.menu-bar__list:hover > ul {
display: block;
}
.menu-bar__list {
position: relative;
margin-right: 16px;
}
.menu-bar {
display: flex;
flex-direction: row;
}
ul {
list-style: none;
}
<div class="banner">
<img class="background" src="http://www.ikozmik.com/Content/Images/uploaded/its-free-featured.jpg" alt="">
<div class="content">
<div class="content__menu">
<div class="logo">
<img src="https://image.shutterstock.com/image-illustration/logo-g-letter-on-white-260nw-497276758.jpg">
</div>
<nav class="menu">
<ul class="menu-bar">
<li class="menu-bar__list">
Home
</li>
<li class="menu-bar__list">
Products
</li>
<li class="menu-bar__list">
Services
</li>
</ul>
</nav>
</div>
<div class="content__title">
<h1>Some title here</h1>
</div>
</div>
</div>
EDIT: codepen link, since the preview here doesn't show (something to do with absolute positioning, I guess): https://codepen.io/herzinger/full/xxxOamN
can you please check with below code, hope it will resolve your issue.
Demo: https://jsfiddle.net/yudizsolutions/f81oymxs/14
.wrapper {
min-height: 300px;
display: flex;
display: -webkit-flex;
align-items: center;
justify-content: center;
position: relative;
}
header {
padding: 15px;
position: absolute;
top: 0;
left: 0;
width: 100%;
box-sizing: border-box;
}
nav {
display: flex;
display: -webkit-flex;
justify-content: space-between;
}
.menu-bar__list:hover > ul {
display: block;
}
.menu-bar__list {
position: relative;
margin-right: 16px;
}
.menu-bar__list__second {
display: none;
position: absolute;
}
.menu-bar {
display: flex;
flex-direction: row;
}
ul {
list-style: none;
}
.content__title {
text-align: center;
}
.logo img {
max-width: 50px;
}
<div class="wrapper" style="background: url('https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg') no-repeat top center / cover;">
<header>
<nav>
<div class="logo">
<img src="https://image.shutterstock.com/image-illustration/logo-g-letter-on-white-260nw-497276758.jpg">
</div>
<ul class="menu-bar">
<li class="menu-bar__list">Home</li>
<li class="menu-bar__list">
Products
<ul class="menu-bar__list__second">
<li >Products Sub Menu 1</li>
<li>Products Sub Menu 2</li>
<li>Products Sub Menu 3</li>
<li>Products Sub Menu 4</li>
</ul>
</li>
<li class="menu-bar__list">
Services
<ul class="menu-bar__list__second">
<li>Services Sub Menu 1</li>
<li>Services Sub Menu 2</li>
<li>Services Sub Menu 3</li>
<li>Services Sub Menu 4</li>
</ul>
</li>
</ul>
</nav>
</header>
<div class="content__wrapper">
<h1>Some title here</h1>
</div>
</div>
Use a <nav> for the menu and use the align attribute to center the title.
You could put the text inside the image's div
<div class="banner__img" style="background-image: url('http://www.ikozmik.com/Content/Images/uploaded/its-free-featured.jpg')">
<div class="content__title">
<h1>Some title here</h1>
</div>
</div>
And then apply the following style to the .banner__img in css:
display: flex;
align-items: center;
justify-content: center;
The text now stays in the center, even if you resize the window. Flexbox allows you to align elements both vertically and horizontally.
I am attempting to list a series of same sized elements. I want these elements to display with even spacing on the right and left (vertically centered?), and evenly spaced between each other. The biggest problem is that the list needs to be able to adjust to screen size changes and number of element changes. As such the width and elements per line need to update as necessary. The bottom row should also ideally align with those above it.
This is the closest that I have been able to get so far.
HTML
<div class="outer">
<div class="inner">
</div>
</div>
... repeated as any times as there are blocks.
<div class="outer">
<div class="inner">
</div>
</div>
CSS
body {
text-align: justify;
margin:0;
width: auto;
}
.outer {
background:blue;
width: 100px;
height: 90px;
display: inline-block;
text-align: center;
}
.inner {
background:red;
width: 90px;
height: 90px;
display: inline-block;
text-align: center;
}
JSFiddle
Sounds like a job for flexbox. One of these work for you? https://codepen.io/anon/pen/VEpbjv
HTML
<ul class="flex-container space-between">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>
<ul class="flex-container space-around">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>
<ul class="flex-container space-evenly">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>
CSS
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
}
.flex-start {
justify-content: flex-start;
}
.flex-end {
justify-content: flex-end;
}
.flex-end li {
background: gold;
}
.center {
justify-content: center;
}
.center li {
background: deepskyblue;
}
.space-between {
justify-content: space-between;
}
.space-between li {
background: lightgreen;
}
.space-around {
justify-content: space-around;
}
.space-around li {
background: hotpink;
}
.space-evenly {
justify-content: space-evenly;
}
.space-evenly li {
background: #bada55;
}
.flex-item {
background: tomato;
padding: 5px;
width: 60px;
height: 50px;
margin: 5px;
line-height: 50px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
I'm trying to have the elements in the middle 1240px of the screen using a wrapper, however, when I add the wrapper, the .space <li> element stops shrinking when I shrink down the page making my sign in button and sign out button disappear in the right side of the page. Also I've been wondering whether using an empty <li> with flex: 1 is the correct way of creating the space in between the first 3 <li> elements and the last 2.
.container {
display: flex;
}
.container>li {
padding: 10px;
text-align: center;
font-size: 1em;
color: white;
box-sizing: border-box;
background-color: black;
list-style-type: none;
}
.space {
flex: 1;
}
.wrapper {
width: 1240px;
margin: 0 auto;
height: 100%;
}
<nav>
<div class='wrapper'>
<ul class="container">
<li>Images</li>
<li>Albums</li>
<li>Tags</li>
<li class='space'></li>
<li>Log In</li>
<li>Sign Up</li>
</ul>
</div>
</nav>
You need to use percent to make it responsive.
Or, add max-width: 100%; if you want to maintain width: 1240px;
.container {
display: flex;
}
.container>li {
padding: 10px;
text-align: center;
font-size: 1em;
color: white;
box-sizing: border-box;
background-color: black;
list-style-type: none;
}
.space {
flex: 1;
}
.wrapper {
width: 100%;
margin: 0 auto;
height: 100%;
}
<nav>
<div class='wrapper'>
<ul class="container">
<li>Images</li>
<li>Albums</li>
<li>Tags</li>
<li class='space'></li>
<li>Log In</li>
<li>Sign Up</li>
</ul>
</div>
</nav>
Use width: 100%; to nav and wrapper
.container {
display: flex;
}
.container>li {
padding: 10px;
text-align: center;
font-size: 1em;
color: white;
box-sizing: border-box;
background-color: black;
list-style-type: none;
}
.space {
flex: 1;
}
.wrapper {
width: 1240px;
margin: 0 auto;
height: 100%;
width: 100%;
}
nav{
width: 100%;
}
<nav>
<div class='wrapper'>
<ul class="container">
<li>Images</li>
<li>Albums</li>
<li>Tags</li>
<li class='space'></li>
<li>Log In</li>
<li>Sign Up</li>
</ul>
</div>
</nav>
Managed to get a flexbox layout work in Firefox, Chrome, Edge, Opera.
Would like to make this work in IE11, or know for sure that it is not possible.
I have read about IE11 issues and tried setting height 100% on the container, without success. IE11 content overflows vertically all containers except body.
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
.header,
.footer {
height: 2em;
flex: none;
background-color: orange;
}
.content-wrapper {
flex: 1 0 auto;
width: 100%;
background-color: white;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
width: 100%;
max-width: 60em;
margin: 0 auto;
display: flex;
flex-direction: row;
background-color: red;
}
.main {
flex: 1;
padding: 1em 1em 0;
min-width: 12em;
display: flex;
flex-direction: column;
background-color: blue;
}
.main-body {
flex: 1 0;
background-color: yellow;
}
.main-toc {
order: -1;
background-color: green;
}
.nav {
order: -1;
flex: 0 0 auto;
width: 12em;
}
pre {
position: relative;
padding: 1em;
margin: .5em 0;
overflow: auto;
border-radius: 0.3em;
max-width: 100%;
background-color: silver;
}
<header class="header">
header
</header>
<div class="content-wrapper">
<div class="content">
<main id="main" role="main" class="main">
<div id="main-body" class="main-body">
<h1>H1</h1>
<p>link
</p>
<p>On the other hand, we denounce with righteous indignation ...</p>
<pre><code class="language-php">
public function publicMethodOptionalParam($p1 = null)
{
return true;
}
</code></pre>
<p>On the other hand, we denounce with righteous indignation ...</p>
</div>
<div id="main-toc" class="main-toc">
table of contents
</div>
</main>
<nav id="nav" role="navigation" class="nav">
<ul>
<li class="is-active">Getting Started
<ul>
<li class="is-active">Introduction
</li>
</ul>
</li>
<li class="is-active">Getting Started
<ul>
<li class="is-active">Introduction
</li>
</ul>
</li>
<li class="is-active">Getting Started
<ul>
<li class="is-active">Introduction
</li>
</ul>
</li>
<li class="is-active">Getting Started
<ul>
<li class="is-active">Introduction
</li>
</ul>
</li>
<li class="is-active">Getting Started
<ul>
<li class="is-active">Introduction
</li>
</ul>
</li>
<li class="is-active">Getting Started
<ul>
<li class="is-active">Introduction
</li>
</ul>
</li>
<li class="is-active">Getting Started
<ul>
<li class="is-active">Introduction
</li>
</ul>
</li>
<li class="is-active">Getting Started
<ul>
<li class="is-active">Introduction
</li>
</ul>
</li>
<li class="is-active">Getting Started
<ul>
<li class="is-active">Introduction
</li>
</ul>
</li>
<li class="is-active">Getting Started
<ul>
<li class="is-active">Introduction
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<footer class="footer">
footer
</footer>
Codepen with the above code
Add flex: 1 0 auto; to .content (in css).
See Codepen.
From michaPau's comment. Doing it on his behalf so this question can be resolved since he was unresponsive, and for the solution to be more accessible/explicit to people looking for it.