Go Premium for a chance to win a PS4. Enter to Win

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

Spacing and vertical alignment

How can I get rid of the space between the header and head-banner div tags and how can I align the img and the text that sit in the head-banner div. Thank you.


<!DOCTYPE html>
<html charset="UTF-8">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Test</title>
	<link rel="stylesheet" type="text/css" href="styles/styles.css" />	

	<!--[if lt IE 7]>
		<style type="text/css">
			#wrapper { height:100%; }
		</style>
	<![endif]-->
	
</head>

<body>

	<div id="wrapper">
		
		<div id="header">
		</div><!-- #header -->
		
		<div id="head-banner">
			<p>
			<img src="imgs/kevinbarlow.png" />
			Building Contractor
			Key West, Florida</p>
		</div>
		
		<div id="content">
		</div><!-- #content -->
		
		<div id="footer">
		</div><!-- #footer -->
		
	</div><!-- #wrapper -->
	
</body>

</html>

Open in new window


html,
body {
	margin:0;
	padding:0;
	height:100%;
}
html{
	background: url(S12_Blueprints.gif) no-repeat center center fixed;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#wrapper {
	min-height:100%;
	width: 100%;
	position:relative;
}
#header {
	background:#000000;
	padding:10px;
	border-bottom: 2px solid red;
}
#head-banner{
	height: 75px;
	max-width: inherit;
	margin-top: 0;
	margin-bottom: 0;
	background-color: #ffffff;
}
#head-banner img p{
	display: inline-block;
	vertical-align: middle;
}
#content {
	min-width: 100%;
	height: 500px;
	border: 1px solid black;
}

#footer {
	background:#ffab62;
	width:100%;
	height:100px;
	position:absolute;
	bottom:0;
	left:0;
	border: 1px solid black;
}

Open in new window

0
centem
Asked:
centem
1 Solution
 
jayakrishnabhCommented:
To remove space between header and header-banner make padding as 0px for the header style

#header {
            background:#000000;
            padding:0px;
            border-bottom: 2px solid red;
      }
0
 
centemAuthor Commented:
Thanks jayakrishnabh but that didn't work. The issue seems to be with margin spacing between the two tags. I tried setting the margin to 0 but that didn't seem to work either.
0
 
slfedeCommented:
To remove the spacing between the header and head-banner divs, simply either:

- remove the p tag from head-banner div

- edit this css

This is incorrect, your p tag comes before the img tag.
#head-banner img p{
	display: inline-block;
	vertical-align: middle;
}

Open in new window


It should be this:

#head-banner p{
    display: inline-block;
    vertical-align:middle;
    margin-top:0;
}

Open in new window


If you want to center align it:

#head-banner{
	height: 75px;
        width:100%;
        text-align:center;
	margin-top: 0;
	margin-bottom: 0;
	background-color: #ffffff;
}

Open in new window


http://jsfiddle.net/cTGLS/
0
 
centemAuthor Commented:
Thanks slfede,
I'm trying to align the text vertically with the img.  I tried the below css but it does not align it.
 
#head-banner p{
	display: inline-block;
	vertical-align: middle;
	margin-top: 0;
}

Open in new window

0
 
jtwcsCommented:
The spacing is being caused by the browser default margins being applied to the <p>.  Look into using a css reset to start off with a good baseline.

The text can be vertically aligned to the middle of the image by styling the <img> with a vertical-align: middle declaration.

See here for full example.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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