PDA

View Full Version : Background and Layers :: Help!!



dsmflash
August 31st, 2007, 04:11 PM
Need a layer and CSS expert here. Trying to center layers.
I'm brand spanking new to layers and CSS. I'm designing a site where each page has a large image as the background, and the image is different for each page. Naturally, I do not want to slice around everything and break up the image. In Dreamweaver, I want to set the large image as background and then lay the other components (logo, nav bar, etc.) on top of it with layers.
I read the Kirupa tutorial on "Centering Content" and it sounded easy, but its not.
Where does this code go in relation to the head and body? When I tried it, the code actually showed up as text on my page in the browswer. Do I just actually create a new CSS rule and apply it to all the layers I want centered?
/* external CSS */ div#container{ margin: 0 auto; width: 550px; } <!-- (X)HTML code --> <div id="container"> <p>this is centered!</p> </div> Please help and thank you in advance for any replies.:}

Surrogate
September 1st, 2007, 10:43 PM
Naturally? So you'd like the browser to download say 800x600 (480000 pixels) rather than an repeating 800x1 (800 pixels) image? Think size - the smaller images, the faster the side will load.

CSS:


#Root
{
margin: 0 auto;
width: 750px;
}
#Header
{
background-image: url("horizontal-looped-image.gif");
}
#Content {
float: left;
width: 600px;
background-image: url("vertical-looped-image.gif");
}
#Navigation
{
float: right;
width: 150px;
background-image: url("vertical-looped-image2.gif");
}
#Footer
{
clear: both;
background-image: url("horizontal-looped-image2.gif");
}
Page:


<div id="Root">
<div id="Header">
<img src="logo.gif" alt="Logo"/>
</div>
<div id="Content">
<h1>Page title</h1>
<p>Some text.</p>
</div>
<div id="Navigation">
<a href="#">Link</a>
</div>
<div id="Footer">
Site by Someone.
</div>
</div>
Complete 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>
<title>Some page.</title>
<style type="text/css">
#Root
{
margin: 0 auto;
width: 750px;
}
#Header
{
background-image: url("horizontal-looped-image.gif");
}
#Content {
float: left;
width: 600px;
background-image: url("vertical-looped-image.gif");
}
#Navigation
{
float: right;
width: 150px;
background-image: url("vertical-looped-image2.gif");
}
#Footer
{
clear: both;
background-image: url("horizontal-looped-image2.gif");
}
</style>
</head>
<body>

<div id="Root">
<div id="Header">
<img src="logo.gif" alt="Logo"/>
</div>
<div id="Content">
<h1>Page title</h1>
<p>Some text.</p>
</div>
<div id="Navigation">
<a href="#">Link</a>
</div>
<div id="Footer">
Site by Someone.
</div>
</div>

</body>
</html>