Please help me.
I have spent time trying to work out why joinform div doesn't sit nicely next to the div containing the myhomepageimage.jpg image.
I thought it was the width of the form.
The "Register now to join site" sits perfectly, but the form sits below the image.
What am I missing.
Also, I am new to CSS so please be tolerant of my stupidity.
Thanks!
<style type="text/css">
body {
background-image: url(bg.jpg);
background-attachment: fixed;
}
.styled-button-10 {
background:#5CCD00;
background:-moz-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5CCD00),color-stop(100%,#4AA400));
background:-webkit-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
background:-o-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
background:-ms-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
background:linear-gradient(top,#5CCD00 0%,#4AA400 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5CCD00',endColorstr='#4AA400',GradientType=0);
padding:10px 15px;
color:#fff;
font-family:'Helvetica Neue',sans-serif;
font-size:16px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:1px solid #459A00;
text-decoration: none;
}
#header {
width: 990px;
height: 75px;
margin-top: 25px;
margin-left: auto;
margin-right: auto;
margin-bottom: 1px;
}
#logo {
float:left;
}
#topmenu {
float:right;
}
#topmenu li {
margin-left:10px;
display:inline;
}
#intro {
width: 990px;
margin-left: auto;
margin-right: auto;
background-color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.5);
padding:8px;
font-size:30px;
border:1px solid #e3e3e3;
}
#joinform {
width:550px:
float:right;
}
#details {
width: 990px;
margin-left: auto;
margin-right: auto;
}
</style>
<style type="text/css">
/* This CSS is used to format the page. */
fieldset {border:0px;}
#lbform {height: auto;margin: 0px auto;padding: 0;position: relative;width: 500px;}
#lbform label {color: #000000;display: inline;float: left;font-family: Arial,Helvetica,sans-serif;font-size: 14px;font-weight: bold;margin: 5px 10px 5px 0;width: 90px;}
#lbform .row {display: block;margin-bottom: 7px;padding-top: 7px;width: 475px;}
#lbform input {border: 1px solid #9C8A7B;font-size: 14px;padding: 5px;width: 208px;}
#lbform select {border: 1px solid #9C8A7B;font-size: 14px;height: 25px;}
#lbform input.blur {color: #999999;font-style: italic;}
#lbform input.focus, #lbform input.complete {color: #000000;font-style: normal;font-weight: bold;}
.gender {width: 220px;}
.day {width: 63px;}
.month {width: 80px;}
.year {width: 70px;}
.note {color: #666666;font-family: Arial,Helvetica,sans-serif;font-size: 11px;position:relative;right: 0;top: -10px;width: 300px;}
</style>
<style type="text/css">
/* This CSS is used for the Show/Hide functionality. */
.more {display: none;}
a.showLink, a.hideLink {cursor: pointer; display: block; height: 45px; margin: 5px 0 0 104px; width: 214px;}
a.hideLink {}
a.showLink:hover, a.hideLink:hover {}
</style>
<script src="jsforstep2.js"></script>
</head>
<body>
<div id="header">
<div id="logo"><img src="urlformylogo.png" alt="Hi Mom"><br>
</div>
<ul id="topmenu"><li>Join Now</li><li>Login Here</li></ul>
</div>
<div id="intro">
<div style="float:left; padding-right:10px; width:440px;"><img src="myhomepageimage.jpg">
</div>
<div id="joinform">
<div style="margin-top:0px;">Register now to join site</div>
<!-- Make sure you update the URL -->
<form id="lbform" class="formlayout" action="theformurl" method="post">
<fieldset>
<div class="magic">
<input type="hidden" value="1" name="sexuality">
</div>
<div class="row cf">
<label>I prefer:</label>
<select class="gender" name="gender">
<option>Please select</option>
<option value="1">Cheese</option>
<option value="2">Ham</option>
</select>
</div>
<div class="row cf">
<label>First name:</label>
<input type="text" class="text blur" name="firstname">
</div>
<div class="row cf">
<label>D.O.B.:</label>
<select class="day" name="dobday">
<option value="">Day</option>
<option value="1">01</option>
<option value="2">02</option>
</select>
<select class="month" name="dobmonth">
<option value="">Month</option>
<option value="1">January</option>
<option value="2">February</option>
</select>
<select class="year" name="dobyear">
<option value="">Year</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
</select>
</div>
<div class="continue-btn">
<a onclick="showHide('example');return false;" class="showLink" id="example-show" href="#">
<!-- The <p> tags below can be swapped from an image. -->
<p>CONTINUE</p>
</a>
</div>
<!-- Anything that sits in the div class=more will be hidden until the Continue link is clicked -->
<div class="more" id="example">
<div class="row cf">
<label for="email">Email:</label>
<input type="text" class="text blur" name="email" id="email">
</div>
<div class="row cf">
<label for="password">Password:</label>
<input type="password" value="" name="password" id="password">
</div>
<div class="row cf">
<button class="header" type="submit">submit</button>
</div>
<div class="row cf">
<p class="note">My TOS link</a>.</p>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<div id="details">
Some text here.
</div>
</body>
</html>
It's simple. There's a typo:
#joinform {
width:550px*:*
float:right;
}
change it to ;
#joinform { width:550px; float:right; }
Related
I have a pure CSS image script I use with my eBay listings, I'm changing the design of my template at the moment and have run into a major snag with the code, it seems that the large image can only be displayed directly below the thumbnail radio buttons, but I want to have the large image being displayed in a different table cell..
I don't know a great deal about CSS, so hopefully someone will know an easy fix? here's hoping..
<style type="text/css">
div.Image1BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image1_zpsus8mlxre.jpg'); background-size: 110px 92px; }
div.Image2BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image2_zpsetwycsgp.jpg'); background-size: 110px 92px; }
div.Image3BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image3_zpsxtx5woeg.jpg'); background-size: 110px 92px; }
div.Image4BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 110px 92px; }
div.Image5BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 110px 92px; }
div.Image1BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image1_zpsus8mlxre.jpg'); background-size: 600px 500px; }
div.Image2BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image2_zpsetwycsgp.jpg'); background-size: 600px 500px; }
div.Image3BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image3_zpsxtx5woeg.jpg'); background-size: 600px 500px; }
div.Image4BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 600px 500px; }
div.Image5BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 600px 500px; }
section {
display: none;
}
input {
display: none;
}
label {
display: inline-block;
font-weight: 600;
color: #bbb;
border: 1px solid transparent;
}
label:hover {
cursor: hand;
border: 1px solid #1F7AB6;
box-shadow: 2px 2px 7px #d0d0d0;
}
label {
margin: 0px 5px 0px 0px;
}
input:checked + label {
border: 1px solid #155179;
box-shadow: 2px 2px 7px #c0c0c0;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5 {
display: block;
}
</style>
<table border=1><tr><td>
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1"><div class="Image1BlockS"></div></label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2"><div class="Image2BlockS"></div></label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3"><div class="Image3BlockS"></div></label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4"><div class="Image4BlockS"></div></label>
<input id="tab5" type="radio" name="tabs">
<label for="tab5"><div class="Image5BlockS"></div></label>
<section id="content1">
<div class="Image1BlockB"></div>
</section>
<section id="content2">
<div class="Image2BlockB"></div>
</section>
<section id="content3">
<div class="Image3BlockB"></div>
</section>
<section id="content4">
<div class="Image4BlockB"></div>
</section>
<section id="content5">
<div class="Image5BlockB"></div>
</section>
</td></tr></table>
I need to rewrite it so that I can put the large image anywhere
throughout the template and still be able to have the small thumbnails
change it when they're clicked.
Well if this is the case then you can experiment with the positioning.
On the other hand you can imitate the table behavior with display: table and td with display: table-cell to get you closer to the desired result.
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}
div.Image1BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image1_zpsus8mlxre.jpg'); background-size: 110px 92px; }
div.Image2BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image2_zpsetwycsgp.jpg'); background-size: 110px 92px; }
div.Image3BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image3_zpsxtx5woeg.jpg'); background-size: 110px 92px; }
div.Image4BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 110px 92px; }
div.Image5BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 110px 92px; }
div.Image1BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image1_zpsus8mlxre.jpg'); background-size: 600px 500px; }
div.Image2BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image2_zpsetwycsgp.jpg'); background-size: 600px 500px; }
div.Image3BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image3_zpsxtx5woeg.jpg'); background-size: 600px 500px; }
div.Image4BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 600px 500px; }
div.Image5BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 600px 500px; }
div.Image4BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 600px 500px; }
div.Image5BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 600px 500px; }
#table {
display: table; /* imitates the table behavior */
border: 1px solid;
border: 1px outset grey;
padding: 1px;
}
.table-cell {
margin: 1;
border: thin inset grey;
display: table-cell;
}
section {
display: none;
}
input {
display: none;
}
label {
display: inline-block;
font-weight: 600;
color: #bbb;
border: 1px solid transparent;
}
label:hover {
cursor: hand;
border: 1px solid #eee;
box-shadow: 1px 1px 5px #000;
}
label {
margin: 0 5px 0 0;
}
input:checked + label {
border: 1px solid #155179;
box-shadow: 2px 2px 7px #c0c0c0;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5 {
display: table-cell; /* imitates the td behavior */
border: thin inset grey;
margin: 1;
}
<div id="table">
<tr>
<td>
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1"><div class="Image1BlockS"></div></label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2"><div class="Image2BlockS"></div></label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3"><div class="Image3BlockS"></div></label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4"><div class="Image4BlockS"></div></label>
<input id="tab5" type="radio" name="tabs">
<label for="tab5"><div class="Image5BlockS"></div></label>
</td>
<div class="table-cell">
2nd cell
</div>
<td>
3rd cell with the td element but without the border which doesn't work if there's no table element
</td>
<div class="table-cell">
4th cell
</div>
<section id="content1">
<div class="Image1BlockB"></div>
</section>
<section id="content2">
<div class="Image2BlockB"></div>
</section>
<section id="content3">
<div class="Image3BlockB"></div>
</section>
<section id="content4">
<div class="Image4BlockB"></div>
</section>
<section id="content5">
<div class="Image5BlockB"></div>
</section>
</tr>
</div>
This is essentially what I want to do, but putting the large image elements into another cell breaks it, the large image no longer shows up, I need to rewrite it so that I can put the large image anywhere throughout the template and still be able to have the small thumbnails change it when they're clicked on.
<table border=1><tr><td>
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1"><div class="Image1BlockS"></div></label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2"><div class="Image2BlockS"></div></label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3"><div class="Image3BlockS"></div></label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4"><div class="Image4BlockS"></div></label>
<input id="tab5" type="radio" name="tabs">
<label for="tab5"><div class="Image5BlockS"></div></label>
</td>
<td>
<section id="content1">
<div class="Image1BlockB"></div>
</section>
<section id="content2">
<div class="Image2BlockB"></div>
</section>
<section id="content3">
<div class="Image3BlockB"></div>
</section>
<section id="content4">
<div class="Image4BlockB"></div>
</section>
<section id="content5">
<div class="Image5BlockB"></div>
</section>
</td>
</tr></table>
I have tried different kinds of approach to center my log-in. I want it to be vertically and horizontally centered in my container. Would appreciate any help! Can someone give me some good idea?
<div class="container login">
<div class="col-md-4 login-centered">
<div class="panel panel-default">
<div class="panel-heading"><h3 class="panel-title"><strong style="color:white">Sign in </strong></h3></div>
<div class="panel-body">
<section role="form">
#using (Html.BeginForm()
{
#Html.AntiForgeryToken()
#Html.ValidationSummary()
<div class="form-group" style="display:block;margin:auto;">
<label>Username</label>
#Html.TextBoxFor()
#Html.ValidationMessageFor()
</div>
<div class="form-group" style="display:block;margin:auto;margin-top:6px;">
<label >Password</label>
#Html.PasswordFor()
#Html.ValidationMessageFor( )
</div>
<input type="submit" value="Log in" class="pull-right btn-sm btn-default" />
}
</section>
</div>
</div>
</div>
</div>
This is my css:
.login-centered {
display:block;
margin-left:auto;
margin-right:auto;
}
.panel-heading {
background-color: #2190b6!important;
}
.btn-default {
background-color: #2190b6 !important;
border: 1px solid #2190b6 !important;
color: #FFF!important;
margin-top: 10px;
}
.btn-default:hover, .btn-default:active:focus{
background-color: #2190b6 !important;
border: 1px solid #2190b6 !important;
color: #FFF!important;
}
The following CSS code should do the job !!
.login-centered {
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
position: absolute;
}
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
can anyone help me achieve this looks?
I need that checkbox and form fields with round corners and background with that colour
thanks
Was this helpfull
.panel-default * {
background: #25A9DF !important;
color: #fff !important;
}
::-webkit-input-placeholder {
color: #fff!important;
}
:-moz-placeholder {
color: #fff;
opacity: 1!important;
}
::-moz-placeholder {
color: #fff;
opacity: 1!important;
}
:-ms-input-placeholder {
color: #fff!important;
}
.login-form .form-control {
padding: 0 12px;
height: auto;
font-size: 14px;
line-height: 3.428571;
}
.login-form .form-control,
.login-form .input-group-addon {
border: 1px solid #fff;
}
.login-form .form-control {
border-left: none;
}
.login-form .input-group-addon {
border-right: none;
}
.btn {
padding: 12px 12px!important;
border: 1px solid #fff!important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-body">
<form class="form-inline login-form">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="glyphicon glyphicon-user"></i>
</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Username or Email">
</div>
<div class="input-group">
<div class="input-group-addon"><i class="glyphicon glyphicon-lock"></i>
</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Password">
</div>
</div>
</form>
<div class="form-group text-right">
Forgot Password?
</div>
<div class="form-group">
<div class="btn btn-block btn-info">Login</div>
</div>
</div>
</div>
</div>
</div>
</div>
You'll need to use border-radius to curve the corners. If you're unsure use this tool (http://border-radius.com/) to help you achieve it.
I would go about this by making 2 input fields use border-radius to curve the top corners only for the first input and the bottom corners for the second. Then style the rest as appropriate.
I am trying to align some stuff in a login page. I want the pictures to appear left to the input boxes and the buttons on the down part of the div to be left and right. Something like this:
But this is what is happening (on Safari. Chrome works kinda OK as you can see on top image)
The problem is that although it partially works on Chrome, the input boxes are too small and I can't increase their size.
This is the code I am trying to use:
// Outer white DIV for the forms and buttons:
.login-form {
width: 360px;
height: 300px;
text-align: center;
margin-left: auto;
margin-right: auto;
padding: 19px 29px 29px 19px;
color: #444444;
background: rgba(253, 253, 253, 1.000);
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border: solid 1px rgba(144, 144, 144, 0.075);
}
// Login field for e-mail:
.login-field-up {
margin-bottom: 5px;
margin-top: 10px;
margin-right: 100px;
float: left;
display: inline-block;
}
/ Login field for password:
.login-field-down {
margin-top: 10px;
margin-bottom: 15px;
float: left;
}
// DIV for Icons of user credential and golden key:
.login-icon {
margin-top: 15px;
margin-right: 15px;
float: left;
display: inline-block;
}
// Right checbox:
.right-col {
float: right;
text-align: center;
margin-top: 10px;
}
Left blue login button:
.left-col {
float: left;
margin-left: 10px;
}
If there is any other easy way to do it, I am up to it. Since I have always worked with backend, I suck with CSS.
<section id="banner">
<h2>Title</h2>
<section>
<div id="skel-layers-wrapper" class="login-form">
<form method="post" action="{% url 'principal' %}">
<div class="login-icon">
<img src="{% static "icons/identity.png" %}" class="icons">
</div>
<div class="login-field-up">
<input type="text" name="username" id="username" placeholder="E-mail" />
</div>
<div class="login-icon">
<img src="{% static "icons/key_user.png" %}" class="icons">
</div>
<div class="login-field-down">
<input type="password" name="password" id="username" placeholder="Password" />
</div>
<div class="left-col">
<input type="submit" value="Login!" class="button" />
</div>
<div class="right-col">
<input type="checkbox" id="remember_login" checked="" name="remember_login" class="6u$ 12u$(3)">
<label for="remember_login" style="color:#5C5C5C">Remember me <img src="{% static "icons/lock_gold_16.png" %}" class="icons"></label>
</div>
</form>
</div>
</section>
</section>
You can increase the size of your input boxes by setting the "font-size" attribute in your style sheet, for example,
input {
font-size:2em;
}
And you can align images with input boxes by using <label></label>, for example,
<label for="email"><img src="image.png" /></label>
<input type="email" placeholder="E-mail" name="email" />
Or, you can also place the images in a separate div and the inputs in another div and then adjust the width, margin or padding to align them the way you want.
But as Billy said, if you post your html code, it will be easier to provide a solution.
EDIT: Thanks for your code. I think you wanted to achieve something like this. I added some borders to help you understand the positioning of the divs. Remove them and change the urls for the images once you are done debugging.
<!DOCTYPE html>
<html>
<head>
<style>
.login-form {
width: 360px;
height: 300px;
margin-left: auto;
margin-right: auto;
padding: 19px 29px 29px 19px;
color: #444444;
background: rgba(253, 253, 253, 1.000);
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border: solid 1px rgba(144, 144, 144, 0.075);
border:1px solid black;
}
#title-header {
text-align:center;
}
#username, #password {
margin-left:20px;
}
input {
font-size:1em;
}
img {
width:16px;
height:16px;
}
.login-field-up {
margin-left:50px;
width:250px;
border:1px solid black;
}
.login-field-down {
margin-left:50px;
width:250px;
border:1px solid black;
margin-top:20px;
margin-bottom:20px;
}
.login-icon {
border:1px solid black;
}
.right-col {
float:left;
width:160px;
margin-left:30px;
border:1px solid black;
}
.left-col {
margin-left:50px;
float:left;
width:60px;
border:1px solid red;
}
.inner-wrapper {
margin-top:50px;
width:350px;
height:150px;
border:1px solid red;
}
</style>
<section id="banner">
<h2 id="title-header">Title</h2>
<section>
<div id="skel-layers-wrapper" class="login-form">
<form method="post" action="{% url 'principal' %}">
<div class="inner-wrapper">
<div class="login-field-up">
<img src="image.png">
<input type="text" name="username" id="username" placeholder="E-mail" />
</div>
<div class="login-field-down">
<img src="image.png">
<input type="password" name="password" id="password" placeholder="Password" />
</div>
<div class="left-col">
<input type="submit" value="Login!" class="button" />
</div>
<div class="right-col">
<input type="checkbox" id="remember_login" checked="" name="remember_login" class="6u$ 12u$(3)">
<label for="remember_login" style="color:#5C5C5C">Remember me <img src="{% static "icons/lock_gold_16.png" %}" class="icons"></label>
</div>
</div>
</form>
</div>
</section>
</section>