What I want is to make my page a little responsive for desktop browsers.
For example, when I decrease the width of the browser, the left and right portion of the page should be stacked over each other. Please check the code, you'll understand. The outerLeft and outerRight div are floated left and right respectively. When I decrease the width of browser, outerRight goes below outerLeft, which is good. But then the problem is with footer and copyright (last two divs at bottom) divs. These do not get displaced because of the outerRight div. I want them to be below outerRight. How can I do this?
HTML:
<body style="margin: 0px">
<div class="outer">
<div id="header"></div>
<div class="outerLeft">
<h1><a style="text-decoration: none; color: white;" href="login.php">WinkCage</a></h1>
<br />
<p>Instant Messaging web application</p>
</div>
<div class="outerRight">
<div class="loginform">
<form name="form2" method="post">
<table>
<tr>
<td><input type="text" name="uname" placeholder="Username" required/></td>
<td><input type="password" name="pass" placeholder="Password" required/></td>
<td><input id="logbutton" type="submit" name="sub" value="Login"/></td>
</tr>
</table>
</form>
<p><?php echo $loginerror; ?></p>
</div>
<div class="signform">
<form id="signupform" name="form1" method="post" enctype="multipart/form-data">
<table>
<tr>
<td><input type="text" name="name" placeholder="Enter your name" required /></td>
<td rowspan="3"><div class="propic"><img id="imgid" src="images/dp.png" /></div>
<input id="imgInput" type="file" name="image" required/></td>
</tr>
<tr>
<td><input type="text" name="username" placeholder="Enter username" required pattern="[a-zA-Z0-9]{6,}" title="The username must contain minimum 6 and ONLY alphanumeric characters."/></td>
</tr>
<tr>
<td><input id="digits" type="text" name="phone" maxlength="10" placeholder="Enter your phone no." pattern=".{10}" required title="Invalid entry. Minimum 10 digits are required."/></td>
</tr>
<tr>
<td><input id="typechange" type="password" name="password" maxlength="12" placeholder="Enter password" required pattern="[a-zA-Z0-9]{5,}" title="The password must contain at least 5 and ONLY alphanumeric characters."/>
<div id="seepass"></div></td>
<td><input type="submit" id="button" name="submit" value="Sign Up"></td>
</tr>
</table>
</form>
<div id="userexist"></div>
<div style="clear: both"></div>
</div>
</div>
<div style="clear: both"></div>
</div>
<div style="font-family: calibri; text-align: center; color: black; font-size: 16px; padding: 5px 0px 5px 0px;"><a style="text-decoration: none; color: black; display: block;" href="login.php">WinkCage © 2016</a></div>
<div style="height: 7px; box-shadow: 0px 0px 1px 1px grey; background-color: white; display: block"></div>
</body>
CSS:
html, body{
height: 100%;
background-color: aquamarine;
}
#header{
height: 20%;
}
.outer{
max-width: 1024px;
margin: 0 auto;
height: 94%;
display: block;
}
.outerLeft{
float: left;
width: 320px;
height: auto;
text-align: center;
margin-top: 145px;
padding-left: 50px;
}
.outerRight{
padding-left: 50px;
float: left;
width: auto;
height: auto;
}
.loginform{
height: auto;
width: 480px;
box-shadow: 0px 0px 15px 0px grey;
border-radius: 3px;
padding: 20px 20px 20px 23px;
background-color: white;
color: red;
}
.loginform input{
width: 187px;
height: 21px;
padding-left: 5px;
}
#logbutton{
background-color: #00CC66;
color: white;
font-weight: bold;
width: 70px;
height: 28px;
cursor: pointer;
}
.signform{
margin-top: 20px;
margin-left: 0px;
height: auto;
width: 480px;
box-shadow: 0px 0px 15px 0px grey;
border-radius: 3px;
padding: 20px 20px 10px 20px;
background-color: white;
}
.signform input{
width: 250px;
height: 24px;
font-size: 20px;
padding: 5px 10px 5px 10px;
margin-bottom: 10px;
}
#button{
background-color: #0099FF;
color: white;
width: 188px !important;
height: 41px !important;
border-radius: 4px;
border: 0px solid grey;
display: block;
font-weight: bold;
margin-left: 10px;
cursor: pointer;
box-shadow: inset 0px 0px 4px grey;
text-shadow: 1px 1px 2px black;
}
.propic{
height: 100px;
width: 100px;
margin: 0 auto;
border: 4px solid white;
box-shadow: 0px 0px 1px 1px grey;
border-radius: 2px;
background-color: grey;
}
#imgInput{
width: 187px !important;
height: 22px !important;
font-size: 14px;
padding: 0px;
margin-top: 10px;
margin-bottom: 10px;
background-color: #cccccc;
margin-left: 10px;
}
#imgid{
height: 100px;
width: 100px;
}
You need to give it a clear: both just this!
<div style="font-family: calibri;text-align: center;color: black;font-size: 16px;padding: 5px 0px 5px 0px;clear: both;"><a style="text-decoration: none; color: black; display: block;" href="login.php">WinkCage © 2016</a></div>
jsFiddle
Note: I suggest you to do not use inline-css
Not sure what you want..
Since you have an element with height 94% - I'd say you always want to see that footer (being fixed on the bottom..) and generate the scroll just for that outer element.
If that's what you want, you can just include an overflow: auto in the .outer class.
.outer {
max-width: 1024px;
margin: 0 auto;
height: 94%;
display: block;
overflow: auto;
}
Take a look here..
https://jsfiddle.net/uvqk4eeL/1/
Related
I am a newbie, I am having a frustrating problem. 2 out of 8 of my text fields will not float left, even though they are using the same or similar script as the other other fields. It is very frustrating, as you can see below:
/*franchise details form container*/
div#section_left{
padding: 0;
position:absolute;
width: 76%;
height: 100%;
float: right;
margin-top: 60px;
margin-left: 310px;
padding-left: 10px;
padding-right: 10px;
padding-top: 30px;
}
div.field{
position: relative;
}
/*Form fields styling*/
/* red box*/
div.field,
div.field:before,
div.field input#fran_name,
input#fran_email,input#mang_name,
input#address1, input#franc_phone{
height: 33px;
padding: 0;
border-width: 0;
/* remove default border */
}
div.field input#fran_name,
input#fran_email,input#mang_name,
input#address1, input#franc_phone{
border: 1px solid #6d6e70;
border-left: 0px;
padding-left: 5px;
border-radius: 0 5px 5px 0;
width: 40%;
margin-bottom: 10px;
}
div.field:before{
content: "\f015";
width: 30px;
height: 30px;
border: 1px solid #e86065;
display: inline-block;
float: left;
position: relative;
background: #e86065;
color: white;
text-align: center;
line-height: 33px;
border-radius: 5px 0 0 5px;
}
div.field1:before{
content: "\0260E";
width: 30px;
height: 30px;
border: 1px solid #e86065;
display: inline-block;
float: left;
position: relative;
background: #e86065;
color: white;
text-align: center;
line-height: 33px;
border-radius: 5px 0 0 5px;
}
div.field2:before{
content: "\0260E";
width: 30px;
height: 30px;
border: 1px solid #e86065;
display: inline-block;
float: left;
position: relative;
background: #e86065;
color: white;
text-align: center;
line-height: 33px;
border-radius: 5px 0 0 5px;
}
div.field3:before{
content: "\0260E";
width: 30px;
height: 30px;
border: 1px solid #e86065;
display: inline-block;
float: left;
position: relative;
background: #e86065;
color: white;
text-align: center;
line-height: 33px;
border-radius: 5px 0 0 5px;
}
div.field4:before{
content: "\0260E";
width: 30px;
height: 30px;
border: 1px solid #e86065;
display: inline-block;
float: left;
position: relative;
background: #e86065;
color: white;
text-align: center;
line-height: 33px;
border-radius: 5px 0 0 5px;
margin-top: 55px;
}
div.field4 input#franc_phone{
margin-top: 55px;
}
input#address2,input#city {
border: 1px solid #6d6e70;
border-radius: 5px;
width: 43%;
height: 33px;
display: inline-block;
line-height: 33px;
float: left;
position: relative;
margin-bottom: 10px;
}
input#pcode{
border: 1px solid #6d6e70;
border-radius: 5px;
width: 20%;
height: 33px;
line-height: 33px;
float: left;
position: relative;
margin-top: 10px;
margin-bottom: 10px;
}
.clr{
clear: both;
}
<div id="section_left">
<form id="franchiseDets" action ="Franchise-Details.php" method="POST">
<div class="group1">
<!-- franchise details form-->
<div class="field">
<input type="text" name="fran_name" id="fran_name" value="<?php echo $_SESSION['fran_name']; ?>" placeholder="e.g One Delivery Leeds" pattern="[a-zA-Z]"
autofocus required tabindex="1"></div>
<br>
<div class="field1">
<input type="email" name="fran_email" id="fran_email" value="<?php echo $_SESSION['fran_email'] ?> ' <?php echo $disabled ?>" placeholder="leeds#one-delivery.co.uk" required tabindex="2">
</div>
<br>
<div class="field2">
<input type="text" name="mang_name" id="mang_name" value="<?php echo $_SESSION['mang_name']; ?>" placeholder="Joe Blogs" required tabindex="3">
</div>
<br>
<div class="field3">
<input type="text" name="address1" id="address1" value="<?php echo $_SESSION['address1']; ?>" placeholder="Address Line 1" tanindex="4">
</div>
<br>
<input type="text" name="address2" id="address2" value="<?php echo $_SESSION['address2']; ?>" placeholder="Address Line 2" tabindex="5">
<br>
<br>
<input type="text" name="city" id="city" value="<?php echo $_SESSION['city']; ?>"placeholder="Town/City" tabindex="6">
<br>
<br>
<input type="text" name="pcode" id="pcode" value="<?php echo $_SESSION['pcode']; ?>" placeholder="Postcode" tabindex="7">
<br>
<div class="field4">
<input type="tel" name="franc_phone" id="franc_phone" value="<?php echo $_SESSION['franc_phone'] ?>" placeholder="Customer service number" min="10" maxlength="11" pattern="[0-9]{3}[-][0-9]{4}[-][0-9]{4}"
required title="Please provide your customer service number in the following format: 000-0000-0000" tabindex="8"> </div>
</div>
<br>
</div>
</div>
</form>
The divs wrapped the forms are the only way the red box in the css works, i have also removed them to see if they are the reason for the problem and they weirdly are not.
What can i do to resolve this
If you're looking to have all you're text boxes align on the left, that's not floating left. Looking at the example image, the only two elements that look to be properly floating left are 2 which are offset from the left. Try removing all left floats from your css and set the body text-align property to left.
body {
text-align: left;
}
All the other inputs are wrapped in a DIV element - wrap the rest in DIV as well and it should work.
I'm using bootstrap and I want to have an embedded video and div side by side with same height. Tried different solutions posted here on SO, but couldn't get any of them to work.
HTML & CSS is like this:
header {
background: url("../img/header.jpg");
background-size: cover;
min-height: 595px;
font-family: Myriad Pro;
color: #FFF;
text-align: center;
font-weight: bold;
padding-top: 60px;
}
.headerForm {
background-color: rgba(0, 0, 0, 0.6);
border-radius: 8px;
margin-top: 25px;
padding: 25px;
text-align: left;
height: 100%;
}
.form {
color: #fff;
text-align: center;
width: 100%;
}
.form input {
color: #a5a5a5;
margin-right: 5px;
margin-top: 10px;
}
.headerVideo {
border: 10px #FFF solid;
border-radius: 8px;
margin-top: 25px;
margin-bottom: 25px;
}
<div class="container-fluid">
<div class="row">
<div>
<header>
<h2>Title</h2>
<small>Slogan</small>
<br>
<div class="col-sm-6">
<div class="headerForm">
<h3>
Be contacted by a and receive
updates about the new .
</h3>
<small class="form">
Sign up for information about , events,
demonstrations and more.
</small>
<form action="#" class="form">
<input type="text" name="firstname" value="Etunimi">
<input type="text" name="lastname" value="Sukunimi">
<input type="email" name="email" value="Sähköposti">
<input type="phone" name="phone" value="Puhelinnumero">
<input type="text" name="address" value="Osoite">
<input type="text" name="postal" value="Postinumero">
<br>
<input type="submit" value="Submit">
</form>
</div>
</div>
<div class="col-md-6">
<div class="headerVideo embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/gkTb9GP9lVI" allowfullscreen></iframe>
</div>
</div>
</header>
</div>
</div>
</div>
Here is how it shows up in browser:
That red rectangle there shows how left div is not having the same height as right div. I want them to be same height, always. Any help is appreciated!
You have padding: 25px; in .headerform but margin-bottom: 25px; in .headerVideo.
try do the same for both
.headerForm {
background-color: rgba(0, 0, 0, 0.6);
border-radius: 8px;
margin-top: 25px;
margin-bottom: 25px;
text-align: left;
height: 100%;
}
Answer for this was obvious. Added fixed heights for both .headerVideo and .headerForm and fixed margins.
.headerVideo {
border: 10px #FFF solid;
border-radius: 8px;
margin-top: 25px;
margin-bottom: 25px;
height: 300px;
}
.headerForm {
background-color: rgba(0, 0, 0, 0.6);
border-radius: 8px;
margin-bottom: 25px;
padding: 25px;
text-align: left;
height: 300px;
}
ok so im working on a website for a friend and she is wanting a login that when they login and if the information is correct it will redirect them to that page and only members could see that page. so far this is the what i have.
<div style="text-align: center;">
<div style="box-sizing: border-box; display: inline-block; width: auto; max-width: 480px; background-color: #FFFFFF; border: 2px solid #0361A8; border- radius: 5px; box-shadow: 0px 0px 8px #0361A8; margin: 50px auto auto;">
<div style="background: #0361A8; border-radius: 5px 5px 0px 0px; padding: 15px;"><span style="font-family: verdana,arial; color: #D4D4D4; font-size: 1.00em; font-weight:bold;">Login to Members Section</span></div>
<div style="background: ; padding: 15px">
<style type="text/css" scoped="">
td { text-align:left; font-family: verdana,arial; color: #064073; font-size: 1.00em; }
input { border: 1px solid #CCCCCC; border-radius: 5px; color: #666666; display: inline-block; font-size: 1.00em; padding: 5px; width: 100%; }
input[type="button"], input[type="reset"], input[type="submit"] { height: auto; width: auto; cursor: pointer; box-shadow: 0px 0px 5px #0361A8; float: right; text-align:right; margin-top: 10px; margin-left:7px;}
table.center { margin-left:auto; margin-right:auto; }
.error { font-family: verdana,arial; color: #D41313; font-size: 1.00em; }
</style>
<form method="post" action="http://www.authpro.com/auth/deluxe/" name="aform" target="_top">
<input type="hidden" name="action" value="login">
<input type="hidden" name="hide" value="">
<table class='center'>
<tr><td>Login:</td><td><input type="text" name="login"></td></tr>
<tr><td>Password:</td><td><input type="password" name="password"></td> </tr>
<tr><td> </td><td><input type="submit" value="Login"></td></tr>
<tr><td colspan="2"> </td></tr>
<tr><td colspan="2">Lost your username or password? Find it here!</td></tr>
<tr><td colspan="2">Not member yet? Click here to register. </td></tr>
</table>
</form>
</div></div></div>
every thing is working like it should. The script that is run when you press the login but is what will redirect you
I have the following HTML:
<div class="dispLoginSearch" style="text-align: left; overflow: hidden;"> <!-- LOGIN AND SEARCH -->
<div class="theLoginBox" style="clear: both;">
<div class="loginTitle">
Log in to <span style="font-family: 'blackjarregular'; font-size: 14pt; color: #FE7816;">My</span> <span style="font-family: 'trajanpro'; font-size: 12pt; color: #00529B;">WD</span> | Sign Up
<br />
<input type="text" value="Username" /> <input type="password" value="Password" /> <input type="button" value="Go" />
<br />
<span style="float: right;">Forgot login/password</span>
</div>
</div>
<div style="z-index: 99999999999;">
<input type="text" value="Search WD" />
</div>
</div> <!-- LOGIN AND SEARCH -->
CSS:
.dispLoginSearch
{
width: 47%;
height: 150px;
line-height: 150px;
vertical-align: middle;
float: right;
padding-right: 2%;
background: #FFFFFF;
border: 1px solid #0026ff;
}
.theLoginBox
{
border: 2px solid #D5D5D5;
border-radius: 4px;
width: 97%;
height: 90px;
padding: 10px;
white-space: nowrap;
background: #ff6a00;
}
.loginTitle
{
height: 88px;
display: block;
vertical-align: top;
white-space: nowrap;
font-weight: bold;
text-align: left;
background: #b6ff00;
}
When I view the website, I see the following:
What I would like it be shown:
How do I fix the issue? It is happening in both IE and other browsers.
UPDATE:
I added overflow: auto in the loginTitle class and this is what is shown:
Each section is taking up a lot of space and showing the scrollbar :/
This is because of line 5 of your CSS : line-height: 150px;.
Just remove it and you should be fine.
If you want it to look like image you attached, see here: http://codepen.io/anon/pen/FothH
html:
<form action="#">
<p>Log in to ###### | Sign up</p>
<input type="text" placeholder="Username"/>
<input type="password" placeholder="Password"/>
<input type="submit" value="Go"/>
Forgot login/password
</form>
css:
form {
border: 1px solid #d4d4d4;
display: block;
width: 375px;
font: 16px sans-serif;
padding: 0 0 0 15px;
border-radius: 5px;
-webkit-font-smoothing: antialiased;
}
form p {
margin: 5px 0 0;
font-size: 20px;
line-height: 35px;
}
input {
display: inline-block;
border-radius: 7px;
}
input[type=text], input[type=password] {
border: none;
background: #ebebeb;
font-size: 16px;
padding: 6px 10px;
width: 180px;
}
input[type=password] {
width: 120px;
}
input[type=submit] {
font-size: 16px;
width: 25px;
padding: 5px 0px;
background: none;
color: red;
border: none;
}
form a {
display: block;
line-height: 25px;
text-align: right;
margin-right: 30px;
color: #d4d4d4;
text-decoration: none;
margin-bottom: 5px;
}
I can use all the help with making my contact form responsive according the eagle sprite I have on this page: http://demo.chilipress.com/epic3/
The idea is to have the eagle's mouth over the form while the screen gets resized.
As you can see, the sprites are completely responsive and so is the form. However the form does not stick to the eagle's mouth when resizing.
HTML:
<section id="two" class="window">
<img src="assets/contact.jpg" alt="background image">
<div id="sprite1_contact"></div>
<div id="sprite2_contact"></div>
<div id="content">
<div class="contact">
<form>
<fieldset class="name group">
<label for="name" class="name">Name</label>
<input id="name" name="name" required aria-required=”true” pattern="[A-Za-z-0-9]+\s[A-Za-z]+" title="firstname lastname"/>
</fieldset>
<fieldset class="email group">
<label for="email" class="email">Email</label>
<input type="email" id="email" name="email" required title="Submit a valid Email">
</fieldset>
<fieldset class="phone group">
<label for="phone" class="phone">Telephone</label>
<input type="tel" id="phone" name="phone" pattern="(\+?\d[- .]*){7,17}" required title="Submit an international, national or local phone number"/>
</fieldset>
<fieldset class="message group">
<label class="message">Message</label>
<input type="text" id="message" required/>
</fieldset>
<fieldset class="send group">
<input type="submit" value="Send" class="sendButton">
</fieldset>
</form>
</div>
</div>
</section>
CSS
#sprite1_contact{
background-image: url('sprite_contact2.png');
width: 35.2%;
height: 0;
padding-bottom: 7%;
background-position: 0 0;
background-size: 100%;
display: block;
top: 0;
position: absolute;
margin: 0 0 0 32.3%;
z-index: 2;}
#sprite2_contact {
background-image: url('sprite_contact2.png');
width: 27.5%;
height: 0;
padding-bottom: 29%;
background-position: 0 27%;
background-size: 100%;
display: block;
top: 0;
position: absolute;
margin: 0 0 0 35.8%;
z-index: 1;}
#content{
max-width: 50.694%;
position: absolute;
bottom: 0;
background: none repeat scroll 0 0 rgba(0, 0, 0, .55);
border-radius: 13px;
width: 678px;
margin: 0 0 7.6% 25.9167%;
box-shadow: 0 0 0 2px #000000, 2px 2px 30px 1px rgba(199, 255, 100, 0.73);}
.contact{
width: 100%;
margin: 10px;}
fieldset{
border: 0;
margin: 0;
width: 100%;
padding: 1%;}
.name, .email, .message{
padding-right: 29px;}
label{
color: #d8d9de;
font-family:'apple_chancerychancery';
font-size: 1.2em;
padding-left: 10px;}
input{
margin-right: 50px;
padding: 5px;
text-align: left;
border-radius: 10px;
background: none repeat scroll 0 0 rgba(255, 240, 260, 0.5);}
#name, #email, #phone, #message{
float: right;
color: #253c93;
text-decoration: none;
border: 1px dotted #29FF00;
font-family: 'Calibri', Arial, sans-serif;
font-size: 1em;
width: 73%;}
#name{
width: 73.5%;}
textarea {vertical-align: top;}
div#inner-editor{
padding: 30px;}
#message{
padding-top: 10%;}
.sendButton{
background: rgba(0, 0, 0, 0);
color: #d8d9de;
font-size: 1.2em;
font-family: 'apple_chancerychancery';
padding: 0.8% 4%;
border: none;
margin-left: 42%;
cursor: pointer;
box-shadow: inset 2px 2px 9px rgba(199, 255, 100, 0.73), inset -2px -2px 9px rgba(199, 255, 100, 0.73);}
Just 2 changes in the CSS:
#sprite2_contact {
top: 0px !important;
}
just to overcome the top that is inline ..
and
#content {
margin-top: 28%;
}
Well, you have already a margin property there, just place that afterwards so that the other is overwritten
I have set those changes this way, instead of changing yours, so the changes can be more easily seen and reverted