I have a probably really simple question, but I can't figure it out. My footer don't stick to the bottom of the screen.
I have tried diffrent ways to get it down to the bottom but the only one i've gotten to work is non relative ones, which get kind of dumb when you resize the browser.
So here is a JsFiddle with my entire website: https://jsfiddle.net/4zakntdj/
And this is the HTML and css for only the footer:
<footer id="footer">
<p id="footer-text">Lorem ipsum dolor sit amet consectetur.</p>
<div id="credits">
<p>
Credits:
<br />
Valdemar - Projektledare
<br />
Sidney - King kong
<br />
Vincent - King hemsida
<br />
Adam - nä
</p>
</div>
</footer>
#footer {
position: absolute;
top: 250%;
width: 100%;
padding-bottom: 6rem;
background-color: #727365;
text-align: center;
font-family: "Roboto Slab", serif;
font-size: 1.2rem;
}
#footer-text {
margin-top: 2rem;
}
#credits {
margin-top: 2rem;
}
Hope you can find a way to make it stick to the bottom no matter the viewport. :)
Try to add the css rule:
footer
{
position: absolute;
bottom: 0;
height: fit-content;
}
Change the top: 250% to bottom: 0;, and the position: absolute to position: relative, like this:
#footer {
position: relative;
bottom: 0;
width: 100%;
padding-bottom: 6rem;
background-color: #727365;
text-align: center;
font-family: "Roboto Slab", serif;
font-size: 1.2rem;
}
Related
I have some elements within a section in a webpage. Here's my code. You just need to look at the section with id="recent-blog-article". I am including more code because it might help people understand. In the CSS, the relevant portion is below the /* Relevant Section */ comment.
#welcome-heading {
position: absolute;
top: 158px;
width: 100%;
padding-bottom: 10px;
}
#introduction-heading {
position: absolute;
top: 198px;
width: 100%;
padding-bottom: 10px;
}
#wondering-heading {
position: absolute;
top: 230px;
width: 100%;
}
#headings-section a {
color: #FF0000;
text-decoration: none;
}
/* Next Area */
#content {
position: absolute;
left: 135px;
top: 317px;
width: 1080px;
height: 876px;
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-row-gap: 60px;
grid-column-gap: 60px;
grid-template-areas: "content-a content-b content-c"
"content-d content-e content-f";
margin-bottom: 74px;
}
#content-a {
grid-area: content-a;
}
#content-b {
grid-area: content-b;
}
#content-c {
grid-area: content-c;
}
#content-d {
grid-area: content-d;
}
#content-e {
grid-area: content-e;
}
#content-f {
grid-area: content-f;
}
#content {
text-align: center;
}
#content img {
margin-bottom: 33px;
width: 320px;
height: 240px;
}
#content h4 {
margin-bottom: 20px;
}
.content-title-anchor {
font-size: 18px;
line-height: 18px;
color: #333333;
}
.button-anchor {
font-size: 16px;
line-height: 27px;
color: #FFFFFF;
background-color: #FF5A43;
padding: 10px 25px;
border-radius: 4px;
}
/* Next Area */
/* Relevant Section */
#recent-blog-article {
position: absolute;
top: 1273px;
width: 100%;
height: 836px;
padding-top: 50px;
padding-bottom: 50px;
background-color: #F4F8FA;
}
#recent-blog-article h1 {
position: absolute;
left: 135px;
top: 1353px;
font-size: 30px;
line-height: 30px;
text-align: left;
color: #333333;
}
#view-blog-anchor {
position: absolute;
left: 135px;
top: 1395px;
font-size: 16px;
line-height: 27px;
text-align: left;
color: #E74225;
}
#recent-blog-article img {
position: absolute;
display: block;
margin: 0 calc((100% - 1048px) / 2);
top: 1480px;
width: 1048px;
height: 405px;
}
#blog-article-link-anchor {
position: absolute;
left: 135px;
top: 1910px;
font-size: 26px;
line-height: 26px;
text-align: left;
color: #333333;
}
#article-metadata, #article-metadata a {
font-size: 14px;
line-height: 24px;
color: #666666;
}
#article-metadata {
position: absolute;
left: 135px;
top: 1951px;
text-align: left;
}
#blog-article-introduction {
position: absolute;
left: 135px;
top: 1994px;
font-size: 16px;
line-height: 27px;
text-align: left;
color: #666666;
}
<main>
<section id="headings-section">
<h1 id="welcome-heading">Welcome to Icon Utopia!</h1>
<h3 id="introduction-heading">Everything about iconography and building your career as a designer.</h3>
<p id="wondering-heading">👇Wondering where to start?👇</p>
</section>
<section id="content">
<div id="content-a">
<img src="index/landing-page.jpg" alt="Guide to: Building your dribbble following.">
<a class="content-title-anchor" href="build-your-dribbble-audience.html">Build Your Dribbble Audience</a>
<h4>A Comprehensive Guide to Building your Dribbble following.</h4>
<a class="button-anchor" href="build-your-dribbble-audience.html">Get a FREE Chapter!</a>
</div>
<div id="content-b">
<img src="index/icon-design-guide2-1.jpg" alt="LEARN ICON DESIGN">
<a class="content-title-anchor" href="free-icon-design-guide.html">Free Icon Design Guide</a>
<h4>Everything you need to know about icon design to get started.</h4>
<a class="button-anchor" href="free-icon-design-guide.html">Learn Icon Design</a>
</div>
<div id="content-c">
<img src="index/pixel-perfect-icons.jpg" alt="CRAFTING PIXEL PERFECT ICONS">
<a class="content-title-anchor" href="crafting-pixel-perfect-icons-the-right-way.html">Pixel Perfect Course</a>
<h4>Crafting Pixel Perfect Icons The Right Way - learn to create sharp-looking icons!</h4>
<a class="button-anchor" href="crafting-pixel-perfect-icons-the-right-way.html">Check out the Course</a>
</div>
<div id="content-d">
<img src="index/space-noise-brushes.jpg" alt="SPACE NOISE: PROCREATE BRUSH SET">
<a class="content-title-anchor" href="https://gumroad.com/l/ojcK">Space Noise Brushes</a>
<h4>Procreate brushes that give your drawings fantastic textures</h4>
<a class="button-anchor" href="https://gumroad.com/l/ojcK">Get Noise Brushes</a>
</div>
<div id="content-e">
<img src="index/free-icons.jpg" alt="FREE ICONS">
<a class="content-title-anchor" href="https://iconutopia.com/free-icons/">Free Icons</a>
<h4>Best FREE vector icons and icon sets for personal and commercial use</h4>
<a class="button-anchor" href="https://iconutopia.com/free-icons/">Get Free Icons</a>
</div>
<div id="content-f">
<img src="index/icon-utopia-blog-2.jpg" alt="MY BLOG: ICON UTOPIA">
<a class="content-title-anchor" href="blog.html">Icon Utopia Blog</a>
<h4>Blog about making a steady income and building a career as an icon designer.</h4>
<a class="button-anchor" href="blog.html">Check out the Blog</a>
</div>
</section>
<section id="recent-blog-article">
<h1>Recent Blog Article:</h1>
<a id="view-blog-anchor" href="blog.html">View Blog ></a>
<img src="index/fries-hero.png" alt="french fries in a box icon">
<a id="blog-article-link-anchor" href="https://iconutopia.com/best-icons-of-the-month-april-2020/">Best Icons of the Month! (April 2020)</a>
<p id="article-metadata">by Justas | May 2, 2020 | Inspirations</p>
<p id="blog-article-introduction">As I do every month, I collected the best icons to give you this essential pinch of inspiration and keep the fire inside of you burning. Take a peak into these different styles and unique approaches towards icon design! It’s always a great pleasure to discover them. I’m pretty sure that you will find some fantastic icon designers and icon sets amongst the ones I selected for you this time.</p>
</section>
</main>
Here's the output. I've zoomed out.
As you can see, the section itself is completely empty, while the content I want to go inside of it is below it. I've checked the positions of the elements (using a chrome extension) that should be inside the section, and their top is larger than what I have specified in the CSS. I have tried different variations of position and other properties, but nothing seems to work.
The most elements inside your <section> have position: absolute; in combination with top and left properties which is deadly for your style.
For instance the css for your <h1>.
position: absolute;
left: 135px;
top: 1353px;
This means that the headline is positioned absolute inside its parent and it has a gap of 1353px to the top of its parent. So top: 0 would mean that the headline begins just inside its parent section (I guess that is what you want). So because of the things mentioned above, the section's children have all a big gap to its parent, that's because they aren't displayed inside.
I would recommend to remove your position: absolute properties for allmost all elements inside your section, replace them by relative (it depends, where a child exactly should be positioned). Also I recommend to use a flexbox (display: flex;) which makes the positioning easier. For spacing you can use margin and padding properties.
.section-2{
position: absolute;
top: 200px;
width: 100%;
min-height: 64px;
background: red;
color: #000;
}
.section-2 h1{
position: absolute;
top: 100px;
left: 50px;
}
.section-2 span{
position: absolute;
top: 50px;
left: 50px;
}
.section-1{
position: absolute;
width: 100%;
min-height: 64px;
background: green;
color: #fff;
}
.section-1 h1{
position: relative;
display: block;
padding: 16px;
}
.section-1 span{
position: relative;;
margin-top: 60px;
}
<section class="section-1">
<h1>RELATIVE POSITIONED </h1>
<span>RELATIVE POSITIONED TEXT</span>
</section>
<section class="section-2">
<h1>ABSOLUTE POSITIONED</h1>
<span>ABSOLUTE POSITIONED TEXT</span>
</section>
On the image's CSS first try:
display: inline-block;
margin: auto;
This will centralize the image inside the div. Still having the problem... Try changing the width of the entire containing div to be fixed and not 100%.
width: 1080px;
or whatever you prefer...
I'm trying to put a rating text in front of an image. I did this via z-indexand position: absolute. However this text should always be on that position of the photo, now it has a static position. The text is a rating number of the title. And should be like this. How do I make this happen?
.rating{
color: white;
font-family: 'Abril Fatface', cursive;
font-size: 3.5rem;
z-index: 1;
margin-top: 5rem;
}
.rating-lant{
position: absolute;
right: 63rem;
top: 37rem;
}
.img-title-activity{
margin-left: 10rem;
z-index: 0;
}
<div class="container">
<p class="rating rating-lant">7.5</p>
<img src="./assets/img/Lantaarnopsteker-title#288x.png" alt="Lantaarnopsteker" width="584" height="264" class="img-title-activity">
</div>
Make a container div for the image and the heading text and set the position of the container div to relative. By setting giving margin top of 50%, it will bring it to the center of the image.
Here is an example I did for you
https://codepen.io/harsimarriar96/pen/WyOgVb
CSS
.image-with-text {
position: relative;
width: 800px;
}
h1 {
position: absolute;
text-align: center;
top: 50%;
width: 100%;
color: #000;
margin: 0 auto;
}
HTML
<div class="image-with-text">
<h1>Text on image</h1>
<img src="http://placehold.it/800x800" />
</div>
I'm creating a website and there is a section where I would like this design to be put in place:
At the moment, the speech bubbles are svg images set as background images to their own individual divs, the elements inside the speech bubbles are nested within the speech bubble parent div. The problems arise when changing browser widths - the text doesn't stay within the bubbles.
What is the best way to go about turning this design into responsive code with html and CSS only?
This is the html code so far:
<!-- Reviews -->
<section id="reviews">
<h2>Reviews</h2>
<section class="visitor-review-1">
<div class="review-1">
<img id="user-image-1" src="media/profile-picture-1.png">
<div id=visitor-comment-1>
<p>Make sure you visit Santorini when you go to Greece. Its magical! An island that is a volcano, what could be dreamier? Make sure you try the local naturally sweet red wine, sweet tomatoes and lava.
</p>
<p>
<strong><br>Amy Santiago</strong><br>Birmingham, UK
</p>
</div>
</div>
</section>
<section class="visitor-review-2">
<div class="review-2">
<img id="user-image-2" src="media/profile-picture-2.png">
<div id=visitor-comment-2>
<p>We went to a restaurant with a beautiful terrace called Elinikon and had the most amazing view. Not only the sunset but before and after the sky remains beautiful colours! 100% must see when in Santorini.
</p>
<p>
<strong><br>Dave William</strong><br>London, UK
</p>
</div>
</div>
</section>
</section>
and CSS:
#reviews {
padding: 5rem 8rem 5rem 8rem;
height: 100px;
}
.visitor-review-1 {
background-image: url(media/speech-bubble-left_1.svg);
background-repeat: no-repeat;
background-size: 30rem;
height: 350px;
margin-top: 2.9rem;
}
.visitor-review-2 {
background-image: url(media/speech-bubble-right.svg);
background-repeat: no-repeat;
background-position: right;
background-size: 30rem;
height: 350px;
position: relative;
top: -9rem;
}
.review-1 {
width: 40%;
position: absolute;
}
.review-2 {
width: 50%;
margin-left: 52%;
position: absolute;
}
#user-image-1 {
width: 110px;
position: relative;
left: 180px;
top: 26px;
}
#visitor-comment-1 {
font-family: 'Lato', sans-serif;
padding: 2rem 4rem 0rem 3rem;
color: rgba(16, 37, 89, 0.78);
text-align: center;
position: relative;
}
#user-image-2 {
width: 110px;
position: relative;
left: 180px;
top: 26px;
}
#visitor-comment-2 {
font-family: 'Lato', sans-serif;
padding: 2rem 4rem 0rem 3rem;
color: rgba(16, 37, 89, 0.78);
text-align: center;
position: relative;
}
You can use the #media tag to tell your code what to do if the max-width of the screen is some size, example:
#media only screen and (max-width: 425px) {
.review-1 {
width: 550%;
position: absolute;
}
/*And keep filling in what you want changed at screensizes here*/
}
I've got a problem with my text when the browser is shrunk or on a mobile device. Here is a screenshot to help explain. On a larger screen the 'matched' text is on the same line as 'what is' so there is no problem. Below is the code I'm using at the minute. I would like the gap to be the same as the one below 'matched'. Thanks in advance.
HTML
<div class="outer-wrapper">
<img class="aligncenter wp-image-1015"
src="https://www.thesurebettor.com/wp-content/uploads/2017/05/what-is-
matched-betting-1.jpg" alt="" width="750" height="431" />
<div class="text-wrapper"><p>What is matched</p><p>betting?</P>
</div>
</div>
CSS
.aligncenter {
display: block;
margin: auto;
max-width: 100%;
height: auto;
}
.outer-wrapper {
position: relative;
}
.text-wrapper {
position: absolute;
left: 50%;
top: 35px;
transform: translateX(-90%);
color: white;
font-size: 52px;
font-weight: bold;
}
You are using two paragraphs for the text, but semantically it is one paragraph:
<p>What is matched betting?</p>
This is also the root of your problem - you can solve it using two paragraphs by ensuring the line height and the margins/padding match - but using a single paragraph would be better.
Just add line-height: 1 on .text-wrapper div.
.aligncenter {
display: block;
margin: auto;
max-width: 100%;
height: auto;
}
.outer-wrapper {
position: relative;
}
.text-wrapper {
position: absolute;
left: 50%;
top: 35px;
transform: translateX(-90%);
color: white;
font-size: 52px;
font-weight: bold;
line-height:1;
}
<div class="outer-wrapper">
<img class="aligncenter wp-image-1015"
src="https://www.thesurebettor.com/wp-content/uploads/2017/05/what-is-
matched-betting-1.jpg" alt="" width="750" height="431" />
<div class="text-wrapper"><p>What is matched</p><p>betting?</p></div>
</div>
You written wrong html. please make it correct.
.aligncenter {
display: block;
margin: auto;
max-width: 100%;
height: auto;
}
.outer-wrapper {
position: relative;
}
.text-wrapper {
position: absolute;
left: 50%;
top: 35px;
transform: translateX(-90%);
color: white;
font-size: 52px;
font-weight: bold;
}
<div class="outer-wrapper">
<img class="aligncenter wp-image-1015"
src="https://www.thesurebettor.com/wp-content/uploads/2017/05/what-is-
matched-betting-1.jpg" alt="" width="750" height="431" />
<div class="text-wrapper"><p>What is matched</p><p>betting?</p></div>
</div>
Click here for the Snapshot
Your issue is not reproducible from my end, check the above snapshot.
It may be caused because of some other styling in your css. Anyhow
please make text responsive.
Please include font-size: 100% for the body and use media query to target the screen where the text is overlapping
eg.,
#media only screen and (min-width: 320px) and (max-width: 535px){
//give font-size in percentage for text-wrapper p and if required include line-height as well
}
I am trying to make my text appear ontop of my background image. I have tried playing around with the z-index and positioning, but cannot seem to get it right.
Here is my HTML:
<div id="float-left">
<div id="triangles">
<img src="img/trianglebackground.png" id="tripic">
</div>
<div id="float-left-text">
<img src="img/portrait.png" id="port">
</div>
</div>
Here is the CSS I have currently:
#tripic {
z-index:1;
height: 550px;
width: 500px;
text-align: center;
opacity: 0.2;
position: relative;
}
#float-left {
float: left;
/*background: url('img/trianglebackground.png') no-repeat center;*/
background-size:500px 550px;
background-color: #03C9A9;
height: 550px;
width: 50%;
z-index:0 ;
position: relative;
}
#float-left-text{
text-align: center;
z-index: 100;
position: absolute;
}
#port {
height: 200px;
width: 125px;
}
Right now, the entire #floatlefttext section is below the background image, whereas I would like it to be ontop. I have tried to use background-image, but I am not sure it's going to be the best way to get the results I would like. Any advice would be great, thanks!
I created a fiddle for you here: https://jsfiddle.net/0w1max4f/
#floatlefttext{
text-align: center;
z-index: 100;
position: absolute;
top: 0px;
left: 0px;
}
Is this what you were looking for? Since your html didn't actually include any text elements (just an image) to be placed on top of the background, but hopefully this will help you anyway.
What I did was to clean up your html (you had some tags that were not properly closed, for example the images and some divs) and add top and left to you absolute positioned div.
You were using absolute and relative positioning correctly but forgot to specifiy where the absolute positioned item were supposed to be placed.
here's a good article about positioning if you want to learn more:
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Something like this
<div style="position: relative; background: url(path to image); width: (width)px; height: (height)px;">
<div style="position: absolute; bottom: 0; left: 0.5em; width: 400px; font-weight: bold; color: #fff;">
<p>(text to appear at the bottom left of the image)</p>
</div>
<p style="position: absolute; top: 1em; right: 2em; width: 120px; padding: 4px; background-color: #fff; font-weight: bold; font-size: 11px;">
(text to appear at the top right of the image)
</p>
</div>
Be aware that you should separate the css from the html
Fiddle: Text ontop of an image and linkage
CSS:
div.image-container
{
width: 400px;
}
a.imagewrapper
{
width:inherit;
}
img.theimage{
width:inherit;
}
a.teasertext
{
position: absolute;
padding-top: 1%;
color: #fff;
line-height: 1.2em;
text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
letter-spacing: .02em;
font-size: 1.5em;
overflow-wrap: break-word;
overflow-y: hidden;
-webkit-transition: all .3s;
transition: all .3s;
font-size: 41px;
width:inherit;
}
HTML:
<div>WOOP DE DOO</div>
<div class="image-container">
<a class="teasertext" href="www.stackoverflow.com">Text on the image, wow amazing !</a>
<a class="imagewrapper" href="www.stackoverflow.com">
<img class="theimage" src="http://img.thesun.co.uk/aidemitlum/archive/01667/THUNDER620_1667926a.jpg">
</a>
</div>
<div class="image-container">
<a class="teasertext" href="www.stackoverflow.com">Text on the image, wow amazing !</a>
<a class="imagewrapper" href="www.stackoverflow.com">
<img class="theimage" src="http://img.thesun.co.uk/aidemitlum/archive/01667/THUNDER620_1667926a.jpg">
</a>
</div>
<div>WOOP DE DOO</div>