Im using angularjs to loop over an array of images and they are all getting displayed on top off each other.
.modifier-list-icon {
left: 5px;
position: absolute;
top: auto;
}
.icon-small {
height: 20px;
width: 20px;
}
<span ng-if="list.images" ng-repeat="image in list.images">
<img ng-src="{{image.url}}" alt="Icon"
class="icon-small modifier-list-icon"/>
</span>
this is how the images look like with the code from above.
I changed the position to position: relative; ^^
I want both of the images to display next to each other like the second screenshot but I want the images to be placed to the left like the first screenshot.
I tend to prefer a flexbox solution for these kinds of things. I repeated the entry once so you can see how shorter labels will cause the right side to shrink, but all of the nested elements stay positioned:
.container {
border: 1px solid black;
/*
by using display flex, we let the child containers use as much
width as they need, and we can keep their text-alignment separate
*/
display: flex;
}
.icon-container,
.label-container {
/*
flex grow is set to 1 and flex-basis to auto so that the child elements
will stretch to use all the available horizontal space.
one or the other could be dropped here
*/
flex: 1 1 auto;
border: 1px solid red;
display: inline-block;
}
.icon-container>*,
.label-container>* {
border: 1px solid black;
}
.label-container {
/*
creating the white space between the left-side icons and
right-side label/icon is just a matter of having
text-alignments
*/
text-align: right;
}
<div class="container" ng-if="list.images" ng-repeat="image in list.images">
<div class="icon-container">
<img ng-src="{{image.url}}" alt="An icon" class="icon-small modifier-list-icon" />
<img ng-src="{{image.url}}" alt="Also an icon" class="icon-small modifier-list-icon" />
</div>
<div class="label-container">
<span>some text very long text on the right side</span>
<img alt="another icon" />
</div>
</div>
<div class="container" ng-if="list.images" ng-repeat="image in list.images">
<div class="icon-container">
<img ng-src="{{image.url}}" alt="An icon" class="icon-small modifier-list-icon" />
<img ng-src="{{image.url}}" alt="Also an icon" class="icon-small modifier-list-icon" />
</div>
<div class="label-container">
<span>another entry</span>
<img alt="another icon" />
</div>
</div>
Remove position: absolute and position relative, apply display: inline-block
Hope below code example will solve your problem. If there is any other condition, please let me know.
body {
font: 16px "Roboto", Arial, sans-serif;
}
.block {
padding: 10px;
margin: 0 0 20px;
}
.block h3 {
font-size: 18px;
font-weight: bold;
margin: 0 0 10px;
}
ul{
margin:0;
padding:0;
list-style:none;
}
li {
display: table;
width: 100%;
margin: 0 0 10px;
padding: 10px 15px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box;
}
.actions {
display: table-cell;
white-space: nowrap;
}
.actions img {
margin-left: 10px;
}
.actions img:first-child {
margin-left: 0;
}
.title {
display: table-cell;
padding: 0 30px 0 10px;
text-align: right;
position: relative;
vertical-align: middle;
}
.title img {
position: absolute;
right: 0;
top: 0;
}
.list2 li {
display: flex;
}
.list2 .title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
}
<div class="block">
<h3>List with wrap title</h3>
<ul>
<li>
<div class="actions"><img src="https://image.flaticon.com/icons/svg/583/583988.svg" width="20"></div>
<div class="title"><span>Small Title</span><img src="https://image.flaticon.com/icons/svg/584/584017.svg" width="20"></div>
</li>
<li>
<div class="actions"><img src="https://image.flaticon.com/icons/svg/583/583985.svg" width="20"> <img src="https://image.flaticon.com/icons/svg/583/583988.svg" width="20"></div>
<div class="title"><span>Long Title goes here Long Title goes hereLong Title goes hereLong Title goes here</span><img src="https://image.flaticon.com/icons/svg/584/584017.svg" width="20"></div>
</li>
<li>
<div class="actions"><img src="https://image.flaticon.com/icons/svg/583/583985.svg" width="20"> <img src="https://image.flaticon.com/icons/svg/583/583988.svg" width="20"> <img src="https://image.flaticon.com/icons/svg/583/583985.svg" width="20"> <img src="https://image.flaticon.com/icons/svg/583/583988.svg"
width="20"></div>
<div class="title"><span>Long Title with multiple action</span><img src="https://image.flaticon.com/icons/svg/584/584017.svg" width="20"></div>
</li>
<ul>
</div>
<div class="block">
<h3>List with truncate title </h3>
<ul class="list2">
<li>
<div class="actions"><img src="https://image.flaticon.com/icons/svg/583/583988.svg" width="20"></div>
<div class="title">Small Title<img src="https://image.flaticon.com/icons/svg/584/584017.svg" width="20"></div>
</li>
<li>
<div class="actions"><img src="https://image.flaticon.com/icons/svg/583/583985.svg" width="20"> <img src="https://image.flaticon.com/icons/svg/583/583988.svg" width="20"></div>
<div class="title">Long Title goes here Long Title goes hereLong Title goes hereLong Title goes here<img src="https://image.flaticon.com/icons/svg/584/584017.svg" width="20"></div>
</li>
<li>
<div class="actions"><img src="https://image.flaticon.com/icons/svg/583/583985.svg" width="20"> <img src="https://image.flaticon.com/icons/svg/583/583988.svg" width="20"> <img src="https://image.flaticon.com/icons/svg/583/583985.svg" width="20"> <img src="https://image.flaticon.com/icons/svg/583/583988.svg"
width="20"></div>
<div class="title">Long Title with multiple action<img src="https://image.flaticon.com/icons/svg/584/584017.svg" width="20"></div>
</li>
<ul>
Related
I am trying to make AOS flip-up animations start when the page is initially loaded.
I am refering to the animations applied to img items in <div class="social-media"> , i am using the data-aos="flip-up" animation on these items.
Noob question: can i use multiple animation libraries in the same html file (on different elements ofc)?
Perhaps i should be using a different animation library other than AOS since that one is specifically meant for on-scroll animation, i was wondering if it was possible to do with AOS though. thanks
Currently the animations only start when i scroll down the page or when i refresh the page when already scrolled down. when i scroll up to the top of the page the animation for these images is played in reverse (the images flip down and they become invisible after the animation has finished). I tried finding how to make the animation start when page is loaded, i've seen suggestions to use javascript to animate a scrolling animation as such:
<script>
AOS.init();
AOS.refresh(); // initialize AOS animations
$(document).ready(function(){
$("body,html").animate({
scrollTop: 10
}, 1000);
$("body,html").animate({
scrollTop: 0
}, 1);
});
</script>
But adding this script snippet to my code doesnt seem to do anything (animations still behave the same). My current code:
<!Doctype HTML>
<head>
<title>Troos Bouw</title>
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'> <!-- Font -->
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet"> <!-- On scroll animations -->
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script> <!-- On scroll animations -->
</head>
<style type="text/css">
*{margin:0;}
html {
scroll-behavior: smooth;
}
/* Footer styles */
footer {
background-color: rgb(0, 0, 0);
position: fixed;
bottom: 0;
width: 100%;
padding-top: 1vh;
padding-bottom: 1vh;
padding-left: 1vh;
color: #fff;
/* padding: 1em; */
display: flex;
justify-content: space-between;
box-shadow: 0px 2px 10px 0px rgba(255, 255, 255, 0.5);
z-index:1002;
}
footer .social-media ul {
list-style: none;
margin: 0;
padding: 0;
}
footer .social-media ul a{
text-decoration: none; /* remove underline from social-links */
}
ul.footerlist li {
display:inline;
list-style: none;
}
.socials-img{ /* social icons; image size, background */
height: 2.5vh;
background-color: red;
opacity: 1
}
#filler{
background-color: aqua;
height: 1000vh;
}
.header{
position: fixed;
width:100%;
padding-bottom: 15px;
height: 80px;
background-color: rgba(2, 2, 2, 0.7);
box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.5);
z-index: 1000;
}
.header ul{
text-align: center;
}
.header ul li{
list-style: none;
display: inline-block;
padding-top: 9px;
background-color: red;
}
.header ul li a{
display: inline-block;
text-decoration: none;
text-transform: uppercase;
font: size 20px;
font-family: 'Raleway', sans-serif;
letter-spacing: 2px;
font-weight: 1000;
padding: 25px ;
color: rgb(252, 252, 252);
transition: all ease 0.5s;
border-radius: 20px;
}
.header ul li a:hover{
background-color: rgba(160, 159, 159, 0.5);
}
.logoText{
width:200px;
margin-left: 1vw;
margin-top:2.5vh;
position: fixed;
z-index: 1001;
background-color: red;
}
.logoIcon{
margin-top: 10px ;
height:100px;
margin-left: 90vw;
position: fixed;
z-index: 1001;
background-color: red;
}
</style>
<body>
<header id="theHeader">
<!-- WEBSITE NAME TOP LEFT -->
<img class="logoText" data-aos="flip-down" data-aos-duration="1000" data-aos-delay="100" src="img/troosText.png" >
<img class="logoIcon" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1500" src="img/TROOS geen achtergrond 1.png" >
<!-- TOP NAV. MENU -->
<div class="header">
<ul>
<li><a data-aos="flip-down" data-aos-easing="linear" data-aos-duration="1500" href="#theHeader">home</a></li>
<li><a data-aos="flip-down" data-aos-easing="linear" data-aos-duration="1500" href="#about">about</a></li>
<li><a data-aos="flip-down" data-aos-easing="linear" data-aos-duration="1500" href="url">service</a></li>
<li><a data-aos="flip-down" data-aos-easing="linear" data-aos-duration="1500" href="url">gallery</a></li>
<li><a data-aos="flip-down" data-aos-easing="linear" data-aos-duration="1500" href="url">home</a></li>
</ul>
</div> <!-- end of header -->
<!-- <div id="transparentDiv" class="down-arrow">
<div id="arrowText" style="display: flex; align-items: center; justify-content: center; font-size: 200%;">ARROWTEXT</div>
<img style="display: flex; align-items: center; justify-content: center;" src="img/UI/arrow.png" background-color="red ">
</div> Arrow button which when clicked scrolls down -->
<div id="transparentDiv" style="display: flex; flex-direction:column; align-items: center; justify-content: center;">
<img src="img/UI/troos text banner.png" background-color="red">
<img src="img/UI/view more button purple.png" >
<!-- <button class="grey-button">Our Projects
<img src="img/UI/arrow.png" class="arrow">
</button> -->
</div>
<!-- <img src="your-image-url.jpg" class="bg-img" alt="Background Image"> -->
<img src="img/Troos BG lowres_auto_x2.jpg" class="bg-img" alt="Background Image" >
</header>
</header>
<div id="filler">filler</div>
</body>
</section>
<footer>
<div class="social-media">
<h3>Connect with us</h3>
<ul class="footerlist">
<li><img data-aos="flip-up" data-aos-duration="1000" data-aos-delay="100" data-aos-once="false" class="socials-img" src="img/socials/Socials_Insta.png" > </li>
<li><img data-aos="flip-up" data-aos-duration="1000" data-aos-delay="300" data-aos-once="false" class="socials-img" src="img/socials/socials_FB.png" > </li>
<li><img data-aos="flip-up" data-aos-duration="1000" data-aos-delay="500" data-aos-once="false" class="socials-img" src="img/socials/socials_WA.png" > </li>
<li><img data-aos="flip-up" data-aos-duration="1000" data-aos-delay="700" data-aos-once="false" class="socials-img" src="img/socials/socials_TW.png" > </li>
<li><img data-aos="flip-up" data-aos-duration="1000" data-aos-delay="900" data-aos-once="false" class="socials-img" src="img/socials/Socials_G+.png" > </li>
</ul>
</div>
</footer>
<script>
AOS.init();
AOS.refresh(); // initialize AOS animations
</script>
</html>
NOTE: I have added a red background color to the animated elements such that they are easily visible (theyre placed in the bottom left corner). Also added a big div "filler" to the body such that scrolling is possible.
What is strange to me is that in the header i've added some animated elements as well (same AOS animation) which for some reason do load immediately when the page loads even when scrolled all the way up. I've added the code for these header element
Thank you!
To stop the animation while scrolling back you can use attribute to element
data-aos-once="true"
https://github.com/michalsnik/aos#-advanced-settings
This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed last year.
I want to put my photos according to the following plan:
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
ul > li {
width: 49%;
}
ul > li img {
width: 100%;
margin-block-end: 0.25rem;
}
<ul>
<li>
<img src="img/study-image-1.png" alt="">
</li>
<li>
<img src="img/study-img-3.png" alt="">
</li>
<li>
<img src="img/study-img-2.png" alt="">
</li>
<li>
<img src="img/study-img-4.png" alt="">
</li>
</ul>
But when I did my design based on the following code, it was like this.
Thank you in advance for your cooperation
Do you want something like this?, you don´t need javascript
https://codepen.io/marcosefrem/pen/KKXELPy
<ul>
<li>
<img src="https://picsum.photos/500/400" alt="">
</li>
<li>
<img src="https://picsum.photos/100/50" alt="">
</li>
<li>
<img src="https://picsum.photos/200/200" alt="">
</li>
<li>
<img src="https://picsum.photos/100/400" alt="">
</li>
<li>
<img src="https://picsum.photos/500/400" alt="">
</li>
<li>
<img src="https://picsum.photos/100/50" alt="">
</li>
<li>
<img src="https://picsum.photos/200/200" alt="">
</li>
<li>
<img src="https://picsum.photos/100/400" alt="">
</li>
</ul>
<style>
ul {
column-count: 3;
column-gap: 1.25rem;
}
li {
break-inside: avoid-column;
position: relative;
display: inline-block;
width: 100%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
li img {width:100%; object-fit:cover}
</style>
For this fairly straightforward layout where it must be known that the aspect ratios of the two bigger images are the same as are the aspect ratios of the two smaller images you could use CSS two columns:
ul {
columns: 2;
width: 50vw;
font-size: 4px;
}
li img {
width: 100%;
height: auto;
margin: 2px 0 2px 0;
}
<ul>
<li><img src="https://picsum.photos/id/1016/100/50"></li>
<li><img src="https://picsum.photos/id/1015/200/300"></li>
<li><img src="https://picsum.photos/id/1016/200/300"></li>
<li><img src="https://picsum.photos/id/1015/100/50"></li>
</ul>
Note - the vertical gap depends on font-size, hence the 4px to match the 2x2px of the margins. Obviously you will want to adjust this and the width of the whole thing to suit your particular needs.
Also can use from divs instead ul and li:
.container {
width: 300px;
grid-template-rows: 100px 100px 100px;
display: grid;
grid-template-areas: 'one tow' 'tree tow' 'tree four';
grid-gap: 10px;
}
img {
width: 100%;
height: 100%;
margin-block-end: 0.25rem;
}
.item1 {
grid-area: one;
}
.item2 {
grid-area: tow;
}
.item3 {
grid-area: tree;
}
.item4 {
grid-area: four;
}
<div class="container">
<div class="item1">
<img src="https://s4.uupload.ir/files/7560b48482bfae5c-02b97ffc647f-3822363654_tji3.jpg" alt="">
</div>
<div class="item2">
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" alt="">
</div>
<div class="item3">
<img src="https://s4.uupload.ir/files/717195_346_g0du.jpg" alt="">
</div>
<div class="item4">
<img src="https://s4.uupload.ir/files/0.270967001322580170_jazzaab_ir_ajvv.jpg" alt="">
</div>
</div>
I'm having an issue with HTML sections. As shown in the screenshot the blue spot are the sections and they should include the grey space. The white space is what lays inside the section tags in HTML.
The problem was discovered when trying to add some space between each section, but everything we tried it wouldn't do anything.
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
let mainNavLinks = document.querySelectorAll("nav ul li a");
let mainSections = document.querySelectorAll("main section");
let lastId;
let cur = [];
// This should probably be throttled.
// Especially because it triggers during smooth scrolling.
// https://lodash.com/docs/4.17.10#throttle
// You could do like...
// window.addEventListener("scroll", () => {
// _.throttle(doThatStuff, 100);
// });
// Only not doing it here to keep this Pen dependency-free.
window.addEventListener("scroll", event => {
let fromTop = window.scrollY;
mainNavLinks.forEach(link => {
let section = document.querySelector(link.hash);
if (
section.offsetTop <= fromTop &&
section.offsetTop + section.offsetHeight > fromTop
) {
link.classList.add("current");
} else {
link.classList.remove("current");
}
});
});
html {
scroll-behavior: smooth;
}
body {
margin: 0;
display: grid;
grid-template-columns: min-content 1fr;
font-family: 'Roboto';
background-color: grey;
/* this breaks position sticky in Firefox */
/* overflow-x: hidden; */
}
header {
grid-column: 1 / 3;
background: #5D5C61;
background-image: url("../Assets/Images/headerImage.jpg");
image-resolution: 1200x1400;
color: white;
padding: 4rem;
text-align: center;
font-family: 'Chivo';
font-size: 22px;
}
header a {
padding-right: 20px;
color: white;
text-decoration: underline;
}
header h1 {
color: #fb6542;
}
nav {
white-space: nowrap;
background: #37474F;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
/* Only stick if you can fit */
#media (min-height: 300px) {
nav ul {
position: sticky;
top: 0;
}
}
nav ul li a {
display: block;
padding: 0.5rem 1rem;
color: white;
font-size: 20px;
text-decoration: none;
}
nav ul li a.current {
background: #51656E;
}
main {
padding-top: -30px;
}
section {
padding: 2rem;
margin: 0 0 10% 0;
background-color: lightblue;
display: block;
}
footer {
grid-column: 1 / 3;
background: #252E39;
padding: 5rem 1rem;
}
a {
color: black;
text-decoration: none;
}
main a {
display: inline-block;
padding-bottom: 20px;
}
a:hover {
color: #6B7B83;
text-decoration: underline;
}
a:active {
color: #6B7B83;
}
.socialIcon {
height: 20px;
width: 20px;
}
#socialMedia {
text-align: center;
}
.CALink:hover {
color: #202F36;
}
.container {
width: 70%;
height: 100%;
float: left;
display: inline-block;
flex-wrap: wrap;
font-family: 'Alegreya Sans', sans-serif;
}
.control-group {
display: inline-block;
vertical-align: top;
background: #FFFFFF;
text-align: left;
box-shadow: 0px 1px 2px rgba(0.2, 0.2, 0, 0.2);
padding: 30px;
width: 100%;
height: 100%;
margin: 1%;
align-items: center;
}
.containerRight {
width: 20%;
height: 20%;
float: right;
display: inline-block;
flex-wrap: wrap;
font-family: 'Alegreya Sans', sans-serif;
}
.control-groupRight {
display: inline-block;
vertical-align: top;
background: #FFFFFF;
text-align: center;
box-shadow: 0px 1px 2px rgba(0.2, 0.2, 0, 0.2);
width: 100%;
height: 100%;
align-items: center;
margin: 4% 1% 1% 1%;
}
.navTitle {
text-decoration: underline;
}
.endOfModule {
margin-bottom: 20px;
}
.sectionHolder {
width: 100%;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="CSS/StyleSheet.css" rel="stylesheet" type="text/css"/>
<link href="CSS/linkHover.css" rel="stylesheet" type="text/css"/>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<link rel="icon" href="Assets/Images/faviconTTT.png"/>
<title>Silverflame</title>
</head>
<body>
<header>
<div id="socialMedia">
<img class="socialIcon" src="Assets/Images/mark-github.svg" alt="logo" />
<img class="socialIcon" src="Assets/Images/twitterSVG.svg" alt="twitter logo"/>
</div>
<h1>SilverFlame</h1>
<h5>Jesper Christensen</h5>
<a target="headerLink" href="https://www.thesilverflame.dk/">Home</a>
<a target="headerLink" href="https://www.thesilverflame.dk/CA.html">CA</a>
<a target="headerLink" href="">About</a>
Contact
</header>
<nav>
<ul>
<li>Module 1</li>
<li>Maven</li>
<li>Network and HTTP</li>
<li>JavaScript & CA1</li>
<li>Module 2</li>
<li>ORM with JPA</li>
<li>Rest webservices with JAX-RS</li>
<li>JavaScript</li>
<li>CA2</li>
<li>Module 3</li>
<li>SYS 1</li>
<li>?</li>
<li>SYS 2</li>
<li>Module 4</li>
<li>SPA with React (TBD)</li>
<li>React routing, Security and RN</li>
<li>CA3 (TBD)</li>
<li>Module 5</li>
<li>Project - Week 1</li>
<li>Project - Week 2</li>
<li>Project - Week 3</li>
</ul>
</nav>
<main>
<section id="section-1">
<div class="container">
<div class="control-group">
<h2>Module 1 - Maven, Test & Network</h2>
</div>
</div>
</section>
<section id="section-2">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>Maven</h2>
<div class="tooltip">
Simple Calculator
<span class="tooltiptext">Github link</span>
</div>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-3">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>Network & HTTP</h2>
Exercises - Network stack
<br>
Exercise HTTP
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-4">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>JavaScript and CA1</h2>
The JS array
<br>
JavaScript Exercice 1
<br>
Course Assignment 1
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-5">
<div class="container">
<div class="control-group">
<h2>Module 2 - Webstack</h2>
</div>
</div>
</section>
<section id="section-6">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>ORM with JPA</h2>
<h2>Study Point Exercise 3 - JPA, JPQL and Testing </h2>
<h3>Part 1</h3>
Exercise - JPA Entity Mappings - 1
<br>
Exercise - Java Persistence - Querying - 3
<h3>Part 2</h3>
Studypoint part two
<h3>Part 3</h3>
Exam Preparation Exercise on relations and queries
<br>
Exam Preparation Exercise on JPQL
<br>
Object Relational Mapping and Inheritance
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-7">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>Rest webservices with JAX-RS</h2>
<p>Add content</p>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-8">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>JavaScript</h2>
<p>Add content</p>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-9">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>Course Assignment 2</h2>
<p>Add content</p>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-10">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>ORM with JPA</h2>
<p>Add content</p>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
</main>
<footer>
©2022
</footer>
<script src="Assets/JS/hoverEffect.js" type="text/javascript"></script>
<script src="Assets/JS/frontpage.js" type="text/javascript"></script>
</body>
</html>
You are applying a float to the container which takes the item out of the document flow. Consider using flexbox instead of floats for layout.
.sectionHolder {
width: 100%;
margin: auto;
display: flex;
}
.container {
flex: 1 1 70%;
height: 100%;
font-family: 'Alegreya Sans', sans-serif;
}
.containerRight {
flex: 0 0 20%;
height: 20%;
font-family: 'Alegreya Sans', sans-serif;
}
This is a well-known issue when working with floated content. The height of the section elements are not being properly calculated because the floated content is not in the normal document flow.
Add overflow:auto; to the section elements which should correct the issue by forcing the rendering engine to recalculate the height of the element and once it does that, it should recognize the child content and factor it in.
Here's more on the issue and other solutions.
I am trying to create a photo gallery app and came across some obstacles. I want to have each image take equal portion of the div, for example if there are two images, each image takes up 50% of the div, and if there are three images, each images takes up 33.33% of the div, etc. Further, is there a way to format those images to be in square dimensions through css?
Also, I have the photos-gallery div that contains h2 and photos-gallery-content div. Currently, I am hardcoding the height for the photos-gallery-content div to fit inside the parent div, but is there a way to make that div take the remainder of the height of its parent div?
Eventually I want the pictures to render dynamically using React so any recommendations/advice on that would help a lot too.
Here is my code:
#photos {
width: 634px;
height: 339px;
}
.photos-gallery {
width: 634px;
height: 275.03px;
}
.photos-gallery-header {
font-size: 24px;
font-weight: bold;
line-height: 32px;
color: #333333;
border-bottom: 1px solid #E1E1E1;
padding-bottom: 16px;
margin: 0 0 16px 0;
display: flex;
justify-content: space-between;
}
.photos-gallery-content {
height: 200px;
}
.photos-gallery-layout {
height: 200px;
overflow: hidden;
float: left;
display: flex;
margin: 0;
padding: 0;
}
.photos-gallery-layout li {
height: auto;
float: left;
list-style: none;
display: flex;
}
.photo {
display: inline-flex;
white-space: nowrap;
}
.photo img {
max-width: 100%;
max-height: auto;
display: inline-block;
vertical-align: middle;
}
<div id="photos-gallery" class="photos content-block">
<h2 class="photos-gallery-header"> 2 Photos </h2>
<div class="photos-gallery-content">
<ul class="photos-gallery-layout">
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/8pTwPlXb.jpg" />
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/OPAR3PCb.jpg" />
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/A8eQsll.jpg" />
</div>
</li>
</ul>
</div>
<div>
I used your HTML and wrote a little CSS to demonstrate how to:
Have any amount of items fit at equal widths in one row using flexbox (display: flex on the parent and flex: 1 on the children)
Have <img> elements crop to the shape of the tallest element (in this case, a square) using object-fit: cover (note compatibility on CanIUse)
.photos-gallery-layout {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
.photos-gallery-li {
flex: 1;
}
.photo,
.photo img {
height: 100%;
}
.photo img {
width: 100%;
object-fit: cover;
}
<ul class="photos-gallery-layout">
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/8pTwPlXb.jpg" />
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/OPAR3PCb.jpg" />
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/A8eQsll.jpg" />
</div>
</li>
</ul>
What I want to do:
I want to add a "walkingMan" image under an element when its class is changed to activeCell. I know how to do it when the image is added to the front or back of the element using pseudo class, but as far as I know, there isn't something like :below that I can use to achieve the same effect. Is there a way in css I can use to micmic this?
What I have done:
I have added image below every upper cell and make it visible when the class is changed to activeCell. But I hope to find a more simple solution.
What it looks like:
Code: Simplified Code Example
You can use a single pseudo element on the .cell element and place a background image on it when it's active.
let activeIndex = 0;
const cells = [...document.querySelectorAll('.cell')];
setInterval(() => {
cells.forEach(cell => {
cell.classList.remove('activeCell')
});
cells[activeIndex].classList.add('activeCell');
activeIndex = activeIndex === cells.length - 1 ? 0 : (activeIndex + 1);
}, 300)
.cell {
display: inline-block;
border: 1px solid black;
margin-bottom: 1.2em;
}
.activeCell {
background-color: lightgrey;
position: relative;
}
.activeCell::after {
content: "";
position: absolute;
width: 1em;
height: 1em;
top: 1.3em;
left: calc(50% - .5em); /* Center the stickman. Position it half of its width before the parent center*/
background-image: url('https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png');
background-size:cover; /* Scale the stickman to completely cover the background area. */
}
<div>
<div class='top'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
<div class='bottom'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
</div>
What about this: https://jsfiddle.net/147prwy5/3/
HTML
<div class="cell active">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell active">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
CSS
.cell {
display: inline-block;
}
.cell a {
border: 1px solid black;
}
.cell.active a {
background-color: lightgrey;
}
.cell img {
width: 20px;
height: 20px;
display: none;
}
.cell.active img {
margin-top: 5px;
width: 20px;
height: 20px;
display: block;
}
I've never been a fan of the ::before and ::after pseudo classes mainly because I've personally noticed some oddities when trying to position things in Chrome vs IE (damn it IE!). Since most people here are going to give a solution using these pseudo classes (because that's somewhat what you asked) I thought I'd give a different solution using flexbox and more divs.
Not the most optimal for download size but I do like that it's not absolute positioning elements and if the squares get bigger or smaller it's pretty easy to handle that as a scss variable at the top of the file. This all uses only two values, your padding between boxes and the size of the boxes so it should be easy to update and maintain.
Anyway, have fun! Awesome question by the way :-)
.blocks {
display: flex;
}
.block {
flex: 0 0 20px;
margin: 0px 5px;
display: flex;
flex-direction:column;
}
.block > .square {
flex: 0 0 20px;
margin: 5px 0px;
background: grey;
}
.block > .space {
flex: 0 0 20px;
margin: 5px 0px;
}
.block.activeCell > .space {
background: green;
}
<div class="blocks">
<div class="block activeCell"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
</div>
<div class="blocks">
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
</div>
Using jQuery you can toggle the class upon clicking with this:
$('.cell').click(function() { //catch clicks on .cell
$('.cell').removeClass('activeCell'); //remove class "activeCell" from all
$(this).addClass('activeCell'); //add class "activeCell" to .cell clicked
});
Apply position: relative; to .top and .bottom:
.top,
.bottom {
position: relative;
}
And use the psuedoclass :before to create a image under the .activeCell
.activeCell:before {
content: "";
position: absolute;
bottom: -20px;
height: 20px;
width: 20px;
background-image: url("https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png");
background-size: 20px 20px;
}
And remove this:
.walkingMan {
width: 20px;
height: 20px;
display: inline-block
}
And this:
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" class='walkingMan'/>
And to add space between the divs .top and .bottom put a <br> between them.
$('.cell').click(function() {
$('.cell').removeClass('activeCell');
$(this).addClass('activeCell');
});
.cell {
display: inline-block;
border: 1px solid black;
cursor: pointer;
}
.top,
.bottom {
position: relative;
}
.activeCell {
background-color: lightgrey;
}
.activeCell:before {
content: "";
position: absolute;
bottom: -20px;
height: 20px;
width: 20px;
background-image: url("https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png");
background-size: 20px 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
<div class='top'>
<a class='cell activeCell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
<br>
<div class='bottom'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
</div>
add .RunManActive Class for Active element
//clicking add active Class
$(".RunMan").click(function() {
$(".RunMan").removeClass('RunManActive');
$(this).toggleClass('RunManActive');
});
//timing add active Class
var i=0;
var $elm=$(".Animate");
setInterval(function(){
$elm.removeClass('RunManActive');
$elm.eq(i).toggleClass('RunManActive');
i=$elm.length<=i?0:i+1;
}, 1000);
.RunMan{
width:35px;
height:35px;
background-color:lightgray;
border:3px solid #fff;
float:left;
position: relative;
}
.RunManActive{
background-color:#eee;
border:3px solid lightgray;
}
.RunManActive > div{
width:35px;
height:35px;
position: absolute;
background-image:url(http://www.iconsfind.com/wp-content/uploads/2013/11/Objects-Running-man-icon.png);
background-size:cover;
top:100%;
margin-top:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="RunMan"><div></div></div>
<div class="RunMan RunManActive"><div></div></div>
<div class="RunMan"><div></div></div>
<div class="RunMan"><div></div></div>
<div class="RunMan"><div></div></div>
<br><br><br><br><br><br>
<div style=" width:100%">
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan "><div></div></div>
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan"><div></div></div>
You can do something like this, using CSS only. With :target selector you can apply a style to the element you need to hide / show.
.container {
display: inline-block;
width: 100px;
height: 200px;
}
.link {
display: block;
width: 100px;
height: 100px;
background: #ccc;
}
.walking-man {
display: none;
width: 100px;
height: 100px;
background: red;
}
#p1:target {
display: block;
}
#p2:target {
display: block;
}
#p3:target {
display: block;
}
#p4:target {
display: block;
}
height: 90px;
float: left;
}
.walking-man img {
width: 100%;
}
.walkin-man:target {
display: block;
}
<div class="container">
<div id="p1" class="walking-man"></div>
</div>
<div class="container">
<div id="p2" class="walking-man"></div>
</div>
<div class="container">
<div id="p3" class="walking-man"></div>
</div>
<div class="container">
<div id="p4" class="walking-man"></div>
</div>