3 Replies - 670 Views - Last Post: 22 April 2012 - 05:49 PM

#1 brightpath  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 29-November 08

Unwanted space between DIVS

Posted 22 April 2012 - 09:36 AM

It's been a long time since I've coded a website and CSS is very new to me. I've been able to create a basic layout using CSS but am having trouble with white space showing up between my header and a horizontal rule below the header.

Also, I can't figure out how have the girl float over the logo image about 20 pixels. She has a highlight around her that I want further to the left.

I'm posting my html and css code in hopes that I can get assistance on the proper way to code the page. Any other general help would also be appreciated!

HTML CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Insite Managed Solutions - Contact Center Experts</title>
<link href="CSS/Level2_Verdana_Text.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="wrapper">

<div class="header_box" align="left">
<img src="assets/images/insite_logo.png" class="header_logo" />
<img src="assets/images/left_girl.png" class="left_girl">
</div>

<div class="hr_rule">
<img src="assets/images/hr_rule.png" />
</div>

</div>



</body>
</html>



CSS CODE
body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 0; 
	padding: 0;
	text-align:center; /* for IE */
}

.wrapper {
	text-align:left; /* reset text alignment */
	width:1024px; /* or a percentage, or whatever */
	margin:0 auto; /* for the rest */ 
}

.header_box {
	width: 1024;
	min-height: 251;
	background:url(../assets/images/header_bg.jpg) no-repeat;
}	

.header_logo {
	position:static;
	top:0px;
	right:0px;
}

.hr_rule {
	position:static;
}



What I'm getting:

Posted Image

What I'm aiming for:

Posted Image

Is This A Good Question/Topic? 0
  • +

Replies To: Unwanted space between DIVS

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3394
  • View blog
  • Posts: 9,592
  • Joined: 08-June 10

Re: Unwanted space between DIVS

Posted 22 April 2012 - 12:10 PM

thatís because there is whitespace (2 linebreaks) between the <div>s, which is converted to a space character and since <div>s are block elements, they can only have preceding whitespace above them (hence the gap).
Was This Post Helpful? 1
  • +
  • -

#3 brightpath  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 29-November 08

Re: Unwanted space between DIVS

Posted 22 April 2012 - 05:39 PM

View PostDormilich, on 22 April 2012 - 01:10 PM, said:

thatís because there is whitespace (2 linebreaks) between the <div>s, which is converted to a space character and since <div>s are block elements, they can only have preceding whitespace above them (hence the gap).


I made the change to the HTML to reflect this but am still getting the gap.

<div class="wrapper"><div class="header_box" align="left">
		<img src="assets/images/insite_logo.png" class="header_logo" />
		<img src="assets/images/left_girl.png" class="left_girl">
</div><div class="hr_rule"><img src="assets/images/hr_rule.png" /></div></div>


Was This Post Helpful? 0
  • +
  • -

#4 brightpath  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 29-November 08

Re: Unwanted space between DIVS

Posted 22 April 2012 - 05:49 PM

Scratch that. We might have a winner.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1