The hover I've added to the title it's not showing.
I tried to add hover only to the .div class and later on add hover to the on the #titulo id.
This is the layout that I'm trying to copy for practice Layout .
P.D Sorry for my english.
#import "normalize.css";
/****************************
GENERAL
****************************/
body {
font-family: sans-serif;
background-color: rgb(246, 245, 241);
max-width: 100%;
width: 800px;
margin: 0 auto;
}
.div a {
color: rgb(185, 56, 78);
}
#titulo:hover {
color: #B9384E;
}
.div a:hover {
background-color: #B9384E;
color: white;
text-decoration: none;
}
/****************************
HEADING
****************************/
header {
font-family: 'Oswald', sans-serif;
}
h1 {
font-weight: bold;
font-size: 3em;
}
h1,
h2 {
padding: 0;
margin: 0.15em;
}
#titulo a {
color: black;
text-decoration: none;
}
h3 {
color: rgb(185, 56, 78);
font-size: 1.5em;
padding-top: 30px;
}
h3,
h4 {
margin: 3px;
}
h2 span {
text-decoration: line-through;
}
/****************************
NAVIGATION
****************************/
.selected {
background-color: rgb(185, 56, 78);
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
nav {
text-align: left;
background-color: black;
color: #fff;
font-size: 1.25em;
border-radius: 5px;
}
nav ul {
list-style: none;
padding-left: 0;
}
nav li {
display: inline-block;
padding: 10px 25px 10px 25px;
}
nav li a {
color: white;
text-decoration: none;
}
nav li:hover {
background-color: rgb(185, 56, 78);
}
/****************************
DIV
****************************/
#primary-content,
#secondary-content,
#info {
background-color: white;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
max-height: 100%;
}
#primary-content img {
border: 2px solid rgb(246, 245, 241);
margin: 30px 20px 30px 70px;
}
#primary-content,
#secondary-content,
#pollassociales,
#info {
margin-bottom: 30px;
}
#blogroll {
width: 75%;
float: left;
}
#social {
float: right;
width: 25%;
}
#info {
clear: both;
}
#parrafo {
float: left;
clear: both;
width: 50%;
padding-left: 10px;
}
#primary-content {
padding-left: 10px;
}
#primary-content p {
font-size: 0.9em;
}
/****************************
UNORDERED LIST
****************************/
#columnas {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
padding: 0;
}
#pollassociales h5 {
width: 14.7%;
}
#pollassociales li {
font-size: 0.8em;
width: 85.3%;
padding: 10px 5% 10px 0;
list-style: none;
}
/****************************
FOOTER
****************************/
footer p {
float: right;
}
/****************************
PAGE:HOME
****************************/
/****************************
COLORS
****************************/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Smashing HTML5!</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Oswald:400,700" rel="stylesheet">
</head>
<body id="index" class="home">
<header>
<div id="titulo">
<h1>
Smashing HTML5!
</h1>
<h2>
HTML5 in the year <span>2022</span> 2009
</h2>
</div>
<nav>
<ul>
<li class="selected">home</li>
<li>portfolio</li>
<li>blog</li>
<li>contact</li>
</ul>
</nav>
</header>
<div class="div" id="primary-content">
<div id="parrafo">
<h3>Featured Article</h3>
<h4>HTML5 in Smashing Magazine</h4>
<p>Discover how to use Graceful Degradation and Progressive Enhancement techniques to achieve an outstanding, cross-browser HTML5 and <a href="https://www.w3.org/TR/css3-roadmap/"
target="_blank">CSS3</a> website today!</p>
</div>
<div id="imagen">
<img src="img/sm-logo.gif">
</div>
</div>
<div class="div" id="secondary-content">
<section>
<div class="left-column">
<time datetime="2005/10/10">10th October 2005</time>
<p>By Enrique Ramírez</p>
</div>
<div class="right-column">
<h5>This be the title</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo non sapien dapibus blandit nec et leo. Ut ut malesuada tellus.</p>
</div>
</section>
<section>
<div class="left-column">
<time datetime="2005/10/10">10th October 2005</time>
<p>By Enrique Ramírez</p>
</div>
<div class="right-column">
<h5>This be the title</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo non sapien dapibus blandit nec et leo. Ut ut malesuada tellus.</p>
</div>
</section>
<section>
<div class="left-column">
<time datetime="2005/10/10">10th October 2005</time>
<p>By Enrique Ramírez</p>
</div>
<div class="right-column">
<h5>This be the title</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo non sapien dapibus blandit nec et leo. Ut ut malesuada tellus.</p>
</div>
</section>
</div>
<div id="pollassociales" class="div">
<div id="blogroll">
<h5>blogroll</h5>
<ul id="columnas">
<li>HTML5 Doctor</li>
<li>W3C</li>
<li>HTML5 Doctor</li>
<li>W3C</li>
<li>HTML5 Doctor</li>
<li>W3C</li>
<li>HTML5 Spec (working draft)</li>
<li>Wordpress</li>
<li>HTML5 Spec (working draft)</li>
<li>Wordpress</li>
<li>HTML5 Spec (working draft)</li>
<li>Wordpress</li>
<li>Smashing Magazine</li>
<li>Wikipedia</li>
<li>Smashing Magazine</li>
<li>Wikipedia</li>
<li>Smashing Magazine</li>
<li>Wikipedia</li>
</ul>
</div>
<div id="social">
<h5>social</h5>
<ul>
<li>delicious</li>
<li>digg</li>
<li>facebook</li>
<li>last.fm</li>
<li>rss</li>
<li>twitter</li>
</ul>
</div>
</div>
<div class="div" id="info">
<h4>Smashing Magazine</h4>
<p>Amazing Magazine</p>
<img src="img/avatar.gif">
<p>Smashing Magazine is a website and blog that offers resources and advice to web developers and web designers. It was founded by Sven Lennartz and Vitaly Friedman.</p>
</div>
<footer class="div">
<p>2005-2009 Smashing Magazine.</p>
</footer>
</body>
</html>
The color is not showing because it gets overwritten by:
#titulo a {
color: black;
text-decoration: none;
}
I added the snippet below to the bottom of the css, because it is at the bottom it will overwrite the previous css rules.
#titulo:hover a {
color: #B9384E;
}
#import "normalize.css";
/****************************
GENERAL
****************************/
body {
font-family: sans-serif;
background-color: rgb(246, 245, 241);
max-width: 100%;
width: 800px;
margin: 0 auto;
}
.div a {
color: rgb(185, 56, 78);
}
.div a:hover {
background-color: #B9384E;
color: white;
text-decoration: none;
}
/****************************
HEADING
****************************/
header {
font-family: 'Oswald', sans-serif;
}
h1 {
font-weight: bold;
font-size: 3em;
}
h1,
h2 {
padding: 0;
margin: 0.15em;
}
#titulo a {
color: black;
text-decoration: none;
}
h3 {
color: rgb(185, 56, 78);
font-size: 1.5em;
padding-top: 30px;
}
h3,
h4 {
margin: 3px;
}
h2 span {
text-decoration: line-through;
}
/****************************
NAVIGATION
****************************/
.selected {
background-color: rgb(185, 56, 78);
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
nav {
text-align: left;
background-color: black;
color: #fff;
font-size: 1.25em;
border-radius: 5px;
}
nav ul {
list-style: none;
padding-left: 0;
}
nav li {
display: inline-block;
padding: 10px 25px 10px 25px;
}
nav li a {
color: white;
text-decoration: none;
}
nav li:hover {
background-color: rgb(185, 56, 78);
}
/****************************
DIV
****************************/
#primary-content,
#secondary-content,
#info {
background-color: white;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
max-height: 100%;
}
#primary-content img {
border: 2px solid rgb(246, 245, 241);
margin: 30px 20px 30px 70px;
}
#primary-content,
#secondary-content,
#pollassociales,
#info {
margin-bottom: 30px;
}
#blogroll {
width: 75%;
float: left;
}
#social {
float: right;
width: 25%;
}
#info {
clear: both;
}
#parrafo {
float: left;
clear: both;
width: 50%;
padding-left: 10px;
}
#primary-content {
padding-left: 10px;
}
#primary-content p {
font-size: 0.9em;
}
/****************************
UNORDERED LIST
****************************/
#columnas {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
padding: 0;
}
#pollassociales h5 {
width: 14.7%;
}
#pollassociales li {
font-size: 0.8em;
width: 85.3%;
padding: 10px 5% 10px 0;
list-style: none;
}
/****************************
FOOTER
****************************/
footer p {
float: right;
}
/****************************
PAGE:HOME
****************************/
/****************************
COLORS
****************************/
#titulo:hover a {
color: #B9384E;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Smashing HTML5!</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Oswald:400,700" rel="stylesheet">
</head>
<body id="index" class="home">
<header>
<div id="titulo">
<h1>
Smashing HTML5!
</h1>
<h2>
HTML5 in the year <span>2022</span> 2009
</h2>
</div>
<nav>
<ul>
<li class="selected">home</li>
<li>portfolio</li>
<li>blog</li>
<li>contact</li>
</ul>
</nav>
</header>
<div class="div" id="primary-content">
<div id="parrafo">
<h3>Featured Article</h3>
<h4>HTML5 in Smashing Magazine</h4>
<p>Discover how to use Graceful Degradation and Progressive Enhancement techniques to achieve an outstanding, cross-browser HTML5 and <a href="https://www.w3.org/TR/css3-roadmap/"
target="_blank">CSS3</a> website today!</p>
</div>
<div id="imagen">
<img src="img/sm-logo.gif">
</div>
</div>
<div class="div" id="secondary-content">
<section>
<div class="left-column">
<time datetime="2005/10/10">10th October 2005</time>
<p>By Enrique Ramírez</p>
</div>
<div class="right-column">
<h5>This be the title</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo non sapien dapibus blandit nec et leo. Ut ut malesuada tellus.</p>
</div>
</section>
<section>
<div class="left-column">
<time datetime="2005/10/10">10th October 2005</time>
<p>By Enrique Ramírez</p>
</div>
<div class="right-column">
<h5>This be the title</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo non sapien dapibus blandit nec et leo. Ut ut malesuada tellus.</p>
</div>
</section>
<section>
<div class="left-column">
<time datetime="2005/10/10">10th October 2005</time>
<p>By Enrique Ramírez</p>
</div>
<div class="right-column">
<h5>This be the title</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo non sapien dapibus blandit nec et leo. Ut ut malesuada tellus.</p>
</div>
</section>
</div>
<div id="pollassociales" class="div">
<div id="blogroll">
<h5>blogroll</h5>
<ul id="columnas">
<li>HTML5 Doctor</li>
<li>W3C</li>
<li>HTML5 Doctor</li>
<li>W3C</li>
<li>HTML5 Doctor</li>
<li>W3C</li>
<li>HTML5 Spec (working draft)</li>
<li>Wordpress</li>
<li>HTML5 Spec (working draft)</li>
<li>Wordpress</li>
<li>HTML5 Spec (working draft)</li>
<li>Wordpress</li>
<li>Smashing Magazine</li>
<li>Wikipedia</li>
<li>Smashing Magazine</li>
<li>Wikipedia</li>
<li>Smashing Magazine</li>
<li>Wikipedia</li>
</ul>
</div>
<div id="social">
<h5>social</h5>
<ul>
<li>delicious</li>
<li>digg</li>
<li>facebook</li>
<li>last.fm</li>
<li>rss</li>
<li>twitter</li>
</ul>
</div>
</div>
<div class="div" id="info">
<h4>Smashing Magazine</h4>
<p>Amazing Magazine</p>
<img src="img/avatar.gif">
<p>Smashing Magazine is a website and blog that offers resources and advice to web developers and web designers. It was founded by Sven Lennartz and Vitaly Friedman.</p>
</div>
<footer class="div">
<p>2005-2009 Smashing Magazine.</p>
</footer>
</body>
</html>
Related
How do I align my text "Created by Derrick Ogole Web Services" to the bottom right of my footer and still have "Copyright © 2022 Jessica Smith" still horizontally and vertically centred in the footer?
.footer-section {
background-color: #000;
height: auto;
padding: 80px 0;
color: #fff;
}
.copyright {
text-align: center;
}
.copyright-creator {
text-align: right;
padding-right: 30px;
}
<section class="footer-section">
<div class="copyright">
<p class="copyright-jessica">Copyright © 2022 Jessica Smith</p>
</div>
<div class="creator-container">
<p class="copyright-creator">Created by Derrick Ogole Web Services</p>
</div>
</section>
Here is my codepen: https://codepen.io/derrickogole/pen/GRQwqxZ
You can add position: relative to the parent (.footer-section) and use absolute positioning to align .creator-container to bottom right.
.footer-section {
background-color: #000;
height: auto;
padding: 80px 0;
color: #fff;
position: relative;
}
.copyright {
text-align: center;
}
.creator-container{
position: absolute;
bottom: 0px;
right: 5px;
}
<section class="footer-section">
<div class="copyright">
<p class="copyright-jessica">Copyright © 2022 Jessica Smith</p>
</div>
<div class="creator-container">
<p class="copyright-creator">Created by Derrick Ogole Web Services</p>
</div>
</section>
You can use for example absolute positioning of the creator-container:
.footer-section {
background-color: #000;
height: auto;
padding: 80px 0;
color: #fff;
position: relative;
}
.copyright {
text-align: center;
}
.copyright-creator {
position: absolute;
bottom: 0;
right: 0;
padding-right: 30px;
}
<section class="footer-section">
<div class="copyright">
<p class="copyright-jessica">Copyright © 2022 Jessica Smith</p>
</div>
<div class="creator-container">
<p class="copyright-creator">Created by Derrick Ogole Web Services</p>
</div>
</section>
Instead of setting your padding in the footer-section, set it in .copyright.
.footer-section {
background-color: #000;
color: #fff;
}
.copyright {
text-align: center;
padding: 80px 0;
}
.copyright-creator {
text-align: right;
padding-right: 30px;
}
<section class="footer-section">
<div class="copyright">
<p class="copyright-jessica">Copyright © 2022 Jessica Smith</p>
</div>
<div class="creator-container">
<p class="copyright-creator">Created by Derrick Ogole Web Services</p>
</div>
</section>
EDIT
.copyright text will only be centered with itself but not with the whole footer.
I was looking to avoid the use of position:relative and position:absolute because if you add more content, you risk to make elements on top of each other.
.footer {
background-color: #000;
color: #fff;
position: relative;
}
.content {
text-align: center;
}
.absolute-content{
background-color:orange;
position: absolute;
top: 10px;
left: 10px;
}
<div class="footer">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc placerat enim nulla, a volutpat leo bibendum at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas accumsan magna ut nunc lobortis viverra. Phasellus in bibendum est. Vivamus tempor metus et mauris convallis tincidunt. Nam nunc odio, accumsan in urna id, vulputate molestie turpis. Nullam accumsan dolor non enim feugiat, at interdum turpis semper. Duis ut sapien at sem facilisis aliquet. Pellentesque molestie, lacus sed rutrum facilisis, justo dui pharetra lacus, ut tincidunt odio metus mollis mauris.</div>
<div class="absolute-content">absolute</div>
</div>
For example you could define your container as display: grid using 3 equally sized columns like this:
.footer-section {
background-color: #000;
height: auto;
padding: 80px 0;
color: #fff;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.copyright {
text-align: center;
}
.copyright-creator {
text-align: right;
padding-right: 30px;
}
<section class="footer-section">
<div></div>
<div class="copyright">
<p class="copyright-jessica">Copyright © 2022 Jessica Smith</p>
</div>
<div class="creator-container">
<p class="copyright-creator">Created by Derrick Ogole Web Services</p>
</div>
</section>
I don't think any of the other answers quite got it right. Take a look at the example below and let me know if this what you wanted
body { margin: 0 }
* { box-sizing: border-box }
.footer-section {
background-color: #000;
min-height: 200px;
color: #fff;
padding: 2rem;
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 1fr;
}
.copyright, .creator {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
}
.copyright {
place-self: center;
}
.creator {
place-self: end;
}
<section class="footer-section">
<div class="copyright">Copyright © 2022 Jessica Smith</div>
<div class="creator">Created by Derrick Ogole Web Services</div>
</section>
Use position: absolute for both:
.footer-section {
background-color: #000;
position: relative;
height: 100vh;
color: #fff;
}
.copyright {
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
}
.creator-container {
position: absolute;
bottom: 0;
right: 0;
}
<section class="footer-section">
<div class="copyright">
<p class="copyright-jessica">Copyright © 2022 Jessica Smith</p>
</div>
<div class="creator-container">
<p class="copyright-creator">Created by Derrick Ogole Web Services</p>
</div>
</section>
.footer-section {
background-color: #000;
height: auto;
padding: 80px 0;
color: #fff;
}
.copyright {
text-align: center;
}
.copyright-creator {
position:relative;
display:flex;
flex-direction:row;
justify-content:right;
top:95px;
}
<section class="footer-section">
<div class="copyright">
<p class="copyright-jessica">Copyright © 2022 Jessica Smith</p>
</div>
<div class="creator-container">
<p class="copyright-creator">Created by Derrick Ogole Web Services</p>
</div>
</section>
.footer-section {
position:relative;
background-color: #000;
height: auto;
padding: 80px 0;
color: #fff;
}
.copyright {
text-align: center;
}
.creator-container{
position: absolute;
right: 10px;
bottom: 0px;
}
<section class="footer-section">
<div class="copyright">
<p class="copyright-jessica">Copyright © 2022 Jessica Smith</p>
</div>
<div class="creator-container">
<p class="copyright-creator">Created by Derrick Ogole Web Services</p>
</div>
</section>
You can use a grid for the footer-section
.footer-section {
background-color: #000;
height: auto;
padding: 80px 0;
color: #fff;
/* Added */
display: grid;
}
.copyright {
/* Added */
place-self: center;
}
/* Added */
.creator-container {
place-self: end;
}
<section class="footer-section">
<div class="copyright">
<p class="copyright-jessica">Copyright © 2022 Jessica Smith</p>
</div>
<div class="creator-container">
<p class="copyright-creator">Created by Derrick Ogole Web Services</p>
</div>
</section>
.dropbtn {
border: none;
padding: 4px;
}
.dropbtn img {
margin-top: 15px;
}
.dropdown {
position: relative;
display: inline-block;
width: 75px;
text-align: center;
height: 55px;
}
.dropdown:hover {
position: relative;
display: inline-block;
width: 75px;
text-align: center;
height: 55px;
border-radius: 1px;
border: 2px solid #202020;
}
.dropdown img {
height: 25px;
width: 25px;
}
a {
text-decoration: none;
}
.dropdown-content {
width: 75px;
text-align: center;
display: none;
position: absolute;
background-color: #141414;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 2;
padding-top: 4px;
padding-bottom: 4px;
top: 50px;
}
.dropdown-content a {
padding: 11px 4px;
text-decoration: none;
display: block;
border-radius: 40px;
width: 50px;
height: 50px;
margin: auto;
border: 1px solid #191919;
}
.dropdown-content a:hover {
background-color: #141414;
border: 1px solid #848484;
}
.dropdown:hover .dropbtn,
.active {
background-color: #191919;
opacity: 25%;
}
<header>
<div class="container">
<div class="header-container">
<div class="logo">
<img src="logo.svg" alt="" style="width: 209px;">
</div>
<div class="language dropdown">
<img src="elements/can.png" alt="">
<div class="dropdown-content" style="display: none;">
<img src="elements/aus.png" alt="new zealand flag">
<img src="elements/can.png" alt="canada flag">
<img src="elements/sou.png" alt="quebec flag">
<img src="elements/ger.png" alt="germany flag">
</div>
</div>
</div>
</div>
</header>
<div class="main">
<div class="container">
<div class="main-content">
<div class="star">
<img src="img-bg.svg" alt="">
<div class="content">
<h1 class="logo-middle"><img src="logo.svg" alt=""></h1>
<h1 class="title"><span>H1</span> Title</h1>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus
a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor </p>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>All rights reserved</p>
</footer>
<div class="overlay"></div>
<script>
let dcontent = document.querySelector(".dropdown-content")
document.querySelector(".dropdown").addEventListener("click", showLan)
function showLan() {
if (dcontent.style.display == "none") {
dcontent.style.display = "block"
document.querySelector(".overlay").style.display = "block"
}
document.querySelector(".overlay").addEventListener("click", function() {
dcontent.style.display = "none"
document.querySelector(".overlay").style.display = "none"
})
}
</script>
I can't manage to change my language menu background color when active, language menu should have a thin border when hover, and when active top language icon should have a lighter grey background, like in picture 3, I tried almost everything and can't make it work, instead of grey background there is this thin border like on hover.
You need to wrap your .dropdown and .dropdown-content on a div container and implement some css stying rules.
Here try to check my demo
.dropdown-container {
position: relative;
z-index: 2;
width: max-content;
}
.dropbtn {
border: none;
padding: 4px;
}
.dropbtn img {
margin-top: 15px;
}
.dropdown {
position: relative;
display: inline-block;
width: 75px;
text-align: center;
height: 55px;
}
.dropdown:hover {
position: relative;
display: inline-block;
width: 75px;
text-align: center;
height: 55px;
border-radius: 1px;
}
.dropdown img {
height: 25px;
width: 25px;
}
a {
text-decoration: none;
}
.dropdown-content {
width: 75px;
text-align: center;
display: none;
position: absolute;
background-color: #141414;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding-top: 4px;
padding-bottom: 4px;
}
.dropdown-content a {
padding: 11px 4px;
text-decoration: none;
display: block;
border-radius: 40px;
width: 50px;
height: 50px;
margin: auto;
border: 1px solid #191919;
}
.dropdown-content a:hover {
background-color: #141414;
border: 1px solid #848484;
}
.dropdown:hover,
.active {
background-color: #191919;
opacity: 25%;
}
.overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1;
}
.display {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>head</title>
</head>
<body>
<header>
<div class="container">
<div class="header-container">
<div class="logo">
<img src="logo.svg" alt="" style="width: 209px;" />
</div>
<div class="dropdown-container">
<div class="language dropdown">
<img src="Sphere.png" alt="" />
</div>
<div class="dropdown-content">
<img src="Sphere.png" />
<img src="Sphere.png" />
<img src="Sphere.png" />
<img src="Sphere.png" />
</div>
</div>
</div>
</div>
</header>
<div class="main">
<div class="container">
<div class="main-content">
<div class="star">
<img src="img-bg.svg" alt="" />
<div class="content">
<h1 class="logo-middle"><img src="logo.svg" alt="" /></h1>
<h1 class="title"><span>H1</span> Title</h1>
<p>
This is Photoshop's version of Lorem Ipsum. Proin gravida nibh
vel velit auctor aliquet. Aenean sollicitudin, lorem quis
bibendum auctor, nisi elit consequat ipsum, nec sagittis sem
nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit
amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio
tincidunt auctor
</p>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>All rights reserved</p>
</footer>
<div class="overlay"></div>
<script>
const dcontent = document.querySelector(".dropdown-content");
const overlay = document.querySelector(".overlay");
document.querySelector(".dropdown").addEventListener("click", () => {
dcontent.classList.toggle("display");
overlay.classList.toggle("display");
});
overlay.addEventListener(
"click",
(e) => {
e.stopPropagation();
dcontent.classList.toggle("display");
overlay.classList.toggle("display");
},
false
);
</script>
</body>
</html>
You may also go to codesandbox https://codesandbox.io/s/amazing-thunder-k38kd?file=/index.html
When hover over .card I want the .video to appear but it is not working. What do I need to change?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
html {
scroll-behavior: smooth;
}
#media screen and (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
/* header */
header {
height: 509px;
}
header h1 {
color: #fff;
font-size: 60px;
padding-bottom: 20px;
font-weight: 900;
}
header p {
color: #ffffffb5;
font-size: 20px;
line-height: 1.7;
padding-bottom: 20px;
}
header a i {
font-size: 60px;
color: #ffffff87;
transition: all .2s ease-in;
}
header a i:hover {
font-size: 60px;
color: #ffffff;
}
/* header */
/* media query for header section */
#media (max-width:767px) {
header video {
display: none;
}
header {
background: url(images/banner.jpg);
}
header h1 {
color: #fff;
font-size: 40px;
padding-bottom: 20px;
font-weight: 900;
}
header p {
color: #ffffffb5;
font-size: 18px;
line-height: 1.7;
padding-bottom: 20px;
}
}
/* media query for header section */
/* cards */
.cards {
background-color: #202024;
overflow: hidden;
padding-bottom: 30px;
}
.cards .video {
position: fixed;
top: 15%;
left: 20%;
display: none;
}
.cards .video .card:hover {
position: fixed;
top: 15%;
left: 20%;
display: block;
}
.cards .card {
width: 30.3333%;
background-color: #2C2C32;
overflow: hidden;
margin-right: 3%;
margin-bottom: 3%;
border-radius: 5px;
}
.cards .card .image {
width: 100%;
}
.cards .card .image img {
width: 100%;
cursor: pointer;
}
.cards .card h2 {
color: #fff;
font-size: 19px;
padding: 23px;
}
.cards .card p {
padding: 0 15px 30px;
color: #ffffffa8;
line-height: 1.3;
font-size: 17px;
}
.cards .card .btn {
padding-bottom: 25px;
}
.cards .card .btn button {
padding: 10px 0;
color: #fff;
background-color: #82CEC6;
border: none;
border-radius: 5px;
font-size: 15px;
width: 75%;
}
/* media query for cards section */
#media (max-width:767px) {
.cards {
padding: 30px;
}
.cards .card {
width: 100%;
margin-bottom: 35px;
}
}
/* media query for cards section */
/* footer */
footer {
background-color: #1B1B1F;
color: #fff;
}
footer .container .upper h2 {
font-size: 25px;
padding-bottom: 30px;
}
footer .container .upper p{
font-size: 15px;
padding-bottom: 30px;
line-height: 1.4;
color: #a5a7a7;
}
footer .container .lower .icons i {
color: #605d5da8;
border: 1px solid #605d5da8;
border-radius: 50%;
margin: 0 10px 30px 10px;
font-size: 20px;
cursor: pointer;
transition: all .2s ease-in;
}
footer .container .lower .icons i:hover {
color: #fff;
border: 1px solid #605d5da8;
border-radius: 50%;
margin: 0 10px 30px 10px;
font-size: 20px;
}
footer .container .lower .icons i:first-of-type {
padding: 13px 16px;
}
footer .container .lower .icons i:not(:first-of-type){
padding: 13px 13px; }
footer .container .lower .copyright {
color: #a7a7a7a7;
}
/* footer */
/* media query for footer section */
#media (max-width:767px) {
footer {
padding: 20px 0;
}
}
/* media query for footer section */
/*my frame work */
.flex-row {
display: flex;
justify-content: space-around;
align-items: center;
}
.flex-col {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.text-center {
text-align: center;
}
.float-l {
float: left;
}
.container {
padding: 5% 8% 5% 8%;
}
/*my frame work */
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Motion</title>
<script src="https://kit.fontawesome.com/11e8366046.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="motion.css">
</head>
<body>
<!--Header-->
<header class="flex-col" >
<video src="images/banner.mp4" autoplay="true" loop="true" style="width: 100%; z-index: -1000; position: fixed; top: 0; left: 0; "></video>
<div class="container">
<div class="text-center">
<h1>Full Motion</h1>
<p>A responsive video gallery template with a functional lightbox <br>
designed by Templated and released under the Creative Commons License</p>
</div>
<div class="text-center">
</i>
</div>
</div>
</header>
<!--Header-->
<!--cards-->
<div class="cards text-center" id="cards">
<div class="container">
<div class="video"><iframe width="800" height="467" src="https://www.youtube.com/embed/s6zR2T9vn2c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="card float-l">
<div class="image">
<img src="images/pic01.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic02.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic03.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic04.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic05.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic06.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
</div>
</div>
<!--cards-->
<!--footer-->
<footer class="text-center">
<div class="container">
<div class="upper ">
<h2>Etiam veroeros lorem</h2>
<p>Pellentesque eleifend malesuada efficitur. Curabitur volutpat dui mi, ac imperdiet dolor tinciduntnec. Ut <br> erat lectus, dictum sit amet lectus a, aliquet rutrum mauris. Etiam nec lectus hendrerit , consectetur<br> risus viverra, iaculis orci. Phasellus eu nibh ut mi luctus auctor. Donec sit amet dolor in diam feugiat <br> venenatis. </p>
</div>
<div class="lower ">
<div class="icons">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<div class="copyright">©<span>Untitled. Design: TEMPLATED. Images: Unsplash. Videos: Coverr.</span></div>
</div>
</div>
</footer>
<!--footer-->
</body>
</html>
First of: if you want to show any element (as well as a video) when hovering a card, then you need to put that element inside the HTML of the card. You failed to do that.
Also: you need to have the correct order of 'CSS selectors' to make that element visible when the .card gets hovered. Your original code .cards .video .card:hover fails to do that as it means: when from .cards and .video a .card:hover then show video.
What you need is: if from .cards a card:hover then show .video.
Also: when you want to position an element inside a parent you have to make .parent { position: relative } and its child .child { position: absolute }. Currently you use .child { position: fixed }. And without making the parent relative, the video is positioned somewhere on the screen (viewport) instead of the card (when all was working well, that is).
Lastly: the <iframe> you use is a child of <div> .video, so if you want to be able to size .video to your needs, you will need to make the <iframe> fully fill its parent (.video).
Plus: I changed the default background-color of the <header> to 'black' to make its content visible when there is no image.
To top it off: I added a <a> to the 'Watch'-button to open the movie on YouTube.
The below snippet has both the corrected HTML and proper CSS to show a video when the first card is hovered.
Note on SO the video in the card is still not visible, so I created a Fiddle to show that it works (the first card only, I leave the rest up to you).
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
html {
scroll-behavior: smooth;
}
#media screen and (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
/* header */
header {
height: 509px;
background-color: black;
}
header h1 {
color: #fff;
font-size: 60px;
padding-bottom: 20px;
font-weight: 900;
}
header p {
color: #ffffffb5;
font-size: 20px;
line-height: 1.7;
padding-bottom: 20px;
}
header a i {
font-size: 60px;
color: #ffffff87;
transition: all .2s ease-in;
}
header a i:hover {
font-size: 60px;
color: #ffffff;
}
/* header */
/* media query for header section */
#media (max-width:767px) {
header video {
display: none;
}
header {
background-image: url(images/banner.jpg); /* MOD from 'background' */
background-color: black;
}
header h1 {
color: #fff;
font-size: 40px;
padding-bottom: 20px;
font-weight: 900;
}
header p {
color: #ffffffb5;
font-size: 18px;
line-height: 1.7;
padding-bottom: 20px;
}
}
/* media query for header section */
/* cards */
.cards {
background-color: #202024;
overflow: hidden;
padding-bottom: 30px;
}
/* REMOVE THIS CODE
.cards .video {
position: fixed;
top: 15%;
left: 20%;
display: none;
}
.cards .video .card:hover {
position: fixed;
top: 15%;
left: 20%;
display: block;
}
END REMOVE */
/* And ADD */
iframe {
border: none; /* remove default border */
width: 100%; /* stretch to fill parent container */
height: 100%;
}
.cards .card {
position: relative; /* child content must be positioned inside this */
/* => a new 'stacking context' */
}
.cards .card .video {
display: none; /* hidden by default */
}
.cards .card:hover .video { /* when a card is hovered then show video */
position: absolute; /* position this element within a 'relative' parent */
top : 0; /* fully occupy the parent space */
right : 0;
left : 0;
bottom: 5rem; /* up to some position above `watch` button */
display: block; /* make it visible */
}
.cards .card .btn a {
text-decoration: none;
color: currentColor
}
/* End ADD */
.cards .card {
width: 30.3333%;
background-color: #2C2C32;
overflow: hidden;
margin-right: 3%;
margin-bottom: 3%;
border-radius: 5px;
}
.cards .card .image {
width: 100%;
}
.cards .card .image img {
width: 100%;
cursor: pointer;
}
.cards .card h2 {
color: #fff;
font-size: 19px;
padding: 23px;
}
.cards .card p {
padding: 0 15px 30px;
color: #ffffffa8;
line-height: 1.3;
font-size: 17px;
}
.cards .card .btn {
padding-bottom: 25px;
}
.cards .card .btn button {
padding: 10px 0;
color: #fff;
background-color: #82CEC6;
border: none;
border-radius: 5px;
font-size: 15px;
width: 75%;
}
/* media query for cards section */
#media (max-width:767px) {
.cards {
padding: 30px;
}
.cards .card {
width: 100%;
margin-bottom: 35px;
}
}
/* media query for cards section */
/* footer */
footer {
background-color: #1B1B1F;
color: #fff;
}
footer .container .upper h2 {
font-size: 25px;
padding-bottom: 30px;
}
footer .container .upper p{
font-size: 15px;
padding-bottom: 30px;
line-height: 1.4;
color: #a5a7a7;
}
footer .container .lower .icons i {
color: #605d5da8;
border: 1px solid #605d5da8;
border-radius: 50%;
margin: 0 10px 30px 10px;
font-size: 20px;
cursor: pointer;
transition: all .2s ease-in;
}
footer .container .lower .icons i:hover {
color: #fff;
border: 1px solid #605d5da8;
border-radius: 50%;
margin: 0 10px 30px 10px;
font-size: 20px;
}
footer .container .lower .icons i:first-of-type {
padding: 13px 16px;
}
footer .container .lower .icons i:not(:first-of-type){
padding: 13px 13px; }
footer .container .lower .copyright {
color: #a7a7a7a7;
}
/* footer */
/* media query for footer section */
#media (max-width:767px) {
footer {
padding: 20px 0;
}
}
/* media query for footer section */
/*my frame work */
.flex-row {
display: flex;
justify-content: space-around;
align-items: center;
}
.flex-col {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.text-center {
text-align: center;
}
.float-l {
float: left;
}
.container {
padding: 5% 8% 5% 8%;
}
<html>
<head>
<meta charset="UTF-8">
<title>Motion</title>
<script src="https://kit.fontawesome.com/11e8366046.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="motion.css">
</head>
<body>
<!--Header-->
<header class="flex-col" >
<video src="images/banner.mp4" autoplay="true" loop="true" style="width: 100%; z-index: -1000; position: fixed; top: 0; left: 0; "></video>
<div class="container">
<div class="text-center">
<h1>Full Motion</h1>
<p>A responsive video gallery template with a functional lightbox <br>
designed by Templated and released under the Creative Commons License</p>
</div>
<div class="text-center">
</i>
</div>
</div>
</header>
<!--Header-->
<!--cards-->
<div class="cards text-center" id="cards">
<div class="container">
<div class="card float-l">
<div class="video"><iframe src="https://www.youtube.com/embed/s6zR2T9vn2c" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="image">
<img src="images/pic01.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button><a rel="noopener" target="_blank" href="https://www.youtube.com/watch?v=s6zR2T9vn2c">Watch</a></button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic02.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic03.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic04.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic05.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
<div class="card float-l">
<div class="image">
<img src="images/pic06.jpg" alt="">
</div>
<div class="word">
<h2>Nascetur nunc varius commodo</h2>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
</div>
<div class="btn">
<button>Watch</button>
</div>
</div>
</div>
</div>
<!--cards-->
<!--footer-->
<footer class="text-center">
<div class="container">
<div class="upper ">
<h2>Etiam veroeros lorem</h2>
<p>Pellentesque eleifend malesuada efficitur. Curabitur volutpat dui mi, ac imperdiet dolor tinciduntnec. Ut <br> erat lectus, dictum sit amet lectus a, aliquet rutrum mauris. Etiam nec lectus hendrerit , consectetur<br> risus viverra, iaculis orci. Phasellus eu nibh ut mi luctus auctor. Donec sit amet dolor in diam feugiat <br> venenatis. </p>
</div>
<div class="lower ">
<div class="icons">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<div class="copyright">©<span>Untitled. Design: TEMPLATED. Images: Unsplash. Videos: Coverr.</span></div>
</div>
</div>
</footer>
<!--footer-->
</body>
</html>
I was making the "our team " section of a website. I checked my progress via "visual code studio live server".Everything worked properly. After closing vs code, I clicked the HTML file from file explorer and it opened in google chrome. Then the flexbox container became small and also flex items also became small. Why different result shows when I see the webpage from file explorer and when I see from vs code live server extension
body {
margin: 0;
padding: 0;
background: #f79256;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
box-sizing: border-box;
}
.team {
height: auto;
margin: 1% 1%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.card-container {
width: 220px;
height: 350px;
background: #f2f5ff;
border-radius: 6px;
box-shadow: 0px 0px 10px 1px #000;
overflow: hidden;
display: inline-block;
margin-bottom: 05px;
margin: 05px;
}
div.upper-container {
height: 90px;
background-color: #00b2ca;
}
.image-container {
background-color: #f79256;
width: 80px;
height: 80px;
border-radius: 50%;
padding: 5px;
transform: translate(70px, 45px);
}
.image-container img {
width: 80px;
height: 80px;
border-radius: 100%;
margin: 0 auto;
}
.lower-container {
height: 280px;
background-color: #1d4e89;
padding-top: 20px;
text-align: center;
}
.lower-container h3,
.lower-container h4 {
box-sizing: border-box;
line-height: 0.6;
font-weight: lighter;
}
.lower-container h3 {
padding-top: 20px;
color: #fbd1a2;
}
.lower-container h4 {
color: #fbd1a2;
}
.lower-container p {
font-size: 16px;
color: #00b2ca;
padding: 0 10px;
}
.lower-container .btn {
text-decoration: none;
background-color: #fbd1a2;
color: #1d4e89;
padding: 05px 20px;
margin-top: 15px;
font-weight: bold;
border-radius: 10px;
transition: all 0.5s;
}
.lower-container .btn:hover {
letter-spacing: 3px;
font-weight: lighter;
color: #00b2ca;
}
<!DOCTYPE html>
<html>
<head>
<title>Profile Card</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="team">
<div class="card-container">
<div class="upper-container">
<div class="image-container">
<img src="Person/3.jpg" />
</div>
</div>
<div class="lower-container">
<div>
<h3>Alaina Wick</h3>
<h4>Front-end Developer</h4>
</div>
<div>
<p>
sodales accumsan ligula. Aenean sed diam tristique, fermentum mi nec, ornare arcu.
</p>
</div>
<div>
View profile
</div>
</div>
</div>
<div class="card-container">
<div class="upper-container">
<div class="image-container">
<img src="Person/2.jpg" />
</div>
</div>
<div class="lower-container">
<div>
<h3>Alaina Wick</h3>
<h4>Front-end Developer</h4>
</div>
<div>
<p>
sodales accumsan ligula. Aenean sed diam tristique, fermentum mi nec, ornare arcu.
</p>
</div>
<div>
View profile
</div>
</div>
</div>
<div class="card-container">
<div class="upper-container">
<div class="image-container">
<img src="Person/1.jpg" />
</div>
</div>
<div class="lower-container">
<div>
<h3>Alaina Wick</h3>
<h4>Front-end Developer</h4>
</div>
<div>
<p>
sodales accumsan ligula. Aenean sed diam tristique, fermentum mi nec, ornare arcu.
</p>
</div>
<div>
View profile
</div>
</div>
</div>
<div class="card-container">
<div class="upper-container">
<div class="image-container">
<img src="Person/3.jpg" />
</div>
</div>
<div class="lower-container">
<div>
<h3>Alaina Wick</h3>
<h4>Front-end Developer</h4>
</div>
<div>
<p>
sodales accumsan ligula. Aenean sed diam tristique, fermentum mi nec, ornare arcu.
</p>
</div>
<div>
View profile
</div>
</div>
</div>
</div>
</body>
</html>
Try changing the justify-content for the team. Don't really know about your environment and your preview
First of all, this is my code for the web page
#import url("reset.css");
#import url('https://fonts.googleapis.com/css?family=Raleway');
*
{
box-sizing:border-box;
}
body
{
background-color: #9E9E9E;
}
#wrapper
{
width:95%;
max-width:980px;
margin: 0 auto;
font-family: 'Raleway', sans-serif;
line-height: 2rem;
}
.header
{
padding:18px;
background-color: #757575;
border-radius:5px;
width:100%;
margin-top:5px;
margin-bottom:5px;
}
.column_left
{
float:left;
padding:18px;
width:70% ;
background-color:#607D8B;
border-top-left-radius: 5px;
border-bottom-left-radius:5px;
}
.column_right
{
float:right;
padding:18px;
width:29.99%;
background-color:#455A64;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
/*For Screens 750 PX or less (width)*/
#media screen and (max-width:750px)
{
.header
{
text-align:center;
}
.column_right
{
display:none;
}
.column_left
{
width:100%;
border-radius:5px;
}
}
h1
{
font-size:1.8rem;
}
h2
{
font-size: 1.4rem;
}
p
{
}
nav
{}
nav ul
{}
nav ul li
{
width:100%;
background-color:#607D8B;
text-align:center;
padding:2.5px;
border-radius:5px;
margin-bottom:5px;
}
nav ul li a
{
color:#455A64;
}
footer
{
padding:18px;
background-color: #757575;
border-radius:5px;
width:100%;
margin-top:5px;
margin-bottom:5px;
float:none;
display:flex;
}
<meta name="viewport" content="width=device-width, user-scalable=no">
<div id="wrapper">
<h1 class="header">Lorem Ipsum</h1>
<div class="column_left">
<h2>Welcome to Lorem Ipsum</h2>
<p>Aenean nec vestibulum justo, ut aliquet ante. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Etiam viverra interdum neque, sed sagittis lectus sodales sit amet.</p>
<p>Maecenas posuere laoreet auctor. Integer vel nulla ut magna interdum consectetur.</p>
<p>Vestibulum non ligula sed diam luctus tincidunt in sit amet metus.</p>
</div>
<div class="column_right">
<h2>Navigation</h2>
<nav>
<ul>
<li><a class="button" href="#">Link</a></li>
<li><a class="button" href="#">Link</a></li>
<li><a class="button" href="#">Link</a></li>
</ul>
</nav>
</div>
<footer>
© 2016 Ipsum Lorem
</footer>
</div>
Basically I would like to have the column_left and column_right classes the same height, without using height=100%. The website will have more than one page, and the length on the others may not be the same as the example page. Here is an image of what I got so far:
Basically, I want the navigation div to be as tall as the one beside it.
If flexbox is an option, you can give:
display: flex;
flex-wrap: wrap;
to wrapper and that will fix the heights - see demo below:
#import url("reset.css");
#import url('https://fonts.googleapis.com/css?family=Raleway');
* {
box-sizing: border-box;
}
body {
background-color: #9E9E9E;
}
#wrapper {
width: 95%;
max-width: 980px;
margin: 0 auto;
font-family: 'Raleway', sans-serif;
line-height: 2rem;
display: flex;
flex-wrap: wrap;
}
.header {
padding: 18px;
background-color: #757575;
border-radius: 5px;
width: 100%;
margin-top: 5px;
margin-bottom: 5px;
}
.column_left {
float: left;
padding: 18px;
width: 70%;
background-color: #607D8B;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.column_right {
float: right;
padding: 18px;
width: 29.99%;
background-color: #455A64;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
/*For Screens 750 PX or less (width)*/
#media screen and (max-width: 750px) {
.header {
text-align: center;
}
.column_right {
display: none;
}
.column_left {
width: 100%;
border-radius: 5px;
}
}
h1 {
font-size: 1.8rem;
}
h2 {
font-size: 1.4rem;
}
p {} nav {} nav ul {} nav ul li {
width: 100%;
background-color: #607D8B;
text-align: center;
padding: 2.5px;
border-radius: 5px;
margin-bottom: 5px;
}
nav ul li a {
color: #455A64;
}
footer {
padding: 18px;
background-color: #757575;
border-radius: 5px;
width: 100%;
margin-top: 5px;
margin-bottom: 5px;
float: none;
display: flex;
}
<div id="wrapper">
<h1 class="header">Lorem Ipsum</h1>
<div class="column_left">
<h2>Welcome to Lorem Ipsum</h2>
<p>Aenean nec vestibulum justo, ut aliquet ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Etiam viverra interdum neque, sed sagittis lectus sodales sit amet.</p>
<p>Maecenas posuere laoreet auctor. Integer vel nulla ut magna interdum consectetur.</p>
<p>Vestibulum non ligula sed diam luctus tincidunt in sit amet metus.</p>
</div>
<div class="column_right">
<h2>Navigation</h2>
<nav>
<ul>
<li><a class="button" href="#">Link</a>
</li>
<li><a class="button" href="#">Link</a>
</li>
<li><a class="button" href="#">Link</a>
</li>
</ul>
</nav>
</div>
<footer>
© 2016 Ipsum Lorem
</footer>
</div>
If you can't use flexbox, which is the recommended way, and you don't want script, here is 2 options:
Since both float: right and position: absolute takes the element out of flow (in their own way), the latter will solve your problem if the left column is always higher. With an added wrapper (columns) it could look like this
#import url("reset.css");
#import url('https://fonts.googleapis.com/css?family=Raleway');
*
{
box-sizing:border-box;
}
body
{
background-color: #9E9E9E;
}
#wrapper
{
width:95%;
max-width:980px;
margin: 0 auto;
font-family: 'Raleway', sans-serif;
line-height: 2rem;
}
.header
{
padding:18px;
background-color: #757575;
border-radius:5px;
width:100%;
margin-top:5px;
margin-bottom:5px;
}
.columns
{
position: relative;
}
.columns::after
{
content: '';
display:block;
clear:both;
}
.column_left
{
float:left;
padding:18px;
width:70% ;
background-color:#607D8B;
border-top-left-radius: 5px;
border-bottom-left-radius:5px;
}
.column_right{
position: absolute;
top: 0;
right: 0;
padding:18px;
width:30%;
background-color:#455A64;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
height: 100%;
}
/*For Screens 750 PX or less (width)*/
#media screen and (max-width:750px)
{
.header
{
text-align:center;
}
.column_right
{
display:none;
}
.column_left
{
width:100%;
border-radius:5px;
}
}
h1
{
font-size:1.8rem;
}
h2
{
font-size: 1.4rem;
}
p
{
}
nav
{}
nav ul
{}
nav ul li
{
width:100%;
background-color:#607D8B;
text-align:center;
padding:2.5px;
border-radius:5px;
margin-bottom:5px;
}
nav ul li a
{
color:#455A64;
}
footer
{
padding:18px;
background-color: #757575;
border-radius:5px;
width:100%;
margin-top:5px;
margin-bottom:5px;
float:none;
display:flex;
}
<meta name="viewport" content="width=device-width, user-scalable=no">
<div id="wrapper">
<h1 class="header">Lorem Ipsum</h1>
<div class="columns">
<div class="column_left">
<h2>Welcome to Lorem Ipsum</h2>
<p>Aenean nec vestibulum justo, ut aliquet ante. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Etiam viverra interdum neque, sed sagittis lectus sodales sit amet.</p>
<p>Maecenas posuere laoreet auctor. Integer vel nulla ut magna interdum consectetur.</p>
<p>Vestibulum non ligula sed diam luctus tincidunt in sit amet metus.</p>
</div>
<div class="column_right">
<h2>Navigation</h2>
<nav>
<ul>
<li><a class="button" href="#">Link</a></li>
<li><a class="button" href="#">Link</a></li>
<li><a class="button" href="#">Link</a></li>
</ul>
</nav>
</div>
</div>
<footer>
© 2016 Ipsum Lorem
</footer>
</div>
Use display: table. With an added wrapper (columns) it could look like this:
(I favor this before the above as it is dynamic and keep both columns equal high regardless of which one is higher.)
#import url("reset.css");
#import url('https://fonts.googleapis.com/css?family=Raleway');
*
{
box-sizing:border-box;
}
body
{
background-color: #9E9E9E;
}
#wrapper
{
width:95%;
max-width:980px;
margin: 0 auto;
font-family: 'Raleway', sans-serif;
line-height: 2rem;
}
.header
{
padding:18px;
background-color: #757575;
border-radius:5px;
width:100%;
margin-top:5px;
margin-bottom:5px;
}
.columns
{
display: table;
width: 100%;
}
.column_left
{
display: table-cell;
padding:18px;
width:70%;
background-color:#607D8B;
border-top-left-radius: 5px;
border-bottom-left-radius:5px;
}
.column_right{
display: table-cell;
padding:18px;
width:30%;
background-color:#455A64;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
/*For Screens 750 PX or less (width)*/
#media screen and (max-width:750px)
{
.header
{
text-align:center;
}
.column_right
{
display:none;
}
.column_left
{
width:100%;
border-radius:5px;
}
}
h1
{
font-size:1.8rem;
}
h2
{
font-size: 1.4rem;
}
p
{
}
nav
{}
nav ul
{}
nav ul li
{
width:100%;
background-color:#607D8B;
text-align:center;
padding:2.5px;
border-radius:5px;
margin-bottom:5px;
}
nav ul li a
{
color:#455A64;
}
footer
{
padding:18px;
background-color: #757575;
border-radius:5px;
width:100%;
margin-top:5px;
margin-bottom:5px;
float:none;
display:flex;
}
<meta name="viewport" content="width=device-width, user-scalable=no">
<div id="wrapper">
<h1 class="header">Lorem Ipsum</h1>
<div class="columns">
<div class="column_left">
<h2>Welcome to Lorem Ipsum</h2>
<p>Aenean nec vestibulum justo, ut aliquet ante. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Etiam viverra interdum neque, sed sagittis lectus sodales sit amet.</p>
<p>Maecenas posuere laoreet auctor. Integer vel nulla ut magna interdum consectetur.</p>
<p>Vestibulum non ligula sed diam luctus tincidunt in sit amet metus.</p>
</div>
<div class="column_right">
<h2>Navigation</h2>
<nav>
<ul>
<li><a class="button" href="#">Link</a></li>
<li><a class="button" href="#">Link</a></li>
<li><a class="button" href="#">Link</a></li>
</ul>
</nav>
</div>
</div>
<footer>
© 2016 Ipsum Lorem
</footer>
</div>
Per this similar question, you can achieve this using JavaScript.
document.getElementsByClassName("column_left")[0].style.height = document.getElementsByClassName("column_right")[0].style.height;
This will set the left column's height to the right column's height. You can switch around the code, and use the question's answers too.