i'm new to html and im having some problems adding a footer. More specifically, when i add the footer, the 'form' gets pulled until it reaches the footer - like this http://tinypic.com/view.php?pic=jhbw5g&s=7 . How can i stop it from extending the body of the form?
html code
<body>
<div id="formWrapper">
</center>
<form method ="post" action="addMember.php">
<label for="name">Username:</label>
<input name="name"/>
<label for="password">Password:</label>
<input name="password"/>
<label for="email">Email:</label>
<input name="email"/>
<p>
<fieldset>
<input class="btn" name="submit" type="Submit" value="Register"/>
<input class="btn" name="reset" type="reset" value="Clear Form">
</fieldset>
</form>
<div class="push"></div></div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
Stylesheet
#formWrapper{
width:400px;
border:solid 5px #F1F1F1;
margin-top:300;
margin-bottom:10;
margin-right: auto;
margin-left: auto;
background-color: #AFC8DE;
padding-top: 10px;
min-height: 100%;
height: auto !important;
height: 100%;
}
html, body { height: 100%; }
.push{ background-color: #903; margin: 50px; }
.footer { height: 4em; background-color: #103; }
More specifically min-height: 100%; makes it drag out but unsure how to fix it.
I don't know what exactly your needs are, but for one your footer div is within the form wrapper, so it will follow the height of whatever that wrapper is.
http://jsfiddle.net/7SgGT/
Here is something I quickly put together. This should get you started on what you're looking for I believe.
There are a few of problems in your HTML code as posted.
a "center" end-tag with no start
the second "input" tag is not closed
empty div.push tag?
the indents look off (maybe due to stackoverflow formatting?)
Please reexamine your HTML and edit the question with updated HTML if the problem does not resolve.
Try something like this..
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
and the CSS..
html, body {margin:0; padding:0; height:100%;}
#container {min-height:100%; position:relative;}
#body {padding:10px; padding-bottom:60px; /* Height of the footer */}
#footer {position:absolute; bottom:0; width:100%; height:60px; /* Height of the footer */;
}
Related
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 am new to CSS. Created a form with 4 input text boxes. Here is the code:
body {
background: #484848;
color: white;
margin:0px;
}
.pagetop{
width:1280px
}
header{
background: #D9853B;
padding:15px 40px;
margin:20px;
}
a{
color:white;
}
div{
padding:2px;
}
.pagetop nav h1,ul,li{
display:inline;
}
nav ul,li{
padding: 20px;
}
.signinform{
margin:0 auto;
margin-top:20px;
max-width: 600px;
}
.inputleft{
width: 30%;
float: left;
text-align: right;
}
.inputright{
width: 65%;
margin-left: 10px;
float:left;
}
.submitbutton{
width: 60%;
align-self: center;
}
<html>
<head>
<link rel="stylesheet" href="src/static/base.css">
</head>
<form method="post" class="signinform">
<div class="inputleft">
UserName:
</div>
<div class="inputright">
<input type="text" name="username" value={{username}}>
</div>
<div class="inputleft">
Password:
</div>
<div class="inputright">
<input type="password" name="pwd">
</div>
<div class="inputleft">
Verify Password:
</div>
<div class="inputright">
<input type="password" name="pwdverify">
</div>
<div class="inputleft">
Email(Optional):
</div>
<div class="inputright">
<input type="text" name="email" value={{email}}>
</div>
<div>
<input type="submit">
</div>
</form>
</html>
The last div element in the form covers all of the form when viewed in inspector in Firefox browser, my understanding says when I hover over div element then only div element should be highlighted not the other elements of form element.
This problem occurs when I apply the inputright style. Please explaing what's going on here.
First you have to close your <form> tag and the main thing to remember is to use clear:both; after every div where you have used float css.
This is must thing while using float as by float we are breaking the flow and pushing element to come inline so when element did not fit in space they got misaligned. You did not get that issue yet but to save your self by that issue, better use clear:both after every floated div so it will clear the blank space and you will save from that issue.
Also if you won't clear then it won't appear in inspect too. See my example i have used clear:both after every floated row so there won't be any issue with blank space or inspect element like you are facing.
So i wanted to make my website fluid. So i started with my wrapper and header. The css:
#wrapper {
max-width:1600px;
width:100%;
margin:0 auto;
}
#header {
margin: 0 auto;
width: 100%;
height: 7.5%;
background-color: #0066FF;
display: table-cell;
vertical-align: middle;
}
The HTML:
<div id="wrapper">
<div id="header">
<div id="logo_wrapper">
<span class="logonaam1">O</span><span class="logonaam2">b</span><span class="logonaam1">l</span><span class="logonaam2">e</span><span class="logonaam1">c</span><span class="logonaam2">t</span><span class="logonaam1">a</span><span class="logonaam2">r</span><span class="logonaam1">e</span>
</div>
<form action="login.php" method="post">
<div id="aanmeldform_submit">
<input type="submit" name = "submit_login" value="Aanmelden" id="submit_knop" />
</div>
<div id="aanmeldform_wachtwoord">
<input type="password" name ="password" value="" id="aanmeld_knop" required placeholder="Voer je wachtwoord in" />
</div>
<div id="aanmeldform_email">
<input type="email" name="email" value="" id="aanmeld_knop" required placeholder="Voer je e-mail in" autofocus/>
</div>
</form>
</div>
The header should span the entire width of the screen, just like the wrapper. But for some reason, when i set the width of the header also to 100% the header only is like 1/3 of the screen. When i change the width of my header to around 1 - 10 % it DOES span the whole width for some reason. Anyone know what is causing this? Also included a fiddle for better understanding: http://jsfiddle.net/4J7JJ/
When you set the header in the fiddle to 1% you can see it does span the entire width for some reason..
Thanks in advance!
Try change display
#header {
margin: 0 auto;
width: 100%;
height: 7.5%;
background-color: #0066FF;
display: inline-table; /* that fix the problem */
vertical-align: middle;
}
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;
}
I want all my information to be in the center as you can see in the link below:
http://jsfiddle.net/EdHEu/
It looks fine BUT when i stretch/maximize the browser page the layout changes by text going right and then the boxes moving.
How is this stopped?
Thanks!
James
NOTE: Your Link is not working.
If your setup is like this:
<body>
<div id="main">
<div id="content">
<!--Content-->
</div>
<div id="sidebar">
<!--Sidebar-->
</div>
</div>
</body>
To Center the content ( to give the page a fixed width ), you need to use this CSS:
#main {
width:960px /* Give it a width */
margin: 0 auto; /* It will Center the #main */
}
This way, you can give the page a fixed width and make the layout fixed.
Why don't you take a look at this code (jsfiddle) & see if that cleans it up a bit more, too.
HTML:
<div class="content">
<form class="location" action="weezyresults.php" method="post">
<div>
<label for="job">job?</label>
<div class="input" name="job" >
<!-- change me back to your inputs,
and in the css change '.input' to 'input' -->
</div>
<label>job title or keywords</label>
</div>
<div>
<label for="where">where?</label>
<div class="input" name="where" >
<!-- change me back to your inputs,
and in the css change '.input' to 'input' -->
</div>
<label>town, city or county</label>
</div>
</form>
</div><!-- end .content -->
CSS:
.content {
margin:0 auto;
width:200px;
}
form>div { margin-bottom: 10px; }
form .input {
background: #ffffff;
border: 1px solid;
color: #BDBDBD;
height:35px;
margin:2px;
width: 320px;
}
div>label:first-child {
color: #585858;
font: bold 16px helvetica;
height:20px;
margin: 4px;
width: 320px;
}
div>label:last-child {
color: #585858;
font:italic 13px HelveticaNeue-Light;
margin: 4px;
}
.center {
text-align:center;
margin:0 auto;
width: 651px;
}