Forum Moderators: not2easy
I have a problem with the div layer background. It was working well, but after I added the Doctype declaration, the background disappeared. (I'm using Firefox, haven't checked in other browsers yet)
Ok, this is the DTD:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
and here is the part of the CSS:
div#content {
margin-left: auto;
margin-right: auto;
background: url(images/top.jpg) no-repeat;
width: 693px;
height: auto
}
div#nav {
float: left;
width: 166px;
margin-left: 27px;
margin-top: 271px;
padding-bottom: 30px
}
div#main {
float: right;
width: 382px;
margin-right: 38px;
margin-top: 260px;
padding-bottom: 30px
}
Now, I know that the content also has to "float" in order to show the background (I read it on the forum before), but I want to align it in the center of the screen. Can this be done?
The layout is both valid XHTML and valid CSS.
and a warm welcome to these forums. ;)
You cannot use height:auto. For a background-image to display,
it will require both width and height values to be defined.
birdbrain
I know that the content also has to "float" in order to show the background (I read it on the forum before), but I want to align it in the center of the screen. Can this be done?
You are right about this...something must be done to make the container div expand an enclose it's floated children. There are several options.
One, is to do as you mention and float the parent container. This forces it to expand and enclose it's floated children, but as you mention makes centering tricky since you can't center a floated element. If you want to use the "float-the-parent" solution, you can acheive centering by wrapping that parent in a container div and assign it a width equal to that of the float and auto left/right margins. This container's purpose is ONLY to center, so it won't have any borders or backgrounds that need to surround it's content, which means it can remain unfloated, will center nicely, and will bring the floated content with it into the middle.
Two, rather than float the container, add a clearing element to the bottom of the parent. Many people use a simple <br />, attaching a class name to it and assigning a clear:both property. This <br /> is placed after the last float in the container, but before the parent's closing tag. It will prop open the container. There is also a way to do this without adding extra code [positioniseverything.net].
Three, there has been some experimentation [webmasterworld.com] with using the overflow property to contain floats. Setting overfow to anythign other than visible has some success in making parent containers enclose floated children. See that thread for more details.
With either of the last two methods, you should be able to center the container div normally.
cEM
You cannot use height:auto. For a background-image to display,
it will require both width and height values to be defined.
I used height: 100% first, and the validator accepted it, but Dreamweaver doesn't allow percentages in layer sizes, so I switched it to auto.
If you want to use the "float-the-parent" solution, you can acheive centering by wrapping that parent in a container div and assign it a width equal to that of the float and auto left/right margins. This container's purpose is ONLY to center, so it won't have any borders or backgrounds that need to surround it's content, which means it can remain unfloated, will center nicely, and will bring the floated content with it into the middle.
I actually thought of this a few minutes before I got your reply :) And I think I'll do that, since this design will be a downloadable one, I want to make it as easy for my visitors as I can.
Thank you very much for your warm welcome, for replying so fast and for being so helpfull ;)
