So I am looking for the reason why a div in-particular has so much space at the bottom in my local preview, but in jsfiddle it does not.
In the JSFiddle it's the bottom div that's purple, but this is how it shows up in my local copy: http://prntscr.com/ingfwa
JSFiddle: https://jsfiddle.net/eaLpf4f5/2/
Either that or the extra whitespace in the JSFiddle is the extra space in my local copy just colored purple? I've tried inspecting the code and it seems like it might be something with the last col-md-2 but that's a column, not a row, so I'm not sure. Also tried removing it to no effect.
I am aware the toolbar is broken right now as well, not focusing on that at the moment. Also I am aware the CSS is out of whack in terms of order of classes and ids in the HTML and CSS.
#div3{
background-color: purple;
}
.formdiv{
float:left;
position: relative;
top: -25em;
height: 25em;
}
.p6{
text-align:center;
color: white;
}
.bar5{
border: 3px gray solid;
width: 65%;
position: relative;
top: 1em;
left: 10em;
}
#lt3{
font-size: 2.9em;
position: relative;
margin-left: 2.2em;
top: -0.5em;
color:white;
font-family: Acme, sans-serif;
}
#lt4{
font-size: 2.9em;
position: relative;
margin-left: 15.5em;
top: -2.2em;
color:white;
font-family: Acme, sans-serif;
}
.contacttextdiv{
width: 10em;
position: relative;
left: 30em;
top: -5em;
font-size: 1.3em;
}
input, textarea {
padding: 9px;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 200px;
background: #FFFFFF;
}
textarea
{
width: 400px;
max-width: 400px;
height: 150px;
line-height: 150%;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
border-color: #C9C9C9;
}
.form label {
margin-left: 10px;
color: #999999;
}
.submit input {
width: auto;
padding: 9px 15px;
background: #617798;
border: 0;
font-size: 14px;
color: #FFFFFF;
}
input, textarea {
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
input, textarea {
background: -webkit-gradient(linear, left top, left 25, from(#EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #EEEEEE), #FFFFFF 25px);
}
input:hover, textarea:hover,
input:focus, textarea:focus {
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}
.submit input {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
<!DOCTYPE html>
<html>
<body>
<head>
<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title></title>
</head>
<div class="container">
<div class="row">
<div class="col-xs-12" id="navbar">
Home
News
Contact
</div>
</div>
<div class="row">
<div class="col-md-2">Test</div>
<div class="col-md-8" id="div1">
<div>
<p id="p1"><strong>Front-end developer and UX/UI designer, with practical experience in project management, branding strategy, and creative direction; devoted to functional programming and information architecture.</strong></p>
<p id="p2"><div class="bar"></div>
<p id="lt1"><strong></></strong></p>
<p class="p2"><strong> Web Developer - User Experience Designer</strong></p>
<img src="LOGO.jpg" class="pic1"/>
</div>
</div>
<div class="col-md-2">Test</div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8" id="div2">
<p class="p4"><strong>Portfolio</strong></p>
<div class="bar2"></div>
<div class="bar3"></div>
<p id="lt2"><strong></></strong></p>
<img src="fakesample1.jpg" class="pic2"/>
<img src="fakesample2.jpg" class="pic3"/>
<img src="fakesample3.jpg" class="pic4"/>
<img src="fakesample4.jpg" class="pic5"/>
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8" id="div3">
<p class="p6"><strong>Contact Me</strong></p>
<p id="p2"><div class="bar5"></div>
<p id="lt3"><strong></></strong></p>
<p id="lt4"><strong></></strong></p>
<div class="contacttextdiv">
<p class="contacttext"><strong>Contact me here! If you want me to do web design work, walk your dog, pet your cat, water your plants, or just have a chat! This is the place to do it! No spam please, thanks.</p></strong>
</div>
<div class="formdiv">
<form class="form">
<p class="name">
<input type="text" name="name" id="name" />
<label for="name">Name</label>
</p>
<p class="email">
<input type="text" name="email" id="email" />
<label for="email">E-mail</label>
</p>
<p class="web">
<input type="text" name="web" id="web" />
<label for="web">Website</label>
</p>
<p class="text">
<textarea name="text"></textarea>
</p>
<p class="submit">
<input type="submit" value="Send" />
</p>
</form>
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-xs-12" id="bottombar1">About This Page</div>
<div class="col-xs-12"></div>
</body>
</html>
Change height
.formdiv {
float: left;
position: relative;
top: -25em;
height: 1em;
}
https://jsfiddle.net/eaLpf4f5/10/
Related
I am newbie in bootstrap and front design. I want to make a page in MVC and CSS and bootstrap, a template like the following
So I want the page be resized from the left and right side of this picture, not by whole part of the image .
This Code doesn't make what I want, when browser size increased it increases the frame with shadow.
.page-account-box .picture-box {
width: 100%;
padding: 0;
}
.page-account-box .picture-box .imgFormat {
-moz-box-shadow: 10px 10px 5px #ccc;
-webkit-box-shadow: 10px 10px 5px #ccc;
box-shadow: 10px 10px 5px #ccc;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
position: relative;
top: 50px;
left: 150px;
background-color: darkgoldenrod;
}
.page-account-box {
width: 100%;
height: auto;
padding: 0;
border: 1px solid #e2efef;
-webkit-box-shadow: 0 12px 12px 0 hsla(0, 0%, 70.6%, .11);
box-shadow: 0 15px 23px 0 hsla(0, 0%, 71%, 0.29);
position: relative;
margin: 50px auto 30px;
background-color: aqua;
border-radius: 20px;
}
.page-account-box .ds-userlogin {
width: 100%;
height: auto;
padding: 0;
margin: 10px auto 10px;
background-color: blueviolet;
}
.page-account-box .ds-userlogin .account-box .Login-to-account .account-box-content {
min-height: 100%;
text-align: center;
border-radius: 20px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="page-account-box">
<div class="col-lg-1 col-md-1 col-xs-6 ">
<div class="picture-box">
<img src="https://via.placeholder.com/600" class="imgFormat" />
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-8 mx-auto">
<div class="ds-userlogin">
<div class="account-box">
<div class="Login-to-account mt-4">
<div class="account-box-content">
<form method="post" class="form-account text-right">
<div class="form-account-title">
<label for="email-phone">Name</label>
<input type="text" class="number-email-input" id="FullName">
</div>
<div class="form-account-title">
<label for="email-phone">Email</label>
<input type="email" class="number-email-input" id="Email">
</div>
<div class="form-account-title">
<label for="password">password</label>
<input type="password" class="password-input" id="Password">
</div>
<div class="form-row-account">
<a onclick="Registeruser()" class="btn btn-primary btn-register">ثبت </a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You'll want to use the img-fluid class on your image to prevent it from being larger than the container, and you'll want to position and size the container instead of the image, along with the outer elements. Notice overflow-hidden, which forces containment, and max-width, which accommodates your left position. That might be better handled with padding on the container.
.page .account-box {
max-width: calc(100% - 150px);
}
.page-account-box .picture-box {
width: 100%;
padding: 0;
}
.page-account-box .picture-box {
box-shadow: 10px 10px 5px #ccc;
border-radius: 25px;
position: relative;
top: 50px;
left: 150px;
max-width: calc(100% - 150px);
background-color: darkgoldenrod;
}
.page-account-box {
border: 1px solid #e2efef;
box-shadow: 0 15px 23px 0 hsla(0, 0%, 71%, 0.29);
position: relative;
margin: 50px auto 30px;
background-color: aqua;
border-radius: 20px;
}
.page-account-box .ds-userlogin {
width: 100%;
height: auto;
padding: 0;
margin: 10px auto 10px;
background-color: blueviolet;
}
.page-account-box .ds-userlogin .account-box .Login-to-account .account-box-content {
min-height: 100%;
text-align: center;
border-radius: 20px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="page-account-box">
<div class="col-lg-1 col-md-1 col-xs-6 overflow-hidden">
<div class="picture-box">
<img src="https://via.placeholder.com/600" class="img-fluid" />
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-8 mx-auto">
<div class="ds-userlogin">
<div class="account-box">
<div class="Login-to-account mt-4">
<div class="account-box-content">
<form method="post" class="form-account text-right">
<div class="form-account-title">
<label for="email-phone">Name</label>
<input type="text" class="number-email-input" id="FullName">
</div>
<div class="form-account-title">
<label for="email-phone">Email</label>
<input type="email" class="number-email-input" id="Email">
</div>
<div class="form-account-title">
<label for="password">password</label>
<input type="password" class="password-input" id="Password">
</div>
<div class="form-row-account">
<a onclick="Registeruser()" class="btn btn-primary btn-register">ثبت </a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm making a webpage for my mums baking business (and to practice my novice coding skills, otherwise I'd just use a simpler solution rather than learning bootstrap).
I've got a header, then 3 bootstrap columns below it, one with an order form, one with images of her bakes, then one with links. I've sized them 3-6-3. I like the way the page looks fullscreen on my desktop but I want the columns to stack when browser gets smaller, or on another device. Currently they just smoosh together, the images get smaller, and after a certain point, a horizontal scrollbar appears. No stacking.
I'm sure I'm either trying to use bootstrap completely wrong, or there's a few glaring errors. I've been staring at it, and trying 'fixes' on here for so long, but I can't solve my issue. Some advice would be greatly appreciated.
one problem I know, is that the and aren't all formatted correctly, I can solve this myself with a bit of time, I just styled it whilst I had it wrongly formatted and when I do it correctly it all looks ugly again, so I'm leaving it for another day. My main problem is the stacking issue.
body {
background-image: url(../images/background.jpg);
}
* {
list-style: none;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
}
header {
margin: 10px 10px 10px 0px;
width: 100%;
height: 100px;
display: block;
background-color: #539e8a;
}
#inner_header {
width: 1000px;
height: 100%;
display: block;
margin: 0 auto;
}
header h1 {
font-family: 'Redressed', cursive;
font-size: 333%;
color: #f6c5be;
top: 15px;
left: 43%;
position: absolute;
}
#logo {
float: left;
padding: 17px 0px 0px 0px;
}
#myname {
float: right;
color: #f6c5be;
margin: 40px 0px 0px 0px;
font-size: 130%;
font-weight: 200;
}
/* ----------------------------------------------- */
.row {
display: table;
margin: 0px 5px 0px 5px;
}
[class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
.row div {
background: #f6c5be;
/*border: 2px solid #539e8a;*/
}
.pics img {
width: auto;
height: auto;
margin: 20px 0px 20px 0px;
display: block;
}
.main2 {
width: 100%;
}
#media-text {
float: none;
margin: 0 auto;
color: #539e8a;
}
#links-text {
float: none;
margin: 0 auto;
color: #539e8a;
}
a:link {
color: #539e8a;
}
a:visited {
color: darkolivegreen;
}
a:hover {
color: #539e8a;
}
#orderform-text {
float: none;
margin: 0 auto;
color: #539e8a;
}
input[type=text] {
border: 0;
box-shadow: 0 0 5px 4px #539e8a;
float: right;
}
input[type=date] {
border: 0;
box-shadow: 0 0 5px 4px #539e8a;
float: right;
}
input[type=tel] {
border: 0;
box-shadow: 0 0 5px 4px #539e8a;
float: right;
}
select[name=orderItems] {
border: 0;
box-shadow: 0 0 5px 4px #539e8a;
float: right;
}
textarea[name=orderBrief] {
border: 0;
box-shadow: 0 0 5px 4px #539e8a;
float: right;
}
input[type=checkbox] {
border: 0;
margin-top: 15px;
}
input[type=submit] {
border: 0;
box-shadow: 0 0 5px 4px #539e8a;
float: right;
}
<head>
<link href="https://fonts.googleapis.com/css2?
family=Open+Sans:wght#300&family=Redressed&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="css/mysite.css">
</head>
<body>
<header>
<div id="inner_header">
<img id="logo" src="images/newlogo.png" alt="logo, a cupcake">
<h1>redacted</h1>
<div id="myname">
<p>
by redacted
</p>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<div id="col1" class="col-xs-3">
<div class="row" id="orderform-text">
<div class="col-xs-12">
<h2><b>Order Form</b></h2>
</div>
</div>
<form action="xxx.xxx.xxx" method="post">
<div class="tableRow">
<p></p>
</div>
<div class="tableRow">
<p>
<label for="name">Name:</label>
<input type="text" name="name">
</p>
</div>
<div class="tableRow">
<p>
<label for="address">Address:</label>
<input type="text" name="Address">
</p>
</div>
<div class="tableRow">
<p>
<label for="contactNumber">Contact Number:</label>
<input type="tel" name="contactNumber">
</p>
</div>
<div class="tableRow">
<p>
<label for="deliveryDate">Delivery Date:</label>
<input type="date">
</p>
</div>
<div class="tableRow">
<p>
<label for="orderItems">What would you like?:</label>
<select name="orderItems">
<option value="Cake">Cake</option>
<option value="Cupcakes">Cupcakes</option>
<option value="Brownies">Brownies</option>
<option value="Scones">Scones</option>
<option value="Wedding Cake">Wedding Cake</option>
<option value="Custom Order">Custom Order (detail below)</option>
</select>
</p>
</div>
<div class="tableRow">
<p>
<label for="orderBrief">Order brief:
<br>
<br>
<textarea name="orderBrief" rows="5" cols="50" placeholder="Tell me in detail what you would like to order!"></textarea></label>
</p>
</div>
<div class="tableRow">
<p>
<label for="DietaryRequirements">Dietary requirements?:
Vegan<input type="checkbox" name="dietaryRequirements" value="Vegan">
Dairy-Free<input type="checkbox" name="dietaryRequirements" value="Dairy-free (can eat egg)">
Gluten-Free<input type="checkbox" name="dietaryRequirements" value="Gluten-free"></label>
</p>
</div>
<div class="tableRow">
<p>
<label for="giftwrap">Giftwrap?
yes <input type="radio" name="giftwrap" value="yes">
no <input type="radio" name="giftwrap" value="no"></label>
</p>
</div>
<div class="tableRow">
<p>
<input type="submit" value="Place Order">
</p>
<br>
</div>
<br>
</form>
</div>
<div id="col2" class="col-xs-6">
<div class="row" id="media-text">
<div class="col-xs-12">
<h2><b>Media</b></h2>
</div>
</div>
<div class="row">
<div class="col-xs-4 pics">
<img src="images/cake1.jpg" id="picture1" class="img-responsive" alt="wedding cake">
</div>
<div class="col-xs-4 pics">
<img src="images/cake2.jpg" id="picture2" class="img-responsive" alt="birthday cake">
</div>
<div class="col-xs-4 pics">
<img src="images/cake3.jpg" id="picture3" class="img-responsive" alt="cupcakes">
</div>
</div>
</div>
<div id="Links" class="col-xs-3">
<div class="row" id="links-text">
<div class="col-xs-12">
<h2><b>Links</b></h2>
<a href="link removed">
<h3>Facebook</h3>
</a>
<a href="link removed">
<h3>5 star hygiene rating</h3>
</a>
<a href="">
<h3>Reviews!</h3>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
Im using bootstrap 3 with flexbox in order to achieve the output. To explain, I am creating a login screen where the left div has a background-image that completely covers the div and on the right side is the form container together with it form contents. I've provided a snippet to show what I am trying to do.
#page-login-template {
margin-top: -32px;
.column-wrapper{
display:flex;
}
.login-left {
background-image: url("assets/images/web_login#2x.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.login-right {
padding: 0 100px;
.login-logo {
padding:99px 0;
}
h4 {
font-family: Poppins;
font-size: 18px;
color: #0392cc;
}
.form-container {
padding: 20px 0;
.form-part-group {
padding: 10px 0;
}
[type=email],
[type=password],[type=text] {
height: 40px;
font-size: 18px;
font-family: Poppins;
color: #333;
}
[type=password],[type=text]{
border-right:0;
}
.input-group-addon {
background-color: white;
border-right: 1px solid #e9e9e9;
border-left:0;
border-top:1px solid #e9e9e9;
border-bottom: 1px solid #e9e9e9;
}
i{
font-size:18px;
}
.btn-login{
height:54px;
font-size:16px;
font-family:Poppins;
color:#fff;
background:#0570B6;
box-shadow: 0px 3px 6px #00000029;
}
.btn-login:hover{
background:#0570B6;
}
}
.form-container-2{
padding:20px 0;
p{
font-family: Poppins;
font-size: 12px;
color:#333;
font-weight:bold;
}
a{
color:#0392CC
}
}
.form-container-3{
padding-top:180px;
p{
font-family: Poppins;
font-size: 11px;
color:#333;
font-weight:bold;
}
a{
color:#0392CC
}
}
}
}
<div id="page-login-template" class="container-fluid">
<div class="row column-wrapper">
<div class="col-lg-7 login-left"></div>
<div class="col-lg-5 login-right">
<div class="row login-logo text-center">
<img src='<?= get_stylesheet_directory_uri() . '/assets/images/logo/logo#2x.png' ?>' width="50%">
</div>
<h4 class="text-center">Login to My Account</h4>
<div class="row form-container">
<form class="form-horizontal">
<div class="row">
<div class="form-part-group col-lg-12">
<input id="email" type="email" class="form-control form-input-group email-input" data-error-required="This field is required" data-class-focus="email-input" placeholder="Email">
<div id="email" class="error-block"></div>
</div>
</div>
<div class="row form-part-group">
<div class="input-group col-lg-12 password-input">
<input id="password" type="password" class="form-control form-input-group" data-error-required="This field is required" data-class-focus="password-input" placeholder="Password">
<div class="input-group-addon">
<i class="fa fa-eye-slash password-eye hide-password "></i>
</div>
</div>
<div id="password" class="error-block"></div>
</div>
<div class="row">
<div class="form-part-group col-lg-12">
<button type="button" class="btn btn-block btn-login" disabled>Log In</button>
</div>
</div>
</form>
<div class="row form-container-2 text-center">
<p>Don't have an account yet? Create An Account Now</p>
</div>
<div class="row form-container-3 text-center">
<p>Copyright © 2020. All Rights Reserved.</p>
<p>Terms & Conditions and Data Privacy Policy
</div>
</div>
</div>
</div>
</div>
As you can see I am controlling the height of the layout via padding the contents on the form. Is there a way to have the same output without it being dependent on the form's height.
height: 100vh;
This code can make your div same height as screen
First thing that you need to do is to set on "column-wrapper" class:
height: 100vh;
You probably need something like this, just group the div's in a way that you like:
JSFiddle
Try this. You need to set elements to height 100% or 100vh. And the right part is better to make with the flexbox.
html,
body {
height: 100%;
}
#page-login-template{
height: 100%;
}
.column-wrapper {
display: flex;
height: 100%;
}
.login-left {
background-image: url("https://source.unsplash.com/user/erondu/1600x900");
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
.login-logo{
padding-top:100px;
}
.login-right {
height: 100%;
overflow-y: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
}
h4 {
font-family: Poppins;
font-size: 18px;
color: #0392cc;
}
.form-container {
padding: 20px 0;
}
.form-part-group {
padding: 10px 0;
}
[type=email],
[type=password],
[type=text] {
height: 40px;
font-size: 18px;
font-family: Poppins;
color: #333;
}
[type=password],
[type=text] {
border-right: 0;
}
.input-group-addon {
background-color: white;
border-right: 1px solid #e9e9e9;
border-left: 0;
border-top: 1px solid #e9e9e9;
border-bottom: 1px solid #e9e9e9;
}
.input-group-addon i {
font-size: 18px;
}
.btn-login {
height: 54px;
font-size: 16px;
font-family: Poppins;
color: #fff;
background: #0570B6;
box-shadow: 0px 3px 6px #00000029;
}
.btn-login:hover {
background: #0570B6;
}
.form-container-2 {
padding: 20px 0;
}
.form-container-2 p {
font-family: Poppins;
font-size: 12px;
color: #333;
font-weight: bold;
}
.form-container-2 a {
color: #0392CC
}
.form-container-3 p {
font-family: Poppins;
font-size: 11px;
color: #333;
font-weight: bold;
}
.form-container-3 a {
color: #0392CC
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<div id="page-login-template" class="container-fluid">
<div class="row column-wrapper">
<div class="col-md-7 login-left"></div>
<div class="col-md-5 login-right">
<div class="row login-logo text-center">
<img src='https://source.unsplash.com/random/200x200>' height="150">
</div>
<div class="form-container">
<h4 class="text-center">Login to My Account</h4>
<form>
<div class="form-group">
<input id="email" type="email" class="form-control form-input-group email-input"
data-error-required="This field is required" data-class-focus="email-input"
placeholder="Email">
<div id="email" class="error-block"></div>
</div>
<div class="form-group">
<input id="password" type="password" class="form-control form-input-group"
data-error-required="This field is required" data-class-focus="password-input"
placeholder="Password">
<div class="input-group-addon">
<i class="fa fa-eye-slash password-eye hide-password "></i>
</div>
<div id="password" class="error-block"></div>
</div>
<div class="form-group">
<button type="button" class="btn btn-block btn-login" disabled>Log In</button>
</div>
</form>
</div>
<div>
<div class="row form-container-2 text-center">
<p>Don't have an account yet? Create An Account Now</p>
</div>
<div class="row form-container-3 text-center">
<p>Copyright © 2020. All Rights Reserved.</p>
<p>Terms & Conditions and Data Privacy Policy
</div>
</div>
</div>
</div>
</div>
My image separator covers the whole separator container on my first 2 html. But it doesn't work on the third one. On the third html there are 8 div rows and in each row there are 3 div columns. Some selectors are not found on the given css because i use it for 4 htmls
/*----------------REMINDERS------------------*/
/*Standard rule: Styles and layout of a webpage
should look like itself until window reaches 992px*/
/* To test responsiveness:
> On browser: press f12 to see dev tools
> click on the second icon to toggle responsive layout
> set width to 992px and leave the height to blank to get the max height of current window
(You can also choose desired device to test with.
Just click the dropdown beside current window width)
*/
/*Now on 991px, the design and layout should change to mobile view*/
/*Read more about "CSS Media Queries" to control styles on specific window sizes*/
/*------------------------------------------*/
/*Reset all styles of elements*/
*{
margin: 0;
padding: 0;
}
/*Observe this container on sections*/
.main-container {
width: 80%; /*This will always get the 80% of the body*/
margin: auto; /*To center element*/
}
/*Navigation*/
nav {
font-size: 0;
background-color: #ffdead;
position: fixed; /*Navigation will stay on top even on scroll*/
width: 100%;
box-shadow: -1px -8px 9px 9px; /*Shadow under navigation, this gives illusion that this element float*/
/*The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.*/
z-index:2; /*This will force other elements to stay on lower stack (higher numbers will do)*/
}
nav ul a li {
/*tdisplay: inline-block;o position li horizontally
(if this cause problems, you may use "vertical-align: top;" so it will stay at the same vertical position )*/
display: inline-block;
/*vertical-align: top;*/
padding: 10px;
transition: all .5s; /*animate on hover*/
}
nav ul a li:hover {
color: maroon;
}
nav ul a {
font-family: Garamond;
font-size: 20px;
font-weight: bolder;
color: maroon;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0;
}
li.active {
border-bottom: 5px solid maroon;
color: black;
}
/*Banner*/
.banner-container {
background-image: url("../images/banner.jpg");
background-size: cover; /*This will cover the whole container even on window resize*/
background-repeat: no-repeat;
background-attachment: fixed; /*To create parallax effect*/
background-position: bottom;
height: 370px;
}
/*Welcome*/
.welcome-container {
font-size: 35px;
padding-top: 70px;
text-align: center;
}
.welcome-container h1 {
letter-spacing: 3px; /*to adjust letter spacing*/
border-bottom: 2px solid #ffdead;
color: maroon;
padding-bottom: 20px;
font-size: 30px;
/*Set texts to uppercase*/
text-transform: uppercase; /*Always rely to set text-transform on styles and not directly to HTML*/
}
.welcome-container p {
margin-top: 20px;
color: maroon;
padding: 15px;
font-size: 18px;
}
/*Articles*/
.articles {
font-size: 0;
padding-top: 200px;
}
.articles h1 {
letter-spacing: 3px;
text-transform: uppercase;
border-bottom: 2px solid #e59866;
color: maroon;
padding-bottom: 20px;
margin-bottom: 20px;
font-size: 30px;
text-align: center;
}
.article-item-container {
width: 33.33%; /*To get 1/3 of the .main-container*/
margin-top: 20px;
display: inline-block;
vertical-align: top;
}
.article-box {
background: #ffdead;
border-radius: 5px;
width: 90%; /*Get 90% width from 33.33%*/
margin: auto;
transition: all .325s; /*Animate on hover*/
}
.article-box:hover {
background: #f0b27a;
color: maroon;
}
/* ".article-content a" (child element of ".article-box") will
change color whenever mouse hovers on ".article-box" (parent element of ".article-content a") */
.article-box:hover .article-content a {
color: maroon;
}
.article-title {
font-size: 20px;
text-transform: uppercase;
text-align: center;
padding-top: 20px;
letter-spacing: 3px;
}
.article-content {
font-size: 13px;
text-align: center;
padding: 20px 5px;
}
.article-content a {
font-size: 12px;
margin-left: 5px;
color: gray;
text-decoration: none;
font-style: italic;
transition: all .325s;
}
div.row.column.text {
text-align: left;
background-color: maroon;
color: darkgray;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.row .column input[type=text] {
background-color: #212121;
border: none;
color: white;
padding: 1px 5px;
text-align: right;
text-decoration: none;
display: inline-block;
font-size: 10px;
width: 86px;
height: 35px;
}
div input[type=button] {
background-color: #7b241c;
border: none;
color: white;
padding: 1px 5px;
text-align: center;
text-decoration: none;
font-size: 1px;
width: 85px;
height: 30px;
position: relative;
}
h6 {
text-align: left;
text-transform: uppercase;
font-family: Verdana;
font-size: 10px;
color: maroon;
}
h5 {
font-size: 14px;
font-family: Garamond;
color: black;
text-align: auto;
text-transform: uppercase;
}
h3 {
padding-top: 3px;
text-align: center;
font-size: 15px;
margin-left: 5px;
color: maroon;
text-decoration: none;
font-family: Georgia;
}
/* Create four equal columns that sits next to each other */
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
/* Responsive layout - makes a two column-layout instead of four columns */
#media screen and (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
.row{
display: flex;
padding-top: 20px;
}
.column {
flex: 33.33%;
padding: 5px;
margin:auto;
}
/*Image Separator*/
.separator-container {
margin-top: 40px;
background-image: url("../images/background.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed; /*Same effect on banner*/
background-position: center;
height: 400px;
}
/*Set dark overlay on separator*/
.overlay {
background-color: ;
opacity: .8; /*To adjust tranparency, this only accept values from .1 to 1*/
width: 100%; /*Get full width of container ".separator-container" */
height: 100%; /*Get full height of container ".separator-container" */
}
/*Contact*/
.contact-container {
font-size: 0px;
margin-top: 40px;
}
.contact-container h1 {
font-size: 30px;
text-transform: uppercase;
color: maroon;
letter-spacing: 3px;
}
.contact-container form {
margin-top: 20px;
}
.contact-field {
width: 33.33%; /*Get 1/3 of .main-container*/
display: inline-block;
vertical-align: top;
}
.contact-field input {
width: 90%; /*Get 90% from 1/3 set of its container ".contact-field" */
padding: 10px;
border: 3px solid #ffdead;
color: black;
/*Try to remove this style "outline: none;" and click on the input*/
/*You should see a color blue outline*/
outline: none; /*use this to remove blue outline*/
margin-bottom: 10px;
transition: all .325s;
}
/* ":focus" executes when user clicks on an input*/
.contact-field input:focus {
border: 3px solid #f0b27a;
color: maroon;
}
.contact-field-full {
width: 100%;
}
.contact-field-full input {
float: right; /*Set to right of container ".contact-field-full"*/
margin-right: 12px; /*Adjust to align to the Message input*/
width: 20%; /*Always get 20% of container ".contact-field-full" */
padding: 10px;
margin-bottom: 10px;
outline: none;
border: none;
transition: all .325s;
cursor: pointer; /*To get a hand cursor*/
background-color: #ffdead;
}
.contact-field-full input:hover {
background: #f0b27a;
color: maroon;
}
<!DOCTYPE html>
<html>
<head>
<title>Shawn Mendes </title>
<!-- Call external CSS file -->
<link rel="stylesheet" type="text/css" href="css/blog.css">
<link rel="stylesheet" type="text/css" href="css/style-media-queries.css">
<!-- Meta tag viewport helps browser window to render webpages for mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<ul>
<!-- Always put title on anchor tags and don't leave blank hrefs -->
<a href="index.html" title="Home">
<li>Home</li>
</a>
<a href="about.html" title="Music">
<li>Music</li>
</a>
<a href="blog.html" title="Tour">
<li class="active">Tour</li>
</a>
<a href="register.html" title="Video">
<li>Video</li>
</a>
</ul>
</nav>
<section class="banner-container">
</section>
<div class="main-container">
<section class="welcome-container">
<h1>ON TOUR</h1>
</section>
<div class="row">
<div class="column">
<input type="text" name="MAR 7" value="MAR 7">
</div>
<div class="column">
<div class="caption">
<h6>Ziggo Dome</h6>
<h5>NIEUW-AMSTERDAM, NETHERLANDS</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 8" value="MAR 8">
</div>
<div class="column">
<div class="caption">
<h6>Ziggo Dome</h6>
<h5>NIEUW-AMSTERDAM, NETHERLANDS</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 10" value="MAR 10">
</div>
<div class="column">
<div class="caption">
<h6>ANTWERPS SPORTPALEIS</h6>
<h5>ANTWERP, BELGIUM</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 11" value="MAR 11">
</div>
<div class="column">
<div class="caption">
<h6>MERCEDES-BENZ ARENA</h6>
<h5>BERLIN-FRIEDRICHSHAIN, GERMANY</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 13" value="MAR 13">
</div>
<div class="column">
<div class="caption">
<h6>OSLO SPEKTRUM ARENA</h6>
<h5>OSLO, NORWAY</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 15" value="MAR 15">
</div>
<div class="column">
<div class="caption">
<h6>ERICSSON GLOBE</h6>
<h5>STOCKHOLM, SWEDEN</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 16" value="MAR 16">
</div>
<div class="column">
<div class="caption">
<h6>ROYAL ARENA</h6>
<h5>COPENHAGEN, DENMARK</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 18" value="MAR 18">
</div>
<div class="column">
<div class="caption">
<h6>LANXESS ARENA</h6>
<h5>KOLN,GERMANY</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<section class="separator-container">
<div class="overlay"></div>
</section>
<div class="main-container">
<section class="contact-container">
<h1>Get Updates</h1>
<form method="GET" action="#">
<div class="contact-field">
<input type="text" name="full-name" placeholder="Email Address" required/>
</div>
<div class="contact-field">
<input type="text" name="email-address" placeholder="Postal Code" required/>
</div>
<div class="contact-field">
<input type="text" name="message" placeholder="Country" required/>
</div>
<div class="contact-field-full">
<input type="submit" name="submit" value="Submit"/>
</div>
</form>
<h3>By submitting this form, you agree to our privacy policy </h3>
<h3> Disclaimer: The owner of this website does not own any of its images and contents. Credits to the rigtful owner. </h3>
</section>
</div>
</body>
</html>
hello I one simple but annoying problem. I managed to use css and bootsatrap to create the responsive webpage that i wanted. However, when i used position:relative my input (text field) got disabled. Any idea why?
<div class="col-md-offset-2 col-md-8 text-center">
<div class="container-fluid">
<div id="logo">
<img class="img-responsive" src="uv.png">
</div>
<div class="login-form">
<h1>United Volunteers</h1>
<div class="form-group">
<label class="input-title">Username</label>
<input type="text" class="form-input" placeholder="Username">
</div>
<div class="form-group">
<label class="input-title">Password</label>
<input type="password" class="form-input" placeholder="Password">
</div>
</div>
</div>
</div>
.login-form {
top:90px;
position:relative;
box-sizing: border-box;
margin: 25px auto;
margin-bottom:0px;
width: 100%;
max-width:400px;
background-color: white;
padding: 100px 50px 50px 50px;
box-shadow: 1px 5px 2px #330000;
z-index: -1;
}
.form-input {
width: 100%;
display: block;
height: 35px;
padding: 6px 12px;
font-size: 12px;
font-family: sans-serif;
vertical-align: middle;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f2f2f2;
line-height: 1.5;
}
This is because of z-index: -1;. Its set to negative value.
Just make it positive like:
.login-form {
z-index: 1;
}
Or look at the snippet below:
.login-form {
top:90px;
position:relative;
box-sizing: border-box;
margin: 25px auto;
margin-bottom:0px;
width: 100%;
max-width:400px;
background-color: white;
padding: 100px 50px 50px 50px;
box-shadow: 1px 5px 2px #330000;
z-index: 1;
}
.form-input {
width: 100%;
display: block;
height: 35px;
padding: 6px 12px;
font-size: 12px;
font-family: sans-serif;
vertical-align: middle;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f2f2f2;
line-height: 1.5;
}
<div class="col-md-offset-2 col-md-8 text-center">
<div class="container-fluid">
<div id="logo">
<img class="img-responsive" src="uv.png">
</div>
<div class="login-form">
<h1>United Volunteers</h1>
<div class="form-group">
<label class="input-title">Username</label>
<input type="text" class="form-input" placeholder="Username">
</div>
<div class="form-group">
<label class="input-title">Password</label>
<input type="password" class="form-input" placeholder="Password">
</div>
</div>
</div>
</div>
Hope this helps!