CODEWITHSUNDEEP
html
John Ashmore
John Ashmore

Reputation: 1045

How to get rid of the light blue gap

Simply: How to get rid of the light blue gap, so that "new customer account application" and Name/Street/City sections are adjoining?

As I am a beginner, any other suggestions to my code are welcome, thanks.

I cant submit this without adding more information because it says there is too much code, not enough writing. Sorry to add this paragraph.

<!DOCTYPE html>
<html>
<head>

<style>

#wrap { 
    background-color: #83caff;
	width: 1024px; 
	margin: 0 auto; 
	color: white;
}

.darkblue{
	background-color: #004586;
	padding-left: 20px;
	line-height: none;
	margin: none;
}

.paddingleftstandard {
	padding-left: 20px;
	padding-bottom: 10px;
}

.paddingrightstandard {
	padding-right: 20px;
	margin-right: 20px;
}

.darkbluefordata{
	background-color: #336699;
    line-height: 1.8em;
	font-size:0.6em;
	
}

.submitbutton {
	padding: 4px 6px 4px !important;
	font-size: 18px !important;
	background-color: #3b5998;
	font-weight: bold;
	text-shadow: 1px 1px #3b5998;
	color: #ffffff;
	border-radius: 3px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: 1px solid #3b5998;
	cursor: pointer;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;

}

</style>
</head>

<body>
<div id="wrap">
	<h1 class="darkblue">New Customer Account Application<h1>

	
	<form class="paddingleftstandard darkbluefordata" action="/action_page.php">
  Name &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  Street &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  
  City
  <br>
  <input type="text" name="Name" value="">
  <input type="text" name="Street" value="">
  <input class="paddingrightstandard" type="text" name="City" value="">
  <input class="submitbutton" type="submit" value="Submit Application">
</form> 
	
	<p> </p>
	<footer>

</footer>
</div>
</body>
</html>

Upvotes: 0

Views: 28

Answers (2)

Alex
Alex

Reputation: 121

While the solution presented by @Shoaib will achieve the desired effect, the underlying issue is that there is some incorrect HTML and CSS. To fix this, the W3 validator is an invaluable tool: https://validator.w3.org/ .

Regarding your current problem, it points out that the h1 tag is not closed due to a missing backslash, leading to the closing tag being interpreted as another h1 opening tag. This, in combination with the invalid none rather than 0 for margin leads to both the title and the form having a top and bottom margin, creating the blue gap.

As for other tips, your form formatting (label positioning) could be improved by doing it via CSS as well. Assign the input fields and labels equal width, and they'll line up better.

Upvotes: 1

Shoaib
Shoaib

Reputation: 314

Please add a new class.

h1 {
    margin: 0;
}

Upvotes: 2

Related Questions