This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 8 months ago.
I have a panel with a bunch of items in list-like fashion. I want 3 different panels, but two on the left next to each other. I styled the panels the way I want, but when I copy-paste it to create another, it makes the div, but offsets it from the top.
Here's what I have right now:
html, body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
color: #ededed;
font-family: Roboto;
}
.panel {
display: inline-block;
width: 15vw;
height: 100%;
border-right: 1px solid #272b3a;
background-color: #e0e0e0;
color: #000000;
margin: 0;
padding: 0;
padding-top: 20px;
padding-left: 15px;
position: relative;
margin-top: 0px;
}
.folder {
display: inline-flex;
align-items: center;
cursor: pointer;
margin: 0;
padding:0;
}
.folder-icon {
width: 30px;
}
.folder-name {
margin: 0;
margin-left: 6px;
top: 12px;
}
.add-folder {
cursor: pointer;
margin-left: -15px;
position: absolute;
bottom: 30px;
text-align: center;
width: calc(100% - 15px);
display:flex;
align-items: center;
justify-content: center;
}
.add-folder-text {
font-size: 15px;
margin: 0;
margin-bottom: 10px;
padding-left: 20%;
padding-right: 20%;
padding-top: 5%;
padding-bottom: 5%;
border-radius: 30px;
}
<div class="panel">
<div class="folder">
<p class="folder-name">Item 1</p>
</div>
<div class="folder">
<p class="folder-name">Item 2</p>
</div>
<div class="folder">
<p class="folder-name">Item 3</p>
</div>
<div class="folder">
<p class="folder-name">Item 4</p>
</div>
<div class="add-folder">
<p class="add-folder-text plus">Add folder</p>
</div>
</div>
<div class="panel">
<div class="folder">
<p class="folder-name">Social Networking</p>
</div>
<div class="add-folder">
<p class="add-folder-text plus">Add folder</p>
</div>
</div>
I added display: flex to the <body> CSS selector and is working.
because normally the body has a display: block by default. and flex put the element one near the other on the X-axis (and have other behaviors that solve this problem).
body {
display: flex; /*if you want you can use also "inline-flex" like you do for the other elements on your CSS file*/
}
html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
color: #ededed;
font-family: Roboto;
/* what I added */
display: flex;
}
.panel {
display: inline-block;
width: 15vw;
height: 100%;
border-right: 1px solid #272b3a;
background-color: #e0e0e0;
color: #000000;
margin: 0;
padding: 0;
padding-top: 20px;
padding-left: 15px;
position: relative;
margin-top: 0px;
}
.folder {
display: inline-flex;
align-items: center;
cursor: pointer;
margin: 0;
padding: 0;
}
.folder-icon {
width: 30px;
}
.folder-name {
margin: 0;
margin-left: 6px;
top: 12px;
}
.add-folder {
cursor: pointer;
margin-left: -15px;
position: absolute;
bottom: 30px;
text-align: center;
width: calc(100% - 15px);
display: flex;
align-items: center;
justify-content: center;
}
.add-folder-text {
font-size: 15px;
margin: 0;
margin-bottom: 10px;
padding-left: 20%;
padding-right: 20%;
padding-top: 5%;
padding-bottom: 5%;
border-radius: 30px;
}
<div class="panel">
<div class="folder">
<p class="folder-name">Item 1</p>
</div>
<div class="folder">
<p class="folder-name">Item 2</p>
</div>
<div class="folder">
<p class="folder-name">Item 3</p>
</div>
<div class="folder">
<p class="folder-name">Item 4</p>
</div>
<div class="add-folder">
<p class="add-folder-text plus">Add folder</p>
</div>
</div>
<div class="panel">
<div class="folder">
<p class="folder-name">Social Networking</p>
</div>
<div class="add-folder">
<p class="add-folder-text plus">Add folder</p>
</div>
</div>
when i hover over the hamburger icon in 1000px mode the menu appears, but when i hover over menu it disappears. i have tried z-index and tricks related to position but cannot get the solution.
the issue is in 1000px because in full screen mode i can hover over sub-menu, but not on 1000px screen.
please help, thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESPN</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./app.css">
</head>
<body>
<header class="header">
<div class="header__logo"><span>ESPN</span> / Media Distribution</div>
<div class="hamburger__icon__section">
</div>
<nav class="navbar">
<div class="navbar__items">
<div class="hamburger__icon"><div></div><div></div><div></div></div>
<ul class="navbar__lists__items">
<li class="navbar__hover__items">
Sports Programming
<ul class="navbar__lists__items__item">
<li>Boxing</li>
<li>Films</li>
<li>Fina</li>
<li>World Athletics</li>
<li>Ncaa</li>
<li>Pocker</li>
<li>Special Olympics</li>
<li>X Games</li>
</ul>
</li>
<li class="navbar__hover__items">Content Calender</li>
<li class="navbar__hover__items">
Contacts
<ul class="navbar__lists__items__item">
<li>Asia Pacific</li>
<li>Canada</li>
<li>Europe, Middle East and Africa</li>
<li>Latin America</li>
<li>Mexico</li>
</ul>
</li>
</ul>
<div class="search">
<input type="text" placeholder="Search">
<i class="fa fa-search"></i>
</input>
</div>
</div>
</nav>
</header>
<div class="video__section">
<div class="video__header__wrapper">
<video src="./6. Exercise Higher Order Functions.mp4" loop="true" autoplay="true" muted>
</video>
</div>
<div class="video__section__content">
<p><span>ESPN /</span> Media Distribution</p>
</div>
</div>
<div class="image__section">
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
</div>
<div class="copyright__section">
<div class="copyright__section__content">
<p>Copyright © 2020 ESPN, Inc. - All Rights Reserved | Terms of Use | Privacy Policy</p>
</div>
</div>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght#600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
font-family: 'Fira Sans', sans-serif;
line-height: 1.6rem;
}
body {
font-size: 1.6rem;
}
.header {
display: flex;
justify-content: space-around;
align-items: stretch;
background-color:rgb(202, 8, 19);
color: #fff;
border-bottom: 1px solid #fff;
}
.header__logo {
font-size: 20px;
line-height: 50px;
user-select: none;
}
.header__logo span {
font-style: oblique;
}
.navbar__items {
display: flex;
justify-content: center;
align-items: stretch;
}
.navbar__lists__items {
display: flex;
justify-content: center;
align-items: stretch;
list-style: none;
}
.navbar__lists__items > li {
margin: 0 5px;
}
.navbar__lists__items__item {
width: 250px;
opacity: 0;
pointer-events: none;
position: absolute;
top: 59px;
left: 0px;
right: 0;
list-style: none;
transition: all 0.3s;
}
.navbar__lists__items__item li {
cursor: pointer;
border: 1px solid #666;
background-color: #fff;
line-height: 1.6rem;
}
.navbar__lists__items__item li a:hover {
background-color: #666666;
color: #fff;
}
.navbar__lists__items__item li a {
padding: 10px 20px;
display: block;
text-decoration: none;
color: #666666;
text-transform: uppercase;
}
.navbar__hover__items {
display: flex;
justify-content: center;
align-items: stretch;
position: relative;
line-height: 50px;
z-index: 1;
}
.navbar__hover__items > a {
margin-right: 5px;
}
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
content: ' \02C5';
}
.navbar__lists__items > li > a {
text-decoration: none;
color: #fff;
text-transform: uppercase;
}
.navbar__hover__items:nth-child(2n+1):hover > a {
background-color: #fff;
color: rgb(202, 8, 19);
}
.navbar__hover__items:nth-child(2n+1):hover .navbar__lists__items__item {
opacity: 1;
pointer-events: all;
transform: translateY(-10px);
}
.search {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.search input {
border: 1px solid #fff;
outline: none;
border-radius: 5px;
padding: 5px;
}
.search i {
position: absolute;
color: #000;
top: 50%;
left: 95%;
transform: translate(-95%, -50%);
margin-right: -30px;
}
.video__section {
width: 100%;
height: 100%;
position: relative;
color: #fff;
font-size: 40px;
}
.video__header__wrapper {
width: 100%;
height: 100%;
}
.video__header__wrapper video {
width: 100%;
height: 100%;
}
.video__section__content {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -40%);
user-select: none;
}
.video__section__content span {
font-style: oblique;
}
.image__section {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.image__section .image {
flex-basis: 25%;
overflow: hidden;
position: relative;
height: 200px;
width: 150px;
}
.image__section .image img {
width: 100%;
height: 100%;
cursor: pointer;
transform: scale(1.1);
transition: all 0.3s;
}
.overlay {
position: absolute;
right: 0;
left: 0;
bottom: 100%;
background-color: #000;
width: 100%;
overflow: hidden;
opacity: 0.7;
transition: 0.3s ease;
}
.image:hover img {
transform: scale(1);
}
.image:hover > .overlay {
height: 100%;
bottom: 0;
}
.copyright__section {
font-size: 10px;
background-color: rgb(202, 8, 19);
color: #fff;
}
.copyright__section__content {
margin-top: 0;
margin-bottom: 0;
margin-left: 30px;
}
#media (max-width: 1000px) {
.header {
padding: 0 10px;
}
.navbar__items {
position: relative;
}
.navbar__lists__items {
display: none;
position: absolute;
top: 50px;
right: 50px;
width: 300px;
padding: 0 10px;
background-color: #fff;
font-family: 'Lato',Helvetica,Arial,Lucida,sans-serif;
z-index: 1;
box-shadow: 0 0 0.5px 1px rgb(255, 255, 255, 0.7);
}
.navbar__lists__items > li > a {
color: #000;
}
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
content: "";
display: block;
}
.navbar__hover__items {
display: block;
color: #000;
}
.navbar__lists__items__item {
display: none;
}
.video__section {
font-size: 35px;
}
.search {
height: 50px;
}
.hamburger__icon__section {
display: flex;
justify-content: flex-end;
flex: 2;
}
.hamburger__icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
margin-right: 10px;
cursor: pointer;
}
.hamburger__icon > div {
width: 25px;
height: 2px;
margin: 3px 0;
background-color: #fff;
}
.hamburger__icon:hover + .navbar__lists__items {
display: block;
}
}
You could handle the show/hide using javascript instead of css because the way you do it right now whenever the browser detects your cursor is no longer on top of the hamburger_buttton it will hide your menu so it would be better to handle the event with a click instead. Or you can check this answer. Hope it helps.
let navbarListItems = document.querySelector('.navbar__lists__items');
let hamburgetButton = document.querySelector('.hamburger__icon');
hamburgetButton.onclick = function () {
navbarListItems.style.display = navbarListItems.style.display === 'none' ? 'block' : 'none';
}
#import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght#600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
font-family: 'Fira Sans', sans-serif;
line-height: 1.6rem;
}
body {
font-size: 1.6rem;
}
.header {
display: flex;
justify-content: space-around;
align-items: stretch;
background-color: rgb(202, 8, 19);
color: #fff;
border-bottom: 1px solid #fff;
}
.header__logo {
font-size: 20px;
line-height: 50px;
user-select: none;
}
.header__logo span {
font-style: oblique;
}
.navbar__items {
display: flex;
justify-content: center;
align-items: stretch;
}
.navbar__lists__items {
display: flex;
justify-content: center;
align-items: stretch;
list-style: none;
}
.navbar__lists__items>li {
margin: 0 5px;
}
.navbar__lists__items__item {
width: 250px;
opacity: 0;
pointer-events: none;
position: absolute;
top: 59px;
left: 0px;
right: 0;
list-style: none;
transition: all 0.3s;
}
.navbar__lists__items__item li {
cursor: pointer;
border: 1px solid #666;
background-color: #fff;
line-height: 1.6rem;
}
.navbar__lists__items__item li a:hover {
background-color: #666666;
color: #fff;
}
.navbar__lists__items__item li a {
padding: 10px 20px;
display: block;
text-decoration: none;
color: #666666;
text-transform: uppercase;
}
.navbar__hover__items {
display: flex;
justify-content: center;
align-items: stretch;
position: relative;
line-height: 50px;
z-index: 1;
}
.navbar__hover__items>a {
margin-right: 5px;
}
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
content: ' \02C5';
}
.navbar__lists__items>li>a {
text-decoration: none;
color: #fff;
text-transform: uppercase;
}
.navbar__hover__items:nth-child(2n+1):hover>a {
background-color: #fff;
color: rgb(202, 8, 19);
}
.navbar__hover__items:nth-child(2n+1):hover .navbar__lists__items__item {
opacity: 1;
pointer-events: all;
transform: translateY(-10px);
}
.search {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.search input {
border: 1px solid #fff;
outline: none;
border-radius: 5px;
padding: 5px;
}
.search i {
position: absolute;
color: #000;
top: 50%;
left: 95%;
transform: translate(-95%, -50%);
margin-right: -30px;
}
.video__section {
width: 100%;
height: 100%;
position: relative;
color: #fff;
font-size: 40px;
}
.video__header__wrapper {
width: 100%;
height: 100%;
}
.video__header__wrapper video {
width: 100%;
height: 100%;
}
.video__section__content {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -40%);
user-select: none;
}
.video__section__content span {
font-style: oblique;
}
.image__section {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.image__section .image {
flex-basis: 25%;
overflow: hidden;
position: relative;
height: 200px;
width: 150px;
}
.image__section .image img {
width: 100%;
height: 100%;
cursor: pointer;
transform: scale(1.1);
transition: all 0.3s;
}
.overlay {
position: absolute;
right: 0;
left: 0;
bottom: 100%;
background-color: #000;
width: 100%;
overflow: hidden;
opacity: 0.7;
transition: 0.3s ease;
}
.image:hover img {
transform: scale(1);
}
.image:hover>.overlay {
height: 100%;
bottom: 0;
}
.copyright__section {
font-size: 10px;
background-color: rgb(202, 8, 19);
color: #fff;
}
.copyright__section__content {
margin-top: 0;
margin-bottom: 0;
margin-left: 30px;
}
#media (max-width: 1000px) {
.header {
padding: 0 10px;
}
.navbar__items {
position: relative;
}
.navbar__lists__items {
display: none;
position: absolute;
top: 50px;
right: 50px;
width: 300px;
padding: 0 10px;
background-color: #fff;
font-family: 'Lato', Helvetica, Arial, Lucida, sans-serif;
z-index: 1;
box-shadow: 0 0 0.5px 1px rgb(255, 255, 255, 0.7);
}
.navbar__lists__items>li>a {
color: #000;
}
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
content: "";
display: block;
}
.navbar__hover__items {
display: block;
color: #000;
}
.navbar__lists__items__item {
display: none;
}
.video__section {
font-size: 35px;
}
.search {
height: 50px;
}
.hamburger__icon__section {
display: flex;
justify-content: flex-end;
flex: 2;
}
.hamburger__icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
margin-right: 10px;
cursor: pointer;
}
.hamburger__icon>div {
width: 25px;
height: 2px;
margin: 3px 0;
background-color: #fff;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESPN</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./app.css">
</head>
<body>
<header class="header">
<div class="header__logo"><span>ESPN</span> / Media Distribution</div>
<div class="hamburger__icon__section">
</div>
<nav class="navbar">
<div class="navbar__items">
<div class="hamburger__icon">
<div></div>
<div></div>
<div></div>
</div>
<ul class="navbar__lists__items">
<li class="navbar__hover__items">
Sports Programming
<ul class="navbar__lists__items__item">
<li>Boxing</li>
<li>Films</li>
<li>Fina</li>
<li>World Athletics</li>
<li>Ncaa</li>
<li>Pocker</li>
<li>Special Olympics</li>
<li>X Games</li>
</ul>
</li>
<li class="navbar__hover__items">Content Calender</li>
<li class="navbar__hover__items">
Contacts
<ul class="navbar__lists__items__item">
<li>Asia Pacific</li>
<li>Canada</li>
<li>Europe, Middle East and Africa</li>
<li>Latin America</li>
<li>Mexico</li>
</ul>
</li>
</ul>
<div class="search">
<input type="text" placeholder="Search">
<i class="fa fa-search"></i>
</input>
</div>
</div>
</nav>
</header>
<div class="video__section">
<div class="video__header__wrapper">
<video src="./6. Exercise Higher Order Functions.mp4" loop="true" autoplay="true" muted>
</video>
</div>
<div class="video__section__content">
<p><span>ESPN /</span> Media Distribution</p>
</div>
</div>
<div class="image__section">
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
</div>
<div class="copyright__section">
<div class="copyright__section__content">
<p>Copyright © 2020 ESPN, Inc. - All Rights Reserved | Terms of Use | Privacy Policy</p>
</div>
</div>
</body>
</html>
Simply add this to your selector :
, .navbar__lists__items:hover
The full rule should look like this :
.hamburger__icon:hover + .navbar__lists__items, .navbar__lists__items:hover {
display: block;
}
This is happening since the scope of hover effect is only limited to the hamburger icon and as soon as the hover scope is left, the css does not execute for it so in order to stabilize the menu items I have added hover scope to that <ul> too.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
font-family: 'Fira Sans', sans-serif;
line-height: 1.6rem;
}
body {
font-size: 1.6rem;
}
.header {
display: flex;
justify-content: space-around;
align-items: stretch;
background-color:rgb(202, 8, 19);
color: #fff;
border-bottom: 1px solid #fff;
}
.header__logo {
font-size: 20px;
line-height: 50px;
user-select: none;
}
.header__logo span {
font-style: oblique;
}
.navbar__items {
display: flex;
justify-content: center;
align-items: stretch;
}
.navbar__lists__items {
display: flex;
justify-content: center;
align-items: stretch;
list-style: none;
}
.navbar__lists__items > li {
margin: 0 5px;
}
.navbar__lists__items__item {
width: 250px;
opacity: 0;
pointer-events: none;
position: absolute;
top: 59px;
left: 0px;
right: 0;
list-style: none;
transition: all 0.3s;
}
.navbar__lists__items__item li {
cursor: pointer;
border: 1px solid #666;
background-color: #fff;
line-height: 1.6rem;
}
.navbar__lists__items__item li a:hover {
background-color: #666666;
color: #fff;
}
.navbar__lists__items__item li a {
padding: 10px 20px;
display: block;
text-decoration: none;
color: #666666;
text-transform: uppercase;
}
.navbar__hover__items {
display: flex;
justify-content: center;
align-items: stretch;
position: relative;
line-height: 50px;
z-index: 1;
}
.navbar__hover__items > a {
margin-right: 5px;
}
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
content: ' \02C5';
}
.navbar__lists__items > li > a {
text-decoration: none;
color: #fff;
text-transform: uppercase;
}
.navbar__hover__items:nth-child(2n+1):hover > a {
background-color: #fff;
color: rgb(202, 8, 19);
}
.navbar__hover__items:nth-child(2n+1):hover .navbar__lists__items__item {
opacity: 1;
pointer-events: all;
transform: translateY(-10px);
}
.search {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.search input {
border: 1px solid #fff;
outline: none;
border-radius: 5px;
padding: 5px;
}
.search i {
position: absolute;
color: #000;
top: 50%;
left: 95%;
transform: translate(-95%, -50%);
margin-right: -30px;
}
.video__section {
width: 100%;
height: 100%;
position: relative;
color: #fff;
font-size: 40px;
}
.video__header__wrapper {
width: 100%;
height: 100%;
}
.video__header__wrapper video {
width: 100%;
height: 100%;
}
.video__section__content {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -40%);
user-select: none;
}
.video__section__content span {
font-style: oblique;
}
.image__section {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.image__section .image {
flex-basis: 25%;
overflow: hidden;
position: relative;
height: 200px;
width: 150px;
}
.image__section .image img {
width: 100%;
height: 100%;
cursor: pointer;
transform: scale(1.1);
transition: all 0.3s;
}
.overlay {
position: absolute;
right: 0;
left: 0;
bottom: 100%;
background-color: #000;
width: 100%;
overflow: hidden;
opacity: 0.7;
transition: 0.3s ease;
}
.image:hover img {
transform: scale(1);
}
.image:hover > .overlay {
height: 100%;
bottom: 0;
}
.copyright__section {
font-size: 10px;
background-color: rgb(202, 8, 19);
color: #fff;
}
.copyright__section__content {
margin-top: 0;
margin-bottom: 0;
margin-left: 30px;
}
#media (max-width: 1000px) {
.header {
padding: 0 10px;
}
.navbar__items {
position: relative;
}
.navbar__lists__items {
display: none;
position: absolute;
top: 50px;
right: 50px;
width: 300px;
padding: 0 10px;
background-color: #fff;
font-family: 'Lato',Helvetica,Arial,Lucida,sans-serif;
z-index: 1;
box-shadow: 0 0 0.5px 1px rgb(255, 255, 255, 0.7);
}
.navbar__lists__items > li > a {
color: #000;
}
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
content: "";
display: block;
}
.navbar__hover__items {
display: block;
color: #000;
}
.navbar__lists__items__item {
display: none;
}
.video__section {
font-size: 35px;
}
.search {
height: 50px;
}
.hamburger__icon__section {
display: flex;
justify-content: flex-end;
flex: 2;
}
.hamburger__icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
margin-right: 10px;
cursor: pointer;
}
.hamburger__icon > div {
width: 25px;
height: 2px;
margin: 3px 0;
background-color: #fff;
}
/* added another line here */
.hamburger__icon:hover + .navbar__lists__items,
.hamburger__icon + .navbar__lists__items:hover{
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESPN</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./app.css">
</head>
<body>
<header class="header">
<div class="header__logo"><span>ESPN</span> / Media Distribution</div>
<div class="hamburger__icon__section">
</div>
<nav class="navbar">
<div class="navbar__items">
<div class="hamburger__icon"><div></div><div></div><div></div></div>
<ul class="navbar__lists__items">
<li class="navbar__hover__items">
Sports Programming
<ul class="navbar__lists__items__item">
<li>Boxing</li>
<li>Films</li>
<li>Fina</li>
<li>World Athletics</li>
<li>Ncaa</li>
<li>Pocker</li>
<li>Special Olympics</li>
<li>X Games</li>
</ul>
</li>
<li class="navbar__hover__items">Content Calender</li>
<li class="navbar__hover__items">
Contacts
<ul class="navbar__lists__items__item">
<li>Asia Pacific</li>
<li>Canada</li>
<li>Europe, Middle East and Africa</li>
<li>Latin America</li>
<li>Mexico</li>
</ul>
</li>
</ul>
<div class="search">
<input type="text" placeholder="Search">
<i class="fa fa-search"></i>
</input>
</div>
</div>
</nav>
</header>
<div class="video__section">
<div class="video__header__wrapper">
<video src="./6. Exercise Higher Order Functions.mp4" loop="true" autoplay="true" muted>
</video>
</div>
<div class="video__section__content">
<p><span>ESPN /</span> Media Distribution</p>
</div>
</div>
<div class="image__section">
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
</div>
<div class="copyright__section">
<div class="copyright__section__content">
<p>Copyright © 2020 ESPN, Inc. - All Rights Reserved | Terms of Use | Privacy Policy</p>
</div>
</div>
</body>
</html>
I'm trying to create a page using FlexBox so i can keep the main image always centered with the top logo and page. And add of "off-center" text, next to the left.
My problem now is that i cannot make each box (image+text) keep their place vertically, boxes float and they have different space between each other based on what i'm using to view (big screen, laptop).
Not an expert with FlexBox, can i do that?
And also, i want to add a bar after the third box, 100% width...but it's placing in the middle of the page, between the boxes.
Any help will be welcome and i'll keep learning :)
body {
margin: 0;
}
.container {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
height: 100vh;
}
.top {
border: 1px solid white;
width: 50%;
height: 10%;
align-self: flex-start;
text-align: center;
}
.inner-container {
border: 1px solid white;
width: 50%;
height: 60%;
display: flex;
}
.center {
position: absolute;
width: 50%;
text-align: left;
align-self: flex-end;
}
.off-center {
position: absolute;
vertical-align: bottom;
text-transform: uppercase;
padding-left: 10px;
min-width: 200px;
align-self: flex-end;
}
.center, .off-center {
position: absolute;
}
.center img {width: 100%;}
.off-center h2 {font-size:12px; font-family: 'Open Sans', sans-serif; font-weight: 400;text-transform: uppercase; color:black; display: block!important;margin: 0px;}
.off-center p {font-size: 20px; font-family:'aileronbold', sans-serif; display: block!important;margin: 0px;text-transform: none;}
.row.subscriptionBar {display:flex; background-color: black; display: block; padding:20px;}
.subscriptionBar h2 {color:white;}
.firstPart {display: }
#media screen and (min-width: 769px) {
.off-center {
margin-left: 50%;
}
#media screen and (max-width: 768px) {
.off-center {
margin-top: 105px;
}
}
<div class="container">
<div class="top"><img src="https://www.oilandgasreinvented.com/img/logo-placeholder.svg" width="80px"></div>
<div class="inner-container">
<div class="center">
<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt=""></div>
<div class="off-center">
<h2 class="">ArtistName 1</h2>
<p>509476ZclHtqXy</p></div>
</div>
<div class="inner-container">
<div class="center">
<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt=""></div>
<div class="off-center">
<h2 class="">ArtistName 2</h2>
<p>Title lala 1</p></div>
</div>
<div class="inner-container">
<div class="center">
<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt=""></div>
<div class="off-center">
<h2 class="">ArtistName 3 444</h2>
<p>Title 093830</p></div>
</div>
</div>
.wrapper {
display: flex;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
}
.wrapper > * {
padding: 10px;
flex: 1 100%;
}
header{
background: tomato;
}
section{
display: flex
}
.main {
background: deepskyblue;
}
.main img{
max-width: 100%;
}
.full-width {
background: lightgreen;
}
.main { order: 2; flex: 3 0px; }
.aside { flex: 1 auto; }
.aside-1 { order: 1; background: gold; width: 10%}
.aside-2 { order: 3; background: hotpink; position: relative; width: 10%}
.aside-2 > span {
position: absolute;
bottom: 0;
left: 0;
}
.vertical {
width: 15%; /* Modify this value for different screen size*/
}
/* .full-width { order: 4; } */
/*#media all and (min-width: 600px) {
.aside { flex: 1 auto; }
}
#media all and (min-width: 800px) {
.main { flex: 3 0px; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
.footer { order: 4; }
}*/
body {
padding: 2em;
}
<div class="wrapper">
<header><img src="https://www.oilandgasreinvented.com/img/logo-placeholder.svg" width="80px"></header>
<section>
<div class="main">
<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt="">
</div>
<aside class="aside aside-1"></aside>
<aside class="aside aside-2"><span>Aside Right</span></aside>
</section>
<section>
<div class="main">
<img src="https://picsum.photos/200/300" alt="">
</div>
<aside class="aside aside-1 vertical"></aside>
<aside class="aside aside-2 vertical"><span>Aside Right</span></aside>
</section>
<section>
<div class="main">
<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt="">
</div>
<aside class="aside aside-1"></aside>
<aside class="aside aside-2"><span>Aside Right</span></aside>
</section>
<section class="full-width">Full Width</section>
<section>
<div class="main">
<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt="">
</div>
<aside class="aside aside-1"></aside>
<aside class="aside aside-2"><span>Aside Right</span></aside>
</section>
</div>
I'm just doing a quick sample because it's not clear on what you're looking for. If this is the direction you're hoping to move toward, then I may be able to assist further.
You just have a few too many things going on with your combination of flexbox and absolute positioning. Below is a version of your snippet with much of the unnecessary css commented out (so you can see exactly what it is) plus a couple of new additions.
Most important changes other than removing some of the absolute positioning are removing flex-wrap from your .container and adding flex-direction: column as well as matching the widths of .center and .off-center so you can use position: absolute on .off-center (good use of it in that case) along with margin-left equivalent to the width to ensure that it is positioned just to the right of your image container.
body {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
/*justify-content: center;
flex-wrap: wrap;
height: 100vh;*/
}
.top {
border: 1px solid white;
/*width: 50%;*/
height: 10%;
/*align-self: flex-start;*/
text-align: center;
}
.inner-container {
border: 1px solid white;
/*width: 50%;*/
height: 60%;
display: flex;
justify-content: space-around;
}
.center {
/*position: absolute;*/
width: 50%;
min-width: 200px;
text-align: left;
/*align-self: flex-end;*/
}
.off-center {
position: absolute;
/*vertical-align: bottom;*/
text-transform: uppercase;
padding-left: 10px;
width: 50%;
min-width: 200px;
align-self: flex-end;
margin-left: 50%;
}
/*.center, .off-center {
position: absolute;
}*/
.center img {
width: 100%;
}
.off-center h2 {
font-size: 12px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
text-transform: uppercase;
color: black;
display: block!important;
margin: 0px;
}
.off-center p {
font-size: 20px;
font-family: 'aileronbold', sans-serif;
display: block!important;
margin: 0px;
text-transform: none;
}
.row.subscriptionBar {
display: flex;
background-color: black;
display: block;
padding: 20px;
}
.subscriptionBar h2 {
color: white;
}
.firstPart {
display:
}
/*#media screen and (min-width: 769px) {
.off-center {
margin-left: 50%;
}
#media screen and (max-width: 768px) {
.off-center {
margin-top: 105px;
}
}*/
<div class="container">
<div class="top"><img src="https://www.oilandgasreinvented.com/img/logo-placeholder.svg" width="80px"></div>
<div class="inner-container">
<div class="center">
<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt="">
</div>
<div class="off-center">
<h2 class="">ArtistName 1</h2>
<p>509476ZclHtqXy</p>
</div>
</div>
<div class="inner-container">
<div class="center">
<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt=""></div>
<div class="off-center">
<h2 class="">ArtistName 2</h2>
<p>Title lala 1</p>
</div>
</div>
<div class="inner-container">
<div class="center">
<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt=""></div>
<div class="off-center">
<h2 class="">ArtistName 3 444</h2>
<p>Title 093830</p>
</div>
</div>
</div>
I need to achieve a nice 2 column layout as shown in
So far i could get only: https://jsfiddle.net/8qskxqfh/
code in fiddle link
Could you please suggest me on improving this design.
.myRatingBoxRed {
display: inline-block;
width: 15px;
height: 15px;
background-color: red;
}
.myRatingBoxYellow {
display: inline-block;
width: 15px;
height: 15px;
background-color: yellow;
}
.myRatingBoxGreen {
display: inline-block;
width: 15px;
height: 15px;
background-color: green;
}
.myResourceViewBody {
width: 960px;
position: relative;
margin: 0 auto;
}
.myResourceViewBody.myResourceSideBar {
position: absolute;
left: 0;
width: 240px;
height: 100%;
min-height: 800px;
color: #fff;
}
.myResourceViewInfo {
background: #fff;
padding-left: 300px;
}
.myResourceViewInfo .section-title {
text-transform: uppercase;
font-size: 20px;
font-weight: 500;
color: #2d7788;
position: relative;
margin-top: 0;
margin-bottom: 20px;
}
.myResourceViewInfo .attributes-section .item {
margin-bottom: 15px;
}
.h2.myResourceTitle {
font-weight: bold;
background: #9A3324 none repeat scroll 0px 0px;
width: 66%;
padding-left: 5px;
color: #FFF;
font-size: 18px;
vertical-align: middle;
display: inline-block;
position: relative;
height: 50px;
padding-top: inherit;
margin-top: 4px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.myResourceViewBody ul {
font-size: 1.2em;
font-weight: bold;
list-style-type: none;
margin-left: 300px;
padding: 0 0 0 10px;
}
<div id="myResourceHeader">
<h2 class="header-title myResourceTitle">Test article 1</h2>
</div>
<div class="myResourceViewBody">
<div class="myResourceSideBar">
<div class="myImageBox"></div>
<div class="myEvaluationArea">
<div class="myRatingBoxRed"></div>
<div class="myRatingBoxYellow"></div>
<div class="myRatingBoxGreen"></div>
</div>
</div>
<div class="myResourceViewInfo">
<h2 class="myViewInfo section-title"><i class="fa icon-info-sign"></i>Description</h2>
<ul>
<li>demo 1</li>
<li>demo 2</li>
</ul>
</div>
</div>
<div class="myResourceViewFooter"></div>
Check example below:
.row {
display: table;
width: 100%;
}
.row:after {
clear: both;
}
.col {
display: table-cell;
border: 1px solid red;
}
.width-70 {
width: 70%;
}
.width-30 {
width: 30%;
}
<div class="row">
<div class="col width-30">
col1
</div>
<div class="col width-70">
col2
</div>
</div>
Try using col-spans inside row
something like this
<div class="row">
<div class="col-md-6">
//first column
</div>
<div class="col-md-6">
// second column
</div>
</div>
refer to bootstrap classes for more details and how to make it responsive also.
I'm trying to align several DIVS, Images and text and I can't figure this out..
Here's what I'm trying to achieve:
Heres' my HTML
<div class="section5">
<div class="outer">
<div class="container1">
<img src="icon.png" width="85">
<div class="title1">Text</div>
<div class="subtitle1">Text</div>
</div>
<div class="container2">
<img src="iphone.png" width="375">
<div class="subtitle2">Text</div>
</div>
</div>
</div>
Here is my CSS:
.section5{ height: 525px; background-color: #5e6172; text-align: center; position: relative;}
.outer{ width: 80%; background-color: #45da45; height: 100%; margin: 0 auto; position: relative;}
.title1{color: #ffffff; font-size: 2.6em; font-family: h35; }
.subtitle1{color: #ffffff; font-size: 1.5em; font-family: h35; margin-top: 0.25em; }
.subtitle2{color: #ffffff; font-size: 1.5em; font-family: h35; margin-top: 0.25em; }
.container1{display: block; background-color: #ccc; }
.container2{display: block; background-color: #fffc1e; }
Here is the JSFIDDLE:
http://jsfiddle.net/mib92/hogwohf8/
My current problems:
1) My text at the bottom needs to be on the right side of the image.. center like in my example image.
2) the bottom of my bottom picture must be align to the bottom of container2 AND the bottom of section5
3) While doing this, the container 1 must remain in the vertical middle of the remaining space of the section5.
Thank you
I hops it's help you.
.section5 {
height: 525px;
background-color: #5e6172;
text-align: center;
position: relative;
}
.outer {
width: 80%;
background-color: #45da45;
height: 100%;
margin: 0 auto;
position: relative;
}
.title1 {
color: #ffffff;
font-size: 2.6em;
font-family: h35;
}
.subtitle1 {
color: #ffffff;
font-size: 1.5em;
font-family: h35;
margin-top: 0.25em;
}
.subtitle2 {
color: #ffffff;
font-size: 1.5em;
font-family: h35;
margin-top: 0.25em;
}
.container1 {
display: block;
background-color: #ccc;
}
.container2 {
display: block;
background-color: #fffc1e;
}
.right-sied {
display: inline-block;
vertical-align: top;
width: 41%;
}
.left-sied {
display: inline-block;
width: 49%;
}
.left-sied img {
max-width: 100%;
}
<div class="section5">
<div class="outer">
<div class="container1">
<img src="icon.png" width="85">
<div class="title1">Text</div>
<div class="subtitle1">Text</div>
</div>
<div class="container2">
<div class="left-sied">
<img src="iphone.png" width="375">
</div>
<div class="right-sied">
<div class="subtitle2">Text</div>
</div>
</div>
</div>
</div>
Live Demo
check this:
.section5 {
height: 525px;
background-color: #5e6172;
text-align: center;
position: relative;
}
.outer {
width: 80%;
background-color: #45da45;
height: 100%;
margin: 0 auto;
position: relative;
}
.title1 {
color: #ffffff;
font-size: 2.6em;
font-family: h35;
}
.subtitle1 {
color: #ffffff;
font-size: 1.5em;
font-family: h35;
margin-top: 0.25em;
}
.subtitle2 {
color: #ffffff;
font-size: 1.5em;
font-family: h35;
margin-top: 0.25em;
}
.container1 {
display: block;
background-color: #ccc;
}
.container2 {
display: block;
background-color: #fffc1e;
}
.container1 .wrapper {
display: inline-block;
float: right;
}
.container2 img {
margin: 0 auto;
}
<div class="section5">
<div class="outer">
<div class="container1">
<img src="http://images.all-free-download.com/images/graphiclarge/daisy_pollen_flower_220533.jpg" width="85">
<div class="wrapper">
<div class="title1">Text</div>
<div class="subtitle1">Text</div>
</div>
</div>
<div class="container2">
<div class="subtitle2">Text</div>
<img src="http://images.all-free-download.com/images/graphiclarge/daisy_pollen_flower_220533.jpg" width="375">
</div>
</div>
</div>