I am creating a website about a person, but I ran into a problem. I am using pico CSS and a library called aos animation(animation on scroll). When I scroll up, I see a horizontal scroll bar. When I scroll back down, I see no horizontal scroll. Scroll up and down on my website and notice how the horizontal scroll is visible when you scroll up and invisible when you scroll down. My main problem is that I want that horizontal scroll bar to be gone. It should not be visible. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://unpkg.com/#picocss/pico#latest/css/pico.min.css"
/>
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet" />
</head>
<body>
<!--Header-->
<header
class="container-fluid"
data-aos="fade-up"
data-aos-easing="linear"
data-aos-duration="1500"
>
<article data-theme="light">
<h1>{name}</h1>
</article>
</header>
<!--Navigation-->
<nav
class="container-fluid"
data-aos="fade-up"
data-aos-easing="linear"
data-aos-duration="1500"
>
<ul>
<li><strong>JL</strong></li>
</ul>
<ul>
<li>About</li>
<li>Achievements</li>
</ul>
</nav>
<!--Main Reading-->
<main>
<article
class="container-fluid"
data-aos="fade-right"
data-aos-easing="linear"
>
<h2 id="about">About</h2>
<!--Type about him here-->
<small
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores hic
doloribus reprehenderit iusto vitae debitis obcaecati non quis modi
aperiam commodi cum cupiditate, optio, maxime provident repellat
accusamus eveniet aspernatur.</small
>
<blockquote data-aos="zoom-in">
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non.
Nam at dui sit amet ipsum cursus ornare."
<footer>
<cite>- Phasellus eget lacinia</cite>
</footer>
</blockquote>
</article>
<article
class="container-fluid"
data-aos="fade-left"
data-aos-easing="linear"
>
<h2 id="achieve">Achievements</h2>
<!--Type about him here-->
<!--Fact 1-->
<details data-aos="flip-left">
<summary role="button">Fact 1</summary>
<!--Type fact here-->
<small
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
voluptatum laborum cum, voluptas aliquam repudiandae minus
quibusdam, unde labore, quisquam nemo error perferendis. Sed
excepturi atque fugiat quis, quisquam cupiditate?</small
>
</details>
<!--Fact 2-->
<details data-aos="flip-right">
<summary role="button" class="secondary">Fact 2</summary>
<!--Type fact here-->
<small
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
voluptatum laborum cum, voluptas aliquam repudiandae minus
quibusdam, unde labore, quisquam nemo error perferendis. Sed
excepturi atque fugiat quis, quisquam cupiditate?</small
>
</details>
<!--Fact 3-->
<details data-aos="flip-left">
<summary role="button" class="contrast">Fact 3</summary>
<!--Type fact here-->
<small
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
voluptatum laborum cum, voluptas aliquam repudiandae minus
quibusdam, unde labore, quisquam nemo error perferendis. Sed
excepturi atque fugiat quis, quisquam cupiditate?</small
>
</details>
</article>
</main>
<!--Footer, Credits(You may fix)-->
<footer
class="container-fluid"
data-aos="fade-down"
data-aos-easing="linear"
data-aos-duration="1500"
>
<article data-theme="light">
<!--You can add other stuff here-->
<small>{Write Credits}</small>
</article>
</footer>
<script src="https://unpkg.com/aos#next/dist/aos.js"></script>
<script defer>
AOS.init();
</script>
</body>
</html>
I tried changing the class="container" to class="container-fluid". But it still didn't work.
From what I've studied here you have two options:
The easy way:
body {
overflow-x: hidden;
}
This code will prevent the scrollbar from appearing. Many sites do this.
Or, if you want to be more specific and keep the scrollbar in the body, you can just place it on the element that is being affected by its effect, in this case, main:
main {
overflow-x: hidden;
}
The tricky way:
What is happening is that [data-aos="flip-left"] is throwing a CSS translate3d(100px) which flips your element forward by 100px. As the element already occupies 100% these 100px more pass the screen and you get the scroll.
You can work around this and keep the effect by throwing -100px to compensate for this as follows:
[data-aos=fade-left] {
transform: translate3d(100px, 0, 0) translateX(-100px)
}
I also noticed that the scrollbar can appear because the 'perspective' CSS is set too low (2500px). Increase it to 9999px and it won't happen anymore. In case, it appears sometimes so the code to fix is this:
[data-aos=flip-left] {
transform: perspective(9999px) rotateY(-100deg)
}
[data-aos=flip-left].aos-animate {
transform: perspective(9999px) rotateY(0)
}
[data-aos=flip-right] {
transform: perspective(9999px) rotateY(100deg)
}
[data-aos=flip-right].aos-animate {
transform: perspective(9999px) rotateY(0)
}
[data-aos=flip-up] {
transform: perspective(9999px) rotateX(-100deg)
}
[data-aos=flip-up].aos-animate {
transform: perspective(9999px) rotateX(0)
}
[data-aos=flip-down] {
transform: perspective(9999px) rotateX(100deg)
}
[data-aos=flip-down].aos-animate {
transform: perspective(9999px) rotateX(0)
}
I put these two codes together and on my computer it didn't happen anymore. It is worth testing further to see if the effect has really not been compromised. Anyway, usually the most obvious thing is to really remove the scrollbar from the body itself, but it's up to you.
Related
I am trying to build this using pure HTML & CSS-
where we will have 3 blue boxes beside each other, and each box has a title,text & clickable button (which open an external url such as https://stackoverflow.com)..
now i wrote this HTML:-
<p style='border-style:solid;background-color:#0096FF;color:white'>
<div style='text-align:center;background-color:#0096FF;color:white'>Registration</div>
<div style='text-align:left;background-color:#0096FF;color:white'>Find Our what do you want to renew,replace on your vechcile</div>
</p>
but i got this poor layout:-
any advice how i can achieve the HTML inside the above picture?
Thanks
You can use a flexbox or grid. Here is an exemple of code with flexbox:
index.html
<!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="styles.css">
</head>
<body>
<main>
<div class="box">
<H1>My Box 1</H1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum mollitia ab neque quos odio. Deleniti accusamus porro officiis fugit quidem temporibus doloremque, natus tempore beatae unde soluta delectus dicta cumque?</p>
<button>My button</button>
</div>
<div class="box">
<H1>My Box 2</H1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta officia ullam asperiores culpa impedit aliquam hic natus? Accusantium esse id accusamus ratione! Sequi quos veritatis vel amet, velit illum incidunt.</p>
<button>My button</button>
</div>
<div class="box">
<H1>My Box 3</H1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, eius hic eum vero eveniet minima a nobis pariatur officiis, totam aliquid dicta. Voluptas illum debitis nemo architecto sit nulla voluptate.</p>
<button>My button</button>
</div>
</main>
</body>
</html>
styles.css
main{
display: flex;
flex-direction: row;
}
h1, p{
text-align: center;
}
.box{
display: flex;
flex-direction: column;
background-color:#0096FF;
color: white;
padding: 2em;
margin: 2em;
border-radius: 10px;
justify-content: center;
}
button{
background-color: white;
border-radius:10px;
padding: 1em;
color:#0096FF;
font-weight: bold;
}
here you have all explications about flexbox.
I'm currently facing trouble when making layout. In the below picture, i want to make the content columns on the right ( title,lorem...) scale to fit height of the image on the left. How can I do it?
I'm using Bootstrap v5.1.1
Current image:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="col-md-4 black h-100">
<img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/domestic-cat-lies-in-a-basket-with-a-knitted-royalty-free-image-1592337336.jpg" alt="" style="width:300px;">
</div>
</div>
<div class="col-8">
<h1>Title </h1>
<h6>Content</h6>
<p>Date:june 23 2021</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos assumenda odio impedit, nobis, delectus suscipit nam atque sint maxime voluptates molestias dignissimos blanditiis numquam aperiam asperiores dolorem ad veniam. Vel.
<br>Read more
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
Use Bootstrap's flex grid (which is the default) rather than setting column sizes.
Use the col-auto class on your image column to make it collapse to the image's width.
Don't set inline sizing on your grid or your content. Inline styles make development and maintenance more difficult. Use a class for your image if you like, with a semantic name so you can change the size value for a redesign without the name becoming wrong.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<style>
.size-medium {
width: 200px;
}
</style>
<div class="container">
<div class="row">
<div class="col col-auto">
<div class="col-md-4 black h-100">
<img class="size-medium" src="https://via.placeholder.com/300" alt="">
</div>
</div>
<div class="col">
<h1>Title </h1>
<h6>Content</h6>
<p>Date:june 23 2021</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos assumenda odio impedit, nobis, delectus suscipit nam atque sint maxime voluptates molestias dignissimos blanditiis numquam aperiam asperiores dolorem ad veniam. Vel.
<br>Read more
</div>
</div>
</div>
you put the class col-md-4 to the wrong tag
<div class="row">
<img class="col-md-4 p-0" src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/domestic-cat-lies-in-a-basket-with-a-knitted-royalty-free-image-1592337336.jpg" alt="">
<div class="col-8">
<h1>Title </h1>
<h6>Content</h6>
<p>Date:june 23 2021</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos assumenda odio impedit, nobis, delectus suscipit nam atque sint maxime voluptates molestias dignissimos blanditiis numquam aperiam asperiores dolorem ad veniam. Vel.
<br>Read more
</div>
</div>
The below is my css:
body{
margin:0;
padding-left: 0px;
background: #cccccc;
line-height:1.6em;
}
header{
background: #80ffaa;
color: #ff6666;
margin:0;
}
nav{
background: #333300;
color:#fff;
}
nav ul{
padding: 0;
list-style: none;
}
#navbar li{
display: inline;
}
#navbar li a{
text-decoration: none;
color: tomato;
font-size: 25px;
padding-right:15px;
}
The below is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../Website/css/style.css">
<title>My Website</title>
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<nav id="navbar">
<ul>
<li>ABOUT</li>
<li>HOME</li>
<li>CONTACT</li>
</ul>
</nav>
<body>
<section class="showcase">
<div class="container">
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, ea.</p>
</div>
</section>
<section class="paragraphs">
<div class="para1">
<h3>Para 1</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit, ipsum. Consectetur omnis voluptas fugiat culpa dicta ipsa aspernatur voluptate repudiandae, ut excepturi debitis nulla impedit inventore, harum magni asperiores distinctio.</p>
</div>
<div class="para2">
<h3>Para 2</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur dicta, necessitatibus veritatis recusandae nemo quidem! Harum sunt quas deserunt qui atque adipisci delectus esse. Animi repellat iusto accusantium est cupiditate.</p>
</div>
<div class="para3">
<h3>Para 3</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et accusantium veritatis obcaecati libero praesentium omnis quis at, temporibus est! Quia ipsam, ullam recusandae error temporibus dignissimos soluta architecto facilis necessitatibus.</p>
</div>
</section>
<video height="300" width="600" controls>
<source src="C:\Anirudh\New Video.mp4">
</video>
<form>
<label for="email">Subscribe us: </label>
<input type="email" name="email" required placeholder="enter your email here...">
<button type="submit">SUBSCRIBE</button>
</form>
<footer>
<p> © Copyrights belongs to Me since 20202020 </p>
</footer>
</body>
</body>
</html>
The header looks pretty ugly... There is some space between the header and the to of the page which does not have the bg color.. Same is the case with nav and header... I made the margin 0.. But that did not work...
Image of the webpage:
What can be done to remove them with basic CSS and not using flex box or grid (Not yet learnt them..) or putting -ve margins as that needs a lot of trials.
Thanks.
Well, you should use a reset to get rid of that. The best option is to use a global selector just like that. I highly recommend this way.
*, *::before , *::after {
padding: 0;
margin: 0;
}
in your case, you could just give the ul and h1 a margin: 0 to remove the browser default margin.
Try to remove the margin of h1 by adding this css:
h1{
margin:0;
}
I am learning boot strap to build my own page. Here is the snippet.
The HTML file:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="custom.css">
<title>Title of the document</title>
</head>
<body>
<!-- container-fluid is taking of the padding towards the end, lets go with just the container. -->
<div class="container">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"><img id="photo" src="tom-cruise.jpg" alt="Pavan Dittakavi"></div>
<div class="col-lg-4"></div>
</div>
<div class="row">
<div class="col-lg-12">HELLO,
MY NAME IS KAMIL24YO AND THIS IS MY RESUME/CV</div>
</div>
<div id="seperator"></div>
<div class="row">
<div class="col-lg-7">
<div class="row">
<div class="my_header">
//ABOUT ME
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, non, dolorem, cumque distinctio magni quam expedita velit laborum sunt amet facere tempora ut fuga aliquam ad asperiores voluptatem dolorum! Quasi.
</p>
</div>
<div class="row">
<div class="my_header">
//EDUCATION
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, non, dolorem, cumque distinctio magni quam expedita velit laborum sunt amet facere tempora ut fuga aliquam ad asperiores voluptatem dolorum! Quasi.
</p>
</div>
</div>
<div class="col-lg-5">
<div class="row">
<!-- -->
<div class="my_header">
//ABOUT ME
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, non, dolorem, cumque distinctio magni quam expedita velit laborum sunt amet facere tempora ut fuga aliquam ad asperiores voluptatem dolorum! Quasi.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<!-- -->
</div>
</div>
</div>
<br/>
<div class="row">
<div class="col-lg-7">
<div class="row">
<div class="my_header">
//ABOUT ME2
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, non, dolorem, cumque distinctio magni quam expedita velit laborum sunt amet facere tempora ut fuga aliquam ad asperiores voluptatem dolorum! Quasi.
</p>
</div>
</div>
<div class="col-lg-5">
<div class="row">
<!-- -->
<div class="my_header">
//ABOUT ME
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, non, dolorem, cumque distinctio magni quam expedita velit laborum sunt amet facere tempora ut fuga aliquam ad asperiores voluptatem dolorum! Quasi.
</p>
<!-- -->
</div>
</div>
</div>
</div>
</body>
</html>
Here is the CSS file:
#photo {
display: block;
margin-left: auto;
margin-right: auto;
width: 150px;
height: 150px;
border-radius: 50%;
border:3px solid #021a40;
}
#seperator {
border-top: double;
color: #ededed;
}
.my_header {
color: #EC7263;
font-size: 1.8em;
font-weight: 700;
text-transform: uppercase;
}
body {
font-family: 'Open Sans', Arial, Tahoma;
}
.shape{
text-align:left;
background-color:rgba(3,78,136,0.7);
width:200px;
height:60px;
line-height:60px;
color:white;
margin:20px auto;
position:relative;
}
What I have noticed is that col-lg-7 and col-lg-5 or for that matter col-lg-2 and col-lg-10 are not rendered as columns in Bootstrap. Can you please let me know where I am missing - I have a feeling that the div ordering or usage of rows and containers is missing something.
As a side note, I also see that on Chrome the distortion is more - the columns are not getting rendered at all, but on Firefox it renders to some extent - for example the first few columns.
Edit: My problem now is that I am trying to build a clone for http://kamsolutions.pl/projects/resume/ and in my implementation, I see that the resulting HTML file has columns and rows mixed up and not getting rendered as expected. Here is the picture that I am referring to.
Thanks,
Pavan.
You have a row, within which you have two columns, col-lg-7 and col-lg-5. Within the col-lg-7 you have two additional rows, whereas within the col-lg-5 you only have one row. That's where your blank space is coming from.
I'm having this issue with a div for comments overflowing it's parent .. I've been trying a couple options in CSS but no success.
<div class="col-md-8 depos>
<div class="col-md-7 depo-cont>
<div class="depo">
<h5>Marcio</h5>
<p>Vou de novo</p>
</div>
</div>
<div class="col-md-5">Form here</div>
</div>
Main problem is trying to overflow the "depo-cont" div expands the bottom of the parent. Any ideas on how to handle this ?
If the aim is to have a fixed height on the .depos container, then you could tell it to scroll its content when it becomes too tall:
.depos {overflow: scroll;}
Simple demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.outer {height: 200px; width: 100px; overflow: scroll;}
</style>
</head>
<body>
<div class="outer">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, et, officiis, molestiae, ea veniam esse nam enim eaque ad tenetur cum incidunt consectetur iste ullam eos veritatis cupiditate tempora consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, et, officiis, molestiae, ea veniam esse nam enim eaque ad tenetur cum incidunt consectetur iste ullam eos veritatis cupiditate tempora consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>
</body>
</html>
Fixed it setting the child element's max-height to be the same as the parent ( which naturally causes overflow once content exceeds the size. )
.depo-cont{
max-height:500px;
overflow:scroll;}