header image position

C

Corporal79

Gawd
Joined
Oct 28, 2004
Messages
889
I'm working on a header image and I can't seem to get it to align to the top of the header box, I'm sure I'm missing something tiny but here is a screenshot.
Capture.JPG


and the code I'm using...
Code: 
<div id="centerColumn">
	<div id="header">
    <h1 id="header">
    <img src="images/header2.png" alt="header" width="575" height="80" />
    <h1 align="center"></h1>


I've tried altering the margins in the style.css file but it doesn't affect the image :confused:
 
try removing the <H1> tags. They're block level elements.
 
You shouldn't have two identical ID names used in a page.
 
<h1> tags have margins so remove them.

Also "align="center" is depreciated, use

Code: 
h1{
text-align:center;
}
 
fwiw your first h1 tag isn't closed, then again this would appear to only be partial. regardless, don't use h1 unless you actually have header text in it. just stick with a div and an image in that div and use css to do what you need.
 
hmm still a nogo, now i"m using
Code: 
<div id="centerColumn">
	<div id="header">
    <img src="images/header2.png" alt="header" width="575" height="80" />
        
	<h2>&nbsp;</h2>
</div><!--//end #headern//-->
 
Corporal79 said:
hmm still a nogo, now i"m using
Code: 
<div id="centerColumn">
	<div id="header">
    <img src="images/header2.png" alt="header" width="575" height="80" />
        
	<h2>&nbsp;</h2>
</div><!--//end #headern//-->
Click to expand...

take the <H2> out and close your DIV tags. all you need is
Code: 
<div id="centerColumn">
     <div id="header">
        <img src="images/header2.png" alt="header" width="575" height="80" />
     </div>
</div>
 
still not working, all that did was move my nav list closer up to the image, is it in the style sheet possibly? :confused:

Capture2.JPG


here is the style sheet

Code: 
body {
margin:3em;
padding:0;
height:100%;
background-color:#ffffff;
color:#000000;  
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:.9em;
}

a {
	color:#1C1AE0;
	text-decoration:underline;
	text-transform: uppercase;
	font-weight: bold;
}

a:hover {
color:#eeeeee;
text-decoration:none;
}

blockquote {
margin:1em;
padding:.5em;
background-color:#eeeeee;
border-top:1px solid #cccccc;
border-bottom:1px solid #cccccc;
}

blockquote p {
margin:.2em;
}

#centerColumn {
	margin:0 auto;
	padding:1em;
	width:38em;
	text-align:left;
	vertical-align: middle;
	background-color:#CCCCCC;
	border:1px solid #999999;
}

#centerColumn h2 {
margin:0 0 0 0;
padding:0 0 0 0;
font-size:1em;
letter-spacing:.1em;
}

#header {
margin:-1em -1em 0 -1em;
padding:0 0 0 0;
height:5em;
background-color:#000000;
}

#header h1 {
margin:0 0 -.6em 0;
padding:0em 0 0 1em;
font-size:1.5em;
letter-spacing:.1em;
}

#header h2 {
margin:0 0 0 0;
padding:1em 0 0 1.75em;
font-size:.9em;
font-weight:300;
letter-spacing:.1em;
}

#nav {
margin:0 0 1em 0;
padding:.4em 0 0 0;
}

#nav ul {
margin:0;
padding:0;
list-style:none;
}

#nav li {
margin:0;
padding:.25em;
display:inline;
}

#footer {
position:relative;
bottom:0;
margin:5em 0 0 0;
padding:0;
height:4em;
line-height:4em;
text-align:center;
font-size:.7em;
background-color:#cccccc;
border-top:1px solid #999999;
}
 
try removing everything that affects margin/padding from your css defs and re-add them 1 at a time to see what causes the problem
Code: 
#centerColumn {
    margin: 0;
    padding: 0;
    you can keep the other stuff
}

#header {
    margin: 0;
    padding: 0;
    you can keep your bg color, remove height
}

remove #header h1/h2 since you don't need it

try adding
#header img {
    padding: 0;
    margin: 0;
    border: 0;
}
another thing i do when debugging css is add bright borders to divs to clearly see where they are, i.e. add

border: 1px solid magenta;

to #header so you can see if it is the div containing the extra space or if it's something with #centerColumn
 
Try adding the following to the body tag:

Code: 
topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" marginheight="0" marginwidth="0"
 
only do that if you're stuck in 5 years ago. use the css equivalent.
 
that's not the issue. the issue is within the gray border. making the body's margin-top 0 would make the gray border above the image be at the very top of the page but the black gap would remain.
 
tim_m said:
that's not the issue. the issue is within the gray border. making the body's margin-top 0 would make the gray border above the image be at the very top of the page but the black gap would remain.
Click to expand...

yeah that's exactly what happened, it's really weird I went through and adjusted each margin one at a time and then refreshed the page to see if it changed the position of the header and it didn't! lol non of them did :confused:
 
You must log in or register to reply here.
Back
Top