I've just started to try and build a golf stats website (just for the fun of it). I'm very new to HTML and CSS, and I'm having loads of trouble with one page that just won't behave as I would expect.
I've cut the code down a bit a save space, but here is what I'm getting.
http://jsfiddle.net/fnnb1o6d/1/
I want everything to be centered like the top text boxes, but the that's not happening. I'm sure I have some terrible CSS and HTML going on here which is why I'm getting the issues, but I can't work out what it is.
The html and css are also below. Can someone please tell me how I would get this to behave as I would like?
Thanks very much
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Add Course</title>
<link href="styles/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="add_course">
<form action="add_course.php" method="post" enctype="multipart/form-data" name="add_course_form" id="add_course_form" onsubmit="return validate_form();">
<div class="add_course_lables">
<input class="add_course_name" name="coursename" type="text" id="coursename" size="30" placeholder="Course Name" maxlength="64" />
<br />
<input name="par" type="text" id="par" size="30" placeholder="Par" maxlength="2" />
<input name="rating" type="text" id="rating" size="30" placeholder="Rating" maxlength="2" />
<input name="slope" type="text" id="slope" size="30" placeholder="Slope" maxlength="3" />
<br />
</div>
<div style="min-width: 1000px; overflow: auto; display: table; width: 1000px; text-align:center" id="add_course_table">
<div>
<div style="width:60px" id="add_course_top_row">Hole</div>
<div id="add_course_top_row">1</div>
<div id="add_course_top_row">2</div>
<div id="add_course_top_row">3</div>
<div id="add_course_top_row">4</div>
<br style="clear: left;" />
</div>
<div>
<div id="add_course_other_rows_left">Par</div>
<div id="add_course_other_rows"><input type="text" maxlength="1" name="par1"/></div>
<div id="add_course_other_rows"><input type="text" maxlength="1" name="par2"/></div>
<div id="add_course_other_rows"><input type="text" maxlength="1" name="par3"/></div>
<div id="add_course_other_rows"><input type="text" maxlength="1" name="par4"/></div>
<br style="clear: left;" />
</div>
<div>
<div id="add_course_other_rows_left">Length</div>
<div id="add_course_other_rows"><input type="text" maxlength="3" name="length1"/></div>
<div id="add_course_other_rows"><input type="text" maxlength="3" name="length2"/></div>
<div id="add_course_other_rows"><input type="text" maxlength="3" name="length3"/></div>
<div id="add_course_other_rows"><input type="text" maxlength="3" name="length4"/></div>
<br style="clear: left;" />
</div>
<div>
<div id="add_course_other_rows_left">Index</div>
<div id="add_course_other_rows"><input type="text" maxlength="2" name="index1"/></div>
<div id="add_course_other_rows"><input type="text" maxlength="2" name="index2"/></div>
<div id="add_course_other_rows"><input type="text" maxlength="2" name="index3"/></div>
<div id="add_course_other_rows"><input type="text" maxlength="2" name="index4"/></div>
</div>
</div>
<input type="submit" name="Submit" class="add_course_button" value="Add Course" />
</form>
</div>
</body>
</html>
CSS
.add_course_lables {
width: 500px;
height: 120px;
border-radius: 5px 5px 0px 0px;
margin-left: auto;
margin-right: auto;
}
.add_course_lables input {
color: #16a085;
padding: 10px;
margin-top: 5px;
width:135px;
font-size: 15px;
border: 1px solid #16a085;
border-bottom: 2px solid #16a085;
border-radius: 5px;
transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
.add_course_lables .add_course_name {
width:91.5%;
}
.add_course_lables input:focus {
border-color:#2ecc71;
outline: none;
box-shadow: 0 0 2px 1px #2ecc71;
}
.add_course_lables input:hover {
border-color:#2ecc71;
outline: none;
box-shadow: 0 0 2px 1px #2ecc71;
}
.add_course_button{
background: #16a085;
color: white;
border: 1px solid #16a085;
border-radius: 5px;
transition: background .4s linear;
padding: 10px;
font-weight: 600;
font-size: 20px;
cursor: pointer;
margin-top: 10px;
position: relative;
left: 50%;
right: 0%;
}
#add_course_top_row{
border-radius: 4px;
border-color: #FFFFFF;
border-style: solid;
background: #16A085;
color: #FFFFFF;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
text-align: center;
padding: 2px;
margin-right: 0px;
width: 30px;
border-width: thin;
display: inline-flex;
}
#add_course_other_rows_left{
color: #16a085;
border-radius: 4px;
border-color: #16a085;
border-style: solid;
border-width: thin;
background: #FFFFFF;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
text-align: center;
padding: 2px;
margin-right: 3px;
margin-top:2px;
width: 60px;
float:left;
}
#add_course_other_rows input {
color: #16a085;
border-radius: 5px;
border color:#BFBFBF;
border-style: solid;
border-width: thin;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
text-align: center;
padding: 3px;
margin-top: 2px;
margin-right:3px;
width: 30px;
float:left;
}
#add_course_other_rows input:hover {
border-color:#2ecc71;
outline: none;
box-shadow: 0 0 2px 1px #2ecc71;
}
Harry,
Absolutely. The short answer is that you just need to duplicate .add_course_lables for the other two divs you're working with.
To go into detail on how this works:
On the .add_course_lables you have a class setup showing:
.add_course_lables {
width: 500px;
height: 120px;
border-radius: 5px 5px 0px 0px;
margin-left: auto;
margin-right: auto;
}
Specifically width, and margin-left & margin-right are creating the centering for the first div.
Now, to make this easier for you, I'd like to refer you to an existing question with plenty of helpful information: How to horizontally center a <div> in another <div>?
check this it seems to align part of the page the rest is not aligning because i think that you added a
</div>
for no reason somewhere try to find it out
what i did was that i added the entire page into a new div like this
html
<div id="page">
this must be closed at the end of the code
css
#page{
width:1000px;
margin:auto;
}
http://jsfiddle.net/fnnb1o6d/2/
you need to add container to all your content,
#add_course{
margin:0 auto;
border:1px solid #ccc;
width:80%
}
DEMO
<div id="add_course_table" style="min-width: 1000px; overflow: auto; display: table; width: 1000px; text-align:center">
to
<div id="add_course_table" style="overflow: auto; display: table; margin-left: auto; margin-right: auto; width: 500px; text-align: center;">
And, You are given #add_course_other_rows in multi places, Actually #ID should be unique. change it as class. And, update this class.
.add_course_other_rows{
display:inline-block;
}
Please update this all in fiddle and let us know for the further
JSFIDDLE
HTML WILL BE:
<div id="add_course">
<form action="add_course.php" method="post" enctype="multipart/form-data" name="add_course_form" id="add_course_form" onsubmit="return validate_form();">
<div class="add_course_lables">
<input class="add_course_name" name="coursename" type="text" id="coursename" size="30" placeholder="Course Name" maxlength="64" />
<br />
<input name="par" type="text" id="par" size="30" placeholder="Par" maxlength="2" />
<input name="rating" type="text" id="rating" size="30" placeholder="Rating" maxlength="2" />
<input name="slope" type="text" id="slope" size="30" placeholder="Slope" maxlength="3" />
<br />
</div>
<div style="margin:0px auto; overflow: auto; display: table; text-align:center" id="add_course_table">
<div class="display-inline">
<div style="width:60px" id="add_course_top_row">Hole</div>
<div id="add_course_top_row">1</div>
<div id="add_course_top_row">2</div>
<div id="add_course_top_row">3</div>
<div id="add_course_top_row">4</div>
<br style="clear: left;" />
</div>
<div class="display-inline">
<div id="add_course_other_rows_left">Par</div>
<div id="add_course_other_rows">
<input type="text" maxlength="1" name="par1" />
</div>
<div id="add_course_other_rows">
<input type="text" maxlength="1" name="par2" />
</div>
<div id="add_course_other_rows">
<input type="text" maxlength="1" name="par3" />
</div>
<div id="add_course_other_rows">
<input type="text" maxlength="1" name="par4" />
</div>
<br style="clear: left;" />
</div>
<div class="display-inline">
<div id="add_course_other_rows_left">Length</div>
<div id="add_course_other_rows">
<input type="text" maxlength="3" name="length1" />
</div>
<div id="add_course_other_rows">
<input type="text" maxlength="3" name="length2" />
</div>
<div id="add_course_other_rows">
<input type="text" maxlength="3" name="length3" />
</div>
<div id="add_course_other_rows">
<input type="text" maxlength="3" name="length4" />
</div>
<br style="clear: left;" />
</div>
<div class="display-inline">
<div id="add_course_other_rows_left">Index</div>
<div id="add_course_other_rows">
<input type="text" maxlength="2" name="index1" />
</div>
<div id="add_course_other_rows">
<input type="text" maxlength="2" name="index2" />
</div>
<div id="add_course_other_rows">
<input type="text" maxlength="2" name="index3" />
</div>
<div id="add_course_other_rows">
<input type="text" maxlength="2" name="index4" />
</div>
</div>
</div>
<input type="submit" name="Submit" class="add_course_button" value="Add Course" />
</form>
</div>
CSS WILL BE:
.add_course_lables {
width: 500px;
height: 120px;
border-radius: 5px 5px 0px 0px;
margin-left: auto;
margin-right: auto;
}
.add_course_lables input {
color: #16a085;
padding: 10px;
margin-top: 5px;
width: 135px;
font-size: 15px;
border: 1px solid #16a085;
border-bottom: 2px solid #16a085;
border-radius: 5px;
transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
.add_course_lables .add_course_name {
width: 91.5%;
}
.add_course_lables input:focus {
border-color: #2ecc71;
outline: none;
box-shadow: 0 0 2px 1px #2ecc71;
}
.add_course_lables input:hover {
border-color: #2ecc71;
outline: none;
box-shadow: 0 0 2px 1px #2ecc71;
}
.add_course_button {
background: #16a085;
color: white;
border: 1px solid #16a085;
border-radius: 5px;
transition: background .4s linear;
padding: 10px;
font-weight: 600;
font-size: 20px;
cursor: pointer;
margin-top: 10px;
position: relative;
left: 45%;
right: 0%;
margin-top: 20px;
}
#add_course_top_row {
border-radius: 4px;
border-color: #FFFFFF;
border-style: solid;
background: #16A085;
color: #FFFFFF;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
text-align: center;
padding: 2px;
margin-right: 0px;
width: 30px;
border-width: thin;
display: inline-flex;
}
#add_course_other_rows_left {
color: #16a085;
border-radius: 4px;
border-color: #16a085;
border-style: solid;
border-width: thin;
background: #FFFFFF;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
text-align: center;
padding: 2px;
margin-right: 3px;
margin-top: 2px;
width: 60px;
display: inline-flex;
}
#add_course_other_rows input {
color: #16a085;
border-radius: 5px;
border color:#BFBFBF;
border-style: solid;
border-width: thin;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
text-align: center;
padding: 3px;
margin-top: 2px;
margin-right: 3px;
width: 30px;
float: left;
}
#add_course_other_rows input:hover {
border-color: #2ecc71;
outline: none;
box-shadow: 0 0 2px 1px #2ecc71;
}
#add_course_other_rows {
display: inline-flex;
}
Css:
#charset "utf-8";
.add_course_lables {
width: 500px;
height: 120px;
border-radius: 5px 5px 0px 0px;
margin-left: auto;
margin-right: auto;
}
.add_course_lables input {
color: #16a085;
padding: 10px;
margin-top: 5px;
width:135px;
font-size: 15px;
border: 1px solid #16a085;
border-bottom: 2px solid #16a085;
border-radius: 5px;
transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
.add_course_lables .add_course_name {
width:91.5%;
}
.add_course_lables input:focus {
border-color:#2ecc71;
outline: none;
box-shadow: 0 0 2px 1px #2ecc71;
}
.add_course_lables input:hover {
border-color:#2ecc71;
outline: none;
box-shadow: 0 0 2px 1px #2ecc71;
}
.add_course_button{
background: #16a085;
color: white;
border: 1px solid #16a085;
border-radius: 5px;
transition: background .4s linear;
padding: 10px;
font-weight: 600;
font-size: 20px;
cursor: pointer;
margin-top: 10px;
position: relative;
left: 42%;
right: 0%;
}
#add_course_top_row{
border-radius: 4px;
border-color: #FFFFFF;
border-style: solid;
background: #16A085;
color: #FFFFFF;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
text-align: center;
padding: 2px;
margin-right: 0px;
width: 30px;
border-width: thin;
display: inline-flex;
}
#add_course_other_rows_left{
color: #16a085;
border-radius: 4px;
border-color: #16a085;
border-style: solid;
border-width: thin;
background: #FFFFFF;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
text-align: center;
padding: 2px;
margin-right: 3px;
margin-top:2px;
width: 60px;
float:left;
margin-left:132px;
}
#add_course_other_rows input {
color: #16a085;
border-radius: 5px;
border color:#BFBFBF;
border-style: solid;
border-width: thin;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
text-align: center;
padding: 3px;
margin-top: 2px;
margin-right:3px;
width: 30px;
float:left;
}
#add_course_other_rows input:hover {
border-color:#2ecc71;
outline: none;
box-shadow: 0 0 2px 1px #2ecc71;
}
See this link below,
http://jsfiddle.net/fnnb1o6d/13/
Hope it helps.
Related
I've been stuck on problem of my HTML form working everywhere except Safari on iOS. I've done searching, and tried what others seem to have sometimes fixed it in CSS. However, doesn't work for me.
Here is HTML snippet:
<input type="text" id="first_name" name="first_name" placeholder="First Name*">
And the CSS for the contact-form input:
.contact-form input{
font-weight: 500 !important;
border-radius: 5px;
font-size: 13px;
border: 1px solid #a1a3a6;
background: #f6f7f8;
color: #777 !important;
outline: none;
width: 100%;
padding: 14px;
margin: 10px 0px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.contact-form textarea{
font-weight: 500 !important;
border-radius: 5px;
font-size: 13px;
border: 1px solid #a1a3a6;
background: #f6f7f8;
color: #777 !important;
outline: none;
width: 100%;
padding: 14px;
margin: 10px 0px;
margin-bottom: 5px;
min-height: 200px;
overflow: hidden;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.contact-form input:focus, .contact-form textarea:focus{
background: #fff;
border-color: #ececec;
}
.contact-form button{
display: inline-block;
background: #111;
color: #fff;
font-size: 14px;
width: 100%;
font-weight: 500;
border-radius: 10px;
padding: 15px 30px 15px 30px;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
transition: all .4s ease;
margin-top: 15px;
}
.contact-form button:hover{
background: #d21e2b;
}
.contact-form label input[type="checkbox"] {
display: block;
}
.contact-form input[type="checkbox"] {
width: 13px;
height: 13px;
padding: 15px;
margin-right:20px;
vertical-align: middle;
position: relative;
top: -1px;
*overflow: hidden;
}
<!DOCTYPE html>
<!-- Form Start -->
<form class="contact-form" id="contact-form">
<div class="col-md-12">
<p>All fields marked with * are required</p>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="first_name" name="first_name" placeholder="First Name*">
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="last_name" name="last_name" placeholder="Last Name*">
</div>
<div class="col-md-12">
<input type="email" id="email" name="email" placeholder="E-mail*">
</div>
<div class="col-md-12">
<textarea name="message" id="message" placeholder="Message"></textarea>
<div class="col-md-12">
<div class="center-holder">
<button id="submit_msg" type="submit">Send Message</button>
</div>
</div>
</form>
<!-- Form End -->
</html>
I am developing one page which is responsible for displaying cart items inside that i developed one more form called Customer details it contains three radio buttons , I want those three radio buttons and labels on a same line like this i need , How to place my three radio buttons and along with their label names on a same line .like this i am getting please help me to fix this issue
Cart.vue
<template>
<div class="second -section">
<div class="details-box">
<input type="text" v-if="hide==true" class="initial-btn" placeholder="Customer Details" />
</div>
<div v-if="hide==false" class="fill-details">
<form class="address" >
<h4 class="heading">Customer Details</h4>
<div class="name">
<input type="name" required pattern="[A-Za-z]{3,10}">
<label>Name</label>
</div>
<div class="name">
<input type="text" required >
<label>Phone Number</label>
</div>
<div class="pin">
<input type="text" required >
<label>PinCode</label>
</div>
<div class="pin">
<input type="text" required>
<label>Locality</label>
</div>
<div class="address-block">
<input class="address" type="text" required>
<label>Address</label>
</div>
<div class="city-landMark">
<input type="text" required >
<label>City/Town</label>
</div>
<div class="city-landMark">
<input type="text" required>
<label>LandMark</label>
</div>
<div class="Radio-Buttons">
<p>Type</p>
<div class="radio-btns">
<input type="radio" id="Home" value="Home" name="Type" v-model="role">
<label for="Home" class="home-label">Home</label>
<input type="radio" id="Work" value="Work" name="Type" v-model="role">
<label for="Work" class="work-label">Work</label>
<input type="radio" id="Other" value="Other" name="Type" v-model="role">
<label for="Other" class="other-label">Other</label>
</div>
<div class="btn-continue">
<button type="submit" class="continue" >continue</button>
</div>
</div>
</form>
</div>
</div>
</template>
<style>
#import "colors";
.container{
// background:#FFFFFF;
margin-top:25px;
margin-left:177px;
width:774px;
height:241px;
// border:1px solid #707070;
// border-radius:1px;
}
.content{
margin-left:177px;
width: 155px;
height: 22px;
text-align: left;
font: normal normal medium 18px/22px Lato;
letter-spacing: 0px;
color: $light_black;
opacity: 1;
}
.mid-section{
display:flex;
}
.mid-section img{
width: 105px;
height: 85px;
margin-top:40px;
padding-left:36px;
opacity: 1;
}
.title-section {
margin-top:40px;
padding-left:38px;
font: normal normal normal 14px/17px Lato;
letter-spacing: 0px;
color: $light_black;
opacity: 1;
width: 180px;
height: 17px;
font-weight:300;
}
.author-section {
font: normal normal normal 12px/12px Lato;
letter-spacing: 0px;
color: #9D9D9D;
opacity: 1;
width: 63px;
height: 12px;
margin-left:141px;
margin-top:-58px;
}
.price-section{
margin-left:141px;
font: normal normal bold 15px/18px Lato;
letter-spacing: 0px;
color: $light_black;
opacity: 1;
margin-top:10px;
}
.price-section h6{
font-weight:600;
}
.plus-btn{
border-radius:45%;
width: 24px;
height: 24px;
margin-left:141px;
}
.btn{
position:absolute;
width: 151px;
height: 35px;
background: #3371B5 0% 0% no-repeat padding-box;
border-radius: 2px;
opacity: 1;
margin-top:-50px;
margin-left:800px;
font: normal normal medium 14px/17px Lato;
letter-spacing: 0px;
color: $pale_white;
text-transform: uppercase;
opacity: 1;
}
.close-btn{
background:none;
border:none;
margin-top:30px;
margin-left:650px;
}
.fa-minus-circle{
font-size: larger;
background:none;
border: 1px solid $grey_white;
opacity: 1;
margin-left:141px;
}
.fa-plus-circle{
font-size: larger;
background: none;
border: 1px solid $grey_white;
opacity: 1;
}
.icons .rectangle{
width: 41px;
height: 24px;
}
.initial-btn{
width: 774px;
height: 60px;
border: 1px solid #DCDCDC;
border-radius: 1px;
font: normal normal normal 15px/18px Lato;
letter-spacing: 0px;
color: #333232;
opacity: 1;
margin-left:177px;
margin-top:5px;
}
.fill-details{
width: 774px;
height: 450px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #DCDCDC;
border-radius: 1px;
opacity: 1;
margin-left:177px;
border: 1px solid #DCDCDC;
}
.form{
position: absolute;
transform: translate(-50%, -50%);
border-radius: 10px;
width: 800px;
padding: 25px;
margin-left:177px;
}
.heading{
width: 185px;
height: 18px;
text-align: left;
font: normal normal normal 19px/18px Lato;
letter-spacing: 0px;
color: #333232;
opacity: 1;
padding-left:36px;
}
.address h4 {
font-weight: 300;
}
.name {
display: inline-block;
padding-left:36px;
}
input[type="name"] {
display: block;
margin: 30px 0 0 10px;
width: 251px;
}
.name input[type="text"]{
display: block;
margin: 30px 0 0 10px;
width: 251px;
}
.pin input[type="text"]{
display: block;
margin: 30px 0 0 10px;
width: 251px;
}
.pin{
padding-left:36px;
margin-top:-35px;
display: inline-block;
}
.city-landMark{
display: inline-block;
padding-left:36px;
margin-top:-35px;
}
.city-landMark input[type="text"]{
display: block;
margin: 30px 0 0 10px;
width: 251px;
}
.address-block input[type="text"]{
display: block;
margin: 30px 0 0 10px;
width: 550px;
height:50px;
}
.address-block{
padding-left:36px;
margin-top:-35px;
display: inline-block;
}
.Radio-Buttons p{
padding-left: 50px;
}
#home-label{
padding-top:50px;
}
.btn-continue{
padding-left:550px;
}
.continue{
width: 160px;
height: 35px;
background: #3371B5 0% 0% no-repeat padding-box;
border-radius: 3px;
opacity: 1;
font: normal normal medium 14px/17px Lato;
letter-spacing: 0px;
color: #FFFFFF;
text-transform: uppercase;
opacity: 1;
}
.home-label{
padding-left: 25px;
}
form input {
outline: none;
border: 1px solid #9c9c9c;
border-radius: 5px;
padding: 0 10px;
height: 35px;
font-size: 15px;
margin-left:177px;
}
input:focus {
border: 1.5px solid #1f52f9;
}
form label {
position: relative;
font-family: roboto;
color: #555;
font-size: 15px;
pointer-events: none;
left: 20px;
top: -28px;
transition: .2s all;
}
input:focus~label,
input:valid~label {
top: -49px;
left: 15px;
background: #fff;
padding: 0 5px;
font-size: 10px;
color: #1f52f9;
}
</style>
You have directly use the element selector by tag name instead by class or ID. So, other label element are also affected by that styling.
Please review your CSS code and give property to specific element by using class or ID or other selector instead of directly selecting by tag name.
I wrapped each radio buttons in a div and made those div a flexbox and gave them a gap to space out.
.radio-btns{
display: flex;
gap: 3rem;
}
<div class="radio-btns">
<div>
<input type="radio" id="Home" value="Home" name="Type" v-model="role">
<label for="Home">Home</label>
</div>
<div>
<input type="radio" id="Work" value="Work" name="Type" v-model="role">
<label for="Work" class="work-label">Work</label>
</div>
<div>
<input type="radio" id="Other" value="Other" name="Type" v-model="role">
<label for="Other">Other</label>
</div>
</div>
Below is a code for a contact-us form I'm creating and I gave one of the second div the class name contact-form with the background:rgba(0, 0, 0, 0.8), but I want the background color to center and fit the other div's content instead of being 100% on screens.
I have tried using margin-left:50px and margin-right:50px but it only shifts a little but it doesn't produce the desired result.
codepen.io link
body {
background: linear-gradient(rgb(0, 0, 150, 0.5),rgb(0, 0, 0, 0.5)),url(https://backgroundcheckall.com/wp-content/uploads/2017/12/contact-background-image-8.jpg);
background-size: cover;
background-position: center;
font-family: sans-serif;
}
.contact-title h2 {
font-size: 16px;
margin: 50px;
}
.contact-title {
margin-top: 100px;
color: #fff;
text-transform: uppercase;
transition: all 4s ease-in-out;
}
.contact-form {
background: rgba(0, 0, 0, 0.8);
margin-left: 50px;
margin-right: 50px;
border-radius: 5px;
text-align: center;
opacity: 0.5;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.13);
}
form {
margin-top: 50px;
transition: all 4s ease-in-out;
}
.form-control {
width: 50%;
background: transparent;
border: none;
outline: none;
border-bottom: 1px solid grey;
color: #fff!important;
font-size: 18px;
margin-bottom: 16px;
}
input {
height: 45px;
}
form .submit {
background: #ff5722;
border-color: transparent;
color: #fff;
font-size: 20px;
font-weight: bold;
height: 50px;
margin-top: 20px;
}
form .submit:hover {
background-color: #f44336;
cursor: pointer;
}
.contact-menu {
background-color: black;
margin: 8px 8px 8px 8px;
opacity: 0.8;
overflow: hidden;
height: 50px;
}
.contact-menu a {
color: #f2f2f2;
margin: 0px 0 0 0;
padding: 14px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 17px;
}
.contact-menu a:hover {
background-color: #ddd;
color: #000;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="UX-Compatible" content="ie=edge">
<title>BENDEVI-Contact </title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="contact-menu">
Home
Foreign
AFrica
Unity
</div>
<div class="contact-title">
<h2>Contact Us</h2>
</div>
<div class="contact-form">
<form id="contact-form" action="" method="post">
<input type="text" name="name" class="form-control" placeholder="Your Name" value="" required><br>
<input type="email" name="email" class="form-control" placeholder="Your Email" value="" required><br>
<input type="text" name="Subject" class="form-control" placeholder="Subject" value="" required><br>
<textarea name="message" class="form-control" placeholder="Message" rows="4" required></textarea><br>
<input type="submit" class="form-control submit" value="SEND MESSAGE">
</form>
</div>
</body>
</html>
Based on your description you would like to see the form elements to be 50% of the screen, but the outside div not going wider than the form itself.
You need to do add the margins in unit % of the amount that cuts of the width of the form. In my example 25%. And have the form elements 100% width inside the form, so they take the full width of the cut off outside element. By using % it will flow with every screenwidth the desired result. (Play around with the margin's % to get the desired result).
body {
background: linear-gradient(rgb(0, 0, 150, 0.5), rgb(0, 0, 0, 0.5)), url(https://backgroundcheckall.com/wp-content/uploads/2017/12/contact-background-image-8.jpg);
background-size: cover;
background-position: center;
font-family: sans-serif;
}
.contact-title h2 {
font-size: 16px;
margin: 50px;
}
.contact-title {
margin-top: 100px;
color: #fff;
text-transform: uppercase;
transition: all 4s ease-in-out;
}
.contact-form {
background: rgba(0, 0, 0, 0.8);
margin-left: 25%;
margin-right: 25%;
border-radius: 5px;
text-align: center;
opacity: 0.5;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.13);
}
form {
margin-top: 50px;
padding: 5%;
transition: all 4s ease-in-out;
}
.form-control {
width: 100%;
background: transparent;
border: none;
outline: none;
border-bottom: 1px solid grey;
color: #fff !important;
font-size: 18px;
margin-bottom: 16px;
}
input {
height: 45px;
}
form .submit {
background: #ff5722;
border-color: transparent;
color: #fff;
font-size: 20px;
font-weight: bold;
height: 50px;
margin-top: 20px;
}
form .submit:hover {
background-color: #f44336;
cursor: pointer;
}
.contact-menu {
background-color: black;
margin: 8px 8px 8px 8px;
opacity: 0.8;
overflow: hidden;
height: 50px;
}
.contact-menu a {
color: #f2f2f2;
margin: 0px 0 0 0;
padding: 14px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 17px;
}
.contact-menu a:hover {
background-color: #ddd;
color: #000;
}
<div class="contact-menu">
Home
Foreign
AFrica
Unity
</div>
<div class="contact-title">
<h2>Contact Us</h2>
</div>
<div class="contact-form">
<form id="contact-form" action="" method="post">
<input type="text" name="name" class="form-control" placeholder="Your Name" value="" required><br>
<input type="email" name="email" class="form-control" placeholder="Your Email" value="" required><br>
<input type="text" name="Subject" class="form-control" placeholder="Subject" value="" required><br>
<textarea name="message" class="form-control" placeholder="Message" rows="4" required></textarea><br>
<input type="submit" class="form-control submit" value="SEND MESSAGE">
</form>
</div>
At first my input focus was working just fine, now all of a sudden when I add a couple of more styles to my input, it suddenly stops working. I've only added the 'input[type="text"] and border-radius and padding and some margins since when it was working. When you click each form element, nothing happens even though I have a rule for focus(which you can find near the bottom of the code). Is there any workaround for this?
form{
position: absolute;
left: 50%;
color: white;
margin-left: -180px;
padding: 15px 30px 15px 30px;
background-color: #26004d;
border-radius: 7px;
margin-top: 10px;
width: 300px;
}
label{
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
}
input:focus {
border: 2px solid #862d59;
}
input[type="submit"]{
width: 50%;
background-color: #862d59;
color: white;
margin-top: 5px;
padding: 12px 12px;
border: none;
cursor: pointer;
}
input[type="text"]{
width: 100%;
padding: 12px 12px;
margin: 4px 0;
border: 1px solid #ccc;
border-radius: 6px;
//box-sizing: border-box;
}
<div id="formholder1">
<form>
<div class="single-field">
<label for="Username">Username:</label>
<input name="Name" type="text"></input>
</div>
<div class="single-field">
<label for="Password">Password:</label>
<input name="Password" type="text"></input>
</div>
<input type="submit" value="Login">
</form>
</div>
Use this input[type="text"]:focus {
border: 2px solid #862d59;
}
learn it - http://www.w3schools.com/cssref/trysel.asp?selector=:focus
example - https://css-tricks.com/snippets/css/glowing-blue-input-highlights/
now its working
form{
position: absolute;
left: 50%;
color: white;
margin-left: -180px;
padding: 15px 30px 15px 30px;
background-color: #26004d;
border-radius: 7px;
margin-top: 10px;
width: 300px;
}
label{
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
}
input[type="text"]:focus {
border: 2px solid #862d59;
}
input:focus {
border: 2px solid red;
}
input[type="submit"]{
width: 50%;
background-color: #862d59;
color: white;
margin-top: 5px;
padding: 12px 12px;
border: none;
margin-left:-10px;
cursor: pointer;
}
input[type="text"]{
width: 100%;
padding: 12px 12px;
margin: 4px 0;
border: 1px solid #ccc;
border-radius: 6px;
margin-left:-15px;
//box-sizing: border-box;
}
<div id="formholder1">
<form>
<div class="single-field">
<label for="Username">Username:</label>
<input name="Name" type="text"></input>
</div>
<div class="single-field">
<label for="Password">Password:</label>
<input name="Password" type="text"></input>
</div>
<input type="submit" value="Login">
</form>
</div>
Put Your :focus property after input.
input[type="text"]:focus {
border: 5px solid #862d59;
}
form{
position: absolute;
left: 50%;
color: white;
margin-left: -180px;
padding: 15px 30px 15px 30px;
background-color: #26004d;
border-radius: 7px;
margin-top: 10px;
width: 300px;
}
label{
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
}
input[type="submit"]{
width: 50%;
background-color: #862d59;
color: white;
margin-top: 5px;
padding: 12px 12px;
border: none;
cursor: pointer;
}
input[type="text"]{
width: 100%;
padding: 12px 12px;
margin: 4px 0;
border: 1px solid #ccc;
border-radius: 6px;
box-sizing: border-box;
}
input[type="text"]:focus {
border: 5px solid #862d59;
}
<div id="formholder1">
<form>
<div class="single-field">
<label for="Username">Username:</label>
<input name="Name" type="text"></input>
</div>
<div class="single-field">
<label for="Password">Password:</label>
<input name="Password" type="text"></input>
</div>
<input type="submit" value="Login">
</form>
</div>
I have the following code:
.searchdiv {
width: 140px;
height: 35px;
margin-left: 17px;
margin-top: 12px;
border-width: 2px;
border-style: solid;
border-radius: 4px;
border-color: #707070;
}
.searchbox {
padding: 3px;
font-size: 16px;
font-weight: bold;
background-color: #121212;
color: #6b6b6b;
border-color: #121212;
width: 100px;
height: 25px;
}
.searchbox:focus {
outline: none;
}
.maglass {
position: fixed;
top: 57px;
left: 125px;
}
.maglass:focus {
outline: none;
}
<div class="searchdiv">
<form action="/search.njs" method="GET">
<input class="searchbox" type="text" name="query" value="" />
<input class="maglass" type="image" src="/res/maglass.png">
</img>
</form>
</div>
When I run this, It outputs as:
I would like to know what causes the black border, since none of the colors I specified include it.
I tried removing the border-color property, but that causes the entire border to be grey.
Why does the black(ish) border show up on Chrome?
The issue is because of the default UA settings in Chrome for the input box. The value is by default set to inset (can be seen from the Developer Console) and this is the one that seems to be causing the blackish (it is not black, it seems to be a semi-transparent black) inset border on the element.
The problem is more apparent to see when the border and background colors are changed. I have set some high contrast colors in the below snippet to visualize it.
.searchdiv {
width: 140px;
height: 35px;
margin-left: 17px;
margin-top: 12px;
border-width: 2px;
border-style: solid;
border-radius: 4px;
border-color: #707070;
}
.searchbox {
padding: 3px;
font-size: 16px;
font-weight: bold;
background-color: #121212;
color: #6b6b6b;
border-color: #121212;
width: 100px;
height: 25px;
}
.searchbox:focus {
outline: none;
}
.maglass {
position: fixed;
top: 57px;
left: 125px;
}
.maglass:focus {
outline: none;
}
/* Just for demo */
.searchbox.contrast {
background-color: yellow;
border-color: yellow;
}
.searchdiv {
margin-top: 20px;
}
<div class="searchdiv">
<form action="/search.njs" method="GET">
<input class="searchbox" type="text" name="query" value="" />
<input class="maglass" type="image" src="/res/maglass.png">
</form>
</div>
<div class="searchdiv">
<form action="/search.njs" method="GET">
<input class="searchbox contrast" type="text" name="query" value="" />
<input class="maglass" type="image" src="/res/maglass.png">
</form>
</div>
What is the solution?
The solution to this is very simple. Just override the default border-style and set it to solid like in the below snippet.
.searchdiv {
width: 140px;
height: 35px;
margin-left: 17px;
margin-top: 12px;
border-width: 2px;
border-style: solid;
border-radius: 4px;
border-color: #707070;
}
.searchbox {
padding: 3px;
font-size: 16px;
font-weight: bold;
background-color: #121212;
color: #6b6b6b;
border-style: solid;
border-color: #121212;
width: 100px;
height: 25px;
}
.searchbox:focus {
outline: none;
}
.maglass {
position: fixed;
top: 57px;
left: 125px;
}
.maglass:focus {
outline: none;
}
/* Just for demo */
.searchbox.contrast {
background-color: yellow;
border-color: yellow;
}
.searchdiv {
margin-top: 20px;
}
<div class="searchdiv">
<form action="/search.njs" method="GET">
<input class="searchbox" type="text" name="query" value="" />
<input class="maglass" type="image" src="/res/maglass.png">
</form>
</div>
<div class="searchdiv">
<form action="/search.njs" method="GET">
<input class="searchbox contrast" type="text" name="query" value="" />
<input class="maglass" type="image" src="/res/maglass.png">
</form>
</div>