Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 264
  • Last Modified:

Why did this work?

Head out to http://www.hihatwebdesign.com/Trinity/header.php

I had a gap between my header graphic and my navbar. But then I added "float:left" to the navbar and the gap went away.

Why?

Here's my stylesheet:

body {
	font-family: Helvetica, Microsoft Sans Serif;
	font-size: 14px;
	color: #000000;
	vertical-align: top;
	padding: 0px;
	height: 100%;
	width: 100%;
	margin: 0;
	background-color:#202740;
}

#body_tray {
position:relative;
width:997px;
height:800px;
margin:auto;
padding:25px;
}

#header {
position:relative;
margin:auto;
height:236px;
width:997px;
background-image:url(images/header.png);
background-repeat:none;
z-index:-1;
}

#search_box {
position:absolute;
z-index:2;
margin-left:820px;
margin-top:175px;
}

#nav_bar {
float:left;
position:relative;
margin:auto;
width:997px;
height:38px;
background-image:url(images/nav_bar.png);
background-repeat:no-repeat;
}

#navcontainer ul {
margin-top: 5px;
padding: 0;
list-style-type: none;
}

#navcontainer ul ul {
display: none;
margin-left: 0;
padding: 0;
width: 200px;
position: absolute;
background: #ffffff;
z-index:10;
border-style:solid;
border-width: thin;
border-color:#cccccc;
}

#navcontainer ul li:hover > ul 
{
display: block;
}

#navcontainer ul li { 
display: block;
float:left; 
}

#navcontainer ul li a
{
font-family: Arial Narrow, Microsoft Sans Serif, Helvetica;
font-size: 18px;
color:#493417;
font-weight:bold;
text-decoration: none;
padding-left:45px;
padding-right:40px;
display:block;
}

#navcontainer ul li a:hover
{
color: #4b7235;
}

#navcontainer ul ul li a {
font-family: Arial Narrow, Microsoft Sans Serif, Helvetica;
font-size: 16px;
color:#493417;
padding-left:5px;
}

#navcontainer:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}



#body_block {
position:relative;
width:997px;
height:485px;
background-image:url(images/body_block.png);
background-repeat:none;
z-index:-2;
}

#body_text {
position:absolute;
width:704px;
height:482px;
margin-left:267px;
margin-top:5px;
background-color:#cccccc;
}

#left_column {
position:absolute;
width:230px;
height:503px;
margin-left:25px;
margin-top:5px;
}

#cursor {
position:absolute;
float:left;
width:13px;
height:25px;
background-image:url(images/cursor.png);
background-repeat:none;
margin-top:150px;
margin-left:125px;
z-index:2;
}

#left_nav {
display:inline-block;
position:absolute;
width:230px;
height:329px;
margin-left:25px;
margin-top:180px;
background-image:url(images/left_column_background.png);
background-repeat:none;
}


#footer {
position:relative;
height:26px;
width:997px;
margin:auto;
}

input.login_box{
   border:0px;
  width:109px;
  height:21px;
  font-size: 10px;
  color: #cccccc;
  display: inline;
}

a.staff {
margin-top:0px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_church_light.png);
background-repeat:no-repeat;
}

a.staff:hover {
margin-top:0px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_church_dark.png);
background-repeat:no-repeat;
}

a.directions {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_directions_light.png);
background-repeat:no-repeat;
}

a.directions:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_directions_dark.png);
background-repeat:no-repeat;
}

a.times {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_times_light.png);
background-repeat:no-repeat;
}

a.times:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_times_dark.png);
background-repeat:no-repeat;
}

a.directory {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_directory_light.png);
background-repeat:no-repeat;
}

a.directory:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_directory_dark.png);
background-repeat:no-repeat;
}

a.gallery {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_gallery_light.png);
background-repeat:no-repeat;
}

a.gallery:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_gallery_dark.png);
background-repeat:no-repeat;
}

a.pastor {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_pastor_light.png);
background-repeat:no-repeat;
}

a.pastor:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_pastor_dark.png);
background-repeat:no-repeat;
}

a.gallery {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_gallery_light.png);
background-repeat:no-repeat;
}

a.gallery:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_gallery_dark.png);
background-repeat:no-repeat;
}


a.campus {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_campus_light.png);
background-repeat:no-repeat;
}

a.campus:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_campus_dark.png);
background-repeat:no-repeat;
}

Open in new window

0
brucegust
Asked:
brucegust
2 Solutions
 
brucegustPHP DeveloperAuthor Commented:
Is it because the two elements in question are typically displayed inline, thus the float compels the second element to go under the first, much like what you see if you had a series of <li>'s and you incorporated the "float:left" dynamic, thus giving you what you see in a pulldown menu.

Correct?
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
That is a bandaid solution.  There are many other issues with this page. I would start by getting the page to validate.  http://validator.w3.org/
screenshot
0
 
Julian HansenCommented:
I don't see that - if I take the float: left out - it actually brings the content window 1px closer to the nav bar.
There should be no gap between the div unless you have something inside the div that has a margin that is then causing the parent element to have a gap.

You can also try putting overflow:hidden in the parent - that also sorts out those sorts of problems
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now