I seem to have a problem with the AOS (animate-on-scroll) library in my html page. The code works fine, but the issue is that the last div doesn't run its AOS code (fade-right) until the user is scrolling over it within a certain range of pixels, meaning that if my height is set at "100%", the page will just show a blank space where the div is supposed to be. This is because the content of the last div is too short to actually let the user scroll withing said range. Of course, the code runs fine if I extend the height of the html to a specified value that is longer than the height occupied by the elements in the page, but I really would like to avoid that and just allow this last div to appear without having to add space for the user to scroll just a little bit more. I'll leave a snippet for clarification.
html{
height:100%;
}
body{
overflow-x: hidden;
}
h1{
font-size : 90px;
text-align: center;
}
p{
width:50%;
font-size:20px;
text-align:justify;
margin:auto;
padding:20px;
background-color: #3E9AE0;
}
div{
margin-bottom:50px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
</head>
<body>
<div data-aos="fade-right" data-aos-duration="1000">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sem sapien, pulvinar at condimentum vel, mollis quis erat. In consequat sem vel enim laoreet, non bibendum purus ornare. Vestibulum faucibus dictum magna in egestas. Sed laoreet in est nec hendrerit. Curabitur sed condimentum elit. Ut blandit posuere vulputate. Phasellus pharetra malesuada neque at malesuada. Aenean sed dui sit amet eros venenatis laoreet.
</p>
</div>
<div data-aos="fade-left" data-aos-duration="1000">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sem sapien, pulvinar at condimentum vel, mollis quis erat. In consequat sem vel enim laoreet, non bibendum purus ornare. Vestibulum faucibus dictum magna in egestas. Sed laoreet in est nec hendrerit. Curabitur sed condimentum elit. Ut blandit posuere vulputate. Phasellus pharetra malesuada neque at malesuada. Aenean sed dui sit amet eros venenatis laoreet.
</p>
</div>
<div data-aos="fade-right" data-aos-duration="1000">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<script src="https://unpkg.com/aos#next/dist/aos.js"></script>
<script>
AOS.init({
mirror:false,
});
</script>
</body>
</html>
After a little bit of tampering with the code, I may have found a solution to this specific case. Setting the height for the html tag, in CSS, to the attribute "fit-content" seems to do the trick just fine, for pages that are simply structured such as mine. You may want to try something else if you have positioned your elements in a particular way near the end of the page. Here's the (very brief) code needed for this solution, to type in your CSS file:
html{height:fit-content;}
As a (most likely irrelevant) side-note: this attribute is not supported in Internet Explorer.
Related
This question already has answers here:
What is a clearfix?
(10 answers)
Closed 1 year ago.
I wanted to have some text and an image to be displayed in way that the text is at the left and after it follows an image. Like in blogs. So first I made a <div> tag as an container for the text and image. Then I used a <p> tag to enter text and image. I set the float property of the image float:right.
Now i got the the text and image in blog like form just the way I wanted.
But i also wanted to add borders to the whole content. So that it looks like the text and image are in a box.
But the border are not able to cover the image's height and width.
<html>
<head>
<title>Float</title>
</head>
<style>
img {
float: right;
}
</style>
<body>
<div>
<p><img src="https://s27363.pcdn.co/wp-content/uploads/2017/02/Tigers-Nest-Hike.jpg.optimal.jpg" alt="Tiger's Nest"
style="width:200px; height:200px; margin-left:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac...
</p>
</div>
</body>
</html>
You need to add display: flex; to the div:
<html>
<head>
<title>Float</title>
</head>
<style>
div {
display: flex;
border: 5px solid blue;
}
img {
float: right;
}
</style>
<body>
<div>
<p><img src="https://s27363.pcdn.co/wp-content/uploads/2017/02/Tigers-Nest-Hike.jpg.optimal.jpg" alt="Tiger's Nest"
style="width:200px; height:200px; margin-left:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac...
</p>
</div>
</body>
</html>
I'm quite new into HTML&CSS and I'm having troubles with the model box I think.
Here both elements below "Personal data" aren't at the same height and I can't find the reason. Can anyone help me?
jsfiddle.net/jbzgmqns/
PS: Don't worry about being ugly, everything included the borders are just placeholders.
this is happening because <P>...</p> itself is taking margin.
Set its margin value '0' i.e. margin:0; to keep it in same level of image.
And take <p> inside <div class="cuadro">...</div> as shown below
<div class="cuadro">
<h1>Personal Data</h1>
<div class="imagen">
<img src="http://gobierno.morelos.gob.mx/sites/default/files/images/transparencia/placeholder-transparencia.jpg" />
</div>
<p style="margin: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br> Donec efficitur eros quis sapien congue, hendrerit rhoncus magna cursus.
<br> Nam a blandit diam. Curabitur auctor, ipsum eget mattis vulputate, elit ex egestas nunc, sit amet molestie
<br> ante felis porta ligula. Aenean elementum justo sed placerat finibus.</p>
</div></div>
It's because in your code you defined the block height, when you shouldn't:
.block {
height: 700px;
Just remove that and all will be fine.
I recently enrolled into a web course. Currently learning html5 and css. I have to make 3 webpages; main, about me and hobbies. I've created pretty much they've asked according to the specification they gave me BUT I have one problem; some content does not display where its supposed to be. I've tried position: relative, position: absolute etc and modified the the position of it using bottom: 500px etc but it just doesn't look right. For example, on the code below, that is my 'About me' page. The pictures on the side is not currently aligned properly to the top of the main article. The pictures are besides the main article which is correct but its positioned a bit below. This happens throughout my webpages on tables elements..
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>About Me</title>
<link property="stylesheet" rel ="stylesheet" href="cascadingstylesheet.css"/>
<!--[if lt IE 9]>
<script src="hpp://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<header>
<h1>About Me</h1>
<nav>
<ul>
<li>Main</li>
<li>About me</li>
<li>Hobby</li>
</ul>
</nav>
</header>
<hr>
<main>
<!--
Below I have used the article tag and the section tag. The article tag is nested inside
the section tag. This is because section tags are used to group related elements together
and the 3 articles are related since they contain information about me.
I didn't include one article tag because the articles are distinct from one another. E.g. One of the
article contains the types of mototbikes but another article tells the user information about me. !-->
<section title="border" id="aboutArticle">
<article><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet bibendum ex. Phasellus eget placerat nisi. Curabitur scelerisque condimentum vulputate. Nullam mollis mauris vel porttitor fringilla. Cras risus erat, feugiat non aliquet sit amet, molestie nec magna. Phasellus eleifend a ligula et consectetur. Fusce et malesuada sem. Donec lacinia tortor urna, eu semper metus volutpat non. Phasellus sed sapien commodo ipsum faucibus dictum rhoncus in est. Vestibulum porta metus pulvinar, ornare quam a, tristique nisl. Nullam euismod neque est, at tincidunt nunc tincidunt a. Aenean ullamcorper tincidunt congue.</p></article>
<br>
<article><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet bibendum ex. Phasellus eget placerat nisi. Curabitur scelerisque condimentum vulputate. Nullam mollis mauris vel porttitor fringilla. Cras risus erat, feugiat non aliquet sit amet, molestie nec magna. Phasellus eleifend a ligula et consectetur. Fusce et malesuada sem. Donec lacinia tortor urna, eu semper metus volutpat non. Phasellus sed sapien commodo ipsum faucibus dictum rhoncus in est. Vestibulum porta metus pulvinar, ornare quam a, tristique nisl. Nullam euismod neque est, at tincidunt nunc tincidunt a. Aenean ullamcorper tincidunt congue.</p> </article>
<br>
<article><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet bibendum ex. Phasellus eget placerat nisi. Curabitur scelerisque condimentum vulputate. Nullam mollis mauris vel porttitor fringilla. Cras risus erat, feugiat non aliquet sit amet, molestie nec magna. Phasellus eleifend a ligula et consectetur. Fusce et malesuada sem. Donec lacinia tortor urna, eu semper metus volutpat non. Phasellus sed sapien commodo ipsum faucibus dictum rhoncus in est. Vestibulum porta metus pulvinar, ornare quam a, tristique nisl. Nullam euismod neque est, at tincidunt nunc tincidunt a. Aenean ullamcorper tincidunt congue.</p>
<p>This blog was created on
<time datetime="10-10-2015 20:00">
the 10th of October 2015.</time></p>
<section>
<img id="motorbikePic" width="350" alt="Harley Davidson Logo "src="http://media1.santabanta.com/full5/Bikes/Harley%20Davidson/harley- davidson-82a.jpg"></img>
</section>
</article>
</section>
<!--
I have used the aside tag on my About page. Inside the tag there are images containing my
favourite types of cars. I did not include it in the article tag above because it's not necessarily
related to it since I said I like motobikes and not muscle cars.!-->
<aside title="cars">
<h3>My favourite cars:</h3>
<img src="http://gas2.org/wp-content/uploads/2014/07/challenger-hellcat.png" width="300" alt="Dodge Hellcat">
<br>
<img src="http://cartype.com/pics/6596/full/ford_mustang_shelby_gt500_f1_10.jpg" width="300" alt="Ford Shelby GT500">
<br>
<img src="http://www.forodefotos.com/attachments/chevrolet/14617d1289420971- camaro-2010-camaro-2010.jpg" alt="Chevrolet Camero" width="300">
</aside>
</main>
<!--
Footer tag is used at the bottom of the page since it more appropriate to use it at the bottom since
you are given more options such as contacting the web developer, in this case it is me.
!-->
<footer>
<hr>
<p>To get in touch with me you can click below:</p>
Click to email me!
</footer>
</body>
</html>
This is my CSS. My CSS contains some rules for my other pages so I pasted the relevant ones so that it'll be easier for you guys to read. These are the relevant rules for the code above but there may be some rules missing so I will also post the whole of the css if you guys require it.
CSS for the code above:
footer{
position: absolute;
right: 0;
bottom: -250px;
left: 0;
padding: 10px;
text-decoration:none;
}
#aboutArticle{
width:75%;
}
[title^="cars"]{
float:right;
margin: 0 1.5%;
position:relative;
bottom:505px;
}
[title^="bord"]{
border-style: dotted;
border-radius: 10px 30px;
}
body{
background: -webkit-linear-gradient(left, #4B0082, black , #4B0082); /* For Safari 5.1 to 6.0 */
background: linear-gradient(to right, #4B0082 , black, #4B0082); /*standard syntax*/
text-align: center;
padding-bottom:60px;
font-size:20px;
}
Just add one property and remove another property.
Add float:left; to #aboutArticle and remove bottom:505px; from [title^="cars"]
I am trying to get my text to align. I have a <p> and my text goes all the way from the left of the webbrowser/screen till the right. But I want it to be away from the left and right ends of the screen. I know of the alignment code "center, right, left, etc.". I need it to be left aligned, but not right next to the screen, like if the whole <p> was indented on both sides.
You would want to either put it within a containing div, or apply padding to the <p> tag. It would look like this:
.container {
width: 80%;
margin: 0 auto;
}
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel sem ultrices, pellentesque risus sit amet, scelerisque sem. Mauris ut mauris a libero dictum viverra. Ut eros metus, tristique et porta quis, tincidunt quis lacus. Suspendisse potenti. Sed sit amet nisi nec urna tincidunt malesuada. Nulla blandit feugiat dolor, a luctus dolor interdum ut. Quisque laoreet leo tristique, vestibulum enim eget, imperdiet sem.</p>
</div>
OR
<p style="padding:0 50px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel sem ultrices, pellentesque risus sit amet, scelerisque sem. Mauris ut mauris a libero dictum viverra. Ut eros metus, tristique et porta quis, tincidunt quis lacus. Suspendisse potenti. Sed sit amet nisi nec urna tincidunt malesuada. Nulla blandit feugiat dolor, a luctus dolor interdum ut. Quisque laoreet leo tristique, vestibulum enim eget, imperdiet sem.</p>
You can simply add some padding, margin-left/margin-right, or another solution like that.
Try adding;
text-align: left;
margin-left: 5%;
to your CSS.
You can change the margin-left value to be an amount of pixels (e.g. 50px;) or leave it as percentage of it's parent element.
You said you wanted the text left aligned but not have it touch the left side of the page. Here is a JSFiddle of that:
https://jsfiddle.net/zfvhgr0x/
you can do this simply by keeping the width attribute as is and just including the following into your CSS:
padding: 0 5px;
This will add a space of 5 pixels to the left of your text, and the right of your text. This means that if your text would reach the end of the screen, it would stop 5 pixels before the end.
You can set each indent individually, as explained below:
padding: 5px(top) 7px(right) 2px(bottom) 10px(left)
When putting this in code, you do not want the brackets. These are just there for demonstration purposes to explain what each of the numbers will target.
Hope that helps!
I want to display a html page, with a classic design. Header, footer, content and bar to the right.
For some reason I don't like the fixed width of the content. On a wide screen you should be able to resize your page, so it fills the screen, or make it very small to display two pages side by side.
I also would like to use div tags instead of a table layout. Using the div tags gives me the following advantages (I'm being told):
Content can be rendered while waiting for the "right" bar
On a mobile phone, the Div tags can be shown under each other, instead of side by side.
My test/debug html looks like this:
<!-- Create content with DIV tags -->
<div id="head" style="background-color:aqua">This is the header</div>
<div id="body" style="float:left;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales sagittis sem, at bibendum nunc aliquet non. Maecenas condimentum, libero pharetra suscipit sodales, dui diam laoreet velit, at lacinia nisl erat sed turpis. Quisque lobortis consequat elementum. Suspendisse non interdum est. In velit felis, rhoncus tincidunt tincidunt sit amet, laoreet eu ligula. Nulla facilisi. Sed ornare facilisis pulvinar. Integer viverra arcu eu turpis dictum vitae tincidunt magna scelerisque. Nunc laoreet pulvinar odio, quis rutrum libero consectetur non. Donec molestie, felis volutpat condimentum iaculis, orci arcu feugiat sapien, accumsan scelerisque sapien orci sed urna. Curabitur et turpis sit amet diam vulputate egestas. </p>
</div>
<div id="right" style="background-color:orange; float:right; width:10em;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div id="tail" style="background-color:lime;clear:both;">This is the Footer</div>
<p> </p>
<!-- Create content with TABLE tag -->
<div id="t-head" style="background-color:aqua">This is the header</div>
<table cellpadding="0" cellspacing="0">
<tr><td>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales sagittis sem, at bibendum nunc aliquet non. Maecenas condimentum, libero pharetra suscipit sodales, dui diam laoreet velit, at lacinia nisl erat sed turpis. Quisque lobortis consequat elementum. Suspendisse non interdum est. In velit felis, rhoncus tincidunt tincidunt sit amet, laoreet eu ligula. Nulla facilisi. Sed ornare facilisis pulvinar. Integer viverra arcu eu turpis dictum vitae tincidunt magna scelerisque. Nunc laoreet pulvinar odio, quis rutrum libero consectetur non. Donec molestie, felis volutpat condimentum iaculis, orci arcu feugiat sapien, accumsan scelerisque sapien orci sed urna. Curabitur et turpis sit amet diam vulputate egestas. </p>
</td><td valign="top" style="background-color:orange; width:10em;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</td></tr>
</table>
<div id="t-tail" style="background-color:lime;clear:both;">This is the Footer</div>
Output of this code is here:
(source: vantslot.be)
(Text does not matter, only the layout, so I have shrunken it a bit).
The top layout is using the divs : wrong
Bottom layout is using the table : good
My question / problem
How can I position the "right" bar, on the right of the content, while maintaining the dynamic width of the content, and not using table layout?
What I actually want is the right pane appear on the right of the content, but when the browser is too small (< 20em), it can be displayed under it. This is not possible with tables, so I prefer a div solution.
In the final Website the contents of the header / footer / content and right will be dynamically generated, so I cannot hardcode the height.
Edit
Thx for all the answers, this really helps me forward.
I see what is "wrong" here. I have put the right pane after the content pane. If I put the right pane before the content pane, it renders correctly (after adding a margin-right to the content).
This is a bit illogical for flow of the html. Since the content is more important as the content in the right pane, I would like it to be send to the client before the right pane.
This will allow your right, fixed-width column to fit in the margin of your other column, and therefore be on the same line:
#right
{
float:right;
width:18em;
}
#body
{
margin-right: 20em; //IE calculates padding into the width, so you need a buffer unless you set body's padding to 0
}
Now the body's div, which defaults to 100% screen width, will be fluid, and your right column will be fixed width.
Add a clear:both to your right column. To manage the height of having a float at the bottom of your main content area use a clearfix. Also, since you want the right column to float underneath the left column, there's no need to float the left column?
Try this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Пример</title>
<style type="text/css">
html,body{
margin:0;
padding:0;
}
#header{
height:150px;
min-width:600px;
background:#FFEF97
}
#menu{
width:250px;
float:right;
background:#FFC597
}
#info{
min-width:350px;
background: red;
}
#footer{
height:20px;
min-width:600px;
background:#B9CC8A;
clear:both
}
#body{
width: expression(((document.documentElement.clientWidth
|| document.body.clientWidth) < 600)?
"600px" : "100%")
}
</style>
</head>
<body>
<div id="body">
<div id="header">HEADER</div>
<div id="menu">MENU (side bar)</div>
<div id="info">INFO (central pane)</div>
<div id="footer">FOOTER</div>
</div>
</body>
</html>
Not tested (yet), but I think I have found the solution to the problem.
http://www.alistapart.com/articles/holygrail/
This solutions allows to mix fixed and liquid layout (terms I learned from asking this question).
Try the following CSS snippet:
display: table;