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;
}
Related
I've been trying to have the word "Subcribe" be inserted into the button, however no matter what I try it keeps appearing stuck on the right of it completely outside. I even ended up removing everything else and have that in a html file alone and its still happening. Any help would be greatly appreciated.
Code:
<div class="container">
<form action="">
<h1>Join Our Newsletter</h1>
<p>For daily updates about our Church and Mass readings. Please join our Newsletter</p>
<div class="email-box">
<i class="fas fa-envelope"></i>
<input class="tbox" type="email" name="" value="" placeholder="Enter your email">
<input class="btn" type="button">Subscribe</button>
</div>
</form>
</div>
CSS:
*{
margin: 0;
padding: 0;
font-family: 'Libre Baskerville', serif;
}
.container{
padding: 10px;
}
.container p{
max-width: 600px;
margin: 40px auto;
color: white;
}
.email-box{
height: 40px;
display: flex;
justify-content: center;
}
.email-box i{
background: rgba(250, 247, 177, 0.6);;
width: 40px;
line-height: 40px;
}
.tbox,.btn{
border: none;
outline: none;
}
.tbox{
width: 0px;
transition: 0.5s;
}
.email-box:hover > .tbox,.tbox:focus{
width: 260px;
padding: 0 10px;
}
.btn{
background: rgba(250, 247, 177, 0.6);
color: white;
padding: 0 10px;
text-transform: uppercase;
cursor: pointer;
width: 100px;
}
.button{
width: 100px auto;
}
It looks like the following tag is not closed properly.
<input class="tbox" type="email" name="" value="" placeholder="Enter your email" />
Also the button doesn't have a right start tag
<button class="btn" type="button">Subscribe</button>
Your HTML is invalid. <input> does not have a closing tag. You can fix that two ways
Give you input a value and close the tag:
<input class="btn" type="button" value="Subscribe" />
Make the button use the button tag element:
<button class="btn" type="button">Subscribe</button>
It seems that your button tag does not have an opening tag! ;)
*{
margin: 0;
padding: 0;
font-family: 'Libre Baskerville', serif;
}
.container{
padding: 10px;
}
.container p{
max-width: 600px;
margin: 40px auto;
color: white;
}
.email-box{
height: 40px;
display: flex;
justify-content: center;
}
.email-box i{
background: rgba(250, 247, 177, 0.6);;
width: 40px;
line-height: 40px;
}
.tbox,.btn{
border: none;
outline: none;
}
.tbox{
width: 0px;
transition: 0.5s;
}
.email-box:hover > .tbox,.tbox:focus{
width: 260px;
padding: 0 10px;
}
.btn{
background: rgba(250, 247, 177, 0.6);
color: black;
padding: 0 10px;
text-transform: uppercase;
cursor: pointer;
width: 100px;
}
.button{
width: 100px auto;
}
<div class="container">
<form action="">
<h1>Join Our Newsletter</h1>
<p>For daily updates about our Church and Mass readings. Please join our Newsletter</p>
<div class="email-box">
<i class="fas fa-envelope"></i>
<input class="tbox" type="email" name="" value="" placeholder="Enter your email">
<button class="btn" type="button">Button</button>
</div>
</form>
</div>
See fixed answer below!
(I have also made the button text black so it is visable!)
.contact-form {
transition: .3s;
margin-top: 120px;
/*border: 2px solid black;*/
background-color: rgb(243, 243, 243);
border-radius: 6px;
box-shadow: -4px 12px 11px 5px rgba(0, 0, 0, 0.521);
width: 475px;
height: 550px;
margin-left: 11px;
text-align: left;
align-items: center;
position: sticky;
left: 60%;
top: -20%;
user-select: all;
z-index: 4;
}
.benefit-card {
margin: 20px;
background-color: white;
text-align: center;
border: 1px solid black;
width: 300px;
height: 450px;
top: 0%;
left: 22%;
box-shadow: 2px 2px 12px 2px black;
user-select: none;
}
.benefit-card-header {
border-bottom: 3px dotted black;
padding-bottom: 11px;
}
.benefit-card-image {
-webkit-user-drag: none;
padding-top: 11px;
padding-bottom: 19px;
width: 200px;
filter: drop-shadow(2px 2px 6px black);
}
#help-me {
position: relative;
z-index: 8;
margin-top: -515px;
}
<div class="contact-form">
<h2 class="contact-form-header">Get Your Quote Today!</h2>
<form class="form-bg-pls-send-help">
<label class="contact-input-header" for="email">Email<span class="important-contact-field"> *</span></label>
<br>
<input class="contact-input" name="email" type="email" autocomplete="off" required placeholder="Your company email" />
<label class="contact-input-header" for="company">Company</label>
<br>
<input class="contact-input" name="company" type="text" required placeholder="Who do you work for?" />
<label class="contact-input-header" for="subject">Subject</label>
<input class="contact-input" name="subject" type="text" placeholder="Subject " />
<label class="contact-input-header" for="about">About</label>
<textarea class="long-input contact-input" name="about" type="text" placeholder="What does your company do?"></textarea>
<br><br>
<input class="getquote-button" type="submit" value="Get Quote" />
</form>
</div>
<div id="help-me">
<div class="benefit-card" id="bc">
<h1 class="benefit-card-header" id="bch">World Wide</h1>
<h3 class="benefit-card-description" id="bcd">No matter where you're from or where you're located we will help you grow your company!</h3>
</div>
</div>
I am building a sample website of a company. I have a contact form set up, but the inputs are not clickable when they are in a div tag, but I need the form in one so I can properly style the form.
The form is supposed to require the input, when I click on the Get Quote button it allows me to edit the first input tag. This has never happened to me before and I have tried user-select, checking if the disabled attribute was used, and just about everything I can think of.
Update your css file to:
#help-me{
position: relative;
z-index: -1;
margin-top: -515px;
}
This element is covering the whole screen.
Update the z-index when you need to show it.
Your inputs are not clickable because #help-me covers all of .contact-form due to the way you have used margin-top to position it higher compared to where it would naturally sit.
Consider using flexbox to achieve your layout instead.
.layout {
display: flex
}
.contact-form {
flex: 1 1 auto;
background-color: rgb(243, 243, 243);
border-radius: 6px;
box-shadow: -4px 12px 11px 5px rgba(0, 0, 0, 0.521);
}
#help-me {
flex: 1 1 auto;
}
<div class="layout">
<div id="help-me">
#help-me
</div>
<div class="contact-form">
.contact-form
</div>
</div>
I am trying to position the search bar on a background image. I am also trying to position a button at the bottom and center of the image. Following that, I will have containers.
What I am trying to achieve.
But what I am stuck and confused with positioning. The glyphicon is not working as well?
My Code
<style>
.card {
border: 0px solid;
}
.drop-shadow {
-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, .5);
box-shadow: 0 0 10px 1px rgb(211, 211, 211, 0.8);
border-radius: 0px;
}
.container-fluid {
width: auto
}
.container-fluid.drop-shadow {
margin-top: 2%;
margin-left: 5%;
margin-right: 5%
}
.img-fluid {
height: 200px;
}
#child {
width: 100%;
height: 20px;
margin: auto;
text-align: center;
bottom: 0px;
position: absolute;
}
.btn-checkin {
display: inline-block;
text-align: center;
white-space: nowrap;
color: #fff;
border-color: #EC008c;
text-transform: uppercase;
background-color: #EC008c;
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
padding: 0.375rem .75rem;
font-size: 13px;
border-radius: .25rem;
}
</style>
</head>
<body id="page-top">
<div class="card">
<img class="img-fluid" src="img/1847p.png" alt="Card image cap">
<div class="col-md-5">
<div class="form-group">
<div class="icon-addon addon-lg">
<input type="text" placeholder="Search Class" class="form-control" style="height:30px;position:absolute" id="email">
<label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
</div>
</div>
</div>
<div id="child">
<button class="btn-checkin">Check in</button>
<div class="container-fluid drop-shadow">
<div class="row">
frsjafksdalkdfsa
</div>
fsdfdasasd
</div>
</div>
</div>
Problems to target :
Get the search bar on the background pic
Set the background pic always on top of the screen with full width but with certain height. I currently hard coded the height to 200px. Is there a way that it can be responsive?
I am also stuck with the glyphycon issue, why is it not displayed?
How do I position the button at the bottom of the image and in the
center?
Use margin-top with negative value to make the form goes on the image.
Glyphicons look to be working great simply here.
* {
box-sizing: border-box;
}
img {
width: 100%;
}
div#form-box {
margin-top: -95px;
text-align: center;
}
div#input-group {
width: 80%;
margin: 0 auto 20px;
position: relative;
background-color: #fff;
border: none;
border-radius: 5px;
}
input#email, label[for="email"] {
display:inline-block;
vertical-align: middle;
}
input#email {
width: calc(100% - 40px);
padding: 10px;
border: none;
}
label[for="email"] {
width: 40px;
line-height: 40px;
}
button#btn-checkin {
display: inline-block;
padding: 6px 10px;
border: none;
border-radius: 5px;
background-color: #EC008c;
color: #fff;
text-align: center;
text-transform: uppercase;
}
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" />
</head>
<img src="http://wonderfulengineering.com/wp-content/uploads/2016/01/Desktop-Wallpaper-4.jpg" />
<div id="form-box">
<form>
<div id="input-group">
<label for="email" class="glyphicon glyphicon-search"></label><!--
--><input type="text" placeholder="Search Class" id="email">
</div>
<br/>
<button id="btn-checkin">Check-in</button>
</form>
</div>
<br/>
<br/>
<br/>
.card{
border:0px solid;
position:relative;
height:200px;
background:url('https://preview.ibb.co/fex0wK/1847p.png') no-repeat top center;
background-size:cover;
}
.card img {
width:100%;
}
.search-box {
position : absolute;
display:inline-block;
bottom:-30px;
left:0;
right:0;
padding:15px;
text-align:center;
}
.drop-shadow {
-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, .5);
box-shadow: 0 0 10px 1px rgb(211, 211, 211, 0.8);
border-radius:0px;
}
.container-fluid{
width:auto
}
.container-fluid.drop-shadow {
margin-top:2%;
margin-left:5%;
margin-right:5%
}
.img-fluid {
height: 200px;
}
#child{
width:100%;
height: 20px;
margin: auto;
text-align: center;
margin-top: 40px;
}
.form-group {
width:100%;
margin-bottom:10px;
}
.btn-checkin{
display: inline-block;
text-align: center;
white-space: nowrap;
color: #fff;
border-color: #EC008c;
text-transform: uppercase;
background-color: #EC008c;
font-family:'Open Sans','Helvetica Neue',Arial,sans-serif;
padding: 0.375rem .75rem;
font-size: 13px;
border-radius: .25rem;
}
.icon-addon {
position:relative;
}
.icon-addon label {
position: absolute;
left: 2px;
top: 2px;
padding: 8px;
font-size: 20px;
}
.icon-addon input {
height:40px;
padding-left:35px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body id="page-top">
<div class="card" >
<!-- <img class="img-fluid" src="img/1847p.png" alt="Card image cap"> -->
<div class="search-box">
<div class="form-group">
<div class="icon-addon addon-lg">
<input type="text" placeholder="Search Class" class="form-control" id="email">
<label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
</div>
</div>
<button class="btn-checkin">Check in</button>
</div>
</div>
<div id="child">
<div class="container-fluid drop-shadow">
<div class="row">
frsjafksdalkdfsa
</div>
fsdfdasasd
</div>
</div>
Try this code...If you need any help, let me know.
Ok so you want to position the search bar inside a image.
Make a div with the image as background
background: image_source;
background-size: contain;
position: relative; //must to write
width: 100%;
height: 100px; //as much as you want
Then the css for search bar
position: absolute;
then use top, left,etc to position the search bar
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/
I would have the form in the left, but i obtained the form in the right:
I really don't know what is the problem. Probably some Css is in contrast with bootstrap. I would have the text-field separated (i obtained everything merged)
this is the css of my form:
<div class="container">
<div class="row">
<div class="col-sm-12">
<legend>Mr. Sosa:</legend>
</div>
<!-- panel preview -->
<div class="col-sm-5">
<h4>Add payment:</h4>
<div class="panel panel-default">
<div class="panel-body form-horizontal payment-form">
<div class="form-group">
<label for="concept" class="col-sm-3 control-label">Concept</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="concept" name="concept">
</div>
</div>
<div class="form-group">
<label for="description" class="col-sm-3 control-label">Description</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="description" name="description">
</div>
</div>
<div class="form-group">
<label for="amount" class="col-sm-3 control-label">Amount</label>
<div class="col-sm-9">
<input type="number" class="form-control" id="amount" name="amount">
</div>
</div>
<div class="form-group">
<label for="status" class="col-sm-3 control-label">Status</label>
<div class="col-sm-9">
<select class="form-control" id="status" name="status">
<option>Paid</option>
<option>Unpaid</option>
</select>
</div>
</div>
<div class="form-group">
<label for="date" class="col-sm-3 control-label">Date</label>
<div class="col-sm-9">
<input type="date" class="form-control" id="date" name="date">
</div>
</div>
</div>
</div>
</div>
Do you have any idea? thank you
application.css.scss
#banner {
background: #9c9;
padding: 10px;
border-bottom: 2px solid;
font: small-caps 40px/40px "Times New Roman", serif;
color: #282;
text-align: center;
img {
float: left;
}
}
#notice {
color: #000 !important;
border: 2px solid red;
padding: 1em;
margin-bottom: 2em;
background-color: #f0f0f0;
font: bold smaller sans-serif;
}
#columns {
background: #141;
#main {
margin-left: 17em;
padding: 4em;
background: white;
}
#side {
float: left;
padding: 1em 2em;
width: 13em;
background: #141;
ul {
padding: 0;
li {
list-style: none;
a {
color: #bfb;
font-size: small;
}
}
}
}
}
bootstrap_and_overrides.css
/*
=require twitter-bootstrap-static/bootstrap
Use Font Awesome icons (default)
To use Glyphicons sprites instead of Font Awesome, replace with "require twitter-bootstrap-static/sprites"
=require twitter-bootstrap-static/fontawesome
*/
sign_in.css
body, html {
height: 100%;
background-repeat: no-repeat;
}
h2 {
font: small-caps 40px/40px "Times New Roman",serif;
text-align: center
}
.card-container.card {
margin-left: 310px;
max-width: 370px;
padding: 40px 40px;
}
.card {
background-color: #F7F7F7;
/* just in case there no content*/
padding: 20px 25px 30px;
margin: 0 auto 25px;
margin-top: 50px;
/* shadows and rounded borders */
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.btn {
font-weight: 600;
height: 36px;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor: default;
}
.profile-img-card {
width: 96px;
height: 96px;
margin: 0 auto 10px;
display: block;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
Try using normalize.css and reset.css and see if that makes a difference.
Also go to your browser and inspect element on the form container and see where its getting its align property from?(this will help you identify where the style is applied and so you can try tweaking it in the browser itself first)