I am working on creating a page which has a fixed links on the top and fixed submit buttons at the bottom. The content in between is scrollable using overflow:auto;
I am noticing, when I reduce the browser window size the scroller slowly disappears.
How can I fix this? Are there any hacks?
I am working Firefox 19.0 and chrome version 26.0.1410.12 and IE9
Here is my code in its entirety:
<!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>
Reduce the padding to 10px:
#content * {
padding-right: 10px; /* Line 106 */
}
Related
<div class="input-fields">
<div class="new">
<div class="first-container">
<form id="new-form" method="POST">
<div class="label">
<span class="fas fa-envelope icon"></span>
<input type="email" name="email-address" class="form-input" placeholder=" ">
</div>
<div class="label">
<span class="far fa-id-card icon"></span>
<input type="email" name="email-address" class="form-input" placeholder=" ">
</div>
<div class="label">
<span class="fas fa-user-tag icon"></span>
<input type="email" name="email-address" class="form-input" placeholder=" ">
</div>
<div>
</div>
</div>
</div>
<div>
<span class="divide">or</span>
</div>
<div class="login-field">
<div class="second-container">
<div class="label">
<span class="far fa-id-card icon"></span>
<input type="email" name="email-address" class="form-input" placeholder=" ">
</div>
<div class="label">
<span class="fas fa-key icon"></span>
<input type="email" name="email-address" class="form-input" placeholder=" ">
</div>
<div>
</div>
</div>
.fa-arrows-alt-h {
font-size: 30px;
color: #bbb;
}
.input-fields {
display: flex;
background: #F7F9F6;
}
.new {
width: 50%;
float: right;
border-right: 1px dashed #e9e9e9;
}
.form-input {
padding-left: 3.575rem;
height: calc(2.25rem + 2px);
font-size: 1.5rem;
}
.first-container {
display: inline-block;
float: right;
padding-right: 30px;
}
.second-container {
display: inline-block;
padding-left: 30px;
}
.divide {
position: absolute;
left: 0;
right: 0;
margin-left:auto;
margin-right:auto;
top: 20%;
}
I would like to align text, "or" in the middle of the vertical line.
I used left: 50% or 49%, however, it's broken when I shrink the window size for response test.
I couldn't use 'left:0; right: 0; because I did not know the width of text("or")
How can I align the word "or" in the middle of the vertical line?
Can anyone help, please?
Many thanks! :)
To your absolutely positioned span add these styles:
.divide{
left: 50%;
transform: translate(-50%);
}
It works see the codepen here: https://codepen.io/arnavozil/pen/mdVyWGr
The problem you had is that u're using flexbox and at the same time you're giving the containers specific width , instead you can use justify-content : center
.fa-arrows-alt-h {
font-size: 30px;
color: #bbb;
}
.input-fields {
justify-content: center;
display: flex;
display: flex;
background: #F7F9F6;
}
.new {
/* width: 50%; */
/* float: right; */
border-right: 1px dashed #e9e9e9;
}
.form-input {
padding-left: 3.575rem;
height: calc(2.25rem + 2px);
font-size: 1.5rem;
}
.first-container {
/* display: inline-block; */
/* float: right; */
padding-right: 30px;
}
.second-container {
/* display: inline-block; */
padding-left: 30px;
}
.divide {
/* position: absolute; */
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
/* top: 20%; */
} ```
I am learning to program with shiny but I am stuck on some actions.
I have a html file (index.html, which also contains css code) where you need to enter a username and password and a login button which is used to send the values of the username and password fields.
I would like to know how to retrieve username and password values when we click on login in app.R file.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
form {border: 3px solid #f1f1f1;}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover { opacity: 0.8; }
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Login Form</h2>
<form >
<div class="imgcontainer">
<img src="https://www.cote-azur-ecobiz.fr/upload/docs/image/jpeg/2015-03/exemple.jpg" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot password?</span>
</div>
</form>
</body>
</html>
app.R
server <- function(input, output) {}
# Run the application
shinyApp(ui = htmlTemplate("www/index.html"), server)
To retrieve user and password you can access input$uname and input$psw. This is the name that appear in your HTML file. To observe the submit button I recommend you to use an action-button instead of a submit one (see for example ?shiny::submitButton).
Here is the HTML file in which I changed the button type and added the id parameter as submit_btn:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
form {border: 3px solid #f1f1f1;}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover { opacity: 0.8; }
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Login Form</h2>
<form >
<div class="imgcontainer">
<img src="https://www.cote-azur-ecobiz.fr/upload/docs/image/jpeg/2015-03/exemple.jpg" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button id="submit_btn" class="action-button">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot password?</span>
</div>
</form>
</body>
Here is an app just to check the results:
library(shiny)
server <- function(input, output) {
login <- eventReactive(input$submit_btn,{
user <- input$uname
password <- input$psw
return(c("user" = user, "password" = password))
})
output$login_out <- renderText({
login_data <- login()
sprintf("User: %s; Password: %s", login_data[1], login_data[2])
})
}
ui <- fluidPage(
sidebarLayout(
includeHTML("www/index.html"),
textOutput("login_out")
)
)
shinyApp(ui = ui, server)
I've managed to convert my html form to have some fields side-by-side in a form-group to reduce the overall height of the form, but I can't get rid of the excessive white space to the right of the fields. Is the red box below coming from the container, the fieldset or the form-group? I am very new to html/Boostrap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="robots" content="noindex,nofollow" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" />
<link rel="icon" href="https://wonderfest.com/wp-content/uploads/2017/01/favicon.ico" type="image/x-icon"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Search</title>
<style>
#outline {
position: relative;
height: auto;
width: auto;
/*margin: 18px auto 0;*/
margin: 10px 24px 0 24px;
border: 1px groove #ddd !important;
}
.logoimages {
width: auto;
height: auto;
position: absolute;
text-align: center;
top: 30px;
left: 15px;
}
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
#title {
width: auto;
top: 90px;
position: absolute;
visibility: visible;
left: 0px;
}
#title .title-content {
font-family: 'Roboto', sans-serif;
font-weight: bolder;
font-size: 32px;
color: #e6bb57;
}
.line-bottom {
border-bottom: 5px solid #E6BB57;
width: 400px;
margin-left: auto;
margin-right: auto;
}
p {
color: #666;
font-size: 16px;
font-family: 'Roboto', sans-serif;
font-weight: normal;
margin-top: 5px;
}
h3 {
color: #666;
font-size: 60px;
font-family: 'Roboto', sans-serif;
font-weight: bold;
text-align: center;
letter-spacing: -1px;
width: auto;
}
h4 {
font-weight: bold;
font-family: 'Roboto', sans-serif;
text-align: center;
margin: 1.33em 0;
}
h5 {
font-weight: 500;
font-family: 'Roboto', sans-serif;
text-align: center;
margin: 1.33em 0;
}
a {
color: #666;
font-family: 'Roboto', sans-serif;
text-decoration: underline;
}
fieldset.scheduler-border {
border: 1px groove #ddd !important;
padding: 0 1.4em 1.4em 1.4em !important;
margin: 0 0 1.5em 0 !important;
-webkit-box-shadow: 0px 0px 0px 0px #000;
box-shadow: 0px 0px 0px 0px #000;
}
legend.scheduler-border {
font-family: 'Roboto', sans-serif;
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
width:auto;
padding:0 10px;
border-bottom:none;
}
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modalLoading {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
text-align: center;
background: rgba( 255, 255, 255, .8 )
/*url('http://i.stack.imgur.com/FhHRx.gif') */
url('<?php echo BASE_HDR_TAG . "contest/common/img/ajax-loader-red.gif"; ?>')
50% 50%
no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading .modalLoading {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modalLoading {
display: block;
}
</style>
</head>
<body>
<noscript>
<style>
.pagecontainer {display:none;}
</style>
<div class="noscriptmsg">
<h4>JavaScript is disabled on your browser. You will not be able to use this application until it is enabled.</h4>
<h5>Please refer to your browser's specific configuration details to change this setting.</h5>
<p align="center">© <?php echo date('Y')?> USA, INC.</p>
<p align="center">Version <?php echo $pageVer?></p>
</div>
</noscript>
<div class="pagecontainer">
<div id="outline">
<div id="bckgrnd" style="text-align: center">
<img src="../common/img/background-1.jpg"/>
<div class="logoimages" style="text-align: center">
<img src="../common/img/combined_images.png" class="center-block img-responsive" id="top-img1" width="454" height="61" />
</div>
<div id="title" style="text-align: center">
<h3 class="title-content">Search</h3>
<div class="line-bottom"></div>
</div>
</div>
<div>
<p align="center">
<a href="javascript:window.location.href = '../common/php/logout.php';" class="btn btn-info btn-sm">
<span class="glyphicon glyphicon-log-out"></span> Log out
</a>
</p>
</div>
<div class="container" style="padding:10px 10px;">
<fieldset class="scheduler-border">
<legend class="scheduler-border">Search criteria</legend>
<form id="searchForm" name="searchForm" class="form-horizontal">
<div class="fields-search"> <!--for textfields -->
<div class="form-group">
<div class="col-sm-2">
<label for="barcode" class="sr-only"></label>
<input id="barcode" name="barcode" class="form-control input-group-lg" type="text" placeholder="Barcode" value="">
</div>
<div class="col-sm-5">
<label for="entry-number" class="sr-only"></label>
<input id="entry-number" name="entry-number" class="form-control input-group-lg" type="text" placeholder="Entry # (separate multiple entries with commas)" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<label for="first-name" class="sr-only"></label>
<input id="first-name" name="first-name" class="form-control input-group-lg" type="text" placeholder="First name" value="">
</div>
<div class="col-sm-4">
<label for="last-name" class="sr-only"></label>
<input id="last-name" name="last-name" class="form-control input-group-lg" type="text" placeholder="Last name" value="">
</div>
</div><!--/form-group-->
<div class="form-group">
<div class="col-sm-7">
<label for="title-name" class="sr-only"></label>
<input id="title-name" name="title-name" class="form-control input-group-lg" placeholder="Title or name of entry" value="">
</div>
</div>
</div>
</form>
</fieldset>
</div>
<br/>
<br/>
<div id="footer">
<p align="center">© <?php echo date('Y')?>USA, INC.</p>
<p align="center">Version <?php echo $pageVer?></p>
</div>
</div>
</div>
<div class="modalLoading"></div>
</body>
</html>
I believe my problem is different than How to remove or reduce the white space in bootstrap? as I tried the no-padding class and made no difference.
Changed col-sm-* classes in the form group elements. Also add ad row and col-sm-7 divs before fieldset div
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="robots" content="noindex,nofollow" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" />
<link rel="icon" href="https://wonderfest.com/wp-content/uploads/2017/01/favicon.ico" type="image/x-icon" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Search</title>
<style>
#outline {
position: relative;
height: auto;
width: auto;
/*margin: 18px auto 0;*/
margin: 10px 24px 0 24px;
border: 1px groove #ddd !important;
}
.logoimages {
width: auto;
height: auto;
position: absolute;
text-align: center;
top: 30px;
left: 15px;
}
img {
max-width: 100%;
height: auto;
width: auto\9;
/* ie8 */
}
#title {
width: auto;
top: 90px;
position: absolute;
visibility: visible;
left: 0px;
}
#title .title-content {
font-family: 'Roboto', sans-serif;
font-weight: bolder;
font-size: 32px;
color: #e6bb57;
}
.line-bottom {
border-bottom: 5px solid #E6BB57;
width: 400px;
margin-left: auto;
margin-right: auto;
}
p {
color: #666;
font-size: 16px;
font-family: 'Roboto', sans-serif;
font-weight: normal;
margin-top: 5px;
}
h3 {
color: #666;
font-size: 60px;
font-family: 'Roboto', sans-serif;
font-weight: bold;
text-align: center;
letter-spacing: -1px;
width: auto;
}
h4 {
font-weight: bold;
font-family: 'Roboto', sans-serif;
text-align: center;
margin: 1.33em 0;
}
h5 {
font-weight: 500;
font-family: 'Roboto', sans-serif;
text-align: center;
margin: 1.33em 0;
}
a {
color: #666;
font-family: 'Roboto', sans-serif;
text-decoration: underline;
}
fieldset.scheduler-border {
border: 1px groove #ddd !important;
padding: 0 1.4em 1.4em 1.4em !important;
margin: 0 0 1.5em 0 !important;
-webkit-box-shadow: 0px 0px 0px 0px #000;
box-shadow: 0px 0px 0px 0px #000;
}
legend.scheduler-border {
font-family: 'Roboto', sans-serif;
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
}
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modalLoading {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
text-align: center;
background: rgba( 255, 255, 255, .8)
/*url('http://i.stack.imgur.com/FhHRx.gif') */
url('<?php echo BASE_HDR_TAG . "contest/common/img/ajax-loader-red.gif"; ?>') 50% 50% no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading .modalLoading {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modalLoading {
display: block;
}
</style>
</head>
<body>
<noscript>
<style>
.pagecontainer {display:none;}
</style>
<div class="noscriptmsg">
<h4>JavaScript is disabled on your browser. You will not be able to use this application until it is enabled.</h4>
<h5>Please refer to your browser's specific configuration details to change this setting.</h5>
<p align="center">© <?php echo date('Y')?> USA, INC.</p>
<p align="center">Version <?php echo $pageVer?></p>
</div>
</noscript>
<div class="pagecontainer">
<div id="outline">
<div id="bckgrnd" style="text-align: center">
<img src="../common/img/background-1.jpg" />
<div class="logoimages" style="text-align: center">
<img src="../common/img/combined_images.png" class="center-block img-responsive" id="top-img1" width="454" height="61" />
</div>
<div id="title" style="text-align: center">
<h3 class="title-content">Search</h3>
<div class="line-bottom"></div>
</div>
</div>
<div>
<p align="center">
<a href="javascript:window.location.href = '../common/php/logout.php';" class="btn btn-info btn-sm">
<span class="glyphicon glyphicon-log-out"></span> Log out
</a>
</p>
</div>
<div class="container" style="padding:10px 10px;">
<div class="row">
<div class="col-sm-7">
<fieldset class="scheduler-border">
<legend class="scheduler-border">Search criteria</legend>
<form id="searchForm" name="searchForm" class="form-horizontal">
<div class="fields-search">
<!--for textfields -->
<div class="form-group">
<div class="col-sm-4">
<label for="barcode" class="sr-only"></label>
<input id="barcode" name="barcode" class="form-control input-group-lg" type="text" placeholder="Barcode" value="">
</div>
<div class="col-sm-8">
<label for="entry-number" class="sr-only"></label>
<input id="entry-number" name="entry-number" class="form-control input-group-lg" type="text" placeholder="Entry # (separate multiple entries with commas)" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label for="first-name" class="sr-only"></label>
<input id="first-name" name="first-name" class="form-control input-group-lg" type="text" placeholder="First name" value="">
</div>
<div class="col-sm-6">
<label for="last-name" class="sr-only"></label>
<input id="last-name" name="last-name" class="form-control input-group-lg" type="text" placeholder="Last name" value="">
</div>
</div>
<!--/form-group-->
<div class="form-group">
<div class="col-sm-12">
<label for="title-name" class="sr-only"></label>
<input id="title-name" name="title-name" class="form-control input-group-lg" placeholder="Title or name of entry" value="">
</div>
</div>
</div>
</form>
</fieldset>
</div>
</div>
</div>
<br/>
<br/>
<div id="footer">
<p align="center">©
<?php echo date('Y')?>USA, INC.</p>
<p align="center">Version
<?php echo $pageVer?>
</p>
</div>
</div>
</div>
<div class="modalLoading"></div>
</body>
</html>
Note: Click full page when testing.
As you can see by the snippet, the section with the class "common" is set to a fixed position, but it seems to be relative to the other section. How do I fix it so that the common section is fixed relative to the browser?
Jsfiddle:
https://jsfiddle.net/my1c76vb/?utm_source=website&utm_medium=embed&utm_campaign=my1c76vb
Code:
HTML5:
<?php session_start(); ?>
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Log in</title>
<body>
<section class="common">
<header>
<img src="resources/header.png" alt="Sqeaking Duck"/>
</header>
<aside class="menu">
<h3>Guest</h3>
<hr>
<nav>
<ul>
<li>Home</li>
<li>Log in</li>
<li>Register</li>
</ul>
</nav>
</aside>
</section>
<section class="login">
<form action="loginManager.php" method="post">
<fieldset>
<legend>Log in</legend>
User: <input type="text" name="username" value="">
<span class="error"><?php echo isset($_SESSION['state']) ? $_SESSION['userErr'] : '';?></span><br>
Password: <input type="password" name="password" value="">
<span class="error"><?php echo isset($_SESSION['state']) ? $_SESSION['passErr'] : '';?></span><br>
<input type="submit" name="submit" value="Submit">
</fieldset>
</form>
<p><span class="error"><?php echo isset($_SESSION['state']) ? $_SESSION['generalErr'] : '';?></span></p>
</section>
</body>
CSS:
/*Common pages */
.common {
z-index: 1;
margin-top: 10px;
position: fixed;
width: 100%;
}
header {
width: 100%;
text-align: center;
background-color: CornflowerBlue;
}
.menu {
margin-top: 25px;
width: 80px;
background-color: black;
text-align: center;
}
.menu h3 {
color: white;
display: inline-block;
margin: 0;
padding-top: 5px;
}
.menu hr {border-color: white;}
.menu nav {
display: inline-block;
text-align: left;
width: 100%
}
.menu ul {
list-style: none;
padding: 0px 0px 0px 10px;
margin: 0;
}
.menu li {
padding-bottom: 10px;
}
.menu a {
text-decoration: none;
color: white;
}
/*Log in page*/
.login {
text-align: center;
z-index: 0;
margin-top: 300px;
}
/*General*/
body {
background-color: grey;
}
First thing I noticed is that the fixed element is having a margin-collapse. Google how to fix margin-collapsing. I added,
padding-top: 1px;
to the body.
Next I added,
height: 2000px to the body so the body can scroll and you can see the position:fixed in play
https://jsfiddle.net/my1c76vb/1/
I am guessing you want a layout which somewhat represents YouTubes layout (with a fixed header and a side bar).
The elements that have a fixed positioning are "lifted up" from the page so the rest of the page renders as if those elements wouldn't even be there. That in mind you have to adjust your layout a little:
CSS
* {
padding: 0;
margin: 0;
}
header {
background-color: #222;
position: fixed;
top: 0;
width: 100%;
height: 150px;
}
.container {
margin-top: 150px; /*Same as header height*/
margin-left: 150px; /*Same as menu width*/
}
.menu {
background-color: #333;
position: fixed;
left: 0;
width: 150px;
}
.content {
padding: 10px;
}
HTML
<header></header>
<section class="container">
<aside class="menu">
<!-- Menu here -->
</aside>
<div class="content">
<!-- Content here -->
</div>
</section>
Here is a demo
The content must have a margin (or padding) so that it wont get buried under the fixed elements.
/*Common pages */
.common {
z-index: 1;
margin-top: 10px;
position: relative;
width: 100%;
}
header {
width: 100%;
text-align: center;
background-color: CornflowerBlue;
}
.menu {
margin-top: 25px;
width: 80px;
background-color: black;
text-align: center;
}
.menu h3 {
color: white;
display: inline-block;
margin: 0;
padding-top: 5px;
}
.menu hr {border-color: white;}
.menu nav {
display: inline-block;
text-align: left;
width: 100%
}
.menu ul {
list-style: none;
padding: 0px 0px 0px 10px;
margin: 0;
}
.menu li {
padding-bottom: 10px;
}
.menu a {
text-decoration: none;
color: white;
}
/*Log in page*/
.login {
text-align: center;
z-index: 0;
margin-top: 320px;
}
/*General*/
body {
background-color: grey;
}
<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Log in</title>
</head>
<body>
<section class="common">
<header>
<img src="resources/header.png" alt="Sqeaking Duck"/>
</header>
<aside class="menu">
<h3>Guest</h3>
<hr>
<nav>
<ul>
<li>Home</li>
<li>Log in</li>
<li>Register</li>
</ul>
</nav>
</aside>
</section>
<section class="login">
<form action="loginManager.php" method="post">
<fieldset>
<legend>Log in</legend>
User: <input type="text" name="username" value="">
<span class="error"><?php echo isset($_SESSION['state']) ? $_SESSION['userErr'] : '';?></span><br>
Password: <input type="password" name="password" value="">
<span class="error"><?php echo isset($_SESSION['state']) ? $_SESSION['passErr'] : '';?></span><br>
<input type="submit" name="submit" value="Submit">
</fieldset>
</form>
<p><span class="error"><?php echo isset($_SESSION['state']) ? $_SESSION['generalErr'] : '';?></span></p>
</section>
</body>
</html>
http://jsfiddle.net/9FG4f/4/
I tried a different way to line up the labels and textfields in the form area along with the button horizontally, but the email label and txtfield is not aligned perfectly.
HTML
<div class="prefill2">
<h1>Need a Real Estate Expert?</h1>
<form class="action3" name="form1" method="POST" action="_sendmail.php" onSubmit="return CheckAll(this);">
<div id="action3-fname">
<label class="nick-3">Full Name:</label>
<input type="text" class="name2" name="full_name" />
</div>
<div id="action3-email">
<label class="nick-4">Email Address:</label>
<input type="text" class="email2" name="email">
</div>
<div id="action3-button">
<input type="submit" class="btn2" value="JOIN NOW" name="submit">
</div>
</form>
</div>
CSS
#action3-fname {
display:inline-block;
}
#action3-email {
display:inline-block;
}
#action3-button {
display:inline-block;
}
.action3 .name2 {
border:thin #999 solid;
border-radius:5px;
float:left;
height:22px;
margin-bottom:10px;
margin-left: 1px;
margin-top: 8px;
padding: 4px;
width: 210px;
}
.action3 .email2 {
border: thin #999 solid;
border-radius: 5px;
height: 22px;
margin-left: 22px;
margin-top: -8px;
padding: 4px;
width: 210px;
}
.action3 .nick-3 {
color:#000000;
}
.action3 .nick-4 {
margin-left:23px;
color:#000000;
}
.action3 .btn2 {
background: none repeat scroll 0 0 #ff8400;
border: medium none;
border-radius: 5px;
color: #FFFFFF;
cursor: pointer;
font-size: 22px;
font-weight: bold;
height: 40px;
margin-bottom: 15px;
text-align: center;
width: 140px;
margin-left:10px;
}
I'd get rid of the floats and the margin-tops. Like so:
.action3 .email2 {
border: thin #999 solid;
border-radius: 5px;
height: 22px;
margin-left: 22px;
padding: 4px;
width: 210px;
}
Here's a fiddle: http://jsfiddle.net/disinfor/9FG4f/8/
EDIT
Updated with fiddle that closes all tags correctly and combines the first three lines of CSS into a class.
.actionClass {
display:inline-block;
}
<div class="prefill2">
<h1>Need a Real Estate Expert?</h1>
<form class="action3" name="form1" method="POST" action="_sendmail.php" onSubmit="return CheckAll(this);">
<div id="action3-fname" class="actionClass">
<label class="nick-3">Full Name:</label><br />
<input type="text" class="name2" name="full_name" />
</div>
<div id="action3-email" class="actionClass">
<label class="nick-4">Email Address:</label><br />
<input type="text" class="email2" name="email" />
</div>
<div id="action3-button" class="actionClass">
<input type="submit" class="btn2" value="JOIN NOW" name="submit" />
</div>
</form>
</div>
Get rid of the <br>, get rid of the float's and it should all line up nicely.
.action3 .name2 {
border:thin #999 solid;
border-radius:5px;
/* float:left; <-- remove this */
height:22px;
margin-bottom:10px;
margin-left: 1px;
margin-top: 8px;
padding: 4px;
width: 210px;
}
Here is your updated fiddle
I actually made them float left and corrected a couple margins. Button and everything lined up together.
Here's my updated fiddle
#action3-fname {
float:left;
}
#action3-email {
float:left;
}