I've been trying to get my footer to move to the bottom right. It currently is the only thing on the page that doesn't move AT ALL when I resize the browser, much less to the bottom of the page or to the right. I'm new to HTML, mostly doing this as an output for a data science project. Here is my code:
<!DOCTYPE html>
<html lang="en">
<style>
html {
background: url("https://lh3.ggpht.com/TOsicwUVM6bKoB1_u_5noea0kkFAegkAdBFQcmTXhwKrN5485URcl0IWxgjldjd59A=h900") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body { height: 100%;}
#nonFooter { position: relative; min-height: 100%;}
* html #nonFooter { height: 100%;}
#Footer { position: relative; margin-top: -7.5em; }
</style>
<body>
<div class="page-wrap">
<div class="header">
<h3 style ="color:#FFFFFF" class="text-muted">Headerthing</h3>
</div>
<div>
<h1 align="center" style ="color:#FFFFFF">Predict tool</h1>
<p class="lead"></p>
</div>
<div style ="width: 300px; margin: 130px auto 0 auto; ">
<div style ="color:#FFFFFF;">
<form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
<form action="/action_page.php">
Instagram Handle:<br>
<input type="text" name="handle"><br>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
<footer class="site-footer">
<p style="color:white">Founders: Charles Barkley, Hakeem the Dream and Shaqs fat ass </p>
</footer>
</body>
</html>
Your footer is already at the bottom of the page.
"By moving it down" I assume you're referring to the margins that are automatically assigned to the <p> tag by default.
You can remove these, and get the text the appear at the absolute bottom-right with the following CSS:
.site-footer p {
margin: 0;
position: absolute;
bottom: 0;
right: 0;
}
I've created a updated showcase in Fiddle Playground.
Note that position: absolute in conjunction with bottom: 0. This will make your footer stay at the bottom-right of the visible screen. The element will always be visible, even if you haven't scrolled to its location yet.
Hope this helps! :)
Related
I have a Asp.net core project. I am trying to set background image for a specific page view, but it doesn't show any image! I was wondering if I need to modify any codes in the main style.css file.
Here's the view page
#mycontact:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url("~/image/RealHome.jpg") no-repeat center;
background-size: cover;
filter: blur(50px);
z-index: -1;
}
.left {
background: url("~/image/RealHome.jpg") no-repeat center;
background-size: cover;
height: 100%;
}
<section id="contact">
<div id="mycontact" class="container">
<div class="contact-box">
<div class="left"></div>
<div class="right">
<h2>Contact Us</h2>
<form action="mailto:info#amrealestatesellfast.com" method="get" enctype="text/plain">
<input type="text" class="field" placeholder="Your Email">
<textarea placeholder="Message" class="field"></textarea>
<button id="submitbtn" type="submit" class="btn">Send</button>
</form>
</div>
</div>
</div>
</section>
the ~ notation is invalid to the browser, try to remove or use the absolute address like http://domain/path/to/the/image.jpg
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 1 year ago.
I want to stick the footer to the bottom of my page, My normal approach is just using column flex but that doesn't work so I searched online, I saw some answers people were saying using position:absolute; this fixes the problem, while it did but it also came with a problem, when the content was more than the 100vh entire screen, the footer would stay at its position instead of coming down with the page content.
You can try:
position: fixed;
left: 0;
bottom: 0;
width: 100%;
opacity: 0;
You can fix this issue using flex-box on the body like so, This will not make the footer fixed, but instead it will push the footer down the page even if the content is less than 100vh
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
footer {
margin-top: auto;
}
using position:fixed would make your footer always stay in the same position and overflow content would go below it. you can use 2 div containers and use the first to put all your content in and set its min-height:90vh; and use the second container for footer ans set its
height:10vh;
position:relative;
bottom:0;
left:0;
right:0;
so the footer will always be pushed below the content since position is relative
run the code snippet
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.footer{
height: 10vh;
position: relative ;
left: 0;
right: 0;
bottom: 0;
background-color: #ddd;
}
</style>
</head>
<body>
<div style="min-height: 90vh;">
<input type="button" name="copy" value="add new form" >
<form id="form1" action=""><br>
<label for="college">College</label><br>
<input name="college" type="text" />
<label for="degree">Degree</label><br>
<input name="degree" type="text" /><br>
<label for="discipline">Discipline</label><br>
<input name="discipline" type="text" /><br>
<label for="passout-year">Passout Year</label><br>
<input name="passout-year" type="number" min="2000" max="2021" /><br>
<input type="submit" value="Submit" /><br>
<input type="button" value="delete form" /><br>
</form>
</div>
<div class="footer">
tr
<br>
tr
<br>
</div>
</body>
</html>
I want to change the background of a Website from a normal color to a picture.
The CSS-Code:
.bg {
opacity: 5;
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 100%;
background-image: url('../../assets/pics/bg.jpg');
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 5;
}
If I write
<body class="bg">
in the HTML File, the Website is white. (If I add blur Effects, they will shown over all other elements). If I do
<img id="logo" src="path to img">
It works but I want it with CSS because its smarter :D
The image is here: (from the CSS-File)
../../assets/pics/bg.jpg
And I dont get any Errors in Chrome (in Developer tools)
Can u help me?
(If it helps, i want to edit the page "mcggehrden.de/idesk/v3" and want to set a a custom background)
You need something like this?: View Full Size
<div class="container">
<div class="row text-center">
<div class="col-md-3 col-md-offset-5">
<h1>MCG Gehrden</h1>
<form class="login-form" action="/idesk/v3/login_check" method="post">
<h3><span class="glyphicon glyphicon-user"></span> IServ-Anmeldung</h3>
<input class="form-control" type="text" name="_username" value="" placeholder="Account" required="required" autofocus="autofocus"/>
<input class="form-control" type="password" name="_password" placeholder="Passwort" required="required" />
<div class="checkbox">
<label><input type="checkbox" id="remember_me" name="_remember_me" /> Angemeldet bleiben</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Anmelden</button>
</form>
</div>
</div>
CSS:
*{ padding: 0; margin: 0; }
body {
color: white;
background:
url(https://mcggehrden.de/idesk/v3/img/logo.png) 100% 60vh no-repeat,
url(https://mcggehrden.de/idesk/v3/img/circles.png) 0px 100px no-repeat,
#244c7f ;
}
form{
background-color: white;
padding: 20px;
}
When adding an img to body in css you don't have necessary to specify a class for the "body" tag. In css you can directly say body {..your styles..}. Then, insted of top, left, right and bottom say directly margin:0. Also the position absolute should not be there and an opacity of 5 cannot exist. A z-index of 5 would not do anything. My suggestion is to put a width of 100% and a height of auto or the height be specified in "px". Try this and let me know.
Here's the code in the body of my HTML:
<div id="mtx_bckgd">
<p id="mtx_txt"></p>
</div>
<div class="outerdiv" id="headerbox">
<div id="uwlogo">
<img src="uwlogo.png" height="50px">
</div>
<div id="JaminWEB">
<h1>JaminWEB</h1>
</div>
</div>
<div class="outerdiv" id="navbar">
<input type="button" class="navbutton" value="Running Calculator"/>
<input type="button" class="navbutton"/>
<input type="button" class="navbutton"/>
</div>
<div class="outerdiv" id="footer">
<p>Last modified: March 21st, 2014</p>
</div>
Here's the relevant CSS:
#mtx_bckgd
{
font-family: "Courier New";
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
z-index: -1;
background: linear-gradient(180deg, #39275b, #FFF);
}
#headerbox
{
width: 80%;
height: 50px;
}
#navbar
{
width: 80%;
height: 30px;
}
#footer
{
position: absolute;
bottom: 0px;
height: 100px;
width: 80%;
}
The headerbox and navbar are supposed to be aligned at the top in their respective orders. The footer is supposed to be aligned at the bottom. What's going on that is making my footer ABOVE the other two, and everything aligned at the bottom?
Remove the:
height: 100%;
from the #mtx_bckgd element
Also, nothing to do with the problem, but change
<img src="uwlogo.png" height="50px">
to
<img src="uwlogo.png" height="50px" />
As your image tag isn't closed
The mtx_bckgd is occupying 100% width and 100% height (so all your screen). The footer is absolute at the bottom, so it's over the mtx_bckgd and at the bottom of your screen. Finally, the two other div tags, are at the bottom cuz again the mtx_bckgd is occupying all the screen and they have to be after it.
What layout do you want to achieve ?
i'm currenty developing a website, and i have a problem on the header background, so the header that i'm making is:
http://i.imgur.com/h1JLm9A.jpg
and currently i have this:
http://i.imgur.com/LgF6HXm.jpg
I'm trying to put a background image on the header, but to have the correct positioning of the image, it can not be in the header, because the image is also showing out of the header. how can i do this? i try to use z-index but don't works.
html:
<div id="container">
<div id="header">
<div id="logo">
<img src="http://localhost/Yazigi/wp-content/uploads/2013/01/logo.png" width="155" height="85" alt="Yazigi – Araçatuba">
</div>
<span class="site-description ir">Você cidadão do mundo</span>
<form method="get" id="searchform" class="search" action="#">
<input type="text" class="search_input" name="s" id="s" placeholder="Procure aqui">
<input type="submit" class="search_bt ir" name="submit" id="searchsubmit" value="">
</form>
<ul class="menu l_tinynav1">
<li class="current_page_item">Início</li>
<li class="page_item page-item-2">Página de Exemplo</li>
</ul>
</div>
</div>
CSS:
#container {
margin: 0 auto;
max-width: 960px;
padding: 0px 25px;
}
#header {
height: 232px;
background: url(images/topbg.jpg);
margin: 0;
}
Why not use an image in your header instead of using a CSS background?
Put it behind the header with an absolute position and some negative z-index and then just margin it where you want it to be.
Here's some code showing this: (fiddle)
<div id="header">
<img src="http://jamesmcgillis.com/upload/google_logo_1_small(1).jpg"/>
</div>
<style>
#header {
height: 232px;
border: solid;
margin-left: 120px;
}
img {
margin-left: -50px;
z-index:-1;
position:absolute;
}
</style>
Is that what you need?
You have many different approaches here, but probable the most cross-browser compatible would be this:
1. In html: create an outer div, (of course, with 100% width) and add to it the map/drawing image background.
<div id="outer-container">
<div id="container">
<div id="header">... etc
</div>
</div>
</div> <!-- outer-container-->
2. In css:
a) Add the gradient image to the body with background property.
b) Add the map / drawing image to the outer-container with background property.
body {
background: (your-gradient-gray-image.jpg) repeat-x;
}
#outer-container {
background: url(images/topbg.jpg) no-repeat center top;
}