Member Avatar for Draucia

I'm new to html and css, and I'm trying to code a website (layout images already made in photoshop).

Here's my html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<link rel="stylesheet" type="text/css" href="style.css" />
		<title>Title (removed)</title>
	</head>
	
	<body>
		<div id="wrapper">
			<div id="header">&nbsp;</div>
			<div id="underheader">&nbsp;</div>
			<div id="content">&nbsp;</div>
		</div>
		
	</body>
</html>

Here's my css:

#wrapper {
	width: auto;
	height:2621px;
}
#header {
	width:auto;
	height:315px;
	background-image: url('http://piclion.com/images/header1.gif');
	background-size: 100%;
	background-repeat:no-repeat;
}
#under header {
	width:auto;
	height:107px;
	background-image:url('http://piclion.com/images/underheade.gif');
	background-repeat:repeat-x;
	}
#content{
	background-image:url('http://piclion.com/images/contentsli.gif');
}

Images have been uploaded to a image hosting website, and site title/header has been removed.

My problem is that I can't get a bar under the header to appear. I made a thin slice of blue and I want it to repeat along the screen under the header. I also want a big area for the content. It will not show/repeat either. What am I doing wrong here? Sorry I am very new at this.

Edited by Draucia because: n/a
  • 6 Contributors
  • 9 Replies
  • 141 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by shaya4207
Member Avatar for rangerfanger3

Wrong thread, sorry.

Edited by rangerfanger3 because: n/a
Member Avatar for Draucia

^
He said wrong thread.

Edited by Draucia because: n/a
Member Avatar for shaya4207

Welcome to the fun world of Web Development...

First of all, in your CSS on line 12 you have '#under header {', that should be '#underheader {' without a space, since that's the name you gave it in the HTML.

Second, you should probably give all the '<div>'s a width rather than leaving it at 'auto'.

Third, you didn't give the '#content' a width, AND you didn't tell it to 'repeat-x' so it won't come up or repeat.

Fourth, the background image you put for '#content' is the same height as the '#wrapper', you'd probably want to put it there.

Fifth, and that's just a suggestion, instead of using 'background-image', 'background-position' and 'background-repeat' there's a short-hand version, which is 'background: url('the url of the image') top left no-repeat;' (top left, being the 'background-position', and no-repeat being the 'background-repeat')...

Hope this helps ;)

Member Avatar for ciint

You just Set Image Property Repeat-X,Repeat-Y in CSS for proper display image in Div.

Member Avatar for Arkinder

^
He said wrong thread.

He simply meant that he posted in the wrong thread. Fix the errors in your HTML as shaya suggested, and let us know.


Regards, Arkinder

Member Avatar for Draucia

For some reason it won't let me edit thread. I followed your advice shay. I didn't change it to url('xxxx') repeat-x, because I like the other way and I think it's more organized. I kept it all auto because I want my website to adjust depending on computer resolution (it changes, whenever I resize the browser window so that's a plus). I got the content slice bg (long one) to appear, but still can't get "#underheader" to appear.

Html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<link rel="stylesheet" type="text/css" href="style.css" />
		<title>BslndUSA</title>
	</head>
	
	<body>
		<div id="wrapper">
			<div id="header">&nbsp;</div>
			<div id="underheader">&nbsp;</div>
			<div id="content">&nbsp;</div>
		</div>
		
	</body>
</html>

CSS:

#wrapper {
	width:auto;
	height:2621px;
	background-image:url('http://piclion.com/images/contentsli.gif');
	background-repeat:repeat-x;
}
#header {
	width:auto;
	height:315px;
	background-image: url('ttp://piclion.com/images/header1.gif');
	background-repeat:no-repeat;
	background-size: 100%;
}
#underheader {
	width:auto;
	height:107px;
	background-image:url('http://piclion.com/images/underheade.gif');
	background-repeat:repeat-x;
	}
#content {
}
Member Avatar for teedoff

You have several typoes, I think.... in your css. underHeader's background rule specifies an image named "underHeade.gif"....is that the correct spelling?

Also in header styles you url('ttp...missing an "h" there

Edited by teedoff because: n/a
Member Avatar for Draucia

You have several typoes, I think.... in your css. underHeader's background rule specifies an image named "underHeade.gif"....is that the correct spelling?

Also in header styles you url('ttp...missing an "h" there

Actually, yes it is. The file was already taken in the image uploading service, so it renamed it. Yes, I made a error in http:// but that shouldn't matter because in my local code (on my comp), it is url('images/header/'). No typos in local code. Thanks, though. Anyone else?

Member Avatar for shaya4207

I copy/pasted your code, and fixed the 'http' typo that teedoff mentioned, and works beautiful by me...

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.