Missing background Image... (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

Nicole -> Missing background Image... (6/1/2006 4:20:43)

I'm amazed at how smoothly things have gone today, still learning CSS layout and colouring div backgrounds and seeing what happens when adding and removing different styles.

With the code below though, I've set an arbitrary height for the container just to see how it'll look when the page has content, last thing I did today was remove alll div heights because I felt I was at a point with my learning where they were unnecessary.

But,

Viewing in all major browsers once these heights were removed, I lost the background image for the container in all decent browsers, only in IE did it remain and I'm not sure why, nor am I sure that this won't happen when real content is added.

Sorry I can't post a URL right now, but will this code do? 

<!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></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<style>

body {
	margin: 0;
	padding: 0 0 0 0;
	background: #9baabf;
	text-align: center;
}

.top {
	font-size: 0px;
	background: url('images/top.gif') no-repeat; 
	margin: 0 auto; 
	width: 740px;
	height: 18px; 
	padding: 0; 
}

.middle {
	background: #fff url('images/content.gif') repeat-y;
	margin: 0 auto;
	width: 740px;
	height: 700px;
	padding: 0;
}

.container {
	width: 716px;
	margin: 0 auto;
	background-color: #000000;
}

.bottom {
	clear: both;
	background: url('images/bottom.gif') no-repeat;
	margin: 0 auto;
	width: 740px;
	height: 18px;
	padding: 0;
}

.skip {
	width: 716px;
	background-color: #0000ff;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

.skip p {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 0.675em;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	color: #444;
	background-color: #fff;
	text-align: left;
	margin: 0 0 0 0;
	padding: 8px 0 8px 16px;
}

.skip a:link, a:visited {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 1em;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	color: #444;
	background-color: #fff;
}

.skip a:hover, a:focus {
	color: #000;
	text-decoration: underline;
}

.banner {
	width: 716px;
	height: 100px;
	background: #ff0000 url('images/banner.gif') no-repeat top center;
}

.menu {
	width: 200px;
	background-color: #00ff00;
	float: left;
}

.content {
	width: 516px;
	background-color: #ff0000;
	float: right;
}

.content p {
	color: #444;
	background-color: #ff0000;
	text-align: left;
	margin: 0 0 0 0;
	padding: 16px 0 0 16px;
}

.footer {
	background-color: #9baabf;
	width: 716px;
	height: 50px;
	margin: 0 auto;
}

.footer p {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 0.675em;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	color: #000;
	background-color: #9baabf;
	text-align: center;
	margin: 0 0 0 0;
	padding: 8px 0 8px 16px;
}

.footer a:link, a:visited {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 1em;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	color: #000;
	background-color: #9baabf;
}

.footer a:hover, a:focus {
	color: #000;
	text-decoration: underline;
}

</style>
<body>
<div class="top"></div><!-- end top div -->

<div class="middle">

<div class="container">

<div class="skip"><p><a href="#main">Skip To Content</a>  |  <a href="accessibility.asp">Accessibility</a>  |  <a href="site-map.asp">Site Map</a></p></div><!-- end skip navigation -->

<div class="banner"></div><!-- end banner -->

<div class="content">

<p>Test</p>

</div><!-- end content -->

<div class="menu">

<p>text</p>

</div><!-- end left navigation -->

</div><!-- end container div -->

</div><!-- end middle div -->

<div class="bottom"></div><!-- end bottom div -->
<div class="footer">

<p>Address and Phone Number<br />

<a href="terms.asp">Terms of Use</a>  |  
<a href="privacy.asp">Privacy Policy</a> | 
Copyright 2005-2006 Company  | Website Design by <a href="http://www.nixdesign.com.au">NixDesign</a></p>

</div><!-- end footer div -->

</body>

</html>


Just to be confusing (really because i make a mistake with the original div called "container" and it's background image), the problem is happening in the div called "middle" and the background image is called "content.gif"

Missing background image:




BonRouge -> RE: Missing background Image... (6/1/2006 7:09:25)

Looks fine to me... http://bonrouge.com/test/nicole.htm



Nicole -> RE: Missing background Image... (6/1/2006 7:29:51)

Thanks Bonrouge for testing it, but if you take out the height in the "middle" div, the background goes with it.

The height I put there was only an arbitrary figure and will eventually be determined by the amount of content. Using the "Edit CSS" feature of the Firefox Web Developer toolbar, if you take the "height: 700px; out you'll see this happen in Firefox, it also happens in Netscape, Opera and Mozilla.

Thanks for looking into it.

Nicole



Tailslide -> RE: Missing background Image... (6/1/2006 7:38:34)

That's correct behaviour - if there's no content and no specified height then the div has no physical height and therefore you don't see a background.

You can try adding a min-height rule if you want to maintain a certain size div but I'll give you three guesses which browser doesn't understand min-height! There are ways around that BUT it's not clear if IE7 will understand either min-height or the hacks (last time I checked anyway!).



Nicole -> RE: Missing background Image... (6/1/2006 7:44:34)

Thanks Tail,

So what's the solution then? Will it all work out in the wash when there's real content in there and I've specified a height of say 100%? Or have I given the wrong div's the background image?

Nicole



Tailslide -> RE: Missing background Image... (6/1/2006 7:48:39)

It does depend usually on the final effect you're after as to whether it's better to have the repeating background on the body element (and therefore full page height) or the various content divs. If you're after an isolated box look then you need to put the backgrounds on the divs themselves really.

Assuming you get your top shadow image on a header or something and the bottom shadow image on the footer (to recreate that box effect from the other day) then it will look fine once the content is in the middle bit.

The other thing is once you have your content in there'll be nothing stopping you fiddling around with the background images to see what different effects are. That's the beauty of CSS - 30 seconds of copy delete paste and you've moved the background onto something else. Don't like it? Undo undo undo!

You won't need to specify height 100% either. It should all fit together neatly according the size of the content.



Nicole -> RE: Missing background Image... (6/1/2006 8:12:02)

Thanks Tail, and thanks Bonrouge,

I'm still learning, and still learning a lot.

I get frustrated a lot, especially knowing how to do things with tables, but the thing that keeps me going really is that i can see from the amount of resources out there that so much more is possible with CSS layout.

Looking at sites like CSS Play, A List Apart, Position is Everything and others just by typing my problem into google, and looking at that W3C sites site I can see that It'll just "click" one day and I'll know nothing but CSS layout.

In the interim, can I just apologise for the amount of questions I'm posting on these forums without seemingly giving any feedback to others. What goes around comes around as they say, and when my mind isn't so jumbled with alll things CSS I'll begin helping others again.

Nicole



caz -> RE: Missing background Image... (6/1/2006 8:39:05)

Nicole, I tend to make a lot of use of the Lorem Ipsum Generator extension on Firefox in the initial stages of design - it saves a lot of time for me. Just copies straight to the clipboard so eliminating the cut bit of cut'n'paste [;)].



rdouglass -> RE: Missing background Image... (6/1/2006 9:16:59)

I have had some sucess floating a 1 px wide transparent gif making it whatever minimum high I want the box to be. Seems to work most times for IE and FF.

</$.02>



Tailslide -> RE: Missing background Image... (6/1/2006 9:25:40)

quote:

ORIGINAL: Nicole


I get frustrated a lot, especially knowing how to do things with tables, but the thing that keeps me going really is that i can see from the amount of resources out there that so much more is possible with CSS layout.



It's important to try to get away from the table cell way of thinking with CSS layouts - it's a much more fluid way of working.

While you're learning and testing stuff out I'd agree with Caz about using Lorem Ipsum to fill it all out. Once you get onto building work sites with it you may well switch the work order around.

I tend to put the content in first using the appropriate markup - then style it afterwards. I find this easier as far as experimenting plus it means that the you're building the look to suit the content not the other way around which is how it should be (in my mind at least).



caz -> RE: Missing background Image... (6/1/2006 9:58:58)

Yes, in an ideal world starting with the content and then styling/layout works well, but Lorem Ipsum is still a must for the usual slow delivery of client content. [:D]



BonRouge -> RE: Missing background Image... (6/2/2006 1:30:16)

I'd agree with Tailslide there, although I'm sure caz has a point too. Ideally you'll have some content to work with rather than going from an empty shell.
As far as the height thing goes, most pages have enough content to make the page look OK, but sometimes when there is very little content, you want the page to still fill the full length of the screen. If you want to do that, here's one way: http://bonrouge.com/2c-hf-fixed.php?nc (remove the '?nc' from the url for the explanation).



Nicole -> RE: Missing background Image... (6/3/2006 4:01:06)

Well it's not missing anymore, but it is misaligned. Here's my CSS: 

body {
	margin: 0 auto;
	padding: 0 0 0 0;
	background: #9baabf url('images/content.gif') repeat-y top center;
	text-align: center;
}

.top {
	font-size: 0px;
	background: url('images/top.gif') no-repeat; 
	margin: 0 auto; 
	width: 740px;
	height: 18px; 
	padding: 0; 
}

.container {
	width: 716px;
	margin: 0 auto;
	background-color: #000000;
}

.bottom {
	clear: both;
	background: url('images/bottom.gif') no-repeat;
	margin: 0 auto;
	width: 740px;
	height: 18px;
	padding: 0;
}

.skip {
	width: 716px;
	background-color: #0000ff;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

.skip p {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 0.675em;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	color: #444;
	background-color: #fff;
	text-align: left;
	margin: 0 0 0 0;
	padding: 8px 0 8px 16px;
}

.skip a:link, a:visited {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 1em;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	color: #444;
	background-color: #fff;
}

.skip a:hover, a:focus {
	color: #000;
	text-decoration: underline;
}

.banner {
	width: 716px;
	height: 100px;
	background: #ff0000 url('images/image.gif') no-repeat top center;
}

.menu {
	width: 200px;
	height: 100%;
	background-color: #fff;
	float: left;
}

.content {
	width: 450px;
	background-color: #fff;
	float: right;
}

.content p {
	color: #444;
	background-color: #fff;
	text-align: left;
	margin: 0 0 0 0;
	padding: 16px 0 0 16px;
}

h1 {
	color: #7a052c; 
	text-decoration: none; 
	font-size: 1.75em; 
	letter-spacing: 0.15em;
	font-family: "times new roman", arial, verdana, helvetica, sans-serif;
	font-weight: normal;
	text-align: left;
	margin: 0 0 0 16px;
}

h2 {
	color: #7a052c; 
	text-decoration: none; 
	font-size: 1.25em; 
	letter-spacing: 0.15em;
	line-height: 1.5;
	font-family: "times new roman", arial, verdana, helvetica, sans-serif;
	font-weight: normal;
	text-align: left;
	margin: 24px 0 12px 16px;
}

h3 {
	color: #7a052c; 
	text-decoration: none; 
	font-size: 0.9em; 
	letter-spacing: 0.075em;
	line-height: 1.5;
	font-family: verdana, arial, helvetica, sans-serif;
	font-weight: normal;
	text-align: left;
	margin: 16px 0 8px 16px;
}

p { 
	color: #444; 
	font-size: 0.75em; 
	line-height: 1.5;
	font-family: verdana, arial, helvetica, sans-serif;
	font-weight: normal;
	text-align: left;
	background-color: #fff;
	margin: 16px 0 0 0;
}

.menu ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.menu li {
	margin: 0 0 .3em 0;
}

.menu a {
	color: #444;
	background-color: #ebebeb;
	font-size: 0.75em;
	display: block;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	border: 1px solid #ccc;
	text-decoration: none;
	width: 140px;
	padding: .3em .8em;
	text-align: left;
}

.menu a:hover {
	background-color: #f3d5e5;
	color: #333;
}

.footer {
	background-color: #9baabf;
	width: 740px;
	height: 50px;
	margin: 0 auto;
}

.footer p {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 0.675em;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	color: #000;
	background-color: #9baabf;
	text-align: center;
	margin: 0 0 0 0;
	padding: 8px 0 8px 16px;
}

.footer a:link, a:visited {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 1em;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	color: #000;
	background-color: #9baabf;
}

.footer a:hover, a:focus {
	color: #000;
	text-decoration: underline;
}


and the HTML: 

<body>
<div class="top"></div><!-- end top div -->

<div class="container">

<div class="skip"><p><a href="#main">Skip To Content</a>  |  <a href="accessibility.asp">Accessibility</a>  |  <a href="site-map.asp">Site Map</a></p></div><!-- end skip navigation -->

<div class="banner"></div><!-- end banner -->

<div class="content">

       <h1>Heading</h1>
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

</div><!-- end content -->

<div class="menu">

<ul>
   <li><a href="#">LINK</a></li>
   <li><a href="#">LINK</a></li>
   <li><a href="#">LINK</a></li>
   <li><a href="#">LINK</a></li>
   <li><a href="#">LINK</a></li>
   <li><a href="#">LINK</a></li>
   <li><a href="#">LINK</a></li>
   <li><a href="#">LINK</a></li>
   <li><a href="#">LINK</a></li>
   <li><a href="#">LINK</a></li>
   <li><a href="#">LINK</a></li>
   <li><a href="#">LINK</a></li>
</ul>

</div><!-- end left navigation -->

</div><!-- end container div -->

<div class="bottom"></div><!-- end bottom div -->
<div class="footer">

<p>Footer Information<br />
<a href="terms.asp">Terms of Use</a>  |  
<a href="privacy.asp">Privacy Policy</a> | 
Copyright 2005-2006 Company Name  | Website Design by <a href="http://www.nixdesign.com.au">NixDesign</a></p>

</div><!-- end footer div -->

</body>

</html>


I've been at ill day and have taken out every single piece of CSS and HTML one by one and put them back one by one and just can't figure it out. The misalignment is occuring in all decent browsers.

Thanks

Nicole



Nicole -> RE: Missing background Image... (6/3/2006 4:19:28)

The thing is.... When I delete the menu and content, the problem moves up to the banner. If I remove the banner, it moves up to the skip links...



Tailslide -> RE: Missing background Image... (6/3/2006 4:33:44)

Couple of things which may or may not help but I'd look into:

1. The divs containing the background images top and bottom appear to be smaller than the images themselves (740px whereas the images are 742px wide).
2. I'd personally use ids rather than classes for the big, unique bits of page - they outweight classes and would be the better choice.
3. Currently you're basically using margin:0 auto to align the various bits of page in the centre. Although, strictly speaking not wrong, I find it harder to control everything doing that. If you want a central box then I'd suggest sticking everything in a single div and then margin: 0 auto that. Then you don't need to worry about horizontal margins at all for the contained divs.
4. The body element is automatically centred so you don't need to put auto on there for margins - just margin:0 will do.

Also - when you get it all aligned properly you do know that you'll still have visible background image below the footer don't you? If you want the box effect then you need to put the main background image on one of the divs not on the body.



Nicole -> RE: Missing background Image... (6/3/2006 4:37:59)

Thanks Tail, I'll look into those things.

quote:

Also - when you get it all aligned properly you do know that you'll still have visible background image below the footer don't you? If you want the box effect then you need to put the main background image on one of the divs not on the body.


That's where I had it, as the background for the container div but it was going missing when I added content in there?



Tailslide -> RE: Missing background Image... (6/3/2006 5:47:06)

Oh ok I know what's happening. When you put the background on the wrapping div it wasn't showing up because most of the content within that div is floated and so removed from the flow of the document. The div "thinks" it doesn't have any contents and therefore doesn't show any background.

You can either add the clearfix class to the containing div or add overflow:hidden to the containing div. that'll sort it out.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625