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>
Related
I have a text that overflows from its own background, when it reaches this size it stays like this:
I want the font to be smaller and don't overflow so it looks nice but I can't make it work. I tried putting a fixed width and it didn't work, also I wrote an "!important" and it didn't make a difference but when I use another CSS rules for other content it works after that so I guess the code is working.
The stylesheets are well related:
Máster en CSS
This is the HTML of the aside:
<aside id="lateralBar" class="clearfix">
<h3>
Buscar
</h3>
<div id="search">
<form action="#">
<input type="text">
<input type="button" value="L" class="icon">
</form>
</div>
<h3>
Login
</h3>
<div id="login" class="lateralBox">
<form action="">
<label id="user" class="icon">U</label>
<input type="email">
<label id="password" class="icon">w</label>
<input type="password">
<input type="submit" value="Entrar">
<input type="reset" value="Limpiar">
Registrate aquí
¿Has olvidado tu contraseña?
</form>
</div>
<h3>
Redes sociales
</h3>
<div id="socialNetwork" class="lateralBox">
<div class="twitter">
t
<p class="overlay">
Twitter
</p>
</div>
<div class="facebook">
f
<p class="overlay">
Facebook
</p>
</div>
<div class="youtube">
y
<p class="overlay">
Youtube
</p>
</div>
</div>
<h3>
Patrocinadores
</h3>
<div id="sponsors" class="lateralBox">
</div>
</aside>
The normal CSS:
#lateralBar {
width: 300px;
min-height: 1200px;
font-family: "TrebuchetMS";
float: right;
margin: 20px;
margin-right: 82px;
}
#lateralBar h3 {
display: block;
width: auto;
height: 45px;
line-height: 49px;
background: url("../img/pxgray.png"), white;
box-shadow: 0px 1px 0px #393d3f, 1px 2px 0px #393d3f, 2px 3px 0px #393d3f, 3px 4px 0px #393d3f;
font-size: 30px;
font-family: "BebasNeue";
font-weight: normal;
letter-spacing: 2px;
padding-left: 15px;
margin-top: 30px;
margin-bottom: 15px;
}
#lateralBar h3:first-child {
margin-top: 0px;
}
The responsive CSS:
#media (max-width: 899){
#lateralBar {
margin-left: 100px;
}
#lateralBar h3 {
font-size: 10px;
}
}
The issue stands on the way you defined your media.
Try adding 'px' on your max-width and that should work:
#media (max-width: 899px){ .. }
I am trying to align the button to the bottom of this div (so the bottom is flush with the bottom of textarea).
Codepen
I was able to do this by adding the following class to button:
.btn-bottom {
position: absolute;
top: 130px;
}
Unfortunately, doing so made the button disappear entirely on mobile:
How can I make the button align with the bottom of the textarea on desktop and with the left edge of the textarea on mobile?
<div class="padding">
<div class="container">
<div class="row">
<h3 class="text-center">Contact Us</h3>
<h5 class="text-center title-lighter">Our team will respond within 48 hours.</h5>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="col-md-4">
<label for="inputname">Name</label>
<input type="text" class="form-control" id="inputname">
</div>
<div class="col-md-4">
<label for="email">E-mail</label>
<input type="text" class="form-control" id="email">
</div>
<div class="col-md-4">
<label for="organization">Organization</label>
<input type="text" class="form-control" id="organization">
</div>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="col-md-8">
<label for="message">Message</label>
<textarea class="form-control input-lg" style="min-width: 100%;" rows="5" id="message"></textarea>
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
<hr />
</div>
You could set the columns of the elements containing the textarea and the button to be display: inline-block (you would have to set float: none for this to work) and then use vertical-align: bottom to align the elements to the bottom of the line that they're siting on.
I also added a class of .row--mod to the row of the element containing the textarea and the button to help target the elements.
.row--mod .col-md-8.col-md-offset-2 > * {
float: none;
display: inline-block;
vertical-align: bottom;
}
.row--mod .col-md-8.col-md-offset-2> :first-child {
margin-right: -4px;
width: 66.6667%;
}
Using inline-block creates extra spacing which you can get rid using a number of methods (I've opted for a negative margin).
See below for a demo:
body {
font-size: 12px !important;
font-family: 'Roboto Condensed', sans-serif !important;
font-weight: 400 !important;
}
.title-lighter {
font-family: 'Roboto', Arial, Helvetica, sans-serif;
color: #737373;
}
.centering {
float: none;
margin: 0 auto;
}
.btn-centering {
width: 90% !important;
margin-left: 5% !important;
margin-bottom: 5px !important;
}
.padding {
padding: 80px 0;
}
.contact-form {
background: #fff;
margin-top: 10%;
margin-bottom: 5%;
width: 70%;
}
.contact-form .form-control {
border-radius: 1rem;
}
.contact-form form {
padding: 14%;
}
.contact-form form .row {
margin-bottom: -7%;
}
.contact-form h3 {
margin-bottom: 8%;
margin-top: -10%;
text-align: center;
color: #0062cc;
}
.contact-form .btnContact {
width: 50%;
border: none;
border-radius: 1rem;
padding: 1.5%;
background: #dc3545;
font-weight: 600;
color: #fff;
cursor: pointer;
}
.btnContactSubmit {
width: 50%;
border-radius: 1rem;
padding: 1.5%;
color: #fff;
background-color: #0062cc;
border: none;
cursor: pointer;
}
.centered-row {
text-align: center;
}
.btn-bottom {
display: table-cell;
vertical-align: bottom;
}
.box {
display: table !important;
width: 100%;
height: 100%;
}
#media (min-width: 992px)
{
.row--mod .col-md-8.col-md-offset-2 > * {
float: none;
display: inline-block;
vertical-align: bottom;
}
.row--mod .col-md-8.col-md-offset-2> :first-child {
margin-right: -4px;
width: 66.6667%;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="padding">
<div class="container">
<div class="row">
<h3 class="text-center">Contact Us</h3>
<h5 class="text-center title-lighter">Our team will respond within 48 hours.</h5>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="col-md-4">
<label for="inputname">Name</label>
<input type="text" class="form-control" id="inputname">
</div>
<div class="col-md-4">
<label for="email">E-mail</label>
<input type="text" class="form-control" id="email">
</div>
<div class="col-md-4">
<label for="organization">Organization</label>
<input type="text" class="form-control" id="organization">
</div>
</div>
</div>
<div class="row row--mod">
<div class="col-md-8 col-md-offset-2">
<div class="col-md-8">
<label for="message">Message</label>
<textarea class="form-control input-lg" style="min-width: 100%;" rows="5" id="message"></textarea>
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
<hr />
</div>
Im make bootstrap popover, i had some issue , ly list are inline , i dont want to show inline list,look my 2 images you can understand it
FIDDLE my code part is its not working, but fiddle is working what happen?
image 01- i need like this
actually my current working sample
html
<div class="form-group">
<a href="#" data-toggle="popover" data-placement="bottom" data-toggle="popover" title="Bill Category">
<input class="form-control input-sm" id="category" type="text" placeholder="Select category">
</a>
</div>
<div class="form-group">
<input class="form-control input-sm" id="Description" type="text" placeholder="Description">
</div>
<div class="form-group">
<input class="form-control input-sm" id="Date" type="text" placeholder="Date">
</div>
<div class="form-group">
<input class="form-control input-sm" id="Amount" type="text" placeholder="Amount">
</div>
<div class="form-group">
<input class="form-control input-sm" id="Paidby" type="text" placeholder="Paid by">
</div>
<title>Bootstrap Example</title>
<!-- loaded popover content -->
<div id="popover-content" style="display: none">
<ul class="list-group custom-popover">
<li class="list-group-item">Airport Pickup</li>
<li class="list-group-item">Food and Beverage</li>
<li class="list-group-item">Yoga Class</li>
</ul>
</div>
css
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1060;
display: none;
max-width: 276px;
padding: 1px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: normal;
line-height: 1.42857143;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
white-space: normal;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
line-break: auto;
}
.popover-title {
text-align: center;
}
.custom-popover li {
border: none!important;
text-align: center;
}
.custom-popover li:nth-child(2) {
border-top: 1px solid #ccc!important;
}
.custom-popover li:last-child {
border-top: 1px solid #ccc!important;
}
js
$(document).ready(function() {
$('[data-toggle="popover"]').popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
});
how to make like this image 01, please help me to fix this
Line height should be given in px. Try also specify width for li elementy because by default they are as small as they can so ale three of them fit in one line
I am quite new to Bootstrap. I tried to create a boostrap slider that contains on the left side a container with a logo, some text and on the right side a login form. Unfortunately my code is not working properley and my logo and the html form gets cropped once the browsers has a reduced resolution shrinks.
Here is my code: https://jsfiddle.net/bebetxx/z7w2bbso/3/
my CSS
.blue-container
{
color: white;
background-color:#3C8DBC;
}
.blue-container h2,p
{
color: #D2D6DE;
}
.black-container
{
background-color: #2D2D2D;
}
.black-container h2,p
{
color: #BBBBBB;
}
.image-container
{
background: url("http://www.hogash-demos.com/ammon_html/images/sliders/full-slider/slide4.jpg") no-repeat center center scroll;
background-size: cover;
min-height: 350px;
height: 350px;
overflow: hidden;
}
/*SLIDER HEADER
============================================================*/
.slider {
background: url("http://www.hogash-demos.com/ammon_html/images/sliders/full-slider/slide4.jpg")no-repeat center center scroll;
background-size: cover;
min-height: 450px;
height: 300px;
overflow: hidden;
}
.slider-wrap{
padding: 10px 0px;
}
.slider-img{}
.slider-img img{
width: 300px;
height: 500px;
}
.slider{}
.slider-content{
padding-top: 80px;
}
.slider h1 {
margin: 0 0 20px 0;
font-size: 50px;
color: #fff;
text-transform: uppercase;
line-height: 60px;
font-weight: 700;
}
.slider h2 {
font-family: 'lora', serif;
font-style: normal;
color: #fff;
text-transform: capitalize;
font-size: 27px;
text-shadow: 2px 5px 4px #000000;
}
.slider p {
margin-bottom: 25px;
color: #fff;
}
.top-link {
margin-top: 60px;
}
.top-link a{
padding: 20px 30px;
border-radius: 3px;
background: #fff;
font-weight: 700;
-webkit-transition: all .3s linear 0s;
-o-transition: all .3s linear 0s;
transition: all .3s linear 0s;
}
.top-link a i{
color: #00AEFF;
font-size: 25px;
margin-right: 10px;
}
.top-link a:hover{
background: #00AEFF;
color: #fff;
}
.top-link a:hover i{
color: #fff;
}
.logo-slider {
position:relative;
width: 100% !important;
background-size:cover;
padding-bottom: 35%;
background-repeat: no-repeat;
background-size: auto;
max-width: 100%;
}
<!-- Main content -->
<!-- slider section -->
<section class="slider">
<div class="slider-wrap" >
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-1 "><div class="logo-slider" style="background-image:url(http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png)"></div><h2>Connect, discover & change the world</h2><ul class="top-link list-inline"><li><i class="fa fa-android"></i> Register</li></ul></div><a name="loginbox"></a>
<div id="loginbox" style="margin-top:10px;" class="col-md-4 col-md-offset-0 col-sm-8 col-sm-offset-2">
<div class="panel panel-info" >
<div class="panel-heading">
<div class="panel-title">Sign In</div>
<div style="float:right; font-size: 80%; position: relative; top:-10px">Forgot password?</div>
</div>
<div style="padding-top:30px" class="panel-body" >
<div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>
<form id="loginform" class="form-horizontal" action="http://127.0.0.1/login#Login" role="form" method="post">
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="password">
</div>
<input type="hidden" name="val" value="checkin">
<div class="input-group">
<div class="checkbox">
<label>
<input id="login-remember" type="checkbox" name="remember" value="1"> Remember me
</label>
</div>
</div>
<div style="margin-top:10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<input type="submit" value="Login" class="btn btn-success">
<a id="btn-fblogin" href="#" class="btn btn-primary">Login with Facebook</a>
</div>
</div>
<div class="form-group">
<div class="col-md-12 control">
<div style="border-top: 1px solid#888; padding-top:15px; font-size:85%" >
Don't have an account?
<a href="http://127.0.0.1/#Registration" <!--onClick="$('#loginbox').hide(); $('#signupbox').show()" -->
<strong>Sign Up Now</strong>
</a>
</div>
</div>
</div>
</form>
</div>
</div> </div>
</div>
</div> <!-- row end -->
</div> <!-- container end -->
</section>
<section id="counter-area" class="blue-container">
<div class="container">
<div class="row">
<div class="heading-inner text-center">
<h2 class="sec-title">Register to <span style="color:white !important"><?php if (isset($g_sWebsiteName)) echo $g_sWebsiteName ?> </span> </h2>
<p><strong>Register right away to this amazing community</strong></p>
<?php
$this->view('registration_box');
?>
</div>
</div> <!-- heading row end -->
</div> <!-- container end -->
</section>
thanks to #Skelly the 2nd problem was that the main slider has a height:300px limit.
The 1st problem was solved using a instead of the div logo used
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 */
}