Back To Website Design Forum

DIV layer BG issues

  • Okashiko
  • Born
  • Born
  • User avatar
  • Joined: Mar 12, 2008
  • Posts: 2
  • Loc: Rhode Island
  • Status: Offline

Post March 12th, 2008, 8:46 pm

Ok, so here's my problem: In spite of having W3C valid HTML/CSS, none of my background images for my div layers are showing up when I try to view my page in my browser. I've used Safari and Firefox, and got the same problem both times.
Here's the code:
HTML Code: [ Select ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sweet Surrender</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
 
 
<body>
 
 
<div style="left: 0px; top: 0px; width: 200px; position: absolute; background-image: url(SS01.jpg);">
 </div>
<div style="left: 0px; top: 347px; position: absolute; background-image: url(SS09.gif);">
</div>
<div style="left: 358px; top: 0px; position: absolute; background-image: url(SS02.jpg);">
</div>
<div style="left: 508px; top: 0px; position: absolute; background-image: url(SS03.jpg);">
</div>
<div style="left: 508px; top: 390px; position: absolute; background-image: url(SS010.gif);">
</div>
<div style="left: 508px; top: 94px; position: absolute; background-image: url(SS06.gif);">
</div>
<div style="left: 508px; top: 57px; position: absolute; background-image: url(SS05.jpg);">
</div>
<div style="left: 849px; top: 95px; position: absolute; background-image: url(SS08.gif);">
</div>
 
 
</body>
</html>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <title>Sweet Surrender</title>
  5. <link rel="stylesheet" type="text/css" href="style.css">
  6. </head>
  7.  
  8.  
  9. <body>
  10.  
  11.  
  12. <div style="left: 0px; top: 0px; width: 200px; position: absolute; background-image: url(SS01.jpg);">
  13.  </div>
  14. <div style="left: 0px; top: 347px; position: absolute; background-image: url(SS09.gif);">
  15. </div>
  16. <div style="left: 358px; top: 0px; position: absolute; background-image: url(SS02.jpg);">
  17. </div>
  18. <div style="left: 508px; top: 0px; position: absolute; background-image: url(SS03.jpg);">
  19. </div>
  20. <div style="left: 508px; top: 390px; position: absolute; background-image: url(SS010.gif);">
  21. </div>
  22. <div style="left: 508px; top: 94px; position: absolute; background-image: url(SS06.gif);">
  23. </div>
  24. <div style="left: 508px; top: 57px; position: absolute; background-image: url(SS05.jpg);">
  25. </div>
  26. <div style="left: 849px; top: 95px; position: absolute; background-image: url(SS08.gif);">
  27. </div>
  28.  
  29.  
  30. </body>
  31. </html>

What I get out of that is this:
http://www.sweet-okashi.net/ss/singh.html
What my page is supposed to look like is this: http://sweet-okashi.net/ss/SS.jpg

I honestly don't know what I'm doing wrong here. Ever since I tried that background-image attribute, my layout has disappeared in its entirety.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post March 12th, 2008, 8:46 pm

  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13458
  • Loc: Florida
  • Status: Offline

Post March 12th, 2008, 9:14 pm

Do any of them have a height defined in style.css ?

I don't see any childnodes which would automaticly imply a height, so a height would need to be defined in the CSS for each of the <div> elements.
Strong with this one, the sudo is.
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Joined: Sep 22, 2003
  • Posts: 6134
  • Loc: Seattle, WA
  • Status: Offline

Post March 12th, 2008, 9:39 pm

It's also good practice to put your image filenames in single quotes:

Code: [ Select ]
background-image: url('SS03.jpg');
The Beer Monocle. Classy.
  • Okashiko
  • Born
  • Born
  • User avatar
  • Joined: Mar 12, 2008
  • Posts: 2
  • Loc: Rhode Island
  • Status: Offline

Post March 13th, 2008, 9:32 am

Thanks, Joebert! That solved the problem quite nicely.
This is the first time I've tried doing my layout like this with div layers, instead of the tables that Photoshop automatically generates.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post March 13th, 2008, 12:47 pm

Okashiko wrote:
Thanks, Joebert! That solved the problem quite nicely.
This is the first time I've tried doing my layout like this with div layers, instead of the tables that Photoshop automatically generates.

Yeah, that's a very big step ... in the right direction ... good on you ...
Let's leave all our *plum* where it is and go live in the jungle ...

Page 1 of 1

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 94 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.