I am working on site with fixed links on the top and fixed submit buttons at the bottom. The content in between is scrollable using overflow:auto;
When I reduce the height of the browser window size
I am noticing 2 probelms:
The scroller height doesnt change with the height of the browser.
When the height is reduced the fixed button shows on top of the scroller
How can i make the button always stay at a fixed position and also the auto adjust overflow height when the browser height changes?
I've made a JSFiddle demonstration of my problem here ->
MY JSFIDDLeDEMO
I am working Firefox 19.0 and chrome version 26.0.1410.12 and IE9
Here is my code in JSfiddle:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>overflow based Layout</title>
<style type="text/css">
<!--
/* Pretty Stuff */
/* Zero down margin and paddin on all elements */
* {
margin: 0;
padding: 0;
}
body {
font: 92.5%/1.6"Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
}
h1 {
font-size: 2.4em;
font-weight: normal;
}
h2 {
font-size: 2.0em;
font-weight: normal;
}
p, li {
font-size: 1.4em;
}
h1, h2, p {
margin: 1em 0;
}
#branding h1 {
margin: 0;
}
#wrapper {
background-color: #fff;
}
#branding {
height: 50px;
background-color:#b0b0b0;
padding: 20px;
}
#form-b {
height: 500px;
overflow: auto;
position: fixed;
top: 164px;
width: 98%;
}
#mainNav {
list-style: none;
background-color:#eee;
}
#footer {
background-color:#b0b0b0;
padding: 1px 20px;
}
/* The Core Technique
================================= */
body {
text-align: center;
min-width: 1260px;
}
#wrapper {
width: 100%;
margin: 0 auto;
text-align: left;
}
#content {
width: 100%;
float: right;
}
#mainNav li {
/* width: 180px;
float: left; */
display:inline;
}
#submit-b {
border: 0px solid red;
bottom: 77px;
position: fixed;
text-align: cemter;
width: 100%;
}
#footer {
clear: both;
}
/* Add some padding
================================== */
#mainNav {
padding-top: 20px;
padding-bottom: 20px;
position: fixed;
width: 100%;
}
#mainNav * {
padding-left: 20px;
padding-right: 20px;
}
#mainNav * * {
padding-left: 0;
padding-right: 0;
}
#content * {
padding-right: 20px;
}
#content * * {
padding-right: 0;
}
-->
/* fieldset styling */
fieldset {
margin: 1em 0;
/* space out the fieldsets a little*/
padding: 1em;
border : 1px solid #ccc;
background-color:#F5F5F5
}
/* legend styling */
legend {
font-weight: bold;
}
form p {
position: relative;
width: 100%;
}
/* style for labels */
label {
float: left;
width: 10em;
}
#remember-me label {
width: 4em;
}
/* style for required labels */
label .required {
font-size: 0.83em;
color:#760000;
}
/* style error messages */
label .feedback {
position: absolute;
margin-left: 11em;
left: 200px;
right: 0;
font-weight: bold;
color:#760000;
padding-left: 18px;
background: url(images/error.png) no-repeat left top;
}
/* :KLUDGE: Explicitly set the width for IE6- */
* html .feedback {
width: 10em;
}
input {
width: 200px;
}
input[type="text"], textarea {
border-top: 2px solid #999;
border-left: 2px solid #999;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}
input.radio, input.checkbox, input.submit {
width: auto;
}
/* style form elements on focus */
input:focus, textarea:focus {
background: #ffc;
}
input.radio {
float: left;
margin-right: 1em;
}
textarea {
width: 300px;
height: 100px;
}
/* Date of Birth form styling */
#monthOfBirthLabel, #yearOfBirthLabel {
text-indent: -1000em;
width: 0;
}
#dateOfBirth {
width: 3em;
margin-right: 0.5em;
}
#monthOfBirth {
width: 10em;
margin-right: 0.5em;
}
#yearOfBirth {
width: 5em;
}
/* Color form styling */
#favoriteColor {
margin: 0;
padding: 0;
border: none;
background: transparent;
}
#favoriteColor h2 {
width: 10em;
float: left;
font-size: 1em;
font-weight: normal;
}
#favoriteColor div {
width: 8em;
float: left;
}
#favoriteColor label {
/*width: 3em;*/
float: none;
display: inline;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="branding">
<h1>Branding</h1>
</div>
<div id="content">
<ul id="mainNav">
<li class="first">
Home
</li>
<li>
About
</li>
<li>
News
</li>
<li>
Products
</li>
<li>
Services
</li>
<li>
Clients
</li>
<li>
Case Studies
</li>
</ul>
<div id="form-b">
<form id="comments_form" action="#" method="post">
<fieldset>
<legend>Your Contact Details</legend>
<p>
<label for="author">Name: <span class="required">(Required)</span>
</label>
<input name="author" id="author" type="text" />
</p>
<p>
<label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span>
</label>
<input name="email" id="email" type="text" />
</p>
<p>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</p>
</fieldset>
<fieldset>
<legend>Your Contact Details</legend>
<p>
<label for="author">Name: <span class="required">(Required)</span>
</label>
<input name="author" id="author" type="text" />
</p>
<p>
<label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span>
</label>
<input name="email" id="email" type="text" />
</p>
<p>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</p>
</fieldset>
<fieldset>
<legend>Your Contact Details</legend>
<p>
<label for="author">Name: <span class="required">(Required)</span>
</label>
<input name="author" id="author" type="text" />
</p>
<p>
<label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span>
</label>
<input name="email" id="email" type="text" />
</p>
<p>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</p>
</fieldset>
<fieldset>
<legend>Your Contact Details</legend>
<p>
<label for="author">Name: <span class="required">(Required)</span>
</label>
<input name="author" id="author" type="text" />
</p>
<p>
<label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span>
</label>
<input name="email" id="email" type="text" />
</p>
<p>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</p>
</fieldset>
<fieldset id="submit-b">
<legend></legend>
<p>
<input id="submit" class="submit" name="submit" type="submit" />
</p>
</fieldset>
</form>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
1. The scroller height doesnt change with the height of the browser.
That is because you have set a fixed height for #form-b, set at 500px:
#form-b {
height: 500px;
overflow: auto;
position: fixed;
top: 164px;
width: 98%;
}
2. When the height is reduced the fixed button shows on top of the scroller
It is unnecessary to wrap the submit button with a fieldset. Simply absolutely position the submit button relative to the containing parent, <form>.
3. How can i make the button always stay at a fixed position and also the auto adjust overflow height when the browser height changes?
Fixed position as in, fixed in the viewport, or fixed relative to the scrolling div? Moreover, you will have to rely on JS to readjust the height of the form whenever browser height changes, something along the line of:
$(document).ready(function() {
$(window).resize(function() {
// Set <form> height here with calculations (...)
$("#form-b).height(...);
}).resize(); // Trigger another resize when document is ready
});
Related
Pretty straightforward. I'm trying to resize individual input boxes, but when I try to resize them (using classes) it resizes every box. Not sure what is wrong. Here's the code:
/* Centre the page */
.body {
margin: 0 auto;
width: 450px;
top: 50px;
background-color: #444;
overflow: hidden;
position: relative;
display: block;
padding: 5px;
}
/* Centre the form within the page */
form {
margin:0 auto;
text-align: center;
}
/* Style the text boxes */
input, textarea {
height:30px;
background:#444;
border:1px solid white;
padding:10px;
font-size:1.4em;
color:white;
font-family: 'Lato', sans-serif;
}
input:focus, textarea:focus {
border:1px solid white;
color: white;
}
#submit {
height: 50px;
cursor: pointer;
}
#submit:hover {
background-color:#005f5f ;
}
.info {
size: 175px;
}
.message {
size: 400px;
}
<div class="body">
<form method="post" action="../php/index.php">
<input class="info" name="name" placeholder="What's your name?">
<input class="info" name="email" type="email" placeholder="What's your email?">
<textarea class="message" name="message" placeholder="How can I help?"></textarea>
<input class="info" id="submit" name="submit" type="submit" value="Submit">
</form>
</div>
Any help would be appreciated. I know the code is messy, I've been trying everything so I haven't had time to clean it up. Thanks in advance!
size is not a precise method for sizing your html input according to the HTML specification.
I would recommend using eg: width: 10em or width: 20px to size the width of your input.
For CSS, you could use the name attributes to specify the element you want to have with a different width.
.info[name='email'] {
width: 12em;
}
.info[name='name'] {
width: 13em;
}
<input class="info" name="name" placeholder="What's your name?">
<input class="info" name="email" type="email" placeholder="What's your email?">
Having different class name for the different elements also works.
.info-long {
width: 130px;
}
.info-short {
width: 100px;
}
<input class="info-long" name="name" placeholder="What's your name?">
<input class="info-short" name="email" type="email" placeholder="What's your email?">
Run the snippets below for an example for different width input form.
/* Centre the page */
.body {
margin: 0 auto;
width: 450px;
top: 50px;
background-color: #444;
overflow: hidden;
position: relative;
display: block;
padding: 5px;
}
/* Centre the form within the page */
form {
margin:0 auto;
text-align: center;
}
/* Style the text boxes */
input, textarea {
height:30px;
background:#444;
border:1px solid white;
padding:10px;
font-size:1.4em;
color:white;
font-family: 'Lato', sans-serif;
}
input:focus, textarea:focus {
border:1px solid white;
color: white;
}
#submit {
height: 50px;
cursor: pointer;
}
#submit:hover {
background-color:#005f5f ;
}
.info[name="name"] {
width: 13em;
}
.info[name='email'] {
width: 12em;
}
.message {
width: 400px;
}
<div class="body">
<form method="post" action="../php/index.php">
<input class="info" name="name" placeholder="What's your name?">
<input class="info" name="email" type="email" placeholder="What's your email?">
<textarea class="message" name="message" placeholder="How can I help?"></textarea>
<input class="info" id="submit" name="submit" type="submit" value="Submit">
</form>
</div>
The class for all your inputs are the same ie. info. All inputs that have the same class will get the same styles.So, your resizing will apply to all of them. Give a different class to the input you want to resize or prefrebly give an id and then resize it using CSS. Since info has only the width specified inside it other aspects won't change.
i have no idea what the problem is! No matter what i try it wont work, the divs just overlap in the middle of the screen. I tried using every possible combination of display and position.
I need the divs to go one under another.
http://jsfiddle.net/s2dv6agr/
please help :(
#container{
position: relative;
}
#container1{
position: absolute;
z-index: 100;
}
#container2{
position: absolute;
z-index: 110;
}
Assuming the following HTML
<div id="container">
<div id="container1">
Hello
</div>
<div id="container2">
Hello again
</div>
</div>
#container {
position: relative;
}
#container1 {
position: relative;
z-index: 100;
}
#container2 {
position: relative;
z-index: 110;
}
This will display below each other.
http://jsfiddle.net/baLz1tvo/
Remove position:absolute and use position:relative at everywhere.
Use:
#container1{float: left}
#container2{float:right}
Try This : just example
* {
margin: 0;
padding: 0;
}
body {
font-size: 62.5%;
font-family: Helvetica, sans-serif;
background: url(images/stripe.png) repeat;
}
p {
font-size: 1.3em;
margin-bottom: 15px;
}
#page-wrap {
width: 660px;
background: white;
padding: 20px 50px 20px 50px;
margin: 20px auto;
min-height: 500px;
height: auto !important;
height: 500px;
}
#contact-area {
width: 600px;
margin-top: 25px;
}
#contact-area input, #contact-area textarea {
padding: 5px;
width: 371px;
font-family: Helvetica, sans-serif;
font-size: 1.4em;
margin: 0px 0px 10px 0px;
border: 2px solid #ccc;
}
#contact-area textarea {
height: 90px;
}
#contact-area textarea:focus, #contact-area input:focus {
border: 2px solid #900;
}
#contact-area input.submit-button {
width: 100px;
float: right;
margin-top:30px;
}
label {
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
padding-top: 5px;
font-size: 1.4em;
}
<div id="contact-area">
<form method="post" action="contactengine.php">
<label for="Name">Gaming:</label>
<input type="text" name="Name" id="Name" />
<label for="City">Sports:</label>
<input type="text" name="City" id="City" />
<label for="Email">Watching Tv:</label>
<input type="text" name="Email" id="Email" />
<label for="Email">Sleeping:</label>
<input type="text" name="Email" id="Email" />
<label for="Email">Hiking:</label>
<input type="text" name="Email" id="Email" />
<label for="Email">Skiing:</label>
<input type="text" name="Email" id="Email" />
<input type="submit" name="submit" value="Add my info" class="submit-button" />
</form>
Can you give some explanation for position: absolute , normally if we use position: absolute, everything come over to parent element. Use position: absolute with top, left , right , bottom properties to align different places.
I have the following input textboxes, but I have aligned them in css with {width: xxx px;} which is not a good practice as it will not always align correctly.
<style>
#left_col p {
margin-top: 15px;
margin-bottom: 15px;
}
.notvis {
display: none;
margin-top: 5px;
margin-bottom: 5px;
}
#ws_doc_txt {
width: 350px;
}
#ws_end_txt {
width: 358px;
}
#ws_ns_txt {
width: 340px;
}
#ws_op_txt {
width: 25%;
}
#left_col {
float: left;
width: 480px;
padding: 0 0 0 0;
}
#right_col {
margin: 0 0 0 500px;
padding: 0 0 0 0;
text-align: left;
}
#textarea1 {
text-align: left;
}
#button1 {
margin-top: 20px;
margin-bottom: 20px;
}
.greentxt {
color: green;
}
.redtxt {
color: red;
}
</style>
</head>
<body>
<div id="left_col">
<p>
<label>
<input type="radio" name="ws_type" value="WSDL" id="ws_type_0">
WSDL</label>
<label>
<input type="radio" name="ws_type" value="NOWSDL" id="ws_type_1">
Endpoint</label>
</p>
<p id="ws_doc">
<label for="ws_doc">Document:</label>
<input type="text" name="ws_doc" id="ws_doc_txt">
</p>
<p id="ws_end">
<label for="ws_end">Endpoint:</label>
<input type="text" name="ws_end" id="ws_end_txt">
</p>
<p id="ws_ns">
<label for="ws_ns">Namespace:</label>
<input type="text" name="ws_ns" id="ws_ns_txt">
</p>
<p>
<label for="ws_op">Operation:</label>
<input type="text" name="ws_op" id="ws_op_txt">
</p>
<p>
<label for="ws_par">Parameter:</label>
<input type="text" name="ws_par" id="ws_par_txt">
</p>
<p>
<label for="ws_val">Value:</label>
<input type="text" name="ws_val" id="ws_val_txt">
</p>
<input type="submit" name="test" value="Test">
</div>
What would be the correct way to make the width of the textboxes always stop at a certain point on the right side? Also, is using <p> tags to make inputs behave like block elements wrong? Could I just use css to have them stay 1 at each line? Thanks
Consider using a table to have all inputs aligned on the left side. Giving all inputs the same width should then align them perfectly on the right as well.
#left_table input {
width:350px;
}
<table id="left_table">
<tr>
<td><label for="ws_doc">Document:</label></td>
<td><input type="text" name="ws_doc" id="ws_doc_txt">
</tr>
<tr>
<td><label for="ws_end">Endpoint:</label></td>
<td><input type="text" name="ws_end" id="ws_end_txt">
</tr>
<!-- etc... -->
</table>
if you want all your text boxes to have the same attribute with proper positioning you can try this(obviously set proper values):
input[type='text']
{
width: 270px;
height: 30px;
top: 167px;
left: 43px;
position:relative;
margin-left: 10px;
background-color: #F3F3F3;
border: 1px solid #D6D6C2;
border-radius: 3px;
}
This is a simple issue, and i'm sure i am just overlooking something but if you will notice, in the 4th row, the label isn't aligning vertically. Take a look at it here on JSFiddle:
http://jsfiddle.net/uidezigns/HJEca/
HTML
<form class="lable_left">
<p>
<label for="fn">First name:</label>
<input type="text" name="fn">
</p>
<p>
<label for="ln">Last name:</label>
<input type="text" name="ln">
</p>
<p>
<label for="ph">Phone Number:</label>
<input type="tel" name="ph">
</p>
<p>
<label for="ad">Street Address:</label>
<textarea name="ad"></textarea>
</p>
<p>
<label for="ct">City:</label>
<input type="text" name="ct">
</p>
<p>
<label for="st">State:</label>
<input type="text" name="st">
</p>
<p>
<label for="zc">Postal:</label>
<input type="text" name="zc">
</p>
<input type="submit" value="Submit">
</form>
CSS
/* --- skins for visibility - Remove for implementation --- */
form {
margin: 40px;
padding: 20px;
background-color: #FAE2BF;
}
form p {
background-color: #F7CBC7;
}
form label {
background-color: #E5E2DB;
}
/*----------------------------------------------------------*/
form {
font: normal 12px Arial;
display: block;
}
form p {
padding: 0;
margin: 2px 0;
float: left;
width: 100%;
}
form.two_row p {
width: 50%;
}
form.three_row p {
width: 33%;
}
form label,form input,form textarea {
display: block;
}
label {
margin: 10px 0 0;
}
input {
}
textarea {
width: 100px height:100px;
margin: 0;
}
form.lable_left p {
display: table-cell;
vertical-align: middle;
}
form.lable_left label,form.lable_left input,form.lable_left textarea {
display: inline-block;
margin: 0;
}
form.lable_left label {
width: 120px;
}
form.lable_left input {
}
input[type="submit"] {
clear: both;
float: none;
}
Thanks in advance for any suggestions.
Include label { vertical-align: top; }
See this jsFiddle.
guess i fixed it myself...lol i needed to add:
form label,form input,form textarea { vertical-align:middle }
to the css
hello i have a problem using my editor. i'm using dreamweaver cs6 and would like to use a fieldset.
the problem with that is that i tried to implement my original code from here:
original code
where i thought it used to be same style in my editor. but it is not the same as in the example. as a result i will get this:
as you can see on left hand side it seems to be that there are automatically added tabs in there so that the input fields not flushes with the dark frame.
if there is someone who could tell me how to solve this i really would appreciate. thanks a lot.
UPDATE:
the picture above is what i will see in dreamweaver.
when i publish it on my webserver with that code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
#left {
height: 400px;
width: 500px;
float: left;
border: solid 2px #f23;
}
#left #frame {
background-color:#444444;
height: 337px;
width: 440px;
margin-top: 36px;
}
#left #frame form fieldset {
height: 337px;
width: 440px;
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
display: block;
border: none;
}
#left #frame form fieldset h1 {
margin-top: 15px;
font-size: 16px;
font-weight: bold;
margin-left: 10px;
}
#left #frame form fieldset h2 {
font-size: 13px;
font-weight:lighter;
margin-left: 10px;
margin-top: 3px;
}
#left #frame form fieldset ul {
list-style-type: none;
margin-top: 30px;
}
#left #frame form fieldset ul .fl label {
font-size: 12px;
color: #ECECEC;
font-weight: bolder;
width: 80px;
margin-bottom: 2px;
}
#left #frame form fieldset ul .fr label {
font-size: 12px;
color: #ECECEC;
font-weight: bolder;
width: 80px;
margin-bottom: 2px;
}
#left #frame form fieldset ul input {
color: #444444;
font-size: 10px;
width: 180px;
height: 18px;
padding-left: 5px;
outline:none;
}
#left #frame form fieldset ul .fl {
width: 180px;
float: left;
margin-bottom: 15px;
background-color: #f23;
margin-left: 0px;
}
#left #frame form fieldset ul .fr {
width: 180px;
float: right;
margin-bottom: 15px;
background-color: #0F6;
margin-right: 0px;
}
</style>
</head>
<body>
<div id="left">
<div id="frame">
<form action="" method="post">
<fieldset>
<h1>Text 1</h1>
<h2>text 2</h2>
<ul>
<li class="fl">
<label for="label1">Label 1</label>
<input type="text" id="label1" name="label1" tabindex="10" autocomplete="off">
</li>
<li class="fr">
<label for="label2">Label 2</label>
<input type="text" id="label2" name="label2" tabindex="20" autocomplete="off">
</li>
<li class="fl">
<label for="label3">Label 3</label>
<input type="text" id="label3" name="label3" tabindex="30" autocomplete="off">
</li>
<li class="fr">
<label for="label4">Label 4</label>
<input type="text" id="label4" name="label4" tabindex="40" autocomplete="off">
</li>
<li class="fl">
<label for="label5">Label 5</label>
<input type="text" id="label5" name="label5" tabindex="50" autocomplete="off">
</li>
<li class="fr">
<label for="label6">Label 6</label>
<input type="text" id="label6" name="label6" tabindex="60" autocomplete="off">
</li>
</ul>
</fieldset>
</form>
</div>
</div>
</body>
</html>
i will get as a result:
and entering the same code on jsfiddle will result:
this
It will probably be an automatic padding/margin issue, try 0'ing out all your values as the first thing you do, then you can set the values as you want
* {
margin:0;
padding:0;
}