Have I done something wrong?

Jet · 5 Nov 2006 at 03:40

I'm redesiging with CSS, etc, but hit my first snag. I've positioned a logo in the top left using an external style sheet, since it will be on every page of the site. It displays ok in Dreamweaver but when I preview in the browser it doesn't display. Is this normal? Because of the way CSS works or because it's an external style sheet and won't load with the preview? I can post the code/CSS if needed.

2nd question. If I want to centre the full website is there anything wrong with creating a div which is centered, etc, and putting everything else into this div?

Thanks.

growse · 5 Nov 2006 at 03:58

1) Post your code - not a lot anyone can do without seeing what's going on.

2) No problem at all. Divs are containers, you're meant to put stuff in them.

TerraS · 5 Nov 2006 at 06:01

<div id="container" style="margin: auto; width: 770px;">
This is the correct way to centre a block-level element, like a DIV.
</div>

gord · 5 Nov 2006 at 11:54

Not to be confused though as TerraS is putting the styling into the HTML not an external css.

TerraS · 5 Nov 2006 at 12:51

Sorry, I was gonna write that in the post, but I got distracted..

Always try to put the CSS in an external stylesheet - I just used an inline style to illustrate a point.

Jet · 5 Nov 2006 at 13:21

Yep, I've learnt enough CSS I think to know when to use the different types. I hope.

Here's the code, not much done so far as you can see lol.

Code:

<!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=ISO-8859-1" />
<title>****</title>
<link href="assets/styles.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="logo"></div>
</body>
</html>

Code:

/* CSS Document */

#logo {
	position:absolute;
	left:3px;
	top:3px;
	width:140px;
	height:84px;
	z-index:1;
	background-image: url(images/mainlogo.jpg);
}

growse · 5 Nov 2006 at 15:02

1) Don't use absolute positioning unless you're 100% sure you need it. If you just want the image to be 3px from the top and left of the screen, use a margin instead.

2) Don't use a z-index unless you've got overlapping divs. You havn't here, so it's just unnecessary data

3) The background image URL is relative to the stylesheet file's location, so make sure that everything's in the right place. Also, I'm not sure, but you may need quotes around the url in background-image. I always do that and have never run into problems, but I can't say for certain whether or not browsers are picky about this.

Jet · 5 Nov 2006 at 15:55

Thanks a lot Growse, i've made those changes. Dreamweaver inserts the position, z-index things when I create a layer (div). I've took it out and used margin instead. It now displays properly, maybe the quotes are required.

Do you know of any chart showing what each of the different attributes actually mean, like z-index and what effect the various options have, like positioning absoute, relative, etc?

Thanks again.

growse · 5 Nov 2006 at 22:32

Jet said:
Thanks a lot Growse, i've made those changes. Dreamweaver inserts the position, z-index things when I create a layer (div). I've took it out and used margin instead. It now displays properly, maybe the quotes are required.

Do you know of any chart showing what each of the different attributes actually mean, like z-index and what effect the various options have, like positioning absoute, relative, etc?

Thanks again.

Generally, the elements will be rendered from left to right going down the screen. Therefore two elements on the page will be rendered one above the other. You can put stuff on the same row as other stuff by using float.

The position attribute overrides this, so setting it to absolute means it will go where you tell it, regardless of what else is going on with the page. Usually, there's a better way of doing this, so if you're using it, in my opinion you're probably using it wrong. Unless you have very specific reasons and purposes for it.

Z-index determines what is shown on top when you have overlapping elements. Again, not used often unless you're positioning stuff yourself. Which I still think is generally a bad idea