Forum Moderators: not2easy
I went so far as to create a spacer div with a background in hopes of getting it to show up correctly, still no luck. It works if I set an actual height for the spacer gif in the div, but not if I set a percentage
Here's the basic source code for the page without any text:
<body>
<div align="center">
<div id="container">
<div id="background"><img src="/images/spacer.gif" alt="" /></div>
</div>
</div>
</body>
And here's the basic style sheet. I kludged in some of Doodle's code from another thread, and it still didn't work.
* {
margin:0;
padding:0;
border:none;
z-index:0;
}html, body {
height:100%;
min-height: 100%;
}body {
background-color:#776247;
background-image: url(/images/back.jpg);
background-repeat: repeat;
color: #444444;
font-family: arial, verdana, helvetica, sans-serif;
}#background {
background-image: url(/images/back_label2.gif);
background-repeat:repeat-y;
z-index:3;
min-height: 100%;
margin-bottom:-100px;
width: 762px;
}#background img {
height: 100%;
min-height: 100%;
margin-bottom:-100px;
}#container {
position:relative;
background-image: url(/images/back_label2.gif);
z-index:5;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
min-height: 100%;
margin-bottom:-100px;
width: 762px;
}
I look forward to an end to this maddening problem. Thanks in advance to anyone who can help me out.
What type of layout are you trying to create? I know you've got the very basic of stuff here...but there's several reasons why exactly what you posted won't show the container's background - one biggie is that there's vitually no content in the container div itself, so it's not expanding so you can see the background in the first place.
If you put in a width and height for your spacer.gif (no, percentage won't work, because it's basing the image width and height on the containing div - which, without any specifics on it's own, is nothing until soemthing makes it bigger), then the container expands and you can see some stuff - I see both backgrouns just fine, but the image itself is falling outside of the #container.
There's some very funky thigns going on here - especially in your stylesheet - but in all honesty, you 're not being very clear on what, exactly, the issue *is*. What do you want this code to do, in the end? Are you trying to accomplish a 2 column layout? 2 column? 100% height? I'm seeing it's fixed-width and centered, (and there's better ways to do that than how you've done it here) - but unless we can know what the end result is *supposed* to be, I don't think much we say will help fix anything...
So can you clear it up a bit and tell us what you're trying to accomplosh in the end? :)
that way the <body> one will fill the entire stretch of the page, and the <div> one will just sit behind whatever content is contained in it.
The page code I started with looks something like this:
<body>
<div align="center">
<div id="container">
<div id="tmpmast">Mast graphic
<div>
<div id="tmplinks">left side navbar
</div>
<div id="tmpcontent">Main text area
</div>
</div>
</div>
</body>
So I tried to put a background on container but it didn't go 100% height. So then I added the <div id=background> to it and set the height to 800 and it worked fine, problem was, lower level pages stretch past 800 pixels.
So how do I get the container which holds the other divs to take a background and work?
ie
<body>
<div id="container">
<div id="tmpmast">Mast graphic
<div>
<div id="tmplinks">left side navbar
</div>
<div id="tmpcontent">Main text area
</div>
</div>
</div>
<hr style="clear:all" />
</div>
</body>
but you could do that same thing with less divs.
all you really need is
<body>
<div id="header"></div>
<div id="leftsidebar"></div>
<div id="maintextarea"></div>
</body>
position the divs absolutely (which will be fine, because you have no footer), and then just apply a background to the body tag.
if you want to centre it all then all you need is
margin:0 auto
or put margins, or put padding on the <body> tag, or <html> tag. you don't need another div wrapped around it all.
Ok so to give you some idea about what I'm trying to accomplish, imagine if you will a Christmas present. You've got the wrapping paper which is one tile, and you've got the ribbon which is another tile. I want my content to go on the ribbon, and I meanwhile want my wrapping paper to tile underneath it.
I can make it one long background, but only if I left align the box. I want the ribbon centered.
Since I left out how the contents are laid out so you can understand that this isn't a float, here's what I'm working with:
#tmpmast
{
position:absolute;
left:89px;
top:5px;
width:650px;
height:75px;
z-index:10;
}
#tmplinks
{
position:absolute;
left:0px;
top:98px;
width:118px;
padding: 8px 4px 15px 6px;
background:#FFFFFF;
border: 2px #666666 inset;
color: #6A1E25;
z-index:20;
font-family:"Courier New", Courier, mono;
font-size:9pt;
text-align:left;
line-height: 10pt;
}
#tmplinks dl
{
list-style-type:none;
margin: 5px 2px 13px 8px;
}
#tmplinks dt
{
margin:0px 0px 7px 0px;
padding:0px 0px 0px 0px;
}
#tmpcontent
{
position:absolute;
left:145px;
top:110px;
width:596px;
z-index:30;
text-align:left;
font-size:.85em;
}
If so, yeah - you're oging about it a bit wrong. :) If that *is* what you're looking for, let me know - there's several posts just over the past few days that answer this question...but I want to be sure that's what you're looking for.
Header: fixed width/height, no background so the background below it shows through
Left: fixed width, height defined by its content rather than the content of the tallest div.
Right: fixed width, height dependent on content
Really just a centered, fixed width, 2 columns with a header with the following caveats.Header: fixed width/height, no background so the background below it shows through
Left: fixed width, height defined by its content rather than the content of the tallest div.
Right: fixed width, height dependent on content
Then I think you're overthinking your project a bit ;)
HTML<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”><head>
<title></title>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />
<meta name=”description” content=”" />
<meta name=”keywords” content=”" />
<meta name=”copyright” content=”Copyright 2005″ />
<meta name=”author” content=”" />
<meta http-equiv=”imagetoolbar” content=”no” />
<meta name=”MSSmartTagsPreventParsing” content=”true” />
<link rel=”stylesheet” href=”global.css” />
</head>
<body><div id="wrapper">
<div id="header">
</div> <!– closing header div –><div id="content">
<div id="sidebar">
</div> <!– closing sidebar div –><div id="main">
</div> <!– closing main div –></div> <!– closing content div –>
<hr />
</div> <!– closing wrapper div –>
</body>
</html>
global.css/* ————— Defaults ————— */
* {
padding:0;
margin:0;
border:0;
}body {
font-family:Arial, Helvetica, sans-serif;
font-size:80%;
color:#000;
background:#eee;
text-align:center;
}div {
text-align:left;
}/* ————— Div ID’s ————— */
#content {
width:768px;
background:trnasparent;
}#header {
width:748px;
height:75px;
padding:10px;
background:transparent;
}#main {
background:transparent;
width:550px;
padding:10px;
float:right;
}#sidebar {
background:transparent;
width:180px;
padding:10px;
float:left;
}#wrapper {
width:768px;
border:solid 1px #000;
margin:0 auto;
}hr {
clear:both;
display:block;
visibility:hidden;
}
Pretty simple :) Just edit to change borders, backgrounds, padding, etc. as needed. If you need it to be 100% in height, let me know :)
THANKS SO MUCH!
