user2989185
user2989185

Reputation:

why do not the same color html/css

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

Answers (3)

Ballard
Ballard

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.

http://jsfiddle.net/6ruzjvd5/

<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

Dylan Cross
Dylan Cross

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

George
George

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

Related Questions