.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>
Related
I have some html that is returned when I submit a form that I can't change.
<div>
<label>Enter your email</div>
<input type="text" name="email" value="bademail#" />
<div class="error">That email is not valid</div>
<div>
I'd like to style it so that the div.error shows an icon which when I hover over shows the text as a tooltip.
Can this be done using css alone?
You can use a hover on a div, to display the child span:
.error {
position: relative;
}
.error > span {
display: none;
}
.error:hover > span {
display: block;
position: absolute;
left: 20px;
bottom: 100%;
border: 1px solid red;
border-radius: 3px;
padding: 5px;
background: rgba(0, 0, 0, 0.7);
color: white;
}
<div>
<label>Enter your email</label>
<input type="text" name="email" value="bademail#" />
<div class="error">icon<span>That email is not valid</span></div>
</div>
You can also use a pseudo elements instead of the span:
.error {
position: relative;
}
.error:hover::before {
display: block;
position: absolute;
left: 20px;
bottom: 100%;
border: 1px solid red;
border-radius: 3px;
padding: 5px;
background: rgba(0, 0, 0, 0.7);
color: white;
content: attr(data-tooltip);
}
<div>
<label>Enter your email</label>
<input type="text" name="email" value="bademail#" />
<div class="error" data-tooltip="That email is not valid">icon</div>
</div>
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;
}
I require 2 text input boxes side by side in one page using css3. I have everything ready except that the second box is coming below the first input box. How can i correct this in css.
html:
<div class="main">
<div class="one">
<div class="register">
<h3>Create your account</h3>
<form id="reg-form">
<div>
<div>
<label for="username">Username</label>
<input type="text" id="username" spellcheck="false" placeholder="User Name" />
</div>
<div>
<label for="password">Password</label>
<input type="password" id="password" />
</div>
<div>
<label></label>
<input type="submit" value="Shop Login" id="create-account" class="button"/>
</div>
</form>
</div>
</div>
<div class="two">
<div class="register">
<h3>Create your account</h3>
<form id="reg-form1">
<div>
<label for="name1">Name</label>
<input type="text" id="name1" spellcheck="false" placeholder="Enter Your Name"/>
</div>
<div>
<label for="email1">Email</label>
<input type="text" id="email1" spellcheck="false" placeholder="mymail#mail.com"/>
</div>
<div>
<label for="username1">Username</label>
<input type="text" id="username1" spellcheck="false" placeholder="User Name" />
</div>
<div>
<label for="password1">Password</label>
<input type="password" id="password1" />
</div>
<div>
<label for="password-again1">Password Again</label>
<input type="password" id="password-again1" />
</div>
<div>
<label></label>
<input type="submit" value="Create Account" id="create-account1" class="button"/>
</div>
</form>
</div>
</div>
</div>
CSS
.main > div {
display: inline-block;
width: 49%;
margin-top: 10px;
}
.two .register {
border: none;
}
.two .register h3 {
border-bottom-color: #909090;
}
.two .register .sep {
border-color: #909090;
}
.register {
width: 400px;
margin: 10px auto;
padding: 10px;
border: 7px solid #ADD8E6;
border-radius: 10px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
background-color: #f0f0f0;
box-shadow: 0 0 20px 0 #000000;
}
.register h3 {
margin: 0 15px 20px;
border-bottom: 2px solid #72b372;
padding: 5px 10px 5px 0;
font-size: 1.1em;
}
.register div {
margin: 0 0 15px 0;
border: none;
}
.register label {
display: inline-block;
width: 25%;
text-align: right;
margin: 10px;
}
.register input[type=text], .register input[type=password] {
width: 65%;
font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,Sans-Serif;
padding: 5px;
font-size: 0.9em;
border-radius: 5px;
background: rgba(0, 0, 0, 0.07);
}
.register input[type=text]:focus, .register input[type=password]:focus {
background: #FFFFFF;
}
.register .button {
font-size: 1em;
border-radius: 8px;
padding: 10px;
border: 1px solid #ADD8E6;
box-shadow: 0 1px 0 0 #05B8CC inset;
background: #05B8CC;
background: -webkit-linear-gradient(#ADD8E6, #05B8CC);
background: -moz-linear-gradient(#ADD8E6, #05B8CC);
background: -o-linear-gradient(#ADD8E6, #05B8CC);
background: linear-gradient(#ADD8E6, #05B8CC);
}
.register .button:hover {
background: #51db1c;
background: -webkit-linear-gradient(#51db1c, #6ba061);
background: -moz-linear-gradient(#51db1c, #6ba061);
background: -o-linear-gradient(#51db1c, #6ba061);
background: linear-gradient(#51db1c, #6ba061);
}
.register .sep {
border: 1px solid #72b372;
position: relative;
margin: 35px 20px;
}
.register .or {
position: absolute;
width: 50px;
left: 50%;
background: #f0f0f0;
text-align: center;
margin: -10px 0 0 -25px;
line-height: 20px;
}
.register .connect {
width: 400px;
margin: 0 auto;
text-align: center;
}
I have provided a jsFiddle Demo
I require it aligned side by side rather than top bottom as in demo. Thanks in advance
You have missed a closing div before <div class="two">.
Adding the closing div will make both forms next to each other.
Then you need to add a little CSS rule to make both forms perfectly aligned vertically:
div.one {
position: relative;
top: -165px
}
See the demo here: http://jsfiddle.net/t5SNE/7/
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
I'm working on styling my website forms and found a tutorial that seems to work up to a point... The tutorial includes code to have hover hints, and this code is causing things to get ugly. Instead of the fields all lining up under one another they seem to be attempting to position themselves one right after another and wrapping all the way down the window.
Here is the code element for the feature in question followed by the CSS...
HTML
<form id="defaultform" class="rounded" name="form2" method="post" action="<?php echo $editFormAction; ?>">
<h3>Contact Form</h3>
<div class="field">
<label for="hostess_fname">First Name:</label>
<input type="text" class="input" name="hostess_fname" value="" id="hostess_fname" />
<p class="hint">Enter your name.</p>
</div>
<div class="field">
<label for="email">Last Name:</label>
<input type="text" class="input" name="hostess_fname" value="" id="hostess_lname" />
<p class="hint">Enter your email.</p>
</div>
<input type="submit" value="Lookup Hostess" />
<input type="hidden" name="Lookup" value="form2" />
CSS
#defaultform {
width: 500px;
padding: 20px;
background: #f0f0f0;
overflow:auto;
/* Border style */
border: 1px solid #cccccc;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
/* Border Shadow */
-moz-box-shadow: 2px 2px 2px #cccccc;
-webkit-box-shadow: 2px 2px 2px #cccccc;
box-shadow: 2px 2px 2px #cccccc;
}
label {
font-family: Arial, Verdana;
text-shadow: 2px 2px 2px #ccc;
display: block;
float: left;
font-weight: bold;
margin-right:10px;
text-align: right;
width: 120px;
line-height: 25px;
font-size: 15px;
}
#defaultform.input{
font-family: Arial, Verdana;
font-size: 15px;
padding: 5px;
border: 1px solid #b9bdc1;
width: 300px;
color: #797979;
}
.hint{
display: none;
}
.field:hover .hint {
position: absolute;
display: block;
margin: -30px 0 0 455px;
color: #FFFFFF;
padding: 7px 10px;
background: rgba(0, 0, 0, 0.6);
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}
I just updated the code with more of the HTML from a shorter form that I was trying with the same CSS. I also added some more of the CSS code. I'm getting the same behavior. I'm still confused on selectors and how those are defined and stuff.
I see what you're doing now that you've added your code. It's a pretty simple fix, but hard to catch:
CSS
.field{
clear:both;
}
Here's the jsFiddle