I'm trying to make a fixed navbar at the top of my webpage, it's all pure HTML and CSS for now. The problem comes as a result of the fact that I want a button on the left side to open up a sidebar for navigation on mobile. I want to position the three navbar items in the center of the navbar, evenly spaced from eachother. As previously stated, I also want the navbar to be fixed so that it is visible no matter where the user scrolls on the page.
Here's the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Cyberpunk Bar</title>
<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.1.1/lux/bootstrap.min.css" rel="stylesheet" integrity="sha384-4KIc2mnKfAA7VjirNLk2Sqp7jxFNq1q8+FhYGxhW2l52lt4HJsfksL+hjswHfbl/" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<div id="navbar">
<ul id="navbar-menu">
<li>
<span class="open-slide">
<a href="#" onclick="">
<div><i id="open-button" class="fab fa-bitcoin"></i></div>
</a>
</span>
</li>
<li>Theme</li>
<li>Beer</li>
<li>Menu<li>
</ul>
</div>
<body>
<div class="pimg1">
<div class="ptext">
<span class="border">Cyberpunk Bar and Grill</span>
</div>
</div>
<section class="section section-light">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor enim quis explicabo perspiciatis nemo nesciunt ducimus, aut eos iste modi amet, illo est eveniet at porro debitis excepturi neque nisi! <br>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque neque expedita at fugit voluptates veritatis temporibus ab dignissimos et nihil? Repellendus debitis possimus consectetur facilis nostrum natus fugit voluptatibus modi?</p>
</section>
<div class="pimg2">
<div class="ptext">
<span class="border">Brilliant Beer Selection</span>
</div>
</div>
<section class="section section-light">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor enim quis explicabo perspiciatis nemo nesciunt ducimus, aut eos iste modi amet, illo est eveniet at porro debitis excepturi neque nisi! <br>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque neque expedita at fugit voluptates veritatis temporibus ab dignissimos et nihil? Repellendus debitis possimus consectetur facilis nostrum natus fugit voluptatibus modi?</p>
</p>
</section>
<div class="pimg3">
<div class="ptext">
<span class="border">Burgers and Steak</span>
</div>
</div>
<section id="section3" class="section section-dark">
<h2>Section 3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor enim quis explicabo perspiciatis nemo nesciunt ducimus, aut eos iste modi amet, illo est eveniet at porro debitis excepturi neque nisi! <br>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque neque expedita at fugit voluptates veritatis temporibus ab dignissimos et nihil? Repellendus debitis possimus consectetur facilis nostrum natus fugit voluptatibus modi?</p>
</section>
<div class="pimg4">
<div class="ptext">
<span class="border">What are you waiting for?</span>
</div>
</div>
</body>
</html>
Here's the CSS
body, html
{
height: 100%;
margin: 0;
padding: 0;
font-size: 18px;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.8em;
color: #666;
}
#navbar
{
height: 100px;
background-color: black;
z-index: 1;
overflow: hidden;
margin: 0;
padding: 10;
filter:drop-shadow(0 5px 15px black);
}
#navbar-menu
{
display: inline-block;
text-align: center;
text-decoration: none;
list-style: none;
font-size: 25px;
margin: 0;
padding: 0;
color: white;
}
#open-button
{
color: white;
font-size: 50px;
padding-bottom: 25px;
padding-top: 25px;
}
#open-button:hover
{
color: #666;
}
.pimg1, .pimg2, .pimg3, .pimg4
{
position: relative;
opacity: 0.70;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
/* fixed = parallax, scroll = normal */
background-attachment: fixed;
}
.pimg1
{
background-image:url('https://i.imgur.com/bHJ4vHL.jpg?1');
min-height: 100%;
}
.pimg2
{
background-image:url('https://images.pexels.com/photos/338711/pexels-photo-338711.jpeg?cs=srgb&dl=alcohol-alcoholic-alcoholic-beverage-338711.jpg&fm=jpg');
min-height: 400px;
}
.pimg3
{
background-image:url('https://images.pexels.com/photos/156114/pexels-photo-156114.jpeg?cs=srgb&dl=beef-bread-burger-156114.jpg&fm=jpg');
min-height: 400px;
}
.pimg4
{
background-image:url('https://images.pexels.com/photos/696218/pexels-photo-696218.jpeg?cs=srgb&dl=adult-bar-blur-696218.jpg&fm=jpg');
min-height: 400px;
}
.section
{
text-align: center;
padding: 50px 80px;
}
.section-light
{
background-color: #f4f4f4;
color: #666;
}
.section-dark
{
background-color: #282E34;
color: #DDD;
}
.ptext
{
position: absolute;
top: 50%;
width: 100%;
text-align: center;
color: #000;
font-size: 32px;
letter-spacing: 8px;
text-transform: uppercase;
}
.ptext .border
{
background-color: #111;
color: white;
padding: 20px;
}
Is using a the best practice for this? Please help!
$(".open-slide").click(function() {
$(this).toggleClass("opend");
});
body,
html {
height: 100%;
margin: 0;
padding: 0;
font-size: 18px;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.8em;
color: #666;
}
#navbar {
height: 100px;
background-color: black;
z-index: 1;
overflow: hidden;
margin: 0;
padding: 10;
filter: drop-shadow(0 5px 15px black);
}
#navbar-menu {
display: inline-block;
text-align: center;
text-decoration: none;
list-style: none;
font-size: 25px;
margin: 0;
padding: 0;
color: white;
}
#open-button {
color: white;
font-size: 50px;
padding-bottom: 25px;
padding-top: 25px;
display:none;
}
#open-button:hover {
color: #666;
}
.pimg1 {
/*margin-top:100px;*/
}
.pimg1,
.pimg2,
.pimg3,
.pimg4 {
position: relative;
opacity: 0.70;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
/* fixed = parallax, scroll = normal */
background-attachment: fixed;
}
.pimg1 {
background-image: url('https://i.imgur.com/bHJ4vHL.jpg?1');
min-height: 100%;
}
.pimg2 {
background-image: url('https://images.pexels.com/photos/338711/pexels-photo-338711.jpeg?cs=srgb&dl=alcohol-alcoholic-alcoholic-beverage-338711.jpg&fm=jpg');
min-height: 400px;
}
.pimg3 {
background-image: url('https://images.pexels.com/photos/156114/pexels-photo-156114.jpeg?cs=srgb&dl=beef-bread-burger-156114.jpg&fm=jpg');
min-height: 400px;
}
.pimg4 {
background-image: url('https://images.pexels.com/photos/696218/pexels-photo-696218.jpeg?cs=srgb&dl=adult-bar-blur-696218.jpg&fm=jpg');
min-height: 400px;
}
.section {
text-align: center;
padding: 50px 80px;
}
.section-light {
background-color: #f4f4f4;
color: #666;
}
.section-dark {
background-color: #282E34;
color: #DDD;
}
.ptext {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
color: #000;
font-size: 32px;
letter-spacing: 8px;
text-transform: uppercase;
}
.ptext .border {
background-color: #111;
color: white;
padding: 20px;
}
/* new css */
.open-slide {
display: none;
}
#navbar-menu {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
#navbar-menu>li {
height: 100px;
line-height: 100px;
}
.menus-nav.fixed-header {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
#media(max-width:767px) {
.open-slide {
display: block;
}
.open-slide+#navbar-menu {
max-height: 0;
position: relative;
-webkit-transition: max-height 1000ms ease;
transition: max-height 1000ms ease;
overflow: hidden;
}
.open-slide.opend+#navbar-menu {
max-height: 300px;
}
#navbar {
height: auto;
}
#navbar-menu {
display: block !important;
display: block !important;
display: block !important;
display: block !important;
display: block !important;
-webkit-flex-flow: inherit !important;
justify-content: inherit !important;
}
#navbar-menu>li {
height: auto;
}
#navbar-menu>li {
height: auto;
line-height: 1em;
padding: 10px 15px;
text-align: left;
border-bottom: 1px solid #222222;
}
#open-button {
display:block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/todc-bootstrap/3.3.7-3.3.13/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/todc-bootstrap/3.3.7-3.3.13/js/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<body>
<!-- menu -->
<div id="navbar" class="menus-nav fixed-header">
<i id="open-button" class="fab fa-bitcoin open-slide" onclick=""></i>
<ul id="navbar-menu">
<li>Theme</li>
<li>Beer</li>
<li>Menu</li>
</ul>
</div>
<!-- menu -->
<div class="pimg1">
<div class="ptext">
<span class="border">Cyberpunk Bar and Grill</span>
</div>
</div>
<section class="section section-light">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor enim quis explicabo perspiciatis nemo nesciunt ducimus, aut eos iste modi amet, illo est eveniet at porro debitis excepturi neque nisi! <br>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque neque expedita at fugit voluptates veritatis temporibus ab dignissimos et nihil? Repellendus debitis possimus consectetur facilis nostrum natus fugit voluptatibus modi?</p>
</section>
<div class="pimg2">
<div class="ptext">
<span class="border">Brilliant Beer Selection</span>
</div>
</div>
<section class="section section-light">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor enim quis explicabo perspiciatis nemo nesciunt ducimus, aut eos iste modi amet, illo est eveniet at porro debitis excepturi neque nisi! <br>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque neque expedita at fugit voluptates veritatis temporibus ab dignissimos et nihil? Repellendus debitis possimus consectetur facilis nostrum natus fugit voluptatibus modi?
</p>
</section>
<div class="pimg3">
<div class="ptext">
<span class="border">Burgers and Steak</span>
</div>
</div>
<section id="section3" class="section section-dark">
<h2>Section 3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor enim quis explicabo perspiciatis nemo nesciunt ducimus, aut eos iste modi amet, illo est eveniet at porro debitis excepturi neque nisi! <br>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque neque expedita at fugit voluptates veritatis temporibus ab dignissimos et nihil? Repellendus debitis possimus consectetur facilis nostrum natus fugit voluptatibus modi?</p>
</section>
<div class="pimg4">
<div class="ptext">
<span class="border">What are you waiting for?</span>
</div>
</div>
</body>
First of all our <div id="navbar"> have to be inside <body> tag.
Check here for edited parts of code:
HTML:
<body>
<div id="navbar">
<ul id="navbar-menu">
<li>
<span class="open-slide">
<a href="#" onclick="">
<div><i id="open-button" class="fab fa-bitcoin"></i></div>
</a>
</span>
</li>
<li>Theme</li>
<li>Beer</li>
<li>Menu<li>
</ul>
</div>
.....
</body>
</html>
CSS:
#navbar {
position: fixed;
top: 0;
width: 100%;
height: 100px;
background-color: black;
z-index: 1;
overflow: hidden;
margin: 0;
padding: 10;
filter:drop-shadow(0 5px 15px black);
}
#navbar-menu {
width: max-content;
margin: 0 auto;
}
#navbar-menu li {
display: inline-block;
text-align: center;
text-decoration: none;
list-style: none;
font-size: 25px;
margin: 0;
padding: 0 40px;
color: white;
}
https://codepen.io/Yulia_pi/pen/yjRQgy
Related
I have found an awesome HTML and CSS stacked card article in CSS-tricks. In that demo there is no image, but I want to add an image on the right side of the card in the below code, attached an image for reference. I have tried with all my knowledge but I couldn't make it look like in the image I have attached. Could anyone please help me?
.wrapper {
margin-top: 100px;
padding-top: 150px;
padding-bottom: 1000px;
max-width: 700px;
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.card1, .card2, .card3, .card4, .card5, .card6, .card7 {
top: 30px;
position: sticky;
border: 1px solid #ccc;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
background-color: white;
color: #333;
padding: 40px;
border-radius: 10px;
margin-bottom: 20px;
height: 380px;
}
.card1:nth-child(1n) {
top: 20px;
}
.card2:nth-child(2n) {
top: 40px;
}
.card3:nth-child(3n) {
top: 60px;
}
.card4:nth-child(4n) {
top: 80px;
}
.card5:nth-child(5n) {
top: 100px;
}
.card6:nth-child(6n) {
top: 120px;
}
.card7:nth-child(7n) {
top: 140px;
}
.card:nth-child(8n) {
top: 160px;
}
.card1{
background-color: #CAC5F5;
}
.card2{
background-color: #C0FFD6
}
.card3{
background-color: #FCF4B0
}
.card4{
background-color: #FFB1B0
}
.card5{
background-color: #8AC9FF
}
.classname {
background-color:#44c767;
text-indent:0;
display:inline-block;
color:#ffffff;
font-size:15px;
font-style:normal;
height:50px;
line-height:50px;
width:140px;
text-decoration:none;
text-align:center;
}.classname:hover {
background-color:#5cbf2a;
}.classname:active {
position:relative;
top:1px;
}
<div class="wrapper">
<div class="card1">
<h2><span>Project #1</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
Know More
</div>
<div class="card2">
<h2><span>Project #2</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>
<div class="card3">
<h2><span>Project #3</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>
<div class="card4">
<h2><span>Project #4</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>
<div class="card5">
<h2><span>Project #5</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>
</div>
I made two DIV elements .image and .left (You will find them at the bottom of CSS) that position the content and the photo
.wrapper {
margin-top: 100px;
padding-top: 150px;
padding-bottom: 1000px;
max-width: 700px;
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.card1,
.card2,
.card3,
.card4,
.card5,
.card6,
.card7 {
top: 30px;
position: sticky;
border: 1px solid #ccc;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
background-color: white;
color: #333;
padding: 40px;
border-radius: 10px;
margin-bottom: 20px;
height: 380px;
}
.card1:nth-child(1n) {
top: 20px;
}
.card2:nth-child(2n) {
top: 40px;
}
.card3:nth-child(3n) {
top: 60px;
}
.card4:nth-child(4n) {
top: 80px;
}
.card5:nth-child(5n) {
top: 100px;
}
.card6:nth-child(6n) {
top: 120px;
}
.card7:nth-child(7n) {
top: 140px;
}
.card:nth-child(8n) {
top: 160px;
}
.card1 {
background-color: #CAC5F5;
}
.card2 {
background-color: #C0FFD6
}
.card3 {
background-color: #FCF4B0
}
.card4 {
background-color: #FFB1B0
}
.card5 {
background-color: #8AC9FF
}
.classname {
background-color: #44c767;
text-indent: 0;
display: inline-block;
color: #ffffff;
font-size: 15px;
font-style: normal;
height: 50px;
line-height: 50px;
width: 140px;
text-decoration: none;
text-align: center;
}
.classname:hover {
background-color: #5cbf2a;
}
.classname:active {
position: relative;
top: 1px;
}
.left {
position: relative;
margin-right: 50%;
}
.image {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 50%;
overflow: hidden;
border-radius: 0 10px 10px 0;
}
<div class="wrapper">
<div class="card1">
<div class="left">
<h2><span>Project #1</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus
commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum
laborum
ad a sequi!</p>
Know More
</div>
<div class="image">
<img src="https://blog.54ka.org/wp-content/uploads/2020/06/fairy-tales-luminance-fashion-photography_by_54ka.jpg">
</div>
</div>
<div class="card2">
<div class="left">
<h2><span>Project #2</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus
commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum
laborum
ad a sequi!</p>
</div>
<div class="image">
<img src="https://blog.54ka.org/wp-content/uploads/2020/06/fairy-tales-luminance-fashion-photography_by_54ka.jpg">
</div>
</div>
<div class="card3">
<div class="left">
<h2><span>Project #3</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus
commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum
laborum
ad a sequi!</p>
</div>
<div class="image">
<img src="https://blog.54ka.org/wp-content/uploads/2020/06/fairy-tales-luminance-fashion-photography_by_54ka.jpg">
</div>
</div>
<div class="card4">
<div class="left">
<h2><span>Project #4</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus
commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum
laborum
ad a sequi!</p>
</div>
<div class="image">
<img src="https://blog.54ka.org/wp-content/uploads/2020/06/fairy-tales-luminance-fashion-photography_by_54ka.jpg">
</div>
</div>
<div class="card5">
<div class="left">
<h2><span>Project #5</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus
commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum
laborum
ad a sequi!</p>
</div>
<div class="image">
<img src="https://blog.54ka.org/wp-content/uploads/2020/06/fairy-tales-luminance-fashion-photography_by_54ka.jpg">
</div>
</div>
</div>
.wrapper {
margin-top: 100px;
padding-top: 150px;
padding-bottom: 1000px;
max-width: 700px;
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.card1, .card2, .card3, .card4, .card5, .card6, .card7 {
top: 30px;
position: sticky;
border: 1px solid #ccc;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
background-color: white;
color: #333;
padding: 40px;
border-radius: 10px;
margin-bottom: 20px;
height: 380px;
}
.card1:nth-child(1n) {
top: 20px;
}
.card2:nth-child(2n) {
top: 40px;
}
.card3:nth-child(3n) {
top: 60px;
}
.card4:nth-child(4n) {
top: 80px;
}
.card5:nth-child(5n) {
top: 100px;
}
.card6:nth-child(6n) {
top: 120px;
}
.card7:nth-child(7n) {
top: 140px;
}
.card:nth-child(8n) {
top: 160px;
}
.card1{
background-color: #CAC5F5;
}
.card2{
background-color: #C0FFD6
}
.card3{
background-color: #FCF4B0
}
.card4{
background-color: #FFB1B0
}
.card5{
background-color: #8AC9FF
}
.classname {
background-color:#44c767;
text-indent:0;
display:inline-block;
color:#ffffff;
font-size:15px;
font-style:normal;
height:50px;
line-height:50px;
width:140px;
text-decoration:none;
text-align:center;
}.classname:hover {
background-color:#5cbf2a;
}.classname:active {
position:relative;
top:1px;
}
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
<div class="wrapper">
<div class="card1">
<div class="column">
<h2><span>Project #1</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
Know More
</div>
<div class="column">
<img src="http://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_960_720.jpg" alt="Girl in a jacket" width="250" height="300">
</div>
</div>
<div class="card2">
<h2><span>Project #2</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>
<div class="card3">
<h2><span>Project #3</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>
<div class="card4">
<h2><span>Project #4</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>
<div class="card5">
<h2><span>Project #5</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>
</div>
Please check the Snipped just added code to divide div in 2 columns
Maybe utilize flex and some align-items to attain the centering effect.
.image-box-wrap
{ background-color: Black;
padding: 20px;
}
.image-box
{ background-color: White;
display: flex;
justify-content: space-between;
}
.image-box > *
{ display: flex;
flex-direction: column;
justify-content: center;
}
.image-box .text
{ flex: 1 1 0%;
box-sizing: border-box;
padding: 1em;
align-items: flex-start;
}
.image-box .text a
{ background-color: Orange;
padding: 10px;
color: White;
text-decoration: none;
}
.image-box .image
{ background-color: Teal;
width: 40%;
height: 240px;
}
.image-box .image img
{ display: block;
width: 100%;
}
<div class="image-box-wrap">
<div class="image-box">
<div class="text">
<h2>Card One</h2>
<p>Text goes here... (if you have a bunch of text, you'll attain the sticky positioning where the image follows along with the text that you had in your example as the page scrolls down)</p>
Button
</div>
<div class="image">
IMG tag goes here
</div>
</div>
</div>
i try to put a articles box content like a blog in my website so... i try to make it up a good website responsive, but the wrap css is not working, everthing is on a column or everythin is on a row, but i want to wrap the boxes like, 1, 2, 3, 4, 5, when the screen size change bigger or smoller...
i am already bad for this, i have some hours tryin to figure it out but i dont get it.
thank you so much.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: lightslategrey;
color: white;
font-size: 16px;
}
a {
color: white;
text-decoration: none;
}
Nav {
font-family: 'Raleway', sans-serif;
}
ul {
list-style: none;
}
.container {
width: 90%;
margin: auto;
}
/* Navigation */
.nav-main {
font-size: 17px;
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
padding: 20px 0;
}
.logo-nav {
font-size: 20px;
}
/* Nav left */
.nav-main ul {
display: flex;
}
.nav-main ul li {
padding: 10px;
}
.nav-main ul li a {
padding: 4px;
}
.nav-main ul li a:hover {
border-bottom: 2px solid #ffffff;
}
.nav-main ul.nav-menu {
flex: 1px;
margin-left: 95px;
}
/*SHOWCASE*/
hr {
margin-bottom: 10px;
}
.showcase {
font-family: 'Raleway', sans-serif;
width: 100%;
height: 400px;
background: url(./img/fondoshowcase.jpeg) no-repeat center center/cover;
padding-bottom: 50px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
.text-showcase {
align-items: center;
width: 90%;
}
.showcase h2,
.showcase p {
margin-bottom: 15px;
}
.btnshowcase {
cursor: pointer;
display: inline-block;
border: 0px;
font-weight: bold;
padding: 10px 20px;
background: darkorange;
}
.btnshowcase:hover {
opacity: .9;
}
/* News Cards*/
.midcontainer {
background-color: white;
}
#media screen and (min-width: 650px) {
.news-container,
.news-cards {
display: grid;
}
}
#media screen and (max-width: 900px) {
.news-container {
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
}
.news-sep{
margin-bottom: 25px;
}
.news-container {
text-align: center;
}
.news-cards {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.news-cards img {
width: 85%;
height: 30%;
min-height: 180px;
max-width: 85%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marcos Canela</title>
<!--font awesome-->
<script src="https://kit.fontawesome.com/335ba1c44e.js" crossorigin="anonymous"></script>
<!--CUSTOM CSS-->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="head">
<nav class="nav-main">
<h1 class="logo-nav"> Marcos Canela </h1>
<ul class="nav-menu">
<li>
Inicio
</li>
<li>
Inicio
</li>
<li>
Inicio
</li>
<li>
Inicio
</li>
<li>
Inicio
</li>
</ul>
<ul class="nav-menu-right">
<li>
<a href="#">
<i class="fa fa-search" aria-hidden="true"></i>
</a>
</li>
</ul>
</nav>
<hr></hr>
<!-- showcase-->
<header class="showcase">
<div class="text-showcase">
<h2>Big new today</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, sed, nihil ipsum quibusdam eum inventore veniam odit itaque fugit quod quidem placeat delectus quis doloremque ullam facere magni id quia?</p>
Click Aqui <i class="fa fa-angle-double-right" aria-hidden="true"></i>
</div>
</header>
</div>
</div>
<!--News Cards-->
<div class="midcontainer">
<hr class="news-sep"></hr>
<div class="news-container">
<div class="news-cards">
<div class="news1">
<img src="/Pruebas/Sitio 2/src/img/news1.jpeg" alt="">
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, expedita! Non nesciunt ab ut, voluptatem inventore distinctio, voluptas, odio officia doloribus libero deserunt. Quisquam accusamus, fugit velit dicta aliquid eum?</p>
ver mas <i class="fa fa-angle-double-right" aria-hidden="true"></i>
</div>
<div class="news2">
<img src="/Pruebas/Sitio 2/src/img/news2.jpeg" alt="">
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, expedita! Non nesciunt ab ut, voluptatem inventore distinctio, voluptas, odio officia doloribus libero deserunt. Quisquam accusamus, fugit velit dicta aliquid eum?</p>
ver mas <i class="fa fa-angle-double-right" aria-hidden="true"></i>
</div>
<div class="news3">
<img src="/Pruebas/Sitio 2/src/img/news3.jpeg" alt="">
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, expedita! Non nesciunt ab ut, voluptatem inventore distinctio, voluptas, odio officia doloribus libero deserunt. Quisquam accusamus, fugit velit dicta aliquid eum?</p>
ver mas <i class="fa fa-angle-double-right" aria-hidden="true"></i>
</div>
<div class="news4">
<img src="/Pruebas/Sitio 2/src/img/news4.jpeg" alt="">
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, expedita! Non nesciunt ab ut, voluptatem inventore distinctio, voluptas, odio officia doloribus libero deserunt. Quisquam accusamus, fugit velit dicta aliquid eum?</p>
ver mas <i class="fa fa-angle-double-right" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</body>
</html>
so I'm working on a new parallax webpage for a school project. Now when I hover over my dropdown nav menu, the menu get's really dark and unreadable. And also I can't hover over my dropdown menu anymore because it disappears. I changed the z-index to a higher value but that doens't seem to work. Does anyone know how I could fix this?
[
body, html {
background-size: cover;
font-style: normal;
font-family: "Lato";
font-size-adjust: initial;
font-weight: 400;
line-height: 1,8em;
color: #666;
height: 100%;
margin:0;
}
nav {
width: 100%;
height: 50px;
background:rgba(0,0,0, .8);
min-width: 1200px;
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
nav ul li {
float: left;
width: 210px;
height: 50px;
opacity: 0.8;
line-height: 50px;
text-align: center;
font-size: 20px;
}
nav ul li a {
text-decoration: none;
color: white;
display: block;
z-index: 1;
}
nav ul li a:hover {
background-color: skyblue;
}
nav ul li ul li {
display: none;
}
nav ul li:hover ul li {
display: block;
background: black;
z-index: 99;
position: relative;
}
.pimg1, .pimg2, .pimg3{
position:relative;
opacity: 0.95;
background-position: center;
background-size: cover;
background-repeat:no-repeat;
background-attachment:fixed;
}
.pimg1{
background-image:url(WallFon.com_11296.jpg);
min-height: 400px;
}
.pimg2{
background-image:url(isp.jpg);
min-height: 400px;
}
.pimg3{
background-image:url(30714.jpg);
min-height: 400px;
}
.section-dark{
text-align:center;
padding:35px 80px;
}
.section-light{
text-align:center;
padding:35px 80px;
}
.section-light{
background-color:#282e34;
color:#ddd;
}
.section-dark{
background-color:#282e34;
color:#ddd;
}
.ptext{
position:absolute;
top:50%;
width:100%;
text-align: center;
color: lightgray;
font-size:27px;
letter-spacing:6px;
text-transform:uppercase;
}
.ptext .border{
background-color:#111;
color:white;
padding:20px;
}
.ptext .border .trans{
background-color: transparent;
}
<!DOCTYPE HTML>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax webpagina</title>
</head>
<body>
<nav>
<ul>
<li><a>Home</a></li>
<li><a>About us</a></li>
<li><a>Computers</a>
<ul>
<li><a>History of computers</a></li>
<li><a>Types of computers</a></li>
</ul>
</li>
</li>
<li><a>Building</a>
<ul>
<li><a>Recommendation build</a></li>
<li><a>How to build</a></li>
</ul>
</li>
<li><a>Contact</a></li>
</ul>
</nav>
<div class="pimg1">
<div class="ptext">
<span class="border">
Parallax webpage
</span>
</div>
</div>
<section class="section-light">
<h2>Section one</h2>
<p1>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?
</p1>
</section>
<div class="pimg2">
<div class="ptext">
<span class="border trans">
Two threee
</span>
</div>
</div>
<section class="section-dark">
<h2>Section Two</h2>
<p1>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?
</p1>
</section>
<div class="pimg3">
<div class="ptext">
<span class="border trans">
Three Section Three
</span>
</div>
</div>
<section class="section-dark">
<h2>Section Three</h2>
<p1>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?
</p1>
</section>
<div class="pimg1">
<div class="ptext">
<span class="border">
webpageee
</span>
</div>
</div>
</body>
</html>
][1]
Here's picture with the images as background[1]: https://i.stack.imgur.com/tgt0j.png
I played a bit with your css. Basically
I lowered the z-index of your .pimg1 to send it behind the navigation dropdown.
Added a dark background to your nav ul li.
Changed your nav ul li a:hover to nav ul li:hover and added cursor: pointer to it.
Changed the nav ul li:hover ul li to nav ul li:hover > ul, nav ul li ul:hover.
I added this summary so it's easier for you to track the changes. Not sure about the colors you wanted but now you can change those appropriately.
body,
html {
background-size: cover;
font-style: normal;
font-family: "Lato";
font-size-adjust: initial;
font-weight: 400;
line-height: 1, 8em;
color: #666;
height: 100%;
margin: 0;
}
nav {
width: 100%;
height: 50px;
background: rgba(0, 0, 0, 0.8);
min-width: 1200px;
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
nav ul li {
float: left;
width: 210px;
height: 50px;
opacity: 0.8;
line-height: 50px;
text-align: center;
font-size: 20px;
background-color: rgba(0, 0, 0, 0.8);
}
nav ul li a {
text-decoration: none;
color: white;
display: block;
z-index: 1;
}
nav ul li:hover {
background-color: skyblue;
cursor: pointer;
}
nav ul li ul {
display: none;
}
nav ul li:hover > ul,
nav ul li ul:hover {
display: block;
z-index: 99;
position: relative;
}
.pimg1,
.pimg2,
.pimg3 {
position: relative;
opacity: 0.95;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.pimg1 {
background-image: url(WallFon.com_11296.jpg);
min-height: 400px;
z-index: -1;
}
.pimg2 {
background-image: url(isp.jpg);
min-height: 400px;
}
.pimg3 {
background-image: url(30714jpg);
min-height: 400px;
}
.section-dark {
text-align: center;
padding: 35px 80px;
}
.section-light {
text-align: center;
padding: 35px 80px;
}
.section-light {
background-color: #282e34;
color: #ddd;
}
.section-dark {
background-color: #282e34;
color: #ddd;
}
.ptext {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
color: lightgray;
font-size: 27px;
letter-spacing: 6px;
text-transform: uppercase;
}
.ptext .border {
background-color: #111;
color: white;
padding: 20px;
}
.ptext .border .trans {
background-color: transparent;
}
<!DOCTYPE HTML>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax webpagina</title>
</head>
<body>
<nav>
<ul>
<li><a>Home</a></li>
<li><a>About us</a></li>
<li><a>Computers</a>
<ul>
<li><a>History of computers</a></li>
<li><a>Types of computers</a></li>
</ul>
</li>
</li>
<li><a>Building</a>
<ul>
<li><a>Recommendation build</a></li>
<li><a>How to build</a></li>
</ul>
</li>
<li><a>Contact</a></li>
</ul>
</nav>
<div class="pimg1">
<div class="ptext">
<span class="border">
Parallax webpage
</span>
</div>
</div>
<section class="section-light">
<h2>Section one</h2>
<p1>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?
</p1>
</section>
<div class="pimg2">
<div class="ptext">
<span class="border trans">
Two threee
</span>
</div>
</div>
<section class="section-dark">
<h2>Section Two</h2>
<p1>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?
</p1>
</section>
<div class="pimg3">
<div class="ptext">
<span class="border trans">
Three Section Three
</span>
</div>
</div>
<section class="section-dark">
<h2>Section Three</h2>
<p1>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?
</p1>
</section>
<div class="pimg1">
<div class="ptext">
<span class="border">
webpageee
</span>
</div>
</div>
</body>
</html>
When I hover the content, I only want the image to be displayed and the content/text hidden. My code shows here that when I hover the content, the image is visible but the content is also displayed. I tried searching for solutions for this problem but
unfortunately, I didn't see any similar problems like this one.
.section-four {
display: flex;
justify-content: center;
height: 100vh;
}
.menu-one {
position: relative;
margin-top: 2em;
width: 25%;
height: 50%;
}
.menu-content {
position: absolute;
width: 100%;
}
.menu-one:hover {
background: url(https://images.unsplash.com/photo-1468769458611-1c88091fcd94?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=450fec2cc9917ca22622cdcadc8541ab&auto=format&fit=crop&w=1041&q=80);
max-height: 100%;
background-repeat: no-repeat;
}
.menu-two {
position: relative;
margin-top: 2em;
width: 25%;
height: 50%;
left: 5em;
}
.menu-two:hover {
background: url(https://images.unsplash.com/photo-1468769458611-1c88091fcd94?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=450fec2cc9917ca22622cdcadc8541ab&auto=format&fit=crop&w=1041&q=80);
background-repeat: no-repeat;
max-height: 100%;
}
<section class="section-four">
<div class="menu-one">
<div class="menu-content">
<h2>Menu Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere incidunt blanditiis nisi ipsum, nesciunt, nemo autem voluptatibus accusamus obcaecati debitis molestiae. Est labore repellendus delectus error a modi quod dolor.</p>
</div>
</div>
<div class="menu-two">
<div class="menu-content">
<h2>Menu Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere incidunt blanditiis nisi ipsum, nesciunt, nemo autem voluptatibus accusamus obcaecati debitis molestiae. Est labore repellendus delectus error a modi quod dolor.</p>
</div>
</div>
</section>
You can hide the content with:
.menu-one:hover > div.menu-content,
.menu-two:hover > div.menu-content {
display: none;
}
Example:
.section-four {
display: flex;
justify-content: center;
height: 100vh;
}
.menu-one {
position: relative;
margin-top: 2em;
width: 25%;
height: 50%;
}
.menu-content {
position: absolute;
width: 100%;
}
.menu-one:hover {
background: url(https://images.unsplash.com/photo-1468769458611-1c88091fcd94?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=450fec2cc9917ca22622cdcadc8541ab&auto=format&fit=crop&w=1041&q=80);
max-height: 100%;
background-repeat: no-repeat;
}
.menu-two {
position: relative;
margin-top: 2em;
width: 25%;
height: 50%;
left: 5em;
}
.menu-two:hover {
background: url(https://images.unsplash.com/photo-1468769458611-1c88091fcd94?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=450fec2cc9917ca22622cdcadc8541ab&auto=format&fit=crop&w=1041&q=80);
background-repeat: no-repeat;
max-height: 100%;
}
.menu-one:hover>div.menu-content,
.menu-two:hover>div.menu-content {
display: none;
}
<section class="section-four">
<div class="menu-one">
<div class="menu-content">
<h2>Menu Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere incidunt blanditiis nisi ipsum, nesciunt, nemo autem voluptatibus accusamus obcaecati debitis molestiae. Est labore repellendus delectus error a modi quod dolor.</p>
</div>
</div>
<div class="menu-two">
<div class="menu-content">
<h2>Menu Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere incidunt blanditiis nisi ipsum, nesciunt, nemo autem voluptatibus accusamus obcaecati debitis molestiae. Est labore repellendus delectus error a modi quod dolor.</p>
</div>
</div>
</section>
add a child selector to the :hover stated and hide it as you please
.section-four {
display: flex;
justify-content: center;
height: 100vh;
}
.menu-one {
position: relative;
margin-top: 2em;
width: 25%;
height: 50%;
}
.menu-content {
position: absolute;
width: 100%;
}
.menu-one:hover {
background: url(https://images.unsplash.com/photo-1468769458611-1c88091fcd94?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=450fec2cc9917ca22622cdcadc8541ab&auto=format&fit=crop&w=1041&q=80);
max-height: 100%;
background-repeat: no-repeat;
}
.menu-one:hover > .menu-content{
opacity:0; transition:opacity 500ms ease;
}
.menu-two {
position: relative;
margin-top: 2em;
width: 25%;
height: 50%;
left: 5em;
}
.menu-two:hover {
background: url(https://images.unsplash.com/photo-1468769458611-1c88091fcd94?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=450fec2cc9917ca22622cdcadc8541ab&auto=format&fit=crop&w=1041&q=80);
background-repeat: no-repeat;
max-height: 100%;
}
.menu-two:hover > .menu-content{
opacity:0; transition:opacity 500ms ease;
}
<section class="section-four">
<div class="menu-one">
<div class="menu-content">
<h2>Menu Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere incidunt blanditiis nisi ipsum, nesciunt, nemo autem voluptatibus accusamus obcaecati debitis molestiae. Est labore repellendus delectus error a modi quod dolor.</p>
</div>
</div>
<div class="menu-two">
<div class="menu-content">
<h2>Menu Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere incidunt blanditiis nisi ipsum, nesciunt, nemo autem voluptatibus accusamus obcaecati debitis molestiae. Est labore repellendus delectus error a modi quod dolor.</p>
</div>
</div>
</section>
Can anyone tell me a solution to make the page not jump back to the top when this CSS driven popup box closes?
At the moment the popup opens in the correct place but when you close it, the page jumps back to the top.
body {
font-family: Arial, sans-serif;
background-color:#721213;
background-size: cover;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: orange;
margin: 100px 0;
}
.box {
width: 20%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid orange;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: orange;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 40%;
position: relative;
transition: all 5s ease-in-out;
min-height:500px;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: orange;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
.iframe {
width:95%;
display:block;
margin:0px auto 0px auto;
height:500px;
}
<div style="width:50%; margin:20px auto; background-color:#000; height:1000px;"></div>
<div style="width:50%; margin:20px auto; height:500; padding:200px 50px 20px 50px;">
Let me Pop up
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
<iframe class="iframe" src="http://www.impressdesign.com.au/clients/IMP/test.pdf"></iframe>
</div>
</div>
</div>
</div>
Weave: http://kodeweave.sourceforge.net/editor/#3cfa8a8181c0ffdc30103eb2bc19d9b3
Weave: (properly use a hash on an href)
http://kodeweave.sourceforge.net/editor/#3a84a44278b04eea7b5d0f067ba22427
Stop using href="#" and start using href="javascript:void(0)" instead.
The reason it jumps to the top is because when you use a hash in a href attribute it directs to an ID if none is specified it goes to the top by default. Unless you use e.preventDefault() using a click event in JS.
Because you're using :target This can easily be fixed by targeting a new ID.
So change this...
Let me Pop up
<a class="close">×</a>
to this...
Let me Pop up
<a class="close" href="#showpopup">×</a>
and it's fixed!
NOTE: You can do the same effect using a input[type=checkbox] instead of :target: http://kodeweave.sourceforge.net/editor/#8d7733f82faf240e0edcb6739c5d1a1a
A few key notes:
margin:0px auto 0px auto;
Values of 0 shouldn't have units specified.
Also it's bad practice to add CSS to your HTML element
<div style="width:50%; margin:20px auto; background-color:#000; height:1000px;"></div>
<!--
Instead put your CSS in your style sheet as a class;
that way it's easier to manage, maintain and get help if needed.
-->
<div class="box"></div>
Here is an example of one way on how to properly use a hash tag on a href attribute.
body {
padding: 1em;
width: 50%;
margin: 0 auto;
text-align: center;
}
.left {
text-align: left;
}
<ul class="left">
<li>
Lorem.
</li>
<li>
Ispum!
</li>
<li>
Dolor!
</li>
<li>
Sit!
</li>
<li>
Amet!
</li>
</ul>
<p id="lorem" class="left">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste distinctio omnis a nihil, quisquam nisi similique facere, reprehenderit sint nostrum. Ipsa quibusdam, adipisci laudantium nam voluptatum quasi animi placeat eveniet.
</p>
<p id="ipsum" class="left">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel tempora quasi, maiores debitis cupiditate laboriosam alias placeat temporibus veritatis. Quisquam, debitis dolorem saepe enim maiores, ex numquam corporis atque magnam.
</p>
<p id="dolor" class="left">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione architecto quia officiis, amet. Eaque, et quia ducimus possimus rem suscipit, maxime, porro mollitia, corporis sequi magnam debitis. Expedita iure, maiores.
</p>
<p id="sit" class="left">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ipsum vitae quasi, id reiciendis iure qui veritatis voluptatibus omnis libero ea, labore voluptate maxime, ducimus tenetur, deleniti. Rem, consequatur, accusantium.
</p>
<p id="amet" class="left">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum maiores saepe sunt commodi soluta minus ad. Facilis magnam, distinctio voluptatibus ratione iste, laboriosam hic perspiciatis molestiae repellat accusamus tempora cumque!
</p>
Go to top
it happens because your button for closing is a element and href="#" change it to div element instead of a
EDIT :
i dont know why i got arrow down/point down but
i will explain it easier for you
Your CODE :
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
</div>
The what i suggest :
<div class="popup" id="popup">
<h2>Here i am</h2>
<div onClick="document.getElementById('popup').style.display='none';">X</div>
</div>
we added id="popup" to (div.popup) element, then we replaced " element" close button with