Wrapping/Aligning Images Around a Circle - javascript

I'm not sure if I'm unable to find the right term to search or if there isn't much out there relating to this, but I was wondering if someone could help me figure out how to wrap or align images/elements around a circular shape.
I'm not sure if it's possible to do it purely with HTML and CSS or if JS is needed, but I'm open to all suggestions.
Here's an example in photoshop of what I'm looking for. I only show 4 here, but I will need the ability to add more circles as needed and still remain consistent. It could go onto another column though, if necessary.
for context, this is going to be some type of navigation menu.
Here's what I have code wise:
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400;500;700;900&display=swap');
/*Colours:*/
:root {
--dark: #16161a;
--off-dark: #242629;
--off-white: #fffffe;
--purple: #7f5af0;
--off-blue: #94a1b2;
}
body {
color: var(--off-white);
font-family: 'Roboto', sans-serif;
}
.create-icon-size {
font-size: 1.5rem;
}
.circle-wrap {
position: relative;
top: 50%;
left: 50%;
width: 320px;
height: 320px;
border: 5px solid var(--off-dark);
border-radius: 160px;
transform: translate(-50%, -50%);
}
.icon-background {
background-color: var(--purple);
color: var(--off-dark);
position: relative;
border-radius: 25px;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
<html lang="en" class="html">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="https://kit.fontawesome.com/fcb91982ab.js" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<div class="circle-wrap">
<div id="head" class="icon-background">
<span class="fas fa-meh-blank create-icon-size"></span>
</div>
<div id="body" class="icon-background">
<span class="fas fa-child create-icon-size"></span>
</div>
<div id="legs" class="icon-background">
<span class="fas fa-capsules create-icon-size"></span>
</div>
<div id="feet" class="icon-background">
<span class="fas fa-shoe-prints create-icon-size"></span>
</div>
</div>
</body>
</html>

make .icon-background to absolute, and set it with top bottom right left values.
.main {
position: relative;
width: 400px;
}
.big-img {
height: 400px;
width: 400px;
border-radius: 100%;
}
.sm-img {
position: absolute;
height: 80px;
width: 80px;
border-radius: 100%;
border: 5px solid #fff;
}
.one {
top: 0;
right: 0;
}
.two {
top: 100px;
right: -50px;
}
.three {
bottom: 100px;
right: -50px;
}
.four {
bottom: 0;
right: 0;
}
<div class="main">
<img src="https://images.unsplash.com/photo-1525268499284-86ec700c826d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80" class="big-img" alt="image-1">
<img src="https://images.unsplash.com/photo-1525268499284-86ec700c826d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80" class="sm-img one" alt="image-1">
<img src="https://images.unsplash.com/photo-1525268499284-86ec700c826d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80" class="sm-img two" alt="image-1">
<img src="https://images.unsplash.com/photo-1525268499284-86ec700c826d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80" class="sm-img three" alt="image-1">
<img src="https://images.unsplash.com/photo-1525268499284-86ec700c826d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80" class="sm-img four" alt="image-1">
</div>
/*Colours:*/
:root {
--dark: #16161a;
--off-dark: #242629;
--off-white: #fffffe;
--purple: #7f5af0;
--off-blue: #94a1b2;
}
body {
color: var(--off-white);
font-family: 'Roboto', sans-serif;
}
.main{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.create-icon-size {
font-size: 1.5rem;
}
.circle-wrap {
position: relative;
width: 320px;
height: 320px;
border: 5px solid var(--off-dark);
border-radius: 160px;
}
.icon-background {
background-color: var(--purple);
color: var(--off-dark);
position: absolute;
border-radius: 25px;
width: 50px;
height: 50px;
}
#head{
top:0;
right: 25px;
}
#body{
top: 80px;
right: -25px;
}
#legs{
bottom: 80px;
right: -25px;
}
#feet{
bottom:0;
right: 25px;
<div class="main"><div class="circle-wrap">
<div id="head" class="icon-background">
<span class="fas fa-meh-blank create-icon-size"></span>
</div>
<div id="body" class="icon-background">
<span class="fas fa-child create-icon-size"></span>
</div>
<div id="legs" class="icon-background">
<span class="fas fa-capsules create-icon-size"></span>
</div>
<div id="feet" class="icon-background">
<span class="fas fa-shoe-prints create-icon-size"></span>
</div>
</div></div>

Related

align right without overflowing the screen CSS

Ok, I'm trying to make a menu. There is the side menu that is going to have certain elements and the top menu that is going to have other elements. I have a problem when I apply the positio:absolute and then a right:0px to align the icons and the name to the right it goes off screen because my body has a margin-left: 280px
let menuToggleButton = document.getElementById('menu_toggle_button');
let side_menu = document.getElementById('side_menu');
let body = document.getElementById('body');
menuToggleButton.addEventListener('click', function() {
side_menu.classList.toggle('resize-side-menu');
body.classList.toggle('resize-body');
});
*{
margin: 0px;
padding: 0px;
}
body{
display: flex;
}
.side-menu{
position: fixed;
display: inline-flex;
background: #ff000061;
width: 280px;
height: 100vh;
transition: .5s;
}
.resize-side-menu{
width: 50px;
transition: .5s;
}
.body{
display: inline-flex;
width: 100%;
height: 60px;
margin-left: 280px;
background: blue;
height: 2000px;
transition: .5s;
}
.resize-body{
margin-left: 50px;
transition: .5s;
}
.body .content-body{
display: block;
width: 100%;
height: 100%;
}
.body .content-body .header{
width: 100%;
height: 50px;
display: block;
position: fixed;
}
.content-items-header{
display: flex;
align-items: center;
background: brown;
position: relative;
height: 50px;
}
.body .content-body .header .content-items-header .content-search-input{
background: white;
color: rgb(0, 0, 0);
border: 2px solid blue;
}
.body .content-body .header .content-items-header .icons-content{
position:absolute;
right:0px;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.0/css/all.min.css">
</head>
<body>
<div class="side-menu" id="side_menu">
</div>
<div class="body" id="body">
<div class="content-body">
<div class="header">
<div class="content-items-header">
<button class="fad fa-bars" id="menu_toggle_button">open</button>
<div class="content-search-input">
<input type="text" class="search" id="search">
<i class="fad fa-search"></i>
</div>
<div class="icons-content">
<i class="fas fa-bell"></i>
<i class="fas fa-envelope"></i>
<i class="fas fa-cog"></i>
<img src="brain.jpg" alt="" height="35px" width="35px">
<span>Aldahir Ruiz Valdez</span>
</div>
</div>
</div>
<div class="workspace">
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
I need them to always be aligned to the right but without leaving the screen
try overflow: hidden; or overflow: auto depending on what you want to achieve. overflow: hidden; will hide all the overflow, and overflow: auto will add a scroll bar if it is needed.
I changed the width of .body and .header to calc(100% - 280px), when pressing the button the width is changed to calc(100% - 50px). I also added a transition: .5s; for changing the width on the .header so it looks smooth (you'll see what I mean when you remove the transition). Hope this is the result you're looking for!
let menuToggleButton = document.getElementById('menu_toggle_button');
let side_menu = document.getElementById('side_menu');
let body = document.getElementById('body');
let header = document.querySelector('.header');
menuToggleButton.addEventListener('click', function() {
side_menu.classList.toggle('resize-side-menu');
body.classList.toggle('resize-body');
header.classList.toggle('resize-header');
});
* {
padding: 0;
margin: 0;
}
body{
display: flex;
}
.side-menu{
position: fixed;
display: inline-flex;
background: #ff000061;
width: 280px;
height: 100vh;
transition: .5s;
}
.resize-side-menu{
width: 50px;
transition: .5s;
}
.body {
width: calc(100% - 280px);
display: inline-flex;
height: 60px;
margin-left: 280px;
background: blue;
height: 2000px;
transition: .5s;
}
.resize-body{
margin-left: 50px;
transition: .5s;
width: calc(100% - 50px);
}
.body .content-body{
display: block;
width: 100%;
height: 100%;
}
.body .content-body .header{
width: calc(100% - 280px);
transition: .5s;
height: 50px;
display: block;
position: fixed;
}
.body .content-body .header.resize-header {
width: calc(100% - 50px);
transition: .5s;
}
.content-items-header{
display: flex;
align-items: center;
background: brown;
position: relative;
height: 50px;
}
.body .content-body .header .content-items-header .content-search-input{
background: white;
color: rgb(0, 0, 0);
border: 2px solid blue;
}
.body .content-body .header .content-items-header .icons-content{
position:absolute;
right:0px;
}
<div class="side-menu" id="side_menu">
</div>
<div class="body" id="body">
<div class="content-body">
<div class="header">
<div class="content-items-header">
<button class="fad fa-bars" id="menu_toggle_button">open</button>
<div class="content-search-input">
<input type="text" class="search" id="search">
<i class="fad fa-search"></i>
</div>
<div class="icons-content">
<i class="fas fa-bell"></i>
<i class="fas fa-envelope"></i>
<i class="fas fa-cog"></i>
<img src="brain.jpg" alt="" height="35px" width="35px">
<span>Aldahir Ruiz Valdez</span>
</div>
</div>
</div>
<div class="workspace">
</div>
</div>
</div>

Resizing Screen: Messes up sections on website

I was creating a website and am stuck because I keep resizing the screen and trying to make it mobile friendly. However, there are two sections that I cannot seem to fix. I cannot remember how I got the first three sections to stop moving while I resized the screen. I was wondering if I could get some help.
My website is shivaniahuja.com
If you look at the contact me page and the footer and try to resize them you will see the problem. Please let me know if you can help and I can attach my code if needed.
*{
margin: 0;
padding: 0;
}
#main{
width: 100%;
height: 100vh;
background-image: url(../imgs/Background.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
display: flex;
}
img{
width: 15%;
height: 100%;
}
#first-name{
display: inline-block;
font-family: 'Roboto', sans-serif;
font-size: 14px;
color: #2f3338;
padding-left: 2%;
font-size: 2vmin;
}
nav{
width: 100%;
height: 10vh;
background-color: #FFFFFF;
line-height: 80px;
z-index: 1;
position: fixed;
}
nav ul li{
list-style-type: none;
display: inline-block;
}
nav ul{
float: right;
margin-right: 20px;
}
nav ul li a{
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-size: 2vmin;
color: #2f3338;
padding: 20px;
}
nav ul li a:hover{
color: #3377CC;
}
#main p{
position: absolute;
top: -1000px;
text-align: center;
color: white;
font-size: 50px;
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
section{
width: 100%;
text-align: center;
padding-top: 7%;
}
html{
scroll-behavior: smooth;
overflow-x: hidden;
}
section#about-me #p2{
width: 40%;
position: relative;
height: 40%;
float: right;
top: 40%;
margin-top: 3%;
right: 10%;
line-height: 200%;
font-family: 'Libre Franklin', sans-serif;
text-align: justify;
font-size: 2.2vmin;
}
section#about-me{
height: 60vh;
}
section#photography{
height: 110vh;
background-color: #F5F5F5;
}
section#experience{
height: 280vh;
background-color: #F5F5F5;
}
section#contact{
}
#contact-header{
font-size: 2.5vmin;
top: 20%;
}
section#about-me #pic{
width: 40%;
height: 40%;
position: absolute;
right: 55%;
margin-top: 2%
}
#contact-div{
position: relative;
top: 50%;
}
section#blog{
width: 100%;
padding-top: 8.5%;
}
.navs::before,
.navs::after {
display: inline-block;
content: "";
border-top: 2px solid black;
width: 5%;
margin: 0 1rem;
transform: translateY(-0.5rem);
}
h2{
position: relative;
top: -200;
}
#title{
position: absolute;
top: 50%;
font-size: 10vmin;
color: white;
left: 35%;
}
span{
position: absolute;
top: 60%;
font-size: 300%;
color: white;
left: 35%;
display: inline-block;
}
span:before{
content: 'HTML';
animation: animate infinite 8s;
position: relative;
left: 50%;
font-size: 6vmin;
}
#keyframes animate{
0%{
content: 'ENGINEER';
}
25%{
content: 'ENGINEER';
}
50%{
content: 'DEVELOPER';
}
75%{
content: 'DEVELOPER';
}
100%{
content: 'ANALYST';
}
}
.pic-and-text{
width: 18%;
height: 22%;
border-radius: 15%
}
section#experience #pic01{
left: -20%;
margin-top: 2%;
margin-bottom: 5%;
position: relative;
}
section#experience #berkeley-name{
position: relative;
font-size: 3vmin;
left: 5%;
top: 0%;
color: #3377CC;
font-family: 'Roboto', sans-serif;
}
section#experience #berkeley-major{
position: relative;
font-size: 16px;
bottom: 200px;
left: 78px;
color: #5E9515;
font-weight: bold;
font-family: 'Roboto', sans-serif;
}
section#experience #berkeley-location{
position: relative;
font-size: 16px;
bottom: 195px;
right: 65px;
font-weight: bold;
font-family: 'Roboto', sans-serif;
}
section#experience #berkeley-description{
position: relative;
bottom: 180px;
height: 40px;
width: 600px;
right: -610px;
font-family: 'Libre Franklin', sans-serif;
line-height: 30px;
font-size: 2vmin;
}
section#blog #full-blog{
position: relative;
top: -40px;
}
section#blog .blog-description{
font-size: 20px;
font-family: 'Libre Franklin', sans-serif;
line-height: 30px;
}
#pic001{
width: 17.5%;
}
#pic002{
width: 17.5%;
}
#pic003{
width: 17.5%;
}
.header{
font-size: 3.5vmin;
}
.blog-pics{
margin-left: .5%;
margin-top: 1%
}
section#blog #blog-description01{
margin-top: 15px;
}
#photography-paragraph{
font-size: 2.5vmin;
font-family: 'Libre Franklin', sans-serif;
margin-bottom: 2vh;
margin-top: 2vh;
}
.polaroid {
cursor:pointer;
margin:10px;
border: 1px solid #cccccc78;
background-color: #ffffff;
padding: 7%;
box-shadow: 4px 6px 4px #00000012;
text-align: center;
font-family: 'Caveat','Arial', sans-serif;
}
.polaroid .square {
background:black;
}
.polaroid .picture {
width:100%;
padding-top: 100%;
background-position: center;
background-size:cover;
opacity:0;
}
.polaroid.developed .square {
animation: flash 1.5s;
background:black;
}
.polaroid.developed .picture {
animation: fade-in 3s;
opacity:1;
}
.polaroid .labelName {
text-align: center;
font-size: 24px;
line-height:26px;
}
.polaroid-gallery {
display:-ms-grid;
display:grid;
-ms-grid-columns: 25% 25% 25% 25%;
grid-template-columns: 23% 23% 23% 23%;
margin-left: 5%
}
/* Adjust CSS Grid for Microsoft Edge */
.polaroid:nth-child(1) {
-ms-grid-row: 1;
-ms-grid-column:1;
}
.polaroid:nth-child(2) {
-ms-grid-row: 1;
-ms-grid-column:2;
}
.polaroid:nth-child(3) {
-ms-grid-row: 1;
-ms-grid-column:3;
}
.polaroid:nth-child(4) {
-ms-grid-row: 1;
-ms-grid-column:4;
}
.polaroid:nth-child(5) {
-ms-grid-row: 2;
-ms-grid-column:1;
}
#keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes flash {
2% {
background:black;
opacity: 0.5;
}
5% {
background:white;
opacity:1;
}
50% {
background:white;
opacity:.5
}
}
#footer{
background-color: #000000;
width: 100%;
padding-top: 2vh;
color: white;
padding-left: 1%;
}
#footer-paragraph{
position: relative;
top: 60%;
}
#import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
a, a:hover {
text-decoration: none;
}
.socialbtns, .socialbtns ul, .socialbtns li {
margin: 0;
padding: 5px;
}
.socialbtns li {
list-style: none outside none;
display: inline-block;
}
.socialbtns .fa {
width: 40px;
height: 28px;
color: #000;
background-color: #FFF;
border: 1px solid #000;
padding-top: 12px;
border-radius: 22px;
-moz-border-radius: 22px;
-webkit-border-radius: 22px;
-o-border-radius: 22px;
}
.socialbtns .fa:hover {
color: #FFF;
background-color: #000;
border: 1px solid #000;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght#600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Libre+Franklin:wght#200&display=swap" rel="stylesheet">
<link rel="stylesheet" href ="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<h1 id="title"> SHIVANI AHUJA</h1>
<span></span>
<body>
<div class ="container">
<div id="main">
<nav>
<div id= "first-name"> SHIVANI AHUJA </div>
<ul>
<li> ABOUT ME </li>
<li> EXPERIENCE</li>
<li> BLOG POSTS</li>
<li> PHOTOGRAPHY</li>
<li> CONTACT </li>
</ul>
</nav>
</div>
<section id="about-me">
<h1 class="navs" class="header"> ABOUT ME</h1>
<img src="assets/imgs/paris-2017-home.jpeg" id="pic">
<div id="p2div">
<p id="p2"> Hey! My name is Shivani and I am an undergraduate student at UC Berkeley studying Computer Science. I'm super passionate about Artificial Intelligence and Natural Language Processing. Haha, I sound like a nerd right now, but I really love what I do! I've spent tons of hours curating images and watching HTML and CSS tutorials on Youtube to finally create this masterpiece that lies in front of you. The process of creating this website was fun, yet undeniably frustrating. After creating my first website from scratch, I plan to create many more and teach others how to recreate this process!</p>
</div>
</section>
<section id="experience">
<h1 class="navs"> HERE'S WHAT I'VE DONE SO FAR</h1>
<div class= "experience-squares" id="experience-square">
<img src="assets/imgs/coming.png" class="pic-and-text" id="pic01">
<p id="berkeley-name"> Creator and iOS Developer, Summer 2020</p>
<p id="berkeley-major"> IBS Application </p>
<p id="berkeley-location"> Hayward, CA</p>
<p id="berkeley-description"> Currently,</p>
</div>
</div>
</section>
<section id="blog">
<div id=full-blog>
<h1 class="navs" class="header">BLOG</h1>
<p class="blog-description" id= "blog-description01"> I write about women in tech, hiking, and some of my personal experiences.</p>
<p class="blog-description" id= "blog-description02"> Here are three of my recent posts:</p>
<div id="pictures">
<img src="assets/imgs/paris-2017-home.jpeg" id="pic001" class="blog-pics">
<img src="assets/imgs/paris-2017-home.jpeg" id="pic002" class="blog-pics">
<img src="assets/imgs/paris-2017-home.jpeg" id="pic003" class="blog-pics">
</div>
</div>
</section>
<section id="photography">
<h1 class="navs" class="header">PHOTOGRAPHY</h1>
<p id="photography-paragraph"> Creating memorabilia is an art. An art that has allowed me to capture the emotions, smiles, and happiness of every individual depcited in this gallery.</p>
<div class="polaroid-gallery">
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/sunflower.JPG')"></div>
</div>
<div class="labelName">SunFlowers</div>
<div class="labelText">Berkeley, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/pic-with-mom.png')"></div>
</div>
<div class="labelName">Mommy's Girl</div>
<div class="labelText">Ludhiana, PB</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/sailboat.jpg')"></div>
</div>
<div class="labelName">Sailboat</div>
<div class="labelText">Santa Cruz, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/glasses-aesthetic.JPG')"></div>
</div>
<div class="labelName">Foolin' Around</div>
<div class="labelText">Berkeley, CA</div>
</div>
</div>
<link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
<div class="polaroid-gallery">
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/flowers.jpg')"></div>
</div>
<div class="labelName">Orchid Bush</div>
<div class="labelText">Hayward, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/graduation.jpg')"></div>
</div>
<div class="labelName"> Besties 4 Life!</div>
<div class="labelText">Hayward, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/background.jpg')"></div>
</div>
<div class="labelName">Pink Sky</div>
<div class="labelText">Lake Tahoe, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/cousins.PNG')"></div>
</div>
<div class="labelName">Three Idiots</div>
<div class="labelText">Ludhiana, PB</div>
</div>
<link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
</section>
<div id="wrap">
<section id="contact">
<h1 class="navs" class="contact-header">CONTACT</h1>
<p id="contact-paragraph">If you have any inquiries or questions, please feel free to contact me on these social media
sites. I look forward to hearing from you! </p>
<br/>
<div align="center" class="socialbtns">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</section>
<section id="footer">
<p id="footer-paragraph"> Copyright #2020 Shivani Ahuja. All Rights Reserved.
</section>
</div>
</body>
</html>
I found one inconsistency were you wrapped up your div tag...
This often leads to buggy layouts just for not closing tags properly.
<div id="wrap">
<section id="contact">
<!-- your HTML code -->
<div align="center" class="socialbtns">
<!-- your HTML code -->
</div>
</div><!-- REMOVE THIS! did you want to finish div#wrap here ? -->
</section>
<section id="footer">
<p id="footer-paragraph"> Copyright #2020 Shivani Ahuja. All Rights Reserved.
</section>
</div><!-- or did you want to finish div#wrap here ? -->
To make the whole site responsive put a <meta> tag like the one below before and after the <body> tags.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Next, set out your HTML like this:
<div id="wrap">
<section id="contact">
<!-- Code here -->
<div align="center" class="socialbtns">
<!-- Your Code Here -->
</div>
</section>
<section id="footer">
<p id="footer-paragraph"> Copyright #2020 Shivani Ahuja. All Rights Reserved.
</section>
</div>
And of course use the <meta> tags I mentioned
Add position relative to .polaroid-gallery
.polaroid-gallery {
display: -ms-grid;
display: grid;
-ms-grid-columns: 25% 25% 25% 25%;
grid-template-columns: 40% 40% 40% 36%;
margin-left: 5%;
position: absolute;
}
nav {
width: 100%;
/* height: 10vh; */ i remove this for the menu dont resize to much
background-color: #FFFFFF;
line-height: 80px;
z-index: 1;
position: fixed;
}
section#contact {
margin-bottom: 2vh;
font-size: 2.5vmin;
border: 3px solid red; /* to test */
background: black; /* to test */
}
i recommend you check the structure of your html, and relative sizes to responsive design

Display separate sections of an html page on a button click [duplicate]

This question already has answers here:
JavaScript hide/show element
(13 answers)
Closed 2 years ago.
Good day,
I'm tring to display separately two sections (p1 and p2) of my html page. In other words, when I click on 1st button, I would like section "p1" to be displayed and section "p2" to be hidden, and conversely when I click on button p2, I would like only section "p2" to be visible.
So far, I am not very successful in my attempts.
Do you have any hints which would be of great help to progress ?
Many thanks for your time and best wishes
Here below is my html code:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="css/mystyle.css?rnd=999" />
<script type="text/javascript" src="scripts/date_time.js"></script>
<script type="text/javascript" src="scripts/demo.js"></script>
</head>
<body>
<div class="div_screen">
<div class="div_screen_left_frame">
<div class="div_screen_icon">
<img src="assets/icons/logo_Domoos.png" alt ="" style="width:80px;height:58px;">
</div>
<div class="div_screen_nav1">
<ul id="menu">
<button class="cupid-blue" href="#p1"> Display section 1 (p1)
<button class="cupid-blue" href="#p2"> Display section 2 (p2)
</ul>
</div>
</div>
<div class="div_screen_contents_frame">
<div class="page" id="p1">
<section class="icon fa fa-bolt"><span class="title">Bolt</span><span class="hint">This is the first part I would like to show separately</span> </section>
</div>
<div class="page" id="p2">
<section class="icon fa fa-bolt"><span class="title">Bolt</span><span class="hint">This is the second part I would like to show separately</span> </section>
</div> </div>
<div class="div_screen_up_frame">
<div class="div_current_meteo_frame">
<div class="div_current_meteo_icon">
<img src="assets/meteo_icons/eclaircies-big.png" alt="" style="width:55px;height:55px;">
</div>
<div class="div_current_meteo_temperature">-23°C</div>
<div class="div_current_meteo_condition">Nuit avec averses de neige faible</div>
<div class="div_sunrise_sunset">
<img src="assets/icons/sun_icon.png" alt="" width="14" height="14">↑ 05:38 <img src="assets/icons/sun_icon.png" alt="" width="14" height="14">↓ 21:16
</div>
<div style="width:50px;height:50px;border:1px solid #000;"></div>
</div>
<div class="div_forecast_meteo_frame">
<div class="div_forecast_meteo_day1">
<div class="div_forecast_weekday">Vendredi</div>
<div class="div_forecast_date">31.05.2020</div>
<div class="div_forecast_icon">
<img src="assets/meteo_icons/eclaircies.png" alt="" width="23" height="23">
</div>
<div class="div_forecast_text">Nuit avec développement nuageux</div>
<div class="div_forecast_temperature">24°C | 15°C</div>
</div>
<div class="div_forecast_meteo_day2">
<div class="div_forecast_weekday">Samedi</div>
<div class="div_forecast_date">99.99.9999</div>
<div class="div_forecast_icon">
<img src="assets/meteo_icons/eclaircies.png" alt="" width="23" height="23">
</div>
<div class="div_forecast_text">Nuit avec averses de neige faible</div>
<div class="div_forecast_temperature">-24°C | -20°C</div>
</div>
<div class="div_forecast_meteo_day3">
<div class="div_forecast_weekday">Dimanche</div>
<div class="div_forecast_date">77.77.7777</div>
<div class="div_forecast_icon">
<img src="assets/meteo_icons/eclaircies.png" alt="" width="23" height="23">
</div>
<div class="div_forecast_text">Nuit avec averses de neige faible</div>
<div class="div_forecast_temperature">-24°C | -20°C</div>
</div>
</div>
<div class="div_screen_datetime">
<div id="date">
<script type="text/javascript">window.onload = getDate('date');</script>
</div>
<div id="time">
<script type="text/javascript">window.onload = getTime('time');</script>
</div>
</div>
</div>
<div style="width:900px;height:540px;border:0px solid #ffaacc;"></div>
</div>
</body>
</html>
Not quite sure if the css might be helpful, but here it is :
/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
float: left;
width: 19.0%;
padding: 2px;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
.div_screen {
font-family:"Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 90%;
color: blue;
position: fixed;
top: -3;
left: -3;
width: 1005px;
height: 540 px;
border: 2px solid #de2be4;
}
.div_screen_datetime
{
position: absolute;
right: 1px;
top: 0;
width: 170px;
border: 1px solid red;
font-size: 120%;
text-align: right;
height: 95px; /*50*/
}
.div_screen_up_frame {
position: absolute;
left: 150px;
top: 1px;
width: 852px;
height:95px;
border: 1px solid blue;
}
.div_screen_left_frame {
position: absolute;
left: 1px;
top: 1px;
width: 146px;
height:536px;
border: 1px solid blue;
}
.div_screen_contents_frame {
position: absolute;
left: 150px;
top: 99px;
width: 852px;
height:438px;
border: 1px solid blue;
}
.div_screen_icon {
position: absolute;
left: 0px;
top: 0px;
width: 145px;
height: 95px;
border: 1px solid black;
}
.div_screen_nav1 {
position: absolute;
left: 0px;
top: 95px;
width: 145px;
height: 300px;
border: 1px solid black;
}
.div_screen_nav2 {
position: absolute;
left: 0px;
top: 398px;
width: 145px;
height: 137px;
border: 1px solid black;
}
.div_current_meteo_frame {
position: absolute;
left: 0px;
top: 0px;
width: 185px;
height:95px;
border: 1px solid black;
}
.div_sunrise_sunset {
position: absolute;
font-size: 75%;
left: 2px;
top: 72px;
}
.div_current_meteo_icon {
position: absolute;
left: -5px;
top: 1px;
width: 100px;
}
.div_current_meteo_temperature {
position: absolute;
font-size: 250%;
/*text-align: center;*/
left: 80px;
top: 0px;
color: black;
}
.div_current_meteo_condition {
position: absolute;
font-size: 75%;
/*text-align: center;*/
left: 2px;
top: 55px;
color: black;
}
.div_forecast_meteo_frame {
position: absolute;
left: 186px;
top: 0px;
width: 492px;
height:95px;
border: 1px solid black;
}
.div_forecast_meteo_day1 {
position: absolute;
font-size: 95%;
left: 1px;
top: 1px;
width: 489px;
height:29px;
border: 1px solid #73AD21;
}
.div_forecast_meteo_day2 {
position: absolute;
font-size: 95%;
left: 1px;
top: 31px;
width: 489px;
height:29px;
border: 1px solid #73AD21;
}
.div_forecast_meteo_day3 {
position: absolute;
font-size: 95%;
left: 1px;
top: 61px;
width: 489px;
height:29px;
border: 1px solid #73AD21;
}
.div_forecast_weekday {
position: absolute;
font-size: 100%;
color: black;
left: 0px;
top: 2px;
text-align: left;
border: 1px solid yellow;
}
.div_forecast_date {
position: absolute;
font-size: 100%;
color: black;
left: 65px;
top: 2px;
text-align: left;
border: 1px solid yellow;
}
.div_forecast_icon {
position: absolute;
font-size: 100%;
color: black;
left: 138px;
text-align: left;
border: 1px solid yellow;
}
.div_forecast_text {
position: absolute;
font-size: 100%;
color: black;
left: 165px;
top: 2px;
text-align: left;
border: 1px solid yellow;
}
.div_forecast_temperature {
position: absolute;
font-size: 100%;
color: black;
right: 1px;
top: 2px;
text-align: right;
border: 1px solid yellow;
}
button.cupid-blue {
background-color: #d7e5f5;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d7e5f5), color-stop(100%, #cbe0f5));
background-image: -webkit-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: -moz-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: -ms-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: -o-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: linear-gradient(top, #d7e5f5, #cbe0f5);
border-top: 1px solid #abbbcc;
border-left: 1px solid #a7b6c7;
border-bottom: 1px solid #a1afbf;
border-right: 1px solid #a7b6c7;
border-radius: 12px;
-webkit-box-shadow: inset 0 1px 0 0 white;
box-shadow: inset 0 1px 0 0 white;
color: #1a3e66;
font: normal 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
padding: 6px 0 3px 0;
text-align: center;
text-shadow: 0 1px 1px #fff;
width: 140px;
height: 40px;
margin-top: 5px;
margin-bottom: 5px;
left: 5 px;
}
ul {
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
margin: auto;
width: 10%;
padding: 0;
text-align: center;
}
just find the clicked item related div and show it and hide the other one.
I have created the logic, just use it in your code
$(document).ready(function(){
$('#menu button').click(function(){
var hrefId = $(this).attr('href');
$('.div_screen_contents_frame .page').hide();
$('.div_screen_contents_frame').find(hrefId).show();
});
});
.page{display: none;}
.page.active {display: block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu">
<button class="cupid-blue" href="#p1"> Display section 1 (p1)
<button class="cupid-blue" href="#p2"> Display section 2 (p2)
</ul>
</div>
</div>
<div class="div_screen_contents_frame">
<div class="page active" id="p1">
<section class="icon fa fa-bolt"><span class="title">Bolt</span><span class="hint">This is the first part I would like to show separately</span> </section>
</div>
<div class="page" id="p2">
<section class="icon fa fa-bolt"><span class="title">Bolt</span><span class="hint">This is the second part I would like to show separately</span> </section>
</div>
use below part as it is in your code, as you asked in Comment
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>$(document).ready(function(){
$('#menu button').click(function(){
var hrefId = $(this).attr('href');
$('.div_screen_contents_frame .page').hide();
$('.div_screen_contents_frame').find(hrefId).show();
});
});</script>
as per our Discussion I am adding a pure JS solution here. Check it.
function toggleDisplay(className, displayState){
var elements = document.getElementsByClassName(className)
for (var i = 0; i < elements.length; i++){
elements[i].style.display = displayState;
}
}
function toggle(){
document.onclick = function(e) {
if (e.target.tagName == 'BUTTON') {
var href = e.target.getAttribute("href");
toggleDisplay('page', 'none');
document.getElementById(href).style.display = 'block';
}
}
}
.page{display: none;}
.page.active {display: block;}
<ul id="menu">
<button class="cupid-blue" href="p1" id="btnOne" onclick="toggle(this)"> Display section 1 (p1)</button>
<button class="cupid-blue" href="p2" id="btnTwo" onclick="toggle(this)"> Display section 2 (p2)</button>
</ul>
</div>
</div>
<div class="div_screen_contents_frame">
<div class="page active" id="p1">
<section class="icon fa fa-bolt" id="pOne"><span class="title">Bolt</span><span class="hint">This is the first part I would like to show separately</span> </section>
</div>
<div class="page" id="p2">
<section class="icon fa fa-bolt" id="pTwo"><span class="title">Bolt</span><span class="hint">This is the second part I would like to show separately</span> </section>
</div>
</div>

Responsive square image and text grid

An issue has been created when min-width:768px the image and text content alignment break down!
Basically, I want to keep image and text at a time, one after another in mobile layout, and one image and related text should be aligned horizontally one after another in tablet layout, but its breakdown! The desktop layout is Okay !
Here is the code
.sq-about-main {
margin-bottom: 80px;
}
.s-about-col-areas {
display: block;
margin: 10% auto;
overflow: hidden;
}
.s-about-col-areas:after {
content: "";
clear: both;
display: block;
}
.s-about-col {
width: 100%;
float: left;
position: relative;
padding-bottom: 100%;
}
#media (min-width: 768px) {
.s-about-col {
width: calc(100% / 2);
padding-bottom: calc(100% / 2);
}
}
#media (min-width: 1200px) {
.s-about-col {
width: calc(100% / 4);
float: left;
position: relative;
padding-bottom: calc(100% / 4);
}
}
.s-about-col .s-about-col-content {
width: calc(100%);
height: calc(100%);
/*margin: 8px;*/
/*padding: 16px;*/
position: absolute;
border-radius: 2px;
background-color: #ffffff;
/*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);*/
}
.image-col .s-about-col-content img {
width: 100%;
height: 100%;
object-fit: cover;
-o-object-fit: cover;
}
.s-about-col-content i {
position: absolute;
left: 45px;
bottom: 45px;
font-size: 20px;
line-height: 20px;
color: #646464;
border: 1px solid #646464;
padding: 10px;
cursor: pointer;
}
.text-col {
display: table;
}
.text-col .text-col-content {
padding: 30% 45px 45px 45px;
height: 100%;
display: table-cell;
text-align: left;
vertical-align: middle;
}
.text-col .text-col-content h2 {
font-family: "Helvetica-Bold", sans-serif;
}
.text-col .text-col-content p {
font-family: "Roboto", sans-serif;
font-size: 20px;
color: #656565;
}
.text-col .text-col-content.l-arrow::before {
content: "";
position: absolute;
top: 50%;
left: -25px;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-right: 25px solid #ffffff;
z-index: 2;
}
.text-col .text-col-content.r-arrow::before {
content: "";
position: absolute;
top: 50%;
right: -25px;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #ffffff;
z-index: 2;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="sq-about-main">
<div class="container-fluid px-5-percent">
<div class="s-about-col-areas">
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img src="https://i.imgur.com/3U2Fd7P.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content l-arrow">
<h2>Who We are</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img src="https://i.imgur.com/jXTai9N.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content l-arrow">
<h2>Mission & Vision</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
</div>
<div class="s-about-col-areas">
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content r-arrow">
<h2>Philosophy</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img class="" src="https://i.imgur.com/pZdZJvq.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content r-arrow">
<h2>Achievements</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img class="m-0" src="https://i.imgur.com/tJVEprD.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
I would rethink the structure, since your 8 boxes are basically 4 boxes with 2 parts in each of them. Then you can control the sequence with float left/right, like this:
.sq-about-main {
margin-bottom: 80px;
}
.s-about-col-areas {
display: block;
margin: 10% auto;
overflow: hidden;
}
.s-about-col-areas:after {
content: "";
clear: both;
display: block;
}
.s-about-col {
width: 100%;
position: relative;
padding-bottom: 100%;
}
.floatleft .s-about-col {
float:left;
}
.floatright .s-about-col {
float:right;
}
#media (min-width: 768px) {
.s-about-col {
width: calc(100% / 2);
padding-bottom: calc(100% / 2);
}
}
#media (min-width: 1200px) {
.s-about-col {
width: calc(100% / 4);
float: left;
position: relative;
padding-bottom: calc(100% / 4);
}
}
.s-about-col .s-about-col-content {
width: calc(100%);
height: calc(100%);
/*margin: 8px;*/
/*padding: 16px;*/
position: absolute;
border-radius: 2px;
background-color: #ffffff;
/*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);*/
}
.image-col .s-about-col-content img {
width: 100%;
height: 100%;
object-fit: cover;
-o-object-fit: cover;
}
.s-about-col-content i {
position: absolute;
left: 45px;
bottom: 45px;
font-size: 20px;
line-height: 20px;
color: #646464;
border: 1px solid #646464;
padding: 10px;
cursor: pointer;
}
.text-col {
display: table;
}
.text-col .text-col-content {
padding: 30% 45px 45px 45px;
height: 100%;
display: table-cell;
text-align: left;
vertical-align: middle;
}
.text-col .text-col-content h2 {
font-family: "Helvetica-Bold", sans-serif;
}
.text-col .text-col-content p {
font-family: "Roboto", sans-serif;
font-size: 20px;
color: #656565;
}
.text-col .text-col-content.l-arrow::before {
content: "";
position: absolute;
top: 50%;
left: -25px;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-right: 25px solid #ffffff;
z-index: 2;
}
.text-col .text-col-content.r-arrow::before {
content: "";
position: absolute;
top: 50%;
right: -25px;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #ffffff;
z-index: 2;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="sq-about-main">
<div class="container-fluid px-5-percent">
<div class="s-about-col-areas">
<div class="element floatleft">
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img src="https://i.imgur.com/3U2Fd7P.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content l-arrow">
<h2>Who We are</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
</div>
<div class="element floatleft">
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img src="https://i.imgur.com/jXTai9N.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content l-arrow">
<h2>Mission & Vision</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
</div>
</div>
<div class="s-about-col-areas">
<div class="element floatright">
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img class="" src="https://i.imgur.com/pZdZJvq.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content r-arrow">
<h2>Philosophy</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
</div>
<div class="element floatright">
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img class="m-0" src="https://i.imgur.com/tJVEprD.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content r-arrow">
<h2>Achievements</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
</div>
</div>
</div>
</div>
Please put this code in your CSS.
#media (max-width: 767px) {
.s-about-col{padding-bottom: 0;}
.s-about-col .s-about-col-content{position: relative;}
}

Vertical side menu that overlays body area

I have been trying to find some sample code or help on a way to have a vertical menu bar down the left hand side of the page that displays an icon and on hover of the image the menu will expand and overlay the background of the body and display what the icon represents.
I have a little demo here that I found and I like alot, but this is abit more advanced but the basic idea can be seen.
http://codecanyon.net/item/jquery-wahmenu/full_screen_preview/5533383
As you can see when you hover over some of the icons a small box will overlay the body and this is what I am trying to achieve.
check out the code at this url http://jsbin.com/yiyenadi/1/ .
As you can see I did not animate it because this would take more time but it can be done.
Please message me back if you need more help. And please comment your views back.
[EDIT]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>side bar</title>
<script type="text/javascript">
<style type="text/css">
body {
margin:0px;
background-color: rgb(255, 0, 214);
}
#side_bar_container {
width:50px;
background-color: #555C66;
height: 100%;
position:absolute;
transition:.5s;
}
.line_container{
height:50px;
background-color: #555C66;
padding-top: 4px;
padding-bottom: 4px;
border-bottom: 2px solid rgba(0, 0, 0, 0.18);
overflow: hidden;
position: relative;
}
#line_container1{
border-top: 2px solid rgba(0, 0, 0, 0.18)
}
.line_image{
width: 50px;
height: 50px;
float: left;
border-radius: 16px;
color: white;
}
.line_text{
margin-top: 16px;/*depends on other values*/
font-size:18px;
width:300px;
height:50px;
float: left;
color: black;
font-family: sans-serif;
position: relative;
z-index: -3px;
}
#logo {
width:50px;
height:50px;
margin-top: 5px;
margin-bottom: 5px;
border-radius: 50%;
}
.sidebar_loader{
width: 300px;
height: 100%;
display: ; /*very very important*/
z-index: -3;
position: absolute; /*works with fixed - absolute is experimantal*/
left: 50px;
top: 0px;
background-color: rgb(69,75,83);
display: none;
transition: .5s;
}
#texter {
font-family: sans-serif;
color: white;
padding: 10px;
}
/*the power starts here*/
#line_container1:hover{
background-color: rgb(69,75,83);
}
#line_container2:hover{
background-color: rgb(69,75,83);
}
#line_container3:hover{
background-color: rgb(69,75,83);
}
#line_container4:hover{
background-color: rgb(69,75,83);
}
#sidebar_loader1:hover < #line_container1 {
background-color: red;
}
/*more*/
#line_container1:hover ~ #sidebar_loader1 {
z-index: -2;
}
#line_container2:hover ~ #sidebar_loader2 {
z-index: -2;
}
#line_container3:hover ~ #sidebar_loader3 {
z-index: 2;
}
#line_container4:hover ~ #sidebar_loader3 {
z-index: 2;
}
</style>
</head>
<body>
<div id="side_bar_container">
<div style="width:50px;height:50px;margin-left:auto;margin-right:auto;background-color:black;" id="logo" onmouseover="document.getElementById('sidebar_loader1').style.display='none';"></div>
<div class="line_container" id="line_container1" onmouseover="document.getElementById('sidebar_loader1').style.display='block';document.getElementById('sidebar_loader2').style.display='none';document.getElementById('sidebar_loader2').style.display='none';" onmouseout="">
<img src="http://www.maxwellmcmahon.com/img/source.png" alt="IMAGE" class="line_image">
<span class="line_text">
HTML5/JAVASCRIPT CODES
</span>
</div>
<div class="sidebar_loader" id="sidebar_loader1" onmouseover="document.getElementById('line_container1').style.background='rgb(69,75,83)';" onmouseout="document.getElementById('sidebar_loader1').style.display='none';document.getElementById('line_container1').style.background=''">
<span id="texter">TEST for 1</span>
</div>
<div class="line_container" id="line_container2" onmouseover="document.getElementById('sidebar_loader2').style.display='block';document.getElementById('sidebar_loader3').style.display='none';document.getElementById('sidebar_loader1').style.display='none';" onmouseout="">
<img src="1.png" alt="IMAGE" class="line_image" id="line_image">
<span class="line_text">
VIDEOS
</span>
</div>
<div class="sidebar_loader" id="sidebar_loader2" onmouseover="document.getElementById('line_container2').style.background='rgb(69,75,83)';" onmouseout="document.getElementById('sidebar_loader2').style.display='none';document.getElementById('line_container2').style.background=''">
<span id="texter">TEST for 2</span>
</div>
<div class="line_container" id="line_container3" onmouseover="document.getElementById('sidebar_loader3').style.display='block';document.getElementById('sidebar_loader4').style.display='none';document.getElementById('sidebar_loader2').style.display='none';" onmouseout="">
<img src="http://www.ejprescott.com/media/icons/tools-equipment.png" alt="IMAGE" class="line_image">
<span class="line_text">
SETTINGS
</span>
</div>
<div class="sidebar_loader" id="sidebar_loader3" onmouseover="document.getElementById('line_container3').style.background='rgb(69,75,83)';" onmouseout="document.getElementById('sidebar_loader3').style.display='none';document.getElementById('line_container3').style.background=''">
<span id="texter">TEST for 3</span>
</div>
<div class="line_container" id="line_container4" onmouseover="document.getElementById('sidebar_loader4').style.display='block';document.getElementById('sidebar_loader3').style.display='none';document.getElementById('sidebar_loader3').style.display='none';" onmouseout="">
<img src="https://cdn2.iconfinder.com/data/icons/freecns-cumulus/16/519591-089_Speechbubble2-128.png" alt="IMAGE" class="line_image">
<span class="line_text">
Forum
</span>
</div>
<div class="sidebar_loader" id="sidebar_loader4" onmouseover="document.getElementById('line_container4').style.background='rgb(69,75,83)';" onmouseout="document.getElementById('sidebar_loader4').style.display='none';document.getElementById('line_container4').style.background='';">
<span id="texter">TEST for 4</span>
</div>
<button onclick="document.getElementById('side_bar_container').style.display='none';" onmouseover="document.getElementById('sidebar_loader4').style.display='none';" title="close this navigation pane" style="width:50px;">X</button>
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>side bar</title>
<script type="text/javascript">
<style type="text/css">
body {
margin:0px;
background-color: rgb(255, 0, 214);
}
#side_bar_container {
width:50px;
background-color: #555C66;
height: 100%;
position:absolute;
transition:.5s;
}
.line_container{
height:50px;
background-color: #555C66;
padding-top: 4px;
padding-bottom: 4px;
border-bottom: 2px solid rgba(0, 0, 0, 0.18);
overflow: hidden;
position: relative;
}
#line_container1{
border-top: 2px solid rgba(0, 0, 0, 0.18)
}
.line_image{
width: 50px;
height: 50px;
float: left;
border-radius: 16px;
color: white;
}
.line_text{
margin-top: 16px;/*depends on other values*/
font-size:18px;
width:300px;
height:50px;
float: left;
color: black;
font-family: sans-serif;
position: relative;
z-index: -3px;
}
#logo {
width:50px;
height:50px;
margin-top: 5px;
margin-bottom: 5px;
border-radius: 50%;
}
.sidebar_loader{
width: 300px;
height: 100%;
display: ; /*very very important*/
z-index: -3;
position: absolute; /*works with fixed - absolute is experimantal*/
left: 50px;
top: 0px;
background-color: rgb(69,75,83);
display: none;
transition: .5s;
}
#texter {
font-family: sans-serif;
color: white;
padding: 10px;
}
/*the power starts here*/
#line_container1:hover{
background-color: rgb(69,75,83);
}
#line_container2:hover{
background-color: rgb(69,75,83);
}
#line_container3:hover{
background-color: rgb(69,75,83);
}
#line_container4:hover{
background-color: rgb(69,75,83);
}
#sidebar_loader1:hover < #line_container1 {
background-color: red;
}
/*more*/
#line_container1:hover ~ #sidebar_loader1 {
z-index: -2;
}
#line_container2:hover ~ #sidebar_loader2 {
z-index: -2;
}
#line_container3:hover ~ #sidebar_loader3 {
z-index: 2;
}
#line_container4:hover ~ #sidebar_loader3 {
z-index: 2;
}
</style>
</head>
<body>
<div id="side_bar_container">
<div style="width:50px;height:50px;margin-left:auto;margin-right:auto;background-color:black;" id="logo" onmouseover="document.getElementById('sidebar_loader1').style.display='none';"></div>
<div class="line_container" id="line_container1" onmouseover="document.getElementById('sidebar_loader1').style.display='block';document.getElementById('sidebar_loader2').style.display='none';document.getElementById('sidebar_loader2').style.display='none';" onmouseout="">
<img src="http://www.maxwellmcmahon.com/img/source.png" alt="IMAGE" class="line_image">
<span class="line_text">
HTML5/JAVASCRIPT CODES
</span>
</div>
<div class="sidebar_loader" id="sidebar_loader1" onmouseover="document.getElementById('line_container1').style.background='rgb(69,75,83)';" onmouseout="document.getElementById('sidebar_loader1').style.display='none';document.getElementById('line_container1').style.background=''">
<span id="texter">TEST for 1</span>
</div>
<div class="line_container" id="line_container2" onmouseover="document.getElementById('sidebar_loader2').style.display='block';document.getElementById('sidebar_loader3').style.display='none';document.getElementById('sidebar_loader1').style.display='none';" onmouseout="">
<img src="1.png" alt="IMAGE" class="line_image" id="line_image">
<span class="line_text">
VIDEOS
</span>
</div>
<div class="sidebar_loader" id="sidebar_loader2" onmouseover="document.getElementById('line_container2').style.background='rgb(69,75,83)';" onmouseout="document.getElementById('sidebar_loader2').style.display='none';document.getElementById('line_container2').style.background=''">
<span id="texter">TEST for 2</span>
</div>
<div class="line_container" id="line_container3" onmouseover="document.getElementById('sidebar_loader3').style.display='block';document.getElementById('sidebar_loader4').style.display='none';document.getElementById('sidebar_loader2').style.display='none';" onmouseout="">
<img src="http://www.ejprescott.com/media/icons/tools-equipment.png" alt="IMAGE" class="line_image">
<span class="line_text">
SETTINGS
</span>
</div>
<div class="sidebar_loader" id="sidebar_loader3" onmouseover="document.getElementById('line_container3').style.background='rgb(69,75,83)';" onmouseout="document.getElementById('sidebar_loader3').style.display='none';document.getElementById('line_container3').style.background=''">
<span id="texter">TEST for 3</span>
</div>
<div class="line_container" id="line_container4" onmouseover="document.getElementById('sidebar_loader4').style.display='block';document.getElementById('sidebar_loader3').style.display='none';document.getElementById('sidebar_loader3').style.display='none';" onmouseout="">
<img src="https://cdn2.iconfinder.com/data/icons/freecns-cumulus/16/519591-089_Speechbubble2-128.png" alt="IMAGE" class="line_image">
<span class="line_text">
Forum
</span>
</div>
<div class="sidebar_loader" id="sidebar_loader4" onmouseover="document.getElementById('line_container4').style.background='rgb(69,75,83)';" onmouseout="document.getElementById('sidebar_loader4').style.display='none';document.getElementById('line_container4').style.background='';">
<span id="texter">TEST for 4</span>
</div>
<button onclick="document.getElementById('side_bar_container').style.display='none';" onmouseover="document.getElementById('sidebar_loader4').style.display='none';" title="close this navigation pane" style="width:50px;">X</button>
You can see a demo here: http://jsbin.com/zoguqezu/1. Click the edit button in the top right hand corner to see the code and edit it.

Categories