everyone
Would like to ask at present I am making a version when the web page to slide up the red and green block to be fixed, only the yellow block can slide!
The current treatment on the green side is using
position:sticky;
right:0px;
top:100px;
The grammar keeps him fixed there, but there's a problem because if you don't give height it looks like it's position:sticky; I want his height to be customizable, so I give him a height of 200px; As a result, when the content is too much or in RWD mode, it goes out of the green zone.
Is there a better way to fix the red and green blocks?
Here's what I'm trying to do so far.
https://codepen.io/hong-wei/pen/wvgbbye?editors=1100
Add align-items: flex-start; to your .container class and remove any height value from the aside.
.wrap{
background-color: #ccc;
line-height: 1.5;
}
.header{
position: fixed;
width: 100%;
background-color: #f75454;
box-shadow:0px 1px 30px #212529;
z-index: 1;
}
.header .list{
display: flex;
padding:20px;
justify-content:space-between;
}
.container{
display: flex;
padding:30px;
padding-top: 100px;
background-color: #5c5c5c;
align-items: flex-start;
}
.main{
flex:2;
padding:20px;
height: 1600px;
margin:0px 20px;
background-color: #f9cf5a;
}
.aside{
position:sticky;
right:0px;
top:100px;
padding:20px;
flex:1;
width: 100%;
background-color: #1ba784;
color:#eef7f2;
}
<div class="wrap">
<div class="header">
<ul class="list">
<li>測試</li>
<li>測試</li>
</ul>
</div>
<div class="container">
<div class="main">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum expedita pariatur facere repellat nobis sed modi, porro, at numquam accusantium aut consequuntur delectus ducimus atque officia dolores! Dolore quas delectus fuga accusantium quia atque esse, non, aut quae optio officia odit natus accusamus, libero iure nam? Accusantium veritatis ad repellat.</p>
</div>
<div class="aside">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda officiis sunt laboriosam impedit fuga tenetur pariatur distinctio ipsum suscipit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda officiis sunt laboriosam impedit fuga tenetur pariatur distinctio ipsum suscipit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda officiis sunt laboriosam impedit fuga tenetur pariatur distinctio ipsum suscipit.</p>
</div>
</div>
</div>
Related
So I have a div that contains a fixed height and inside it there is another one with overflow: auto that lets the div be scrollable. The parent div is semi-transparent and in the background of everything there is a video being played.
HTML:
<div class="parent">
<div class="fade-top"/>
<div class="fade-bottom"/>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit!
Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam.
</div>
</div>
CSS:
.parent{
height: 2rem;
position: relative
background: hsla(180, 2%, 8%, 0.76);
}
.fade-top {
poistion: absolute;
top: 0;
background: linear-gradient(0deg, hsla(180, 2%, 8%, 0.76) 20%, transparent 100%);
height: 50px;
transition: opacity 0.3s;
}
.fade-bottom {
position: absolute;
bottom: 0;
background: linear-gradient(180deg, $content-bg-elementum 20%, transparent 100%);
height: 50px;
transition: opacity 0.3s;
}
.text {
overflow: auto;
}
Question:
How do I make the top and bottom divs fade gradually to mix with the parent semi-transparent color?
Current state, the red board has to be mixed with the parent background and not cut by the height of the parent:
You can use After and before for fade top and bottom instead of using extra divs.
The code will be like.
HTML
<div class="parent">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit!
Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit!
Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit!
Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam.
</div>
</div>
CSS
.parent{
position: relative;
width: 600px;
background: hsla(180, 2%, 8%, 0.76);
color: white;
}
.parent:before{
content: "";
width:100%;
height:40px;
background: linear-gradient(black, transparent);
position:absolute;
top: 0;
}
.parent::after{
content: "";
width:100%;
height:40px;
background: linear-gradient(transparent, black);
position:absolute;
bottom: 0;
}
.text {
overflow-y: auto;
height: 200px;
}
https://codepen.io/suffiyan1/pen/vYeyjZo
So I finally found a way around this using the CSS property mask. Like this:
HTML:
<div class="parent fade-top-bottom">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit!
Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam.
</div>
</div>
CSS:
.parent{
height: 2rem;
position: relative
background: hsla(180, 2%, 8%, 0.76);
}
.fade-top-bottom {
mask:
linear-gradient(to top, transparent 10%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 10%, black 80%, transparent 100%);
}
.text {
overflow: auto;
}
I am new to coding and I am trying to achieve the following using JQuery:
I have two Divs Where clicking on the first shows some content and clicking the second would hide the content of the first one and show its content instead (Toggling). What I want to do is that I want to keep the same functionality but I want the second Div to slide to the right when I click on the first Div and make a drawer shape and vice versa. I have attached images to it so it may explain more about my idea.
both of contents are hidden by default.
I can't seem to know how to join these two functionalities together
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test</title>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div id="box-container">
<div id="div1">
<h1>Title one</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore
quidem ex tenetur ipsum dolore repudiandae molestiae mollitia! Dolore
numquam.
</p>
</div>
<div id="div2">
<h1>Title two</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore
quidem ex tenetur ipsum dolore repudiandae molestiae mollitia! Dolore
numquam.
</p>
</div>
</div>
<div id="contentDiv1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla voluptatem
veritatis assumenda. Obcaecati veniam quo impedit tempora pariatur maiores
ipsa voluptates commodi esse eveniet! Nihil corrupti illum at accusantium
sit? Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut veritatis
et molestias? Reprehenderit distinctio sint provident ratione dolorem
veritatis sapiente, fuga amet obcaecati. Laboriosam rerum consectetur nemo
magnam saepe mollitia. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Excepturi sit perferendis earum debitis corrupti dolore commodi
minima consectetur veniam itaque inventore et pariatur sapiente, maxime
quis, in nulla, eos molestias! Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Quasi, incidunt repudiandae perferendis ea praesentium
blanditiis, voluptate accusantium, repellat molestiae quisquam eveniet
earum officia sed assumenda maxime officiis sequi laboriosam! Tempore.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias modi hic
officia iste optio in delectus veniam obcaecati reprehenderit, voluptate
ipsum! Incidunt ducimus animi, id quae blanditiis provident dignissimos
harum?
</div>
<div id="contentDiv2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla voluptatem
veritatis assumenda. Obcaecati veniam quo impedit tempora pariatur maiores
ipsa voluptates commodi esse eveniet! Nihil corrupti illum at accusantium
sit? Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut veritatis
et molestias? Reprehenderit distinctio sint provident ratione dolorem
veritatis sapiente, fuga amet obcaecati. Laboriosam rerum consectetur nemo
magnam saepe mollitia. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Excepturi sit perferendis earum debitis corrupti dolore commodi
minima consectetur veniam itaque inventore et pariatur sapiente, maxime
quis, in nulla, eos molestias! Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Quasi, incidunt repudiandae perferendis ea praesentium
blanditiis, voluptate accusantium, repellat molestiae quisquam eveniet
earum officia sed assumenda maxime officiis sequi laboriosam! Tempore.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias modi hic
officia iste optio in delectus veniam obcaecati reprehenderit, voluptate
ipsum! Incidunt ducimus animi, id quae blanditiis provident dignissimos
harum?
</div>
</body>
</html>
CSS
body {
display: inline-block;
margin: 100px 100px 25px 100px;
text-align: center;
}
#box-container {
height: 300px;
display: flex;
}
#div1 {
background: linear-gradient(90deg, #f57350, #fa8282);
width: 50%;
height: 50%;
cursor: pointer;
}
#div2 {
background: linear-gradient(90deg, #a42e5a, #f57350);
width: 50%;
height: 50%;
cursor: pointer;
}
#contentDiv1,
#contetnDiv2 {
margin: 25px;
}
JQuery
jQuery(document).ready(function($){
$('#contentDiv1').hide();
$('#contentDiv2').hide();
$('#div1').on('click', function(){
$('#contentDiv1').slideToggle();
$('#contentDiv2').hide();
});
$('#div2').on('click', function(){
$('#contentDiv2').slideToggle();
$('#contentDiv1').hide();
});
});
attached image
It has more than one solution, and for me, this is my favorite method, I hope it helps you:
$('.tabs .tab').on('click', function () {
if ($(this).hasClass('active')) {
$(this).removeClass('active')
.closest('.tabs').removeClass('active1 active2');
$('.content').hide();
} else {
let i = $(this).index() + 1;
$(this)
.addClass('active')
.siblings('.tab').removeClass('active')
.closest('.tabs').removeClass('active1 active2')
.addClass('active' + i);
$('.content').hide();
$('.content' + i).fadeIn();
}
});
.tabs,
.tabs .tab,
.tabs .content {
border: 1px solid #000;
border-collapse: collapse;
box-sizing: border-box;
}
.tabs {
display: flex;
flex-wrap: wrap;
text-align: center;
position: relative;
}
.tabs.active1 {
padding-left: 0;
padding-right: 65px;
}
.tabs.active2 {
padding-left: 65px;
padding-right: 0;
}
.tabs .tab {
padding: 15px;
cursor: pointer;
min-width: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.tabs.active1 .tab,
.tabs.active2 .tab {
min-width: 100%;
width: 100%;
}
.tabs .content {
padding: 15px;
min-width: 100%;
display: none;
}
.tabs.active1 .tab1:not(.active),
.tabs.active2 .tab1:not(.active){
position: absolute;
left: 0;
top: 0;
bottom: 0;
min-width: 65px;
width: 65px;
}
.tabs.active1 .tab2:not(.active),
.tabs.active2 .tab2:not(.active) {
position: absolute;
right: 0;
top: 0;
bottom: 0;
min-width: 65px;
width: 65px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabs">
<div class="tab tab1">div1</div>
<div class="tab tab2">div2</div>
<div class="content content1">div content1</div>
<div class="content content2">div content2</div>
</div>
Is it possible to apply scroll-snap to grand-children nested in children with overflow applied ? I can't seem to make it work.
What I aim to do is have a list of div with each a fixed height on which the viewport should snap vertically
html {
margin: 0;
scroll-snap-type: y mandatory;
overflow-x: hidden;
}
.horizontal-scroll {
max-width: 100vw;
}
.child {
width: 150vw;
scroll-snap-align: center;
height: 80vh;
background-color: rgb(143, 204, 241);
padding: 20px 15px;
}
.child:nth-child(even) {
background-color: rgb(133, 243, 155);
}
<!DOCTYPE html>
<html>
<head
</head>
<body>
<div class="horizontal-scroll">
<div class="child">
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel laboriosam cupiditate vero, harum, ab facere ipsa mollitia exercitationem impedit alias nulla magnam aut tempore repudiandae
dolores. Sit maiores nemo ea.
</p>
</div> <div class="child">
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel laboriosam cupiditate vero, harum, ab facere ipsa mollitia exercitationem impedit alias nulla magnam aut tempore repudiandae
dolores. Sit maiores nemo ea.
</p>
</div>
<div class="child">
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel laboriosam cupiditate vero, harum, ab facere ipsa mollitia exercitationem impedit alias nulla magnam aut tempore repudiandae
dolores. Sit maiores nemo ea.
</p>
</div>
</div>
</body>
</html>
Homewer, I would also like the content to be horizontally-scrollable - as their content stretch beyond the viewport width.
They must also scroll together, so using overflow-x on each of them is not possible here.
To do so, I've wrapped the child in a scrollable-wrapper that is horizontally scrollable ( overflow-x : scroll ) and have a fixed width.
And this breaks the vertical scroll snap.
Could someone tell me if there's something I missed or if there's an alternative ?
Note : since each child have a fixed height, I would not mind using scroll-snap-points-y but it has been totally dropped on almost every browser. Is there a way to reproduce this behaviour ?
Edit : I might try this for the snap-point. It's jQuery based.
Vertical scrolling snap jQuery
Snippet
html {
margin: 0;
scroll-snap-type: y mandatory;
overflow-x: hidden;
}
.horizontal-scroll {
max-width: 100vw;
overflow-x: scroll;
}
.child {
width: 150vw;
scroll-snap-align: center;
height: 80vh;
background-color: rgb(143, 204, 241);
padding: 20px 15px;
}
.child:nth-child(even) {
background-color: rgb(133, 243, 155);
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="horizontal-scroll">
<div class="child">
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel laboriosam cupiditate vero, harum, ab facere ipsa mollitia exercitationem impedit alias nulla magnam aut tempore repudiandae
dolores. Sit maiores nemo ea.
</p>
</div> <div class="child">
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel laboriosam cupiditate vero, harum, ab facere ipsa mollitia exercitationem impedit alias nulla magnam aut tempore repudiandae
dolores. Sit maiores nemo ea.
</p>
</div>
<div class="child">
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel laboriosam cupiditate vero, harum, ab facere ipsa mollitia exercitationem impedit alias nulla magnam aut tempore repudiandae
dolores. Sit maiores nemo ea.
</p>
</div>
</div>
</body>
</html>
I have a side navigation menu on my site. When pressed, it calls a JavaScript function that changes the alpha channel of the body tag. For some reason only part of the screen's alpha channel is changing (section, img, bootstrap containers are not). The section tag has a class that gives it a background color, I'm thinking this might be the issue. Which would be the smart way to get this working?
This is the code I'm using for the alpha management:
/* Set the width of the side navigation to 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "350px";
document.body.style.background = "rgba(0,0,0,0.4)";
}
/* Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.body.style.background = "rgba(0,0,0,0)";
}
The html goes like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cripto Frog</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Rammetto+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<script src="sidebar.js"></script>
</head>
<main>
<header>
<span class="menu_burger" onclick="openNav()"><i class="fas fa-align-justify"></i></i></span>
<img src="img/frog.jpg" alt="">
</header>
<body>
<!-- Side Menu -->
<div id="mySidenav" class="sidenav">
×
TOP_TEN_COINS
ALT_COINS
WHITE_PAPERS
YOUTUBERS
EXCHANGES
NEWS_SITES
CONTACTO
<section class="nav_divididor"></section>
<section class="nav_footer">hlkjhlkjhlk</section>
</div>
<section class="primera_section"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam doloremque excepturi molestias aut fuga ullam aliquid minus dolores voluptatem non, beatae placeat soluta libero eos et delectus nemo minima iusto.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi error aspernatur officiis, sint fugiat unde quos labore laborum cupiditate voluptates, totam sunt ut quod praesentium omnis et consequuntur sapiente incidunt?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit iure eveniet a voluptas cumque! Eos qui, iusto neque, fugit praesentium totam soluta eius laudantium cupiditate dolorem dignissimos ut minus veritatis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla earum soluta nesciunt dicta officia reprehenderit autem, molestias explicabo et accusamus, officiis nostrum cumque perspiciatis suscipit veniam molestiae fuga tenetur modi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate itaque atque molestiae, id fugit, quidem hic rem cum praesentium dolor perspiciatis nostrum sapiente enim corrupti doloremque aliquam voluptas cumque omnis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam iusto dolor nostrum voluptate quos consectetur facere, quia, earum non, tenetur, officia laboriosam cumque suscipit itaque nobis obcaecati. Facilis veritatis, repudiandae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam doloremque excepturi molestias aut fuga ullam aliquid minus dolores voluptatem non, beatae placeat soluta libero eos et delectus nemo minima iusto.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi error aspernatur officiis, sint fugiat unde quos labore laborum cupiditate voluptates, totam sunt ut quod praesentium omnis et consequuntur sapiente incidunt?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit iure eveniet a voluptas cumque! Eos qui, iusto neque, fugit praesentium totam soluta eius laudantium cupiditate dolorem dignissimos ut minus veritatis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla earum soluta nesciunt dicta officia reprehenderit autem, molestias explicabo et accusamus, officiis nostrum cumque perspiciatis suscipit veniam molestiae fuga tenetur modi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate itaque atque molestiae, id fugit, quidem hic rem cum praesentium dolor perspiciatis nostrum sapiente enim corrupti doloremque aliquam voluptas cumque omnis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam iusto dolor nostrum voluptate quos consectetur facere, quia, earum non, tenetur, officia laboriosam cumque suscipit itaque nobis obcaecati. Facilis veritatis, repudiandae.p</p>
</section>
<!-- Use any element to open the sidenav -->
</body>
<span onclick="openNav()">open</span>
</main>
<!-- Use any element to open the sidenav -->
<span onclick="openNav()">open</span>
</html>
css file
/* Secciones */
html{
margin-top: 0px;
/*overflow: hidden; */
}
body{
/* overflow-x: hidden;*/
}
p{
font-family: 'Lora';
font-style: normal;
font-weight: 700;
}
fieldset {
font-family: 'Lora';
font-style: normal;
font-weight: 100;
}
.nav_footer{
height: 90%;
background-color: black; /* Black*/
color: white;
display: flex;
align-items: flex-end;
/*overflow-x: hidden; */
}
.nav_divididor{
width: 100%;
background-color: #388E3C;
height: 12px;
}
.primera_section{
width: 100%;
height: 700px;
background-color: #FFFFFF; /* Black*/
}
.segunda_section{
width: 100%;
height: 700px;
background-color: #C8E6C9; /* Black*/
}
.tercera_section{
width: 100%;
height: 700px;
background-color: #BDBDBD; /* Black*/
}
.divisoria {
width: 100%;
background-color: black;
height: 2px;
}
.menu_burger{
position: absolute;
top:2;
}
/* The side navigation menu */
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: white; /* Dark Green*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.8s; /* 0.5 second transition effect to slide in the sidenav */
}
.sidenav::-webkit-scrollbar {
display: none;
}
/* The navigation menu links */
.sidenav a {
font-family: 'Lora';
font-style: normal;
font-weight: 700;
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: black;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: grey;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
I am struggling with the positioning of content returned from an AJAX call.
Here's an example of how my HTML is laid out:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Photography</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<section id="content">
<div id="container">
<div id="about">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia odit culpa excepturi itaque hic laborum odio nam deserunt ipsum dolor rerum repudiandae, quidem voluptatem nisi numquam tempora vel consequuntur harum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam ut error consectetur eum delectus porro dolore repellendus quidem! Ad, dignissimos minus debitis nam sunt aliquid eius quam cum, omnis magni. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe vero ducimus reprehenderit quibusdam esse sed, porro pariatur illum natus tempore? Iste laborum odio deleniti molestias praesentium delectus repudiandae consequatur corporis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est fugit provident, labore expedita nostrum laborum nesciunt! Assumenda inventore repudiandae dignissimos animi autem, dolorem sint, incidunt officia quam porro, perspiciatis fuga.
</div>
</div> <!-- end of content -->
</section> <!-- end of container -->
</body>
contact.html, bio.html etc... are all like about.html
And, here's the relevant css:
#container {
height: 100vh;
width: 100vw;
background-color: white;
text-align: center;}
#contact {
top: 30%;
background-color: yellow;
padding: 50px 50px;}
#about {
transform: translateY(60%);
background-color: red;
padding: 50px 50px;}
#bio {
transform: translateY(60%);
background-color: blue;
padding: 50px 50px;}
#gallery {
transform: translateY(60%);
background-color: green;
padding: 50px 50px;}
The problem I have is when I try to position the content of the divs with id of "about", "contact", "container" etc... the divs won't get positioned. When I set the top property in contact to 30%, the div just won't move and is stuck to the top of the page.
I have managed to position the other divs using transform but that seems a hack. What is the proper way of doing this? Thank you for your time.
This has nothing to do with AJAX.
If you wish to position element(s) with top, bottom, left, or right, the element(s) must also have their position property set (values can be absolute, relative and fixed) so that they are taken out of the normal document flow.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/position for details.
Here's a simple example:
div {
position:absolute;
width:100px;
height:100px;
}
.one {
top:50px;
left:100px;
background-color:red;
}
.two {
top:150px;
left:50px;
background-color:green;
}
.three {
top:50px;
left:200px;
background-color:yellow;
}
.four {
top:150px;
left:150px;
background-color:blue;
}
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>