How can I position an image on top text. Like in the image given
Here is a basic example using flex. I put a border on the div so you can see exactly what the flex does. Also, for an example like this where you want the image to be directly over text, you have to lookout for default margins/padding. For example, the <p> element has a default margin which I set to 0.
.row {
display: flex;
flex-direction: column;
border: solid 1px black;
width: 200px;
height: 80px;
padding: 20px;
background-color: #1e3f5a;
}
p {
margin: 0; /* removes default p margin */
text-align: center;
font-size: 30px;
color: white;
}
img {
align-self: flex-end;
margin-right: 1.5rem; /* optional */
}
<div class="row">
<img src="https://dummyimage.com/55x25/ed7014/fff&text=Trending">
<p>Dex Activity</p>
</div>
You can also use the position css property for this, you can wrap these two tags with a div and use the css flex methods.
CSS Flex Example:
<div style="display:flex; flex-direction:column"><img src="IMG_URL" alt="..." style="align-self:flex-end"><p>Dex Activity<p/></div>
There is more than one technique.
Here's one, borrowed from w3schools:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.topright {
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the top right corner:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="topright">Top Right</div>
</div>
</body>
</html>
It is my HTML & Javascript code:
footer {
background-color: #049e8c;
width: 100%;
height: 50pt;
text-align: right;
margin-top: auto;
bottom: 0;
}
<footer id="footer">
<div id="" class="">
hoge
hoge
</div>
</footer>
"Javascript"
Jscode
I want Edge to be like this
Edge does not fit on the screen. Also, footer stops on the spot.
I tried both Javascript and CSS but it didn't work on Edge when there is no element at the bottom of the screen. I want to be at the bottom of the page when there are more elements than the screen.
I recommend using CSS grids for all HTML templates. Otherwise it can be difficult to keep footer at the bottom for all screen sizes.
That being said, try using flexbox.
Insert all of your html in main and flexbox will push footer to the bottom of the page.
/* The magic: */
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
/* Stlyes to make the demo easier to see: */
body { margin: 0; }
header { background-color: #FD2D; }
main { background-color: #DFDD; }
footer {
background-color: #049e8c;
height: 50pt;
text-align: right;
bottom: 0;
}
<body class="Site">
<header>Header</header>
<main class="Site-content">Content</main>
<footer>Footer</footer>
</body>
If you want to try CSS Grids, you need to do something like this.
All HTML content goes into the Site-content section. Hope this helped :)
/* Stlyes to make the demo easier to see: */
html{
height: 100%;
}
body {
margin: 0;
display: grid;
height: 100%;
grid-template-areas:
"header_section"
"Site-content_section"
"footer_section";
grid-template-rows: 100px 100% 50px; /* 100px for header, 100% for content section, 50px for footer */
}
.header {
grid-area: header_section;
background-color: #FDD;
}
.Site-content {
grid-area: Site-content_section;
background-color: #DFD;
}
.footer {
grid-area: footer_section;
background-color: #049e8c;
text-align: right;
}
<body>
<div class= "header">Header</div>
<div class="Site-content">Content</div>
<div class= "footer">Footer</div>
</body>
I don't exactly get the point inside the question. Maybe If You want to put your footer full the windows you can try to use "position" with the value "absolute
footer {
position:absolute;
background-color: #049e8c;
width: 100%;
height: 50pt;
text-align: right;
margin-top: auto;
bottom: 0;
left:0;
}
<body>
<footer id="footer">
<div id="" class="">
hoge
hoge
</div>
</footer>
</body>
Right now my webpage has vertical snap to scroll to each of the three 100vh sections.
In the second section, I have 3 100vw divs lined up horizontally with { overflow-x: scroll }. So I went ahead and try to link the my button that would help translate x using the following code:
const button = document.getElementById('slide');
button.onclick = function () {
document.getElementById('wrapper').scrollLeft += 20;
};
I guess right now the numbers doesn't matter. I just want to see it moving, but I can't get it to move on-click. Any ideas?
codepen.io/brandoniscool/pen/vYBMZyM
300% width is set on the wrapper, so it is the wrapper parent (id special) which needs to scroll.
Setting scrollLeft on the special element works as expected. document.getElementById('special').scrollLeft += 20;
const button = document.getElementById('slide');
button.onclick = function () {
document.getElementById('special').scrollLeft += 20;
};
* {
margin: 0;
font-family: 'Montserrat', sans-serif;}
body {
scroll-snap-type: y mandatory;
overflow-x: hidden;
width: 100vw;
height: 100%;
}
section {
scroll-snap-align: start;
height: 100vh;
outline: 1px dashed lightgray;
background-color: #c1d37f;
overflow-x: scroll;
}
.verticalSection {
display: flex;
justify-content: center;
flex-direction: row;
height: inherit;
border: 0.5px dashed #664e4c;
box-sizing: border-box;
/* so the border doesnt increase over the 100% width and heights */
}
#wrapper {
height: 100%;
width: 300%;
display: flex;
}
.horizontalSection {
background-color: #f9d4bb;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
flex-direction: row;
border: 0.5px dashed #664e4c;
box-sizing: border-box; /* so the border doesnt increase over the 100% width and heights */
}
h1 {
color: #664e4c;
font-size: 3em;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<title>vertical snap and horizontal snap integration</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<section>
<div class="verticalSection"> <h1> BOX 1</h1> </div>
</section>
<section id="special">
<div id="wrapper">
<div class="horizontalSection"> <h1> BOX 2.1</h1> <button id="slide" type="button">Next</button></div>
<div class="horizontalSection"> <h1> BOX 2.2</h1> </div>
<div class="horizontalSection"> <h1> BOX 2.3</h1> </div>
</div>
</section>
<section>
<div class="verticalSection"> <h1> BOX 3</h1> </div>
</section>
</body>
</html>
I am trying to optimize my website to different screen and window sizes. I want the content of a div to take up 100% of the browser height, not more than that, so that the user doesn't have to scroll down. I am not sure how to implement this, I tried this
$(window).on('load resize', function(){
$('.container-narrow').width($(this).width());
$('.container-narrow').height($(this).height());
)};
But this doesnt seem to work, the content still goes over the browser height. and I have to endup scrolling
CSS will recalculate on resize.
<html>
<head>
<style>
body, html {
height: 100%;
margin: 0px;
padding: 0px;
}
.body {
height: 100%;
margin-bottom: -100px;
}
.header {
height: 100px;
background-color: #CCCCCC;
text-align: center;
}
.content {
text-align: center;
}
.footer {
height: 100px;
text-align: center;
background-color: #AAAAAA;
}
</style>
</head>
<body>
<div class="body">
<div class="header">
This is the header.
</div>
<div class="content">This is the content.</div>
</div>
<div class="footer">
This is the footer.
</div>
</body>
</html>
I've browsed to all question related to "sticky footer" and nothing helped me because my #content div does not always have sufficient content to push the footer to the bottom. Here is the code I've used to achieve this, but apparently I did something wrong:
html, body, div#container { height: 100%; }
body > div#container { height: auto; min-height: 100%; }
div#index_body { padding-bottom: 30px; }
.footer {
clear: both;
position: relative;
z-index: 10;
height: 30px;
margin-top: -45px;
padding-top:15px;
}
.footer {
color: #666;
background-color:#F4F7FA;
border-top:1px solid #E6E7E8;
font-size:95%;
text-align: center;
}
<div id="container">
<div id="index_body">
</div><!--end index_body -->
<div id="index_footer" class="footer">
</div><!--end footer -->
</div><!--end container -->
Some of my attempts work when index body has loads of text images only then the footer goes to the end but when it doesn't have much content let say 2 paragraph tags and an image the footer doesn't stick. Maybe this is not possible with just CSS, because the index_footer height is not fixed? Is there a way to do this with JavaScript? Or what is the right way to do this?
My screen resolution is really big maybe that is the problem its 1680 x 1050
Try moving your footer div outside of the container div. Your technique should then work. The way you have it set at the moment the footer is within the containing div, but positioned relatively. So even though the containing div may have 100% height, the footer div within it is still only to go just below the content in the container.
A quick example of what I mean, (note that an extra div with some padding-bottom is required in order to make sure the footer does not overlap the contents),
<html>
<head>
<title>Sticky Footer Test</title>
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
* {
margin: 0px;
}
#container {
min-height: 100%;
height: auto !important;
height/**/: 100%; /* for IE6 */
background: #ddd;
}
#footer {
position: relative;
background: #555;
margin-top: -100px;
height: 100px;
}
#content {
padding-bottom: 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<p>Hello! I'm some content!</p>
</div>
</div>
<div id="footer">
<p>Hello! I'm a footer!</p>
</div>
</body>
</html>
If you can't move the footer outside of the container (for whatever reason), then you could also try positioning the footer absolutely within the containing div to be at the bottom. position: absolute; bottom: 0px; etc
For example, (again, an extra div with some padding-bottom is required in order to make sure the footer does not overlap the contents),
<html>
<head>
<title>Sticky Footer Test 2</title>
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
* {
margin: 0px;
}
#container {
position: relative;
min-height: 100%;
height: auto !important;
height/**/: 100%; /* for IE6 */
background: #ddd;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
background: #555;
margin-top: -100px;
height: 100px;
}
#content {
padding-bottom: 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<p>Hello! I'm some content!</p>
</div>
<div id="footer">
<p>Hello! I'm a footer!</p>
</div>
</div>
</body>
</html>
I know this doesn't answer your exact question, but the work done by Ryan Fait has worked very well for me across multiple browsers. You might want to give this a try (or take a look at what he did compared to what you are doing and see if you can determine a fix).
I believe the root of the problem is that the footer element in the HTML needs to be outside of the #container div. Also, I noticed after I removed that, issues with margin and padding on the body tag. Finally, the border-top on the .footer makes the height of the footer 46px, not 45px...
The corrected CSS:
/* FOOTER FIX */
html, body, div#container { height: 100%; }
body > div#container { height: auto; min-height: 100%; }
div#index_body { padding-bottom: 30px; }
body{margin:0;padding:0;}
#container{ margin-bottom: -46px; }
.footer {
clear: both;
position: relative;
z-index: 10;
height: 30px;
padding-top:15px;
color: #666;
background-color:#F4F7FA;
border-top:1px solid #E6E7E8;
font-size:95%;
text-align: center;
} /* END FIX */
The corrected HTML:
<html>
<body>
<div id="container">
<div id="index_body">
</div><!--end index_body -->
</div><!--end container -->
<div id="index_footer" class="footer">
</div><!--end footer -->
</body>
</html>
It's actually easy, here's the minimum required template:
<!doctype html>
<html lang="en">
<head>
<title>SO question 1980857</title>
<style>
html, body {
margin: 0;
height: 100%;
}
#container {
position: relative;
min-height: 100%;
}
* html #container {
height: 100%; /* This is min-height for IE6. */
}
#footer {
position: absolute;
bottom: 0;
}
#footer, #pushfooter {
height: 50px; /* Both must have the same height. */
}
</style>
</head>
<body>
<div id="container">
<div id="content">Content</div>
<div id="pushfooter"></div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Making the container relative and giving it a min-height will actually stick the footer to its bottom all the time regardless of the content's actual height, which was your major concern as understood from comments.
Going off Harmen, i have tested this and it works, with the footer in the container. altho it is a little hackish
CSS
html, body, div#container { height: 100%; }
body > div#container { height: auto; min-height: 100%; }
div#index_body {
min-height: 100%;
margin-bottom: -46px;
}
.footer, .push {
height: 30px;
}
.footer {
clear: both;
position: relative;
z-index: 10;
margin: 0px;
}
.footer {
color: #666;
background-color:#F4F7FA;
border-top:1px solid #E6E7E8;
font-size:95%;
text-align: center;
} /* END FIX */
html
<body>
<div id="container">
<div id="index_body">
<div class="push"></div><!--Used to force the footer down to avoid overlap of footer and text -->
</div><!--end index_body -->
<div id="index_footer" class="footer">
</div><!--end footer -->
</div><!--end container -->
</body>
In order to realize a sticky footer, that is a footer placed in a fixed position at the bottom of the webpage that doesn't move when your scroll the page you can use this css code:
#footer{
position:fixed;
clear:both;
}
position:fixed makes the footer sticky anyway there could be floating problems if you used float:left or float:right in your code before, so using also clear:both it clears the floating and ensures that the footer is at the bottom under other divs and not on the left or right of the precedent div.
This will work, no matter what the height of the #container is:
CSS:
html, body {
height: 100%;
}
#container {
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom: -50px;
position: relative;
}
#index_footer {
height: 50px;
line-height: 50px;
position: relative;
background: #CCC;
}
#push {
height: 50px;
}
HTML:
<div id="container">
<div id="index_body">
test
</div>
<div id="push"> </div>
</div>
<div id="index_footer" class="footer">
test
</div>