Member Avatar for learning_php

Hi,

I'm building a design for a website as a practice, but it seems i'm missing sthg as every time i try to add <h> tag of any size, the div shifts down leaving a blank space above, but it works fine if i replaced the <h> with a large size regular font. here's my css as a sample:

body{
	width:80%;
	margin:auto;
	background:#FFFFCC;
	border:#000666 medium;
	}

#header{
	height:100px;
	width:100%;
	background:#bdd44f url(../images/logo.gif) no-repeat;
}



#logo {
text-align:center;
font-size:50px;
font-family:"fantasy";
 }

here's the use in the HTML page

<!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" />
<link type="text/css" href="../CSS/main.css" rel="stylesheet" />
<title>Untitled Document</title>
</head>

<body>

<div id='header'>
	<div id="logo">
		<h1> Website's Name as a header </h1>
	</div>
</div>

I don't know how to fix it, can anyone help??
thank you in Advance

  • 3 Contributors
  • 4 Replies
  • 186 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by learning_php

Dani AI

Generated

’s symptom (header dropping when an <h1> is added) is the classic interaction of a block-level element with browser default margins. correctly pointed out the block/inline difference and ’s reset suggestion is a solid, long‑term fix — the reset removes the user‑agent top/bottom margins that create the gap. For a focused, predictable layout there are a few simple, modern options.

A robust approach that keeps the header height and centers the heading both vertically and horizontally is to make the header a flex container and reset the h1’s margin:

#header {
  height: 100px;           /* keep the intended header height */
  display: flex;
  align-items: center;     /* vertical centering */
  justify-content: center; /* horizontal centering */
}
#header h1 { margin: 0; }  /* override the UA margin that causes the gap */

If the heading will always be a single line, a lighter alternative is to zero the margins and match the h1’s line-height to the header height (less flexible for wrapping text):

#header h1 { margin: 0; line-height: 100px; }

Troubleshooting tips: open the browser dev tools, select the h1, and check the “computed” styles to see which stylesheet (user agent vs. site) is applying top/bottom margin. Consider switching the old XHTML transitional doctype to the modern HTML5 doctype (<!DOCTYPE html>) to ensure standards mode. For consistent cross‑browser results across a site, use a small reset or Normalize.css (as suggested) rather than relying on browser defaults.

Recommended Answers

All 4 Replies

Member Avatar for hericles

Heading tags are considered block level elements (as are divs) so the inclusion of a H tag forces everything below it to move down. Text added directly or in elements like <span> are considered inline and don't have the same effect.
If you ever want a block element to behave like an inline element add

display: inline-block;

to the CSS for the block element.
I hope that helps.

Member Avatar for Philippe.Lahaie

if you mean the margin/padding over the h block, that would come from browser's default css rules and may differ from one browser to another, if you want to make sure every browser display stuff as close as possible to what you would like (it's impossible to have EXACTLY the same thing on everybrowser since they handle css diferently to their liking) what i would suggest is importing a reset.css set of rules that clears the browsers default values for generic elements.

the order for css rules is : broswer's css < website's css file/style elements < inline style arguments < user's personal css

im probly missing some here but the important point i'm trying to make is that your website's css is rarely gonna overwrite every single possibile rules that the browser possibly implements, this is where the reset.css comes into play and wipes as much as possible off by setting default values for elements that could otherwise be implemented diferently by diferent browsers...

so you end up with : broswer's css < reset.css < website's css file/style elements < inline style arguments < user's personal css

here is the reset.css i found a bit ago on the net and use currently :


edit : when i talk about css rule's order i do not mean the weight, that still takes over the order the diferent files are loaded.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
Edited by Philippe.Lahaie because: n/a
Member Avatar for learning_php

I hope that helps.

Yesssssssssssssss it was very helpful and fixed the issue. thx alot

Member Avatar for learning_php

Wow, that was quite new to me, and very interesting. Thank you so much for your time

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.