I’m wondering if someone could help me remove the extra white space between the top navigation bar and the call-to-action section?

I have tried setting the margin-bottom of the top-nav and margin-top of the call-to-action both to 0, and also played with the padding and a few other settings, but nothing changes.

Thanks in advance.

 <!DOCTYPE html>
<html>
	<head>
		<title>Syntax Sandbox</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="style/default.css">
	</head>
	<body>
		<div class="top-nav" id="main-nav">
			<a href="" class="active">Syntax Sandbox</a>
			<a href="">Biography</a>
			<a href="">Portfolio</a>
			<a href="">Programming</a>
			<a href="">About</a>
			<a href="">Contact</a>
			<a href="javascript:void(0);" class="icon" onclick="menuScale()">
				<i class="fa fa-bars"></i>
			</a>
		</div>

		<div id="call-to-action">
			<p id="logo-text">Syntax Sandbox</p>
			<p id="logo-subtext">Your Resource for Language Agnostic Programming</p>
		</div>
		
		<script>
			function menuScale() {
				var x = document.getElementById("main-nav");
				if (x.className === "top-nav") {
					x.className += " responsive";
				} else {
					x.className = "top-nav";
				}
			}
		</script>
	</body>
</html> 

css:

body 
{
	background-color:		#fff;
	font-family: 			verdana, sans-serif, helvetica, arial;
	font-size:			12pt;
	margin:				0;
}

/* START NAVIGATION */
.top-nav {
	overflow:			hidden;
	background-color:		#fff;
	margin-left:			150px;
	padding-top:			14px;
	margin-bottom:			0;
}

.top-nav a {
	float:				left;
	display:			block;
	color:				#000;
	text-align:			center;
	padding:			12px;
	text-decoration:		none;
	font-size:			14px;
	margin-left:			14px;
	border-bottom:			2px solid #fff;
}

.top-nav a:hover {
	color:				#000;
	border-bottom:			2px solid #000;
}

.top-nav a.active {
	background-color:		#fff;
	color:				#000;
	font-weight:			bold;
	border-bottom:			none;
}

.top-nav .icon {
	display:			none;
}
	
@media screen and (max-width: 975px) {
	.top-nav a:not(:first-child) {
		display:		none;
	}
	.top-nav a.icon {
		float:			right;
		display:		block;
		border-bottom:		none;
	}
}

@media screen and (max-width: 975px) {
	.top-nav.responsive {
		position:		relative;
	}
	.top-nav.responsive .icon {
		position:		absolute;
		right:			0;
		top:			0;
	}
	.top-nav.responsive a {
		float:			none;
		display:		block;
		text-align:		left;
	}
	.top-nav.responsive a:hover {
		border-bottom:		none;
	}
}
/* END NAVIGATION */

#call-to-action {
	background-color:		#243A5E;
	color:				#fff;
	min-height:			300px;
	margin-top:			0;
}

#logo-text {
	font-size:			36px;
	margin-left:			150px;
	margin-bottom:			12px;
	padding-top:			80px;
}

#logo-subtext {
	margin-top:			0;
	margin-left:			150px;
}

I’ve included a couple screen shots of how it looks.

r/webdev - Extra Space in Layout

Tools show a gap between top-nav and call-to-action, it is the body

r/webdev - Extra Space in Layout

I would like the extra space removed

I uploaded the files to OneDrive in case it would help to have access to them: Download Files.

I’m trying to make it look closer to the MSDN Layout.



Source link

Write A Comment