Reputation:
Why the near button background color not the gray, but white. And how do to same gray like upper? Where I can found similar contact form to my made. Sorry for my bad English.
.row1:before,
.row1:after{
display: table;
content: " ";
}
.row1:after,{
clear: both;
}
.row1 {
margin-right: -15px;
margin-left: -15px;
background-color: #f0f0f0;
}
.Contact_form{
width: 60%;
float: none;
margin-left: auto;
margin-right: auto;
position: relative;
min-height: 1px;
}
._input{
display: block;
margin-left: auto;
margin-right: auto;
line-height: 1.38;
margin-top: 5px;
color: #000000;
font-size: 13px;
padding: 10px;
}
._input-long{
height: 110px;
padding-top: 5px;
}
._input-1 {
height: 40px;
}
._button {
display: block;
float: left;
width: 23.2333333333%;
height: 56px;
margin: 10px 0 0 57.53385%;
background-color: #2979ff;
line-height: 1.38;
text-align: center;
color: #ffffff;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #000;
margin: 1em 0;
padding: 0;
}
.Contact_text{
margin-left: auto;
margin-right: auto;
width: 10%;
float: none;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
<div class="container-fluid">
<div class="row1">
<div class="Contact_text">
<p>Palikyte mums =inut4</p>
<hr></hr>
</div>
<div class=".Contact_form">
<input id="name" class="_input _input-1 js-name" name="J8s7 vardas" placeholder="J8s7 vardas" type="text">
<input id="connection" class="_input _input-1 js-contact" name="mail&phone" placeholder="Tel. nr." type="text">
<input class="_input-long _input" name="+inute" placeholder="asdasdsad" type="text">
<button type="submit" id="send" class="_button js-send_info">Si7sti =inut3</button>
</div>
</div>
</div>
Upvotes: 1
Views: 121
Reputation: 899
Your question is quite hard to understand, but after running the snippet, I assume you either want the entire page background in grey, or you want the blue button in grey to match the top section.
<input class="_input _input-1 js-name" type="submit" id="send" value="Si7sti =inut3">
A little problem with class placement if I'm correct
Upvotes: 0
Reputation: 5986
The reason the gray is not behind the button at the bottom is due to the float
property. Anytime you use floats you need to clear them, otherwise you have the chance for this to occur. The easy fix for you is to add "overflow:hidden;" to the row1
class as you see below I have done.
.row1:before,
.row1:after{
display: table;
content: " ";
}
.row1:after,{
clear: both;
}
.row1 {
margin-right: -15px;
margin-left: -15px;
background-color: #f0f0f0;
overflow:hidden; /* NEW CODE*/
}
.Contact_form{
width: 60%;
float: none;
margin-left: auto;
margin-right: auto;
position: relative;
min-height: 1px;
}
._input{
display: block;
margin-left: auto;
margin-right: auto;
line-height: 1.38;
margin-top: 5px;
color: #000000;
font-size: 13px;
padding: 10px;
}
._input-long{
height: 110px;
padding-top: 5px;
}
._input-1 {
height: 40px;
}
._button {
display: block;
float: left;
width: 23.2333333333%;
height: 56px;
margin: 10px 0 0 57.53385%;
background-color: #2979ff;
line-height: 1.38;
text-align: center;
color: #ffffff;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #000;
margin: 1em 0;
padding: 0;
}
.Contact_text{
margin-left: auto;
margin-right: auto;
width: 10%;
float: none;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
<div class="container-fluid">
<div class="row1">
<div class="Contact_text">
<p>Palikyte mums =inut4</p>
<hr></hr>
</div>
<div class=".Contact_form">
<input id="name" class="_input _input-1 js-name" name="J8s7 vardas" placeholder="J8s7 vardas" type="text">
<input id="connection" class="_input _input-1 js-contact" name="mail&phone" placeholder="Tel. nr." type="text">
<input class="_input-long _input" name="+inute" placeholder="asdasdsad" type="text">
<button type="submit" id="send" class="_button js-send_info">Si7sti =inut3</button>
</div>
</div>
</div>
Upvotes: 0
Reputation: 36786
Your <button>
is floated, taking it out of the normal page flow. Its parent, .Contact_form
doesn't stretch to accommodate it anymore. You can use the overflow
style to clear any floats.
Also the class
attribute takes classes without the period (.
).
.row1:before,
.row1:after{
display: table;
content: " ";
}
.row1:after,{
clear: both;
}
.row1 {
margin-right: -15px;
margin-left: -15px;
background-color: #f0f0f0;
}
.Contact_form{
overflow: hidden;
width: 60%;
float: none;
margin-left: auto;
margin-right: auto;
position: relative;
min-height: 1px;
}
._input{
display: block;
margin-left: auto;
margin-right: auto;
line-height: 1.38;
margin-top: 5px;
color: #000000;
font-size: 13px;
padding: 10px;
}
._input-long{
height: 110px;
padding-top: 5px;
}
._input-1 {
height: 40px;
}
._button {
display: block;
float: left;
width: 23.2333333333%;
height: 56px;
margin: 10px 0 0 57.53385%;
background-color: #2979ff;
line-height: 1.38;
text-align: center;
color: #ffffff;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #000;
margin: 1em 0;
padding: 0;
}
.Contact_text{
margin-left: auto;
margin-right: auto;
width: 10%;
float: none;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
<div class="container-fluid">
<div class="row1">
<div class="Contact_text">
<p>Palikyte mums =inut4</p>
<hr></hr>
</div>
<div class="Contact_form">
<input id="name" class="_input _input-1 js-name" name="J8s7 vardas" placeholder="J8s7 vardas" type="text">
<input id="connection" class="_input _input-1 js-contact" name="mail&phone" placeholder="Tel. nr." type="text">
<input class="_input-long _input" name="+inute" placeholder="asdasdsad" type="text">
<button type="submit" id="send" class="_button js-send_info">Si7sti =inut3</button>
</div>
</div>
</div>
Upvotes: 1