I would like to make continuous pull-out elements. I seem able to create one just fine, but am having difficulties creating any more than that. The effect I am after is that when you scroll down, item 2 gets revealed from underneath, and then when you keep scrolling, item 3 gets revealed from underneath item 2. I'd like this to keep going for as many items I add.
Here's the first snippet, with 3 items. It is not working properly:
html, body{
padding: 0;
margin: 0;
}
.text-center{
text-align: center;
}
#item-1{
position: relative;
height: 500px;
margin-bottom: 500px;
background-color: white;
border-bottom: 5px solid gray;
}
#item-2{
background-color: green;
border-bottom: 5px solid gray;
z-index: -1;
}
#item-3{
background: yellow;
z-index: -1;
}
.slide-item{
text-align: center;
height: 500px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="item-1" class="text-center">
First item!
<div id="item-2" class="slide-item text-center">
Second item!
<div id="item-3" class="slide-item text-center">
Third item!
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.0/jquery.min.js" type="text/javascript"></script>
</body>
</html>
Here is another snippet, with only two items, which appears to be working, except the text isn't showing up (it shows up fine on my test page, though).
html, body{
padding: 0;
margin: 0;
}
.text-center{
text-align: center;
}
#item-1{
position: relative;
height: 500px;
margin-bottom: 500px;
background-color: white;
border-bottom: 5px solid gray;
}
#item-2{
background-color: green;
border-bottom: 5px solid gray;
z-index: -1;
}
#item-3{
background: yellow;
z-index: -1;
}
.slide-item{
text-align: center;
height: 500px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="item-1" class="text-center">
First item!
<div id="item-2" class="slide-item text-center">
Second item!
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.0/jquery.min.js" type="text/javascript"></script>
</body>
</html>
Related
I am very new at web development and am trying to figure out an issue I am having with my header. I want my header to be responsive and not cause an over-lap on the button elements next to it.
I have tried applying the position, float, and transform elements separately and all at once to the header sections and this does not seem to solve the issue or I just do not know how to properly use them.
Below is a sample of both my html and css.
HTML:
<header>
<img id="smallLogo" src="/Users/ultimateorganism/Desktop/Brown-Dev-Proj-Vol.1/FuturUImages/smallLogo.png" alt="smallLogo">
<h1 class="bizPage">FuturU</h1>
<div class="homeButtons">
Home
MindMovies
Contact
About
Testimonials
<hr style="background-color: white; height: 3px; opacity: initial;">
</div>
<hr style="background-color: white; height: 3px; opacity: initial;">
</header>
CSS Classes:
#smallLogo{
width: 110px;
height: 110px;
float: left;
}
.bizPage{
font-size: 80px;
color: white;
position: relative;
top: 30%;
left: 30%;
}
header{
background-color: black;
font-family: Courier;
justify-content: center;
}
.homeButtons{
position: absolute;
top: 32px;
right: 26px;
font-size: 8px;
}
.lineHeader, .lineFooter{
margin-left: auto;
margin-right: auto;
color: white;
height: 3px;
width: auto;
{
Any solution for this would be greatly appreciated. Thanks
Basically, if you want to make a fully responsive page/navbar, you may need to use the "Burger Menu". Looks like you have used Bootstrap. You can see this link
Still, I'm trying to provide a measurable solution. Check the code and style as you want. I just have used a flex div at the html portion.
header{
width: 100%;
}
#smallLogo{
width: 110px;
height: 110px;
/* float: left; */
}
.bizPage{
font-size: 80px;
color: white;
/* position: relative; */
top: 30%;
/* left: 30%; */
}
header{
background-color: black;
font-family: Courier;
}
.homeButtons{
/* position: absolute; */
/* top: 32px; */
/* right: 26px; */
margin-top: 1%;
font-size: 8px;
}
.lineHeader, .lineFooter{
/* margin-left: auto;
margin-right: auto; */
color: white;
height: 3px;
width: auto;
{
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stack Overflow</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<header>
<div class="d-flex justify-content-between">
<img id="smallLogo" src="/Users/ultimateorganism/Desktop/Brown-Dev-Proj-Vol.1/FuturUImages/smallLogo.png" alt="smallLogo">
<h1 class="bizPage">FuturU</h1>
<div class="homeButtons">
Home
MindMovies
Contact
About
Testimonials
<hr style="background-color: white; height: 3px; opacity: initial;">
</div>
</div>
<hr style="background-color: white; height: 3px; opacity: initial;">
</header>
<!-- <script type="text/javascript" src="index.js"></script> -->
</body>
</html>
Let me know if it works for you.
I want to divide the page after the top bar but it won't change. I want to design a page with three sections but the page also contains menu bar or head bar. I have tried something like below but it doesn't show anything at the top bar.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial;
color: white;
}
.split {
color: white;
height: 80%;
width: 30%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #111;
}
.right {
right: 0;
background-color: red;
}
#top {
height: 20%;
width: 100%;
}
</style>
</head>
<body>
<div id="top">
<h2>Three Equal Columns</h2>
</div>
<div class="split left">
</div>
<div class="split right">
</div>
</body>
</html>
You shouldn't use a fixed position concept like this in general, but apart from that you need to set top: 20% for the .split sections to leave space at the top for the top bar, plus you shouldn't use color: white on a white background, because text will remain invisible that way (white text on white background)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial;
}
.split {
height: 80%;
width: 30%;
position: fixed;
z-index: 1;
top: 20%;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #111;
}
.right {
right: 0;
background-color: red;
}
#top{
height:20%;
width:100%;
}
</style>
</head>
<body>
<div id="top">
<h2>Three Equal Columns</h2>
</div>
<div class="split left">
</div>
<div class="split right">
</div>
</body>
</html>
I'm trying to create a 3 column webpage with sticky side bars + sticky header and footer, however I'm having issues as the sidebars goes above my header. What I want to accomplish is the sidebars floating under the header, and the only element moving when scrolling is the middle section.
div.sticky-header {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: yellow;
padding: 50px;
font-size: 20px;
}
.wrapper {
display: flex;
justify-content: space-between;
}
.main, .side-left, .side-right {
border: 3px solid black;
padding: 15px;
background-color: #fff;
}
.main {
width: 90%;
height: 150vh;
}
.side-left, .side-right {
width: 10%;
height: 25vh;
position: sticky;
position: -webkit-sticky;
top: 0;
margin: 0;
}
body {
background-color: #ccc;
font-family: sans-serif;
padding: 10px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<title></title>
</head>
<body>
<div class="sticky-header">I will stick to the screen when you reach my scroll position</div>
<div class="wrapper">
<div class="side-left">
left
</div>
<div class="main">
middle stuff
</div>
<div class="side-right">
right
</div>
</div>
</body>
</html>
Fiddle:
https://jsfiddle.net/jbnak12c/
Thanks in advance!
Probably you already found the answer but for those who might also be having a look at this question z-index: 10; in div.sticky-header would do the trick.
So I am having a bit of a issue that I just cannot figure out. I have a website that has a div before and after a google map Embed (iframe). The bottom portion of the map shows the shadow of the below div but whenever I negative z-index and position relative the shadow shows up but the functions no longer work on the map... Is there a way to have the shadow show up and still have function of the map?
So in short if I have the shadow show up it stops all map functions from being unusable (drag / zoom / etc.). The only issue is the top shadow as the bottom shows up with no issue. If I remove the z-index: -10 from the map the functions come back but the shadow is gone... Any tips?
Code example:
HTML
#menu-divider {
z-index: 1;
width: 100%;
height: 100px;
background-color: #000;
box-shadow: 0px 0px 12px #000;
}
#map {
position: relative;
z-index: -10;
width: 100%;
height: 300px;
border: none;
}
footer {
z-index: 1;
position: relative;
width: 100%;
background-color: #000;
height: 100px;
box-shadow: 0px 0px 12px #000;
}
<!doctype html>
<html lang="en-us">
<head>
<title>example</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="menu-divider">
</div>
<iframe id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11797.683090046503!2d-83.05766876093261!3d42.333551617017015!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x883b2d31a25efc0f%3A0x114c7a5b16dfbdd4!2sDowntown%2C+Detroit%2C+MI!5e0!3m2!1sen!2sus!4v1534087083348" allowfullscreen></iframe>
<footer></footer>
</body>
</html>
Ok I'm stupid and figured it out myself... Had to add position: relative and
z-index: 10 to #menu-divider and wrap the map in a holder.
EDIT: Add height to match map to holder to remove white space at bottom...
Working code:
#menu-divider {
position: relative;
z-index: 10;
width: 100%;
height: 100px;
background-color: #000;
box-shadow: 0px 0px 12px #000;
}
#map-holder {
position: relative;
height:300px;
}
#map {
width: 100%;
height: 300px;
border: none;
}
footer {
z-index: 1;
position: relative;
width: 100%;
background-color: #000;
height: 100px;
box-shadow: 0px 0px 12px #000;
}
<!doctype html>
<html lang="en-us">
<head>
<title>example</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="menu-divider">
</div>
<div id="map-holder"><iframe id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11797.683090046503!2d-83.05766876093261!3d42.333551617017015!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x883b2d31a25efc0f%3A0x114c7a5b16dfbdd4!2sDowntown%2C+Detroit%2C+MI!5e0!3m2!1sen!2sus!4v1534087083348" allowfullscreen></iframe></div>
<footer></footer>
</body>
</html>
Try this:
#layout {
display: flex;
min-height: 100vh;
flex-direction: column;
}
header,
footer {
background-color: #000;
box-shadow: 0px 0px 12px #000;
height: 100px;
z-index: 10;
}
main {
flex: 1;
}
#map {
border: none;
min-height: 300px;
height: calc(100vh - 200px);
position: relative;
width: 100%;
}
<div id="layout">
<header></header>
<main>
<iframe id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11797.683090046503!2d-83.05766876093261!3d42.333551617017015!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x883b2d31a25efc0f%3A0x114c7a5b16dfbdd4!2sDowntown%2C+Detroit%2C+MI!5e0!3m2!1sen!2sus!4v1534087083348" allowfullscreen></iframe>
</main>
<footer></footer>
</div>
Better DEMO here
When opening this up in a browser, the combined width of the two divs does not fully fulfill the width of the body. I have made the background color of the second (right) div black so you can see the white space between the second div and the right side of the page. I tried messing with the border, margin but maybe I did it wrong.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Example</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="home2.css">
</head>
<body>
<div id="wrapper">
<main>
<div id="div1">
<img src="font-header.png" alt="Image Logo Header">
</div>
<div id="div2">
</div>
</main>
</div>
</body>
</html>
CSS:
img {
border-bottom: 4px solid black;
position: relative;
left: 30px;
}
body {
margin: 0;
}
#div1 {
height: 756px;
width: 300px;
border: 2px solid black;
float: left;
}
#div2 {
height: 758px;
width: 1216px;
overflow: hidden;
background-color: black;
}
Position the divs absolutely and apply media queries so they will be responsive. Hope this helps.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Example</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="home2.css">
<style>
img {
border-bottom: 4px solid black;
position: relative;
left: 30px;
}
body {
margin: 0;
width: 100%;
}
#div1 {
height: 756px;
width: 25%; //change width to fit your need
border: 2px solid black;
float: left;
left:0;
position: absolute;
}
#div1 img{
left: 0;
}
#div2 {
height: 758px;
width: 75%; //change width to fit your need
overflow: hidden;
background-color: blue;
right:0;
position: absolute;
}
</style>
</head>
<body>
<div id="wrapper">
<main>
<div id="div1">
<img src="font-header.png" alt="Image Logo Header">
</div>
<div id="div2">
</div>
</main>
</div>
</body>
</html>
Since you are using fixed width, it will not adjust properly to your screen. And in different resolutions it will not adjust correctly to your screen size. Instead use % width.
#div1 {
height: 756px;
width: 35%;
float: left;
}
#div2 {
height: 758px;
width: 65%;
overflow: hidden;
background-color: black;
}
I've setup this fiddle with your example: https://jsfiddle.net/5yfnLcdt/