We Keep Coding

Fixed Headers and Section Anchors with bootstrap

I swear I have tried everything that I can think of to solve this issue. I have a fixed bootstrap navbar, using a javascript onscroll event listener to apply the fixed attribute...I tried using style in the markup, but it did not have the desired effect. So of course this is a repetitive issue, but I have tried all the recommendations and then some. At least all that I could find. The problem is that when I use any #about internal link, the content falls beneath the navbar. I have tried margins, absolute, relative, top -...px on .section2. None of it worked.
And please I am new to this, so any solutions, please make it specific to my code and not just add a position to the anchor. Give me the exact class/id and what to add, or remove, or both.
here is a link to the live page to see what happens when you click any link for #about section: portfolio #about
https://kingdomb.github.io/live_portfolio/#about
NOTE: The code below does not give display the error properly so use the link above.
UPDATE: 3/22 02:16
I managed to find this:
Come on guys!
This have a very simple solution, create your ancho like this:
<div style="margin: -50px 0px 50px 0px; position: absolute;">
<a id="myanchor"></a>
</div>
With -50px margin what i make is upper the anchor div, and with 50px margin, i push down the next content. You only have to make your test with your custom margins.
Works like a charm. I use this trick in all one page design websites.
BUT, now one click on the about link in the navbar to #myanchor gives me this:
And if I click the exact same navbar link I get a minor adjustment to this:
THANKS!!!
// When the user scrolls the page, execute myFunction
window.onscroll = function() {
myFunction();
myFunction2();
};
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll
position.Remove "sticky"
when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
}
// Get the logo
var logo = document.getElementById("logo");
// Get the offset position of the logo
var logoSpin = logo.offsetTop;
// Add the logo-spin class to the navbar when you reach its scroll
position.Remove "logo-spin"
when you leave the scroll position
function myFunction2() {
if (window.pageYOffset >= logoSpin) {
logo.classList.add("logo-spin");
} else {
logo.classList.remove("logo-spin");
}
}
// All links will have a target:__blank for external page linking
// Read more: https://html.com/attributes/a-target/#ixzz6GMsDfQEr
// jQuery(document.links)
// .filter(function() {
// return this.hostname != window.location.hostname;
// })
// .attr("target", "_blank");
//OR Read more: https://html.com/attributes/a-target/#ixzz6GN6pd1Qt
function externalLinks() {
for (var c = document.getElementsByTagName("a"), a = 0; a <
c.length; a++) {
var b = c[a];
b.getAttribute("href") &&
b.hostname !== location.hostname &&
(b.target = "_blank");
}
}
externalLinks();
html,
body {
background-color: #E3E3E3;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
/* HOME */
.section1 {
background: url("../images/laptop-table1920-gray.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: cover;
background-attachment: scroll;
width: 100%;
height: 100%;
}
.section1 .container {
background-color: rgb(0, 0, 0, 0.65);
min-height: -webkit-fill-available;
min-width: -webkit-fill-available;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.home-btn {
background-color: transparent;
font-weight: 500;
border-color: #8e0000;
border-radius: 3px;
color: #8e0000;
margin-top: 35px;
font-size: 1.12em;
transform: translate(-50%, -50%);
position: absolute;
text-shadow: .1px .8px 1px black;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}
/* hover styling required !important */
.home-btn:hover {
color: #8e0000 !important;
border-color: #8e0000;
font-size: 1.4em;
border-width: 3px;
font-weight: 600;
text-shadow: .1px 2px 1px black;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}
.intro {
color: white;
font-size: 2.74em;
text-shadow: .1px .8px 1px black;
}
.highlight {
color: #8e0000;
text-shadow: .1px .8px 1px black;
}
/* NAVIGATION */
.logo {
display: inline-flex;
flex-direction: row;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}
.navbar-brand {
margin: 0px;
padding: 0px 0px !important;
}
.logo-wrapper {
color: white;
font-size: 1.4em;
font-family: 'Raleway', sans-serif;
text-shadow: .1px 2px 1px black;
}
.logo-spin {
-webkit-animation: spin 1s;
animation: spin 3s;
animation-iteration-count: 1;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotateY(360deg);
}
100% {
-webkit-transform: rotateY(-360deg);
}
}
#keyframes spin {
from {
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-moz-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
.navbar {
background-color: #333;
height: 65px;
border-bottom: 6px solid #212529;
border-top: 6px solid #212529;
}
#navbar {
z-index: 9999;
}
.navbar-text {
vertical-align: middle;
margin-left: 200px;
height: inherit;
}
#media only screen and (max-width: 860px) {
.navbar-text {
display: inline-block;
align-items: center;
margin-left: 30px;
}
}
#navbar a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 0px 30px;
text-decoration: none;
font-size: 1.2em;
font-family: 'Raleway', sans-serif;
text-shadow: .1px 1px 1px black;
}
/* ABOUT */
#about {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
text-shadow: .1px .8px 1px black;
position: relative;
height: -65px;
margin-top: 200px;
}
/* .section2 {
position: absolute;
width: 100%;
} */
.section2 .row {
background: url("../images/improved-teamwork-and-
collaboration_1887x741.jpg") center center no-repeat;
height: 100%;
width: 100%;
margin-left: 0px;
margin-right: 0px;
border-radius: 0%;
}
.section2 .card {
background-color: RGBA(33, 37, 41, .80);
color: white;
min-height: -webkit-fill-available;
height: 100%;
}
.section2 .card-block {
font-weight: 520;
width: 50%;
margin: 0 auto;
font-size: 25px;
line-height: 50px;
padding: 60px;
}
.section2 a {
color: #9b0000;
-webkit-filter: drop-shadow(.1px .8px 2px rgba(0, 0, 0, .8));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}
.section2 .card-block {
z-index: 8000;
padding-right: 200px;
padding-left: 0px;
margin-left: 100px;
}
.section2 a:hover,
.section2 #skills:hover,
.section2 #projects:hover {
text-decoration: underline;
}
.section2 .btn {
border-color: #8e0000;
border-radius: 13px;
border-width: 3px;
font-weight: 500;
font-size: 0.8em;
transition: color 0.15s ease-in-out, background-color 0.15s ease- in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in- out;
}
.section2 .btn:hover {
background-color: #8e0000;
color: #212529;
text-decoration: none;
}
#about {
margin-bottom: 75px;
}
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<!-- HOME -->
<section id="home" class="section1">
<div class='container'>
<div class="row justify-content-center">
<div class="col-md-12 col-sm-12">
<p class='intro'>
Hello, my name is <span class="highlight animated fadeIn" style="animation-delay: 1s; animation-duration:
1.8s">King</span>.
<br>
<div class="intro animated fadeInLeft" style="animation-
delay: 3s; animation- duration: 2s">And I'm a full- stack web developer.</div>
<a href="#myanchor"><button type="button" class="home-btn
btn btn-primary-outline btn-xs animated fadeIn"
style="animation-delay: 5s; animation-duration:
2s">VIEW MY WORK</button></a>
</p>
</div>
</div>
</div>
</section>
<!-- NAVIGATION -->
<div id="navbar">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container">
<div class="logo-wrapper nav-item active">
<div class="logo" id="logo">
<a class="navbar-brand" href="#home"><img src="favicon.ico" alt="King's Brand Logo"></a>
</div>
<span class="brand" id="brand" style="animation-delay: 0s;
animation-duration: 3s">KING MAJOR</span>
</div>
<button class="navbar-toggler" type="button" data- toggle="collapse" data- target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#myanchor">ABOUT
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills">SKILLS
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">PROJECTS
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">CONTACT
<span class="sr-only">(current)</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- ABOUT -->
<div class="blank" style="margin: -65px 0px 200px 0px; position:
absolute;">
<a id="myanchor"></a>
</div>
<section id="about" class="section2">
<div class="row-fluid">
<div class="row">
<div class="card ">
<div class="card-block">
<div class="card-title">
<h1>Welcome, let's talk!</h1>
</div>
<div id="container">
<p> I started independent web development two years ago, and haven't looked back. A couple of things I love about coding are those moments when tough projects are complete, or discovering a solution to a difficult problem. Take a look at my
skills, and some of my recent
projects. THANKS!
</p>
<a href="General_Resume.pdf" class="btn btn-outline-
primary" target="__blank">Print My Resume
</a>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>

The reason you are having this issue is that the .section2 section it looks like you have a margin-top: 200px. Therefore creating that space. Now you can just adjust accordingly.
I would be careful when using margins. Using them only if you have to. I rarely use it, only for minor tweaks and responsiveness. If you are styling correct there should be no use for margins. I would take a look into using Flexbox. This is super useful when creating nice functional layouts. It's a great starter for new people too. The sooner you get into it, the easier layouts will be for you.
I also noticed that you are using javascript to add external links that open in a new page. To do that an easier way is to do something like this <a href="someoutsidelink.com" target="_blank">. Here is a reference, w3schools
As for your navbar fixed, here is some code that you should use instead of the one you have now.
var elementPosition = $("#navbar").offset();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top) {
$("#navbar")
.css("position", "fixed")
.css("top", "0");
} else {
$("#navbar").css("position", "static");
}
});
Edit One:
Here's one way to do this one is adding a blank <div class="blank"> tags. Place it on top of the <section class="section2"> opening tag. then add a height: 200px; width: 100% therefore creating that space.

I found a solution! I refactored the code in the ABOUT section to this:
<!-- ABOUT -->
<div class="blank" style="position: absolute">
<a id="myanchor"></a>
</div>
<section id="about" class="section2">
<div class="row-fluid">
<div class="row">
<div class="card ">
<div class="card-block">
<div class="card-title">
<h1>Welcome, let's talk!</h1>
</div>
<div id="container">
<p> I started independent web development two years ago, and haven't looked back. A couple of things I love about coding are those moments when tough projects are complete, or discovering a solution to a difficult problem. Take a look at my
skills, and some of my recent projects. THANKS!
</p>
Print My Resume
</div>
</div>
</div>
</div>
</div>
</section>
Notice that I removed the opening div margin html styling.

Why the last section covers the above sections

I am trying to create the full-page parallax scroll in the one-page website. There are 5 sections in the page. When I add the code of parallax scrolling, the last section covers the above sections. I am not sure where is the mistake.
And, I guess the js/jQuery code in my work does not work since the effects do not come out on the menu.
Any help is appreciated. Thank you so much.
$(document).ready(function() {
let hamburgerClicked = fales;
$('#toggle').on("click", function() {
if (hamburgerClicked == false) {
$(".top").css('transform', 'translate (11px) translateX(0) rotate(45deg)');
$(".bottom").css('transform', 'translateY(-11px) translateX(0) rotate(-45deg)');
hamburgerClicked = true;
} else {
$(".top").css('transform', 'translate (0px) translateX(0) rotate(0deg)');
$(".bottom").css('transform', 'translateY (0px) translateX(0) rotate(0deg)');
hamburgerClicked = false;
}
$("#overlay").toggleClass('active');
$('#overlay').toggleClass('open');
});
});
html {
height: 100%;
}
body {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 200;
font-size: 15px;
color: #fff;
background-image: url(../img/background/background.png);
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#meteor-shower {
position: absolute;
top: 0;
left: 0;
}
.background {
overflow: hidden;
will-change: transform;
backface-visibility: hidden;
height: 100vh 30vh;
position: fixed;
width: 100%;
transform: translateY(30vh);
transition-timing-function: .2s all, cubic-bezier(0.22, 0.44, 0, 1);
}
.background:first-child {
transform: translateY(-30vh / 2);
}
.content-wrapper {
transform: translateY(30vh /2);
}
section {
width: 100%;
transform: translateY(40vh);
will-change: transform;
backface-visibility: hidden;
transition-timing-function: 1.2s +.5, all, cubic-bezier(0.22, 0.44, 0.1);
text-decoration: none;
scroll-behavior: smooth;
}
/*-------------------------------background-animation---------------------------------------*/
.twinkling {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 95%;
display: block;
}
.twinkling {
position: absolute;
background: transparent url(../img/background/2446101-03.png) repeat top center;
background-color: rgba(0, 0, 0, 0);
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
-webkit-animation: move-twink-back 16s infinite;
animation: move-twink-back 16s infinite;
}
#keyframes move-twink-back {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
#-webkit-keyframes move-twink-back {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
/*----------------------------------------navbar---------------------------------------------*/
/*-------------header-container-------------*/
header {
height: 3em;
position: fixed;
}
.header-container {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
.header-container h1 {
font-family: 'Gabriela', serif;
font-size: 1.5em;
float: left;
padding-top: 5px;
padding-left: 20px;
display: block;
}
/*-------------------menu-------------------*/
.button-container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity .25s ease;
opacity: 1;
content: "";
}
.button-container:hover {
opacity: .7;
}
.top:active {
transform: translate(11px) translateX(0) rotate(45deg);
}
.middle:active {
opacity: 0;
}
.bottom:active {
transform: translateY(-11px) translateX(0) rotate(-45deg);
}
span {
background: #fff;
border: none;
height: 4px;
width: 32px;
position: absolute;
top: 0;
left: 0;
transition: all .35s ease;
cursor: pointer;
border-radius: 3px;
}
.middle {
top: 10px;
}
.bottom {
top: 20px;
}
.overlay {
z-index: 500;
position: fixed;
background: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
width: 5%;
height: 0%;
opacity: .6;
visibility: hidden;
transition: opacity .35s, visibility .35s, height .35s;
}
li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
li:nth-of-type(2) {
animation-delay: .4s;
}
li:nth-of-type(3) {
animation-delay: .45s;
}
li:nth-of-type(4) {
animation-delay: .50s;
}
nav {
position: relative;
height: 70%;
top: 20%;
transform: translateY(-50%);
font-size: 0.8em;
}
ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
li {
display: block;
height: 25%;
min-height: 50px;
position: relative;
opacity: 0;
}
a {
display: block;
position: relative;
text-decoration: none;
overflow: hidden;
}
a:hover {
transform: scale(1);
}
a:hover:after,
a:focus:after,
a:active:after {
width: 30%;
}
a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: rgba(0, 0, 0, 0.6);
transition: .35s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
.active {
visibility: visible;
}
/*---------------------------------------section-1-------------------------------------------*/
#section1 {
background: rgba(0, 0, 0, 0);
height: 100vh;
}
#section1 {
:nth-child(1) {
padding-top: 0px;
display: flex;
}
}
/*------------crystal-animation-------------*/
#crstal-animation {
overflow: hidden;
display: block;
}
.crystal {
width: 23%;
position: absolute;
top: 18%;
left: 40%;
margin: 0;
margin-right: -50%;
transform-style: preserve-3d;
-webkit-animation: rotation 8s infinite linear;
animation: rotation 8s infinite linear;
}
#-webkit-keyframes rotation {
0% {
-webkit-transform: rotate(0deg);
filter: drop-shadow(16px 16px 10px rgb(255, 255, 255, 0.8));
}
35% {
-webkit-transform: rotate(38deg) rotateX(5deg);
filter: drop-shadow(0px 10px 16px rgb(255, 255, 255, 0.8));
}
65% {
-webkit-transform: rotate(-38deg) rotateX(2deg);
filter: drop-shadow(16px 0px 10px rgb(255, 255, 255, 0.8));
}
86% {
-webkit-transform: rotateX(-20deg) rotateY(1deg);
filter: drop-shadow(0px 10px 16px rgb(255, 255, 255, 0.8));
}
100% {
-webkit-transform: rotate(0deg);
filter: drop-shadow(16px 16px 10px rgb(255, 255, 255, 0.8));
}
}
/*---------------------------------------section-2-------------------------------------------*/
#section2 {
padding: 60px 130px;
display: inline-block;
background: rgba(0, 0, 0, 0);
height: 100vh;
}
.content {
width: 59%;
background: rgba(0, 0, 0, 0.6);
position: relative;
padding-bottom: 30px;
padding-left: 30px;
display: block;
}
.content p {
width: 88%;
margin: 15px;
text-align: left;
}
.content h2 {
text-align: center;
padding-top: 30px;
}
.crystal-animation {
width: 68%;
float: right;
margin-top: -56%;
margin-right: -80%;
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
aside {
display: block;
}
/*---------------------------------------section-3-------------------------------------------*/
#section3 {
background: rgba(0, 0, 0, 0);
height: 100vh;
}
#section3:nth-child(2) {
display: flex;
align-items: center;
justify-content: center;
}
/*--------constellation-cards----------*/
.gallery {
list-style: none outside none;
flex-direction: row;
display: flex;
align-content: center;
flex-flow: row wrap;
justify-content: center;
}
h2,
p {
text-align: center;
}
.heading {
text-align: center;
}
.gallery li {
margin: 10px;
}
.gallery li:hover {
transform: scale(1.1)
}
.svg {
width: 75%;
filter: drop-shadow(10px)rgba(0, 0, 0, 0.6);
-moz-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
-khtml-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
}
/*---------------------------------------section-3-content---------------------------------*/
/*------------card-content-------------*/
#section3-content {
flex: 90%;
padding: 60px 130px;
display: inline-block;
background: rgba(0, 0, 0, 0);
height: 100vh;
}
.intro h3 {
font-family: 'Gabriela', serif;
}
.content-text {
background: rgba(0, 0, 0, 0.7);
position: relative;
padding-bottom: 30px;
padding-left: 20px;
}
.constellation-img {
opacity: .35;
width: 50%;
float: left;
top: 20%;
position: relative;
}
.constellation-star {
width: 56%;
opacity: 1;
float: left;
left: 1%;
margin-top: 20px;
position: absolute;
}
.intro {
float: right;
width: 50%;
top: 40%;
padding-top: 50px;
padding-right: 100px;
}
.constellation-pattern {
width: 11%;
opacity: .9;
margin-left: -10px;
margin-bottom: -15px;
}
.intro p {
text-align: left;
font-size: 1em;
margin-bottom: 10px;
}
.button {
margin: 0;
padding: 0;
}
.constellation-icon li {
list-style: none;
float: left;
}
.constellation-button {
width: 13%;
/*--------border: 2px solid opacity .3 #fff;
background: opacity .3 #fff;
border-radius: 10px;-----------*/
}
/*----------44--------------------------section-4------------------------------------------*/
#section4 {
height: 100vh;
display: block;
align-content: center;
background: rgba(0, 0, 0, 0.8);
position: relative;
padding: 0;
margin: 0;
}
.s3 {
text-align: left;
}
.s3-content {
width: 74%;
padding-top: 16%;
padding-left: 30%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="twinkling"></div>
<header>
<div class="header-container">
<h1>Constellations</h1>
</div>
<div class="button-container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>Home</li>
<li>About</li>
<li>12 Constellations</li>
<li>Stargazing</li>
</ul>
</nav>
</div>
</header>
<div class="container">
<section id="section1" class="background">
<div id="crystal-animation">
<figure>
<img src="img/crystal.svg" alt="" class="crystal">
</figure>
</div>
</section>
<section id="section2" class="background">
<article class="content">
<h2>What is Constellations?</h2>
<p>Constellations are patterns in the night sky often formed by the most prominent stars to the naked eye. </p>
<p>Constellations often carry names and take the shape of gods, hunters, princesses, objects and mythical beasts associated with Greek mythology – however, at times, it requires quite an imagination to draw out what some constellations are supposed
to represent! </p>
<aside><img src="img/crystal-animation.svg" alt="" class="crystal-animation"></aside>
</article>
</section>
<!-- section-3---->
<section id="section3" class="background">
<h2>12 Constellations</h2>
<p>Click the constellation cards and understand more.</p>
<div class="card">
<ul class="gallery">
<li>
<figcaption>
<img src="img/12-constellation-cards/1.svg" alt="" class="svg">
</figcaption>
</li>
<li>
<img src="img/12-constellation-cards/4.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/7.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/10.svg" alt="" class="svg">
</li>
</ul>
<ul class="gallery">
<li>
<img src="img/12-constellation-cards/2.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/5.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/8.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/11.svg" alt="" class="svg">
</li>
</ul>
<ul class="gallery">
<li>
<img src="img/12-constellation-cards/3.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/6.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/9.svg" alt="" class="svg">
</li>
<li>
<img src="img/12-constellation-cards/12.svg" alt="" class="svg">
</li>
</ul>
</div>
</section>
<section id="section3-content" class="background">
<div class="content-text">
<img src="img/12-constellation-pattern/Aries-img.svg" alt="" class="constellation-img"><img src="img/12-constellation-pattern/Aries-star.svg" alt="" class="constellation-star">
<article class="intro">
<img src="img/12-constellation-pattern/Aries-pattern.svg" alt="" class="constellation-pattern">
<h3>Aries</h3>
<p>While one of the biggest, most famous, and oldest named constellations, Aquarius is faint and often hard to find/see. In Greek mythology, Aquarius represented Ganymede, a very handsome young man. Zeus recognized the lad’s good looks, and invited
Ganymede to Mt. Olympus to be the cupbearer of the gods. For his service he was granted eternal youth, as well as a place in the night sky.
</p>
<p>Despite its prominent position and large size, you can see that Aquarius doesn’t really have defining features, nor does it contain any bright stars. The protruding line to the right is Aquarius’s right arm, with the large downward shape being
a combination of the water flowing down out of the vase and his right leg. While not the entire constellation, what’s drawn above is what you’re most likely to see in the night sky. You won’t see this one in the city; you’ll need a dark sky
to find the cupbearer.
</p>
</article>
<div class="button">
<ul class="constellation-icon">
<li>
<img src="img/12-constellation-pattern/Aries-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Leo-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Sagittarius-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Taurus-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Virgo-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Capricorn-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Gemini-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Libra-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Aquarius-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Cancer-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Pisces-pattern.svg" alt="" class="constellation-button">
</li>
<li>
<img src="img/12-constellation-pattern/Scorpio-pattern.svg" alt="" class="constellation-button">
</li>
</ul>
</div>
</div>
</section>
<!-- section-4---->
<section id="section4" class="background">
<div class="s3-content">
<h2>How to Find Constellations in the Night Sky?</h2>
<p class="s3">Using a star map will be your best bet for assisting in finding where to look for constellations, depending on your location and time of year. It’s different depending on where you live and on the seasons. You can also need the additional app to
help find the constellations, that lets you enter your location and gives you a customized star map. </p>
<p class="s3">All you need is a dark sky, so as far away from cities as possible, and for extra visual aide, a pair of binoculars or a telescope. With binoculars or a telescope, you’ll see fainter stars and other features like nebulae and star clusters. When
you’re out observing, you’ll want to generally orient yourself towards the North Star.</p>
</div>
</section>

text rotation : vertical without any absolute , inside the div

I am trying to achieve roational text within the div but now able to do it.
Problem facing
rotational text should be upside down , like the text should start from bottom, tried to achieve with -90 but it is going upward and crossing the div.
no matter what the text, it should be inside the div (currently because it is absolute it is crossing the parent div and is not responsive).
Height of the text should always be 100% of parent height.
trying hard to achive this but not getting the clean solution.
.header{
width:100%;
height:30px;
background:gainsboro;
}
.footer{
width:100%;
height:30px;
background:gainsboro;
}
.floatsidebar {
clear: none;
overflow: hidden;
z-index: 99999;
}
.sidebarmain {
cursor: pointer;
border: 1px solid grey;
width: 30px;
height: 99.5%;
background: linear-gradient(to right, white, lightgrey)
}
.vertical-text {
text-align: -webkit-match-parent;
position: absolute;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: left top 0;
transform-origin: left top 0;
margin-left: 30px;
padding: 8px;
}
<div class="header">
header
</div>
<div class="floatsidebar " (click)="_toggleSidebar()">
<div class="sidebarmain ui-widget-header">
<div class="vertical-text">622 and 626 All Material Transporter (PC2269)</div>
</div>
</div>
<div class="footer">
footer
</div>

You can use writing-mode: vertical-rl or writing-mode: vertical-lr. This CSS property is also supported by all latest browser.

You can use a pseudo-element to add some padding.
header,footer {
background-color: lightgrey;
}
.vertical-text {
display: inline-block;
transform: rotate(-90deg);
}
.vertical-text:after {
content: '';
padding: 45% 0;
display: block;
position: relative;
top: 0;
}
<header>
header
</header>
<div class="vertical-text">
some vertical text
</div>
<footer>
footer
</footer>
Here is a better approach (taken from http://kizu.ru/en/fun/rotated-text/) which uses a wrapping span:
.header{
width:100%;
height:30px;
background:gainsboro;
}
.footer{
width:100%;
height:30px;
background:gainsboro;
}
.floatsidebar {
clear: none;
overflow: hidden;
z-index: 99999;
}
.sidebarmain {
cursor: pointer;
border: 1px solid grey;
width: 30px;
height: 99.5%;
background: linear-gradient(to right, white, lightgrey)
}
.rotated-text {
display: inline-block;
overflow: hidden;
width: 1.5em;
line-height: 1.5;
}
.rotated-text__inner {
display: inline-block;
white-space: nowrap;
transform: translate(0,100%) rotate(-90deg);
transform-origin: 0 0;
}
.rotated-text__inner:after {
content: "";
float: left;
margin-top: 100%;
}
<div class="header">
header
</div>
<div class="floatsidebar " (click)="_toggleSidebar()">
<div class="sidebarmain ui-widget-header">
<span class="rotated-text">
<span class="rotated-text__inner">
622 and 626 All Material Transporter (PC2269)
</span>
</span>
</div>
</div>
<div class="footer">
footer
</div>

This is what i understand from your question. If it aint what youre looking for. Please comment so i can edit on it.
EDIT
Added jquery to calc the min height of the sidebar
vertTop = $('.vertical-text').width();
vertTop = vertTop + 60;
$(".sidebarmain").css('height', $('.vertical-text').width());
$('.vertical-text').css('top', vertTop);
.header {
width: 100%;
height: 30px;
background: gainsboro;
}
.footer {
width: 100%;
height: 30px;
background: gainsboro;
}
.floatsidebar {
clear: none;
overflow: hidden;
z-index: 99999;
}
.sidebarmain {
cursor: pointer;
border: 1px solid grey;
width: 30px;
padding: 10px 0;
background: linear-gradient(to right, white, lightgrey)
}
.vertical-text {
text-align: -webkit-match-parent;
position: absolute;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: left top 0;
transform-origin: left top 0;
padding: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
header
</div>
<div class="floatsidebar " (click)="_toggleSidebar()">
<div class="sidebarmain ui-widget-header">
<div class="vertical-text">622 and 626 All Material Transporter (PC2269)</div>
</div>
</div>
<div class="footer">
footer
</div>

Div elements arranges around the circle

var mpi=Math.PI /180;
var circleRadius = 2400;
var startAngle = 0;
var centerX = 0;
var centerZ = 0;
var particles = [];
var startRadians = startAngle + mpi;
var totalSpheres = 4;
var incrementAngle = 360/totalSpheres;
var incrementRadians = incrementAngle * mpi;
var arr=[];
$(".scene").each(function(){ arr.push($(this));});
var group = {};
for (var i=0; i<arr.length; i++) {
var client = arr[i].client;
group[client] = group[client] || []; // create array for client if needed
group[client].push(arr[i]);
}
for ( var i = 0; i < totalSpheres; i ++ ) {
var xp = centerX + Math.sin(startRadians) * circleRadius;
var zp = centerZ + Math.cos(startRadians) * circleRadius;
group.add(xp,zp);
startRadians += incrementRadians;
particles.push(group);
}
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body {
font-family: 'Lato', Arial, sans-serif;
color: #fff;
}
.wrapper {
margin: 0 auto 100px auto;
max-width: 960px;
}
.stage {
list-style: none;
padding: 0;
}
/*************************************
Build the scene and rotate on hover
**************************************/
.scene {
width: 260px;
height: 400px;
margin: 30px;
float: left;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
}
.movie {
width: 260px;
height: 400px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(-130px);
-moz-transform: translateZ(-130px);
transform: translateZ(-130px);
-webkit-transition: -webkit-transform 350ms;
-moz-transition: -moz-transform 350ms;
transition: transform 350ms;
}
.movie:hover {
-webkit-transform: rotateY(-78deg) translateZ(20px);
-moz-transform: rotateY(-78deg) translateZ(20px);
transform: rotateY(-78deg) translateZ(20px);
}
/*************************************
Transform and style the two planes
**************************************/
.movie .poster,
.movie .info {
position: absolute;
width: 260px;
height: 400px;
background-color: #fff;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.movie .poster {
-webkit-transform: translateZ(130px);
-moz-transform: translateZ(130px);
transform: translateZ(130px);
background-size: cover;
background-repeat: no-repeat;
}
.movie .info {
-webkit-transform: rotateY(90deg) translateZ(130px);
-moz-transform: rotateY(90deg) translateZ(130px);
transform: rotateY(90deg) translateZ(130px);
border: 1px solid #B8B5B5;
font-size: 0.75em;
}
/*************************************
Shadow beneath the 3D object
**************************************/
.csstransforms3d .movie::after {
content: '';
width: 260px;
height: 260px;
position: absolute;
bottom: 0;
box-shadow: 0 30px 50px rgba(0,0,0,0.3);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: rotateX(90deg) translateY(130px);
-moz-transform: rotateX(90deg) translateY(130px);
transform: rotateX(90deg) translateY(130px);
-webkit-transition: box-shadow 350ms;
-moz-transition: box-shadow 350ms;
transition: box-shadow 350ms;
}
.csstransforms3d .movie:hover::after {
box-shadow: 20px -5px 50px rgba(0,0,0,0.3);
}
/*************************************
Movie information
**************************************/
.info header {
color: #FFF;
padding: 7px 10px;
font-weight: bold;
height: 195px;
background-size: contain;
background-repeat: no-repeat;
text-shadow: 0px 1px 1px rgba(0,0,0,1);
}
.info header h1 {
margin: 0 0 2px;
font-size: 1.4em;
}
.info header .rating {
border: 1px solid #FFF;
padding: 0px 3px;
}
.info p {
padding: 1.2em 1.4em;
margin: 2px 0 0;
font-weight: 700;
color: #666;
line-height: 1.4em;
border-top: 10px solid #555;
}
/*************************************
Generate "lighting" using box shadows
**************************************/
.movie .poster,
.movie .info,
.movie .info header {
-webkit-transition: box-shadow 350ms;
-moz-transition: box-shadow 350ms;
transition: box-shadow 350ms;
}
.csstransforms3d .movie .poster {
box-shadow: inset 0px 0px 40px rgba(255,255,255,0);
}
.csstransforms3d .movie:hover .poster {
box-shadow: inset 300px 0px 40px rgba(255,255,255,0.8);
}
.csstransforms3d .movie .info,
.csstransforms3d .movie .info header {
box-shadow: inset -300px 0px 40px rgba(0,0,0,0.5);
}
.csstransforms3d .movie:hover .info,
.csstransforms3d .movie:hover .info header {
box-shadow: inset 0px 0px 40px rgba(0,0,0,0);
}
/*************************************
Posters and still images
**************************************/
.scene:nth-child(1) .movie .poster {
background-image: url(https://i.ytimg.com/vi/811cLnmeCXM/hqdefault.jpg);
background-size: 335px 450px;
}
.scene:nth-child(2) .poster {
background-image: url(https://i.ytimg.com/vi/811cLnmeCXM/hqdefault.jpg);
background-size: 335px 450px;
}
.scene:nth-child(3) .poster {
background-image: url(https://i.ytimg.com/vi/811cLnmeCXM/hqdefault.jpg);
background-size: 335px 450px;
}
.scene:nth-child(4) .poster {
background-image: url(https://i.ytimg.com/vi/811cLnmeCXM/hqdefault.jpg);
background-size: 335px 450px;
}
.scene:nth-child(1) .info header {
background-image: url(../img/triangulated.png);
}
.scene:nth-child(2) .info header {
background-image: url(../img/triangulamage.png);
}
.scene:nth-child(3) .info header {
background-image: url(../img/defend.png);
}
.scene:nth-child(4) .info header {
background-image: url(../img/defend.png);
}
/*************************************
Fallback
**************************************/
.no-csstransforms3d .movie .poster,
.no-csstransforms3d .movie .info {
position: relative;
}
/*************************************
Media Queries
**************************************/
#media screen and (max-width: 60.75em){
.scene {
float: none;
margin: 30px auto 60px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" >
<div class="wrapper" >
<ul class="stage clearfix" >
<li class="scene">
<div class="movie i1" onclick="return true" id="attacker">
<div class="poster"></div>
<div class="info">
<header>
<h1>THE ATTACKER</h1>
<span class="year">1946</span>
<span class="rating">GAME TIME</span>
<span class="duration">90 minutes</span>
</header>
<p>
In Bedford Falls, New York on Christmas Eve, George Bailey is deeply troubled. Prayers for his well-being from friends and family reach Heaven. Clarence Odbody, Angel Second Class, is assigned to visit Earth to save George, thereby earning his wings. Franklin and Joseph, the head angels, review George's life with Clarence.
</p>
</div>
</div>
</li>
<li class="scene">
<div class="movie i2" onclick="return true" id="midfield">
<div class="poster"></div>
<div class="info">
<header>
<h1>THE MID-FIELDER</h1>
<span class="year">1951</span>
<span class="rating">GAME TIME</span>
<span class="duration">90 minutes</span>
</header>
<p>
A cattle baron takes in an orphaned boy and raises him, causing his own son to resent the boy. As they get older the resentment festers into hatred, and eventually the real son frames his stepbrother for fathering an illegitimate child that is actually his, seeing it as an opportunity to get his half-brother out of the way so he can have his father's empire all to himself.
</p>
</div>
</div>
</li>
<li class="scene">
<div class="movie i3" onclick="return true" id="defender">
<div class="poster"></div>
<div class="info">
<header>
<h1>The DEFENFER</h1>
<span class="year">1925</span>
<span class="rating">GAME TIME</span>
<span class="duration">90 minutes</span>
</header>
<p>
The Tramp travels to the Yukon to take part in the Klondike Gold Rush. He gets mixed up with some burly characters and falls in love with the beautiful Georgia. He tries to win her heart with his singular charm.
</p>
</div>
</div>
</li>
<li class="scene">
<div class="movie i4" onclick="return true" id="goalkeeper">
<div class="poster"></div>
<div class="info">
<header>
<h1>The GOALKEEPER</h1>
<span class="year">1925</span>
<span class="rating">GAME TIME</span>
<span class="duration">90 minutes</span>
</header>
<p>
The Tramp travels to the Yukon to take part in the Klondike Gold Rush. He gets mixed up with some burly characters and falls in love with the beautiful Georgia. He tries to win her heart with his singular charm.
</p>
</div>
</div>
</li>
</ul>
</div><!-- /wrapper -->
</div><!-- /container --
I am trying to arrange these elements around a circle for that I have inserted all li with same class inside a array and then created a group. After that I tried to arrange them as circle but in 3d view but not even close to the expected result.Can someone tell where I am going wrong.
I thing that I am not able to push the paticles into the sphere.

flip box height of back side, also doesnot work on IE [duplicate]

This question already has answers here:
CSS flip code won't work in IE11
(2 answers)
Closed 7 years ago.
I am trying to flip div/box, it works well. but the problem is height of back side.
because it is higher than height of front side. so flip div always push down to next element (eg: Container2). and there is always space between flip div and next elements.
In addition, when I run this code on IE, its flips the div but don't show the right content. just try my demo in IE and Chrome. you will find the issue.
also I have attached the image. I hope they will help to understand the issue.
First State want to manage this height/space from both content and container2
2nd State after clicked on edit link
I hope I have explained enough.
Thank you...
demo code
HTML
<br>
<br>
<br>
<br>
<div class="container">
<div class="flip">
<div class="moveOnchange card">
<div class="face front bgGrey">
<div class=" portlet portletTodelete ">
<div class="portlet-header"> <span class=" "> Front Side </span>
<div class="dropdown pull-right ">
<span class="pull-right ">
<span class="flipControl" >Edit <span class="glyphicon glyphicon-pencil pull-right flipLink"> </span> </span>
</span>
</div>
<!-- portlet-content -->
</div>
<!-- portlet-header -->
</div>
<div class="portlet-content">content</div>
<!-- portlet- -->
</div>
<!-- moveOnchange-->
<div class="face back">
<div class="inner">
<div class="portlet">
<div class="flipForm bgGrey"> Back Side
<ul class="list-inline pull-right ">
<li class="flipControl"> <span class="pull- right glyphicon glyphicon-floppy-disk gi-1x opacity7 "></span>
</li>
</ul>
<hr class="hrflipForm">
</div>
<!-- Header Closed -->
<div class="portlet-content">
<br>text
<br>text
<br>text
<br>text
<br>text
<br>text
<br>text
<br>text
<br>text
<br>text
<br>text
<br>text</div>
<!--- Portlet content -->
</div>
</div>
</div>
</div>
</div>
<div class="container2 container border">container 2</div>
</div>
CSS
.flipForm {
padding:5px;
}
.bgGrey {
background: #efefef;
}
.portlet {
border:solid 1px red;
padding: 10px;
}
.portlet-header {
padding: 0.2em 0.3em;
/*margin-bottom: 0.5em;*/
position: relative;
}
.portlet-content {
border:blue 1px solid;
padding: 0.4em;
}
.portlet-placeholder {
border: 1px dotted black;
margin: 0 0 10px 0;
height: 50px;
}
/************* Flip and show Form. ************/
.flip {
-webkit-perspective: 800;
perspective: 800;
position: relative;
}
.flip .card.flipped {
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.flip .card {
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
transform-style: preserve-3d;
transition: 0.5s;
}
.flip .card .face {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 2;
height: 100%;
}
.flip .card .front {
position: absolute;
width: 100%;
z-index: 1;
height: auto;
}
.flip .card .back {
height: auto;
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.inner {
height: auto !important;
margin: 0px !important;
}
.container2 {
border:solid 1px green;
height:50px;
padding:5px;
}

Set min-height and margin-bottom.
http://jsfiddle.net/9w26kzc6/6/
.portlet-content {
border:blue 1px solid;
padding: 0.4em;
min-height: 400px;
}
.flip {
-webkit-perspective: 800;
perspective: 800;
position: relative;
min-height: 450px;
margin-bottom: 30px;
}
And add this:
.flip .card .face {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 2;
height: 100%;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
And add background-color:
.flip .card .back {
height: auto;
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
background-color: #fff;
}

I am not sure this will work, but I think it would:
Css:
.flipForm {
padding:5px;
}
.bgGrey {
background: #efefef;
}
.portlet {
border:solid 1px red;
padding: 5px;
}
.portlet-header {
padding: 0.2em 0.3em;
/*margin-bottom: 0.5em;*/
position: relative;
}
.portlet-content {
border:blue 1px solid;
padding: 0.4em;
}
.portlet-placeholder {
border: 1px dotted black;
margin: 0 0 10px 0;
height: 50px;
}
/************* Flip and show Form. ************/
.flip {
-webkit-perspective: 800;
perspective: 800;
position: relative;
}
.flip .card.flipped {
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.flip .card {
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
transform-style: preserve-3d;
transition: 0.5s;
}
.flip .card .face {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 2;
height: 100%;
}
.flip .card .front {
position: absolute;
width: 100%;
z-index: 1;
height: auto;
}
.flip .card .back {
height: auto;
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.inner {
height: auto !important;
margin: 0px !important;
}
.container2 {
border:solid 1px green;
height:35px;
padding:5px;
}
PLease see my demo page
DEMO