4 Replies - 373 Views - Last Post: 13 September 2012 - 12:42 PM

#1 skymonkier  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 107
  • Joined: 14-July 12

Simple CSS 'Separation' Problem

Posted 13 September 2012 - 11:48 AM

I'm just having an issue with a div separating, or, moving down from the position I want it in. Can anyone explain why? It only did it when I added my header to #content. Here's a pic;

Posted Image

Cheers!
skymonkier

P.S. Right-click and 'Open image in new tab/window' will allow you to see it better... the header is white... :online2long:

This post has been edited by skymonkier: 13 September 2012 - 11:50 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Simple CSS 'Separation' Problem

#2 BenignDesign  Icon User is offline

  • holy shitin shishkebobs
  • member icon




Reputation: 5937
  • View blog
  • Posts: 10,346
  • Joined: 28-September 07

Re: Simple CSS 'Separation' Problem

Posted 13 September 2012 - 11:57 AM

Do you have any code to accompany this? Are you using header tags (ie, <h1>, <h2>, etc)?
Was This Post Helpful? 0
  • +
  • -

#3 skymonkier  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 107
  • Joined: 14-July 12

Re: Simple CSS 'Separation' Problem

Posted 13 September 2012 - 12:12 PM

View PostBenignDesign, on 13 September 2012 - 11:57 AM, said:

Do you have any code to accompany this? Are you using header tags (ie, <h1>, <h2>, etc)?


Oh, sorry, sorry.
Here, both h1 codes:

index.html
<div id="content">
	<h1> A Header! </h1>
	Another test
</div>



style.css
#content h1 {
	font-family: handFont;
	font-size: 28px;
	font-weight: 400;
	color: #ffa300;
	letter-spacing: 1px;
	padding-left: 20px;
}


Was This Post Helpful? 0
  • +
  • -

#4 BenignDesign  Icon User is offline

  • holy shitin shishkebobs
  • member icon




Reputation: 5937
  • View blog
  • Posts: 10,346
  • Joined: 28-September 07

Re: Simple CSS 'Separation' Problem

Posted 13 September 2012 - 12:32 PM

<h1> has a default top and bottom margin of 8px.

When you add it to the same div as the rest of the content, it's bumping the content of the div down 16px.
Was This Post Helpful? 1
  • +
  • -

#5 skymonkier  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 107
  • Joined: 14-July 12

Re: Simple CSS 'Separation' Problem

Posted 13 September 2012 - 12:42 PM

Ah, that's helpful. I just did margin-top: 0; and used Relative positioning, but I wish it would just work the way I want it to... Anyhow, thanks for that tip! :D
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1