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
  • 166 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by learning_php
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.