Google
HTML Tutorial


 Forum HomeForum Home   FAQFAQ   SearchSearch   MemberlistMemberlist   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
RegisterRegister - Not registered yet? Got something to say? Join HTML Code Tutorial!
Problems with a DIV Background
Post new topic   Reply to topic    HTML Help Forum Index -> CSS
View previous topic :: View next topic  
Author Message
Airick1994



Joined: 20 Dec 2007
Posts: 101
Location: Canada, eh?
PostPosted: Sun Apr 06, 2008 12:49 pm     Problems with a DIV Background Reply with quote
Before I state my problem, I just wanna say hi. If anyone remembers, I was a somewhat prequent poster a while ago, and sort of left after having huge issues with getting sites to work in different browsers. I have worked on that skill, and it is no longer a problem for me. So, hello agian.

Anyways. My problem is this:



Basically, I have a div with the green image spanning the entire body as a background. I also have (in my CSS) two other divs with images for the body and bottom of the body image. I actually have the divs placed into my XHTML file, and the css all good, AND both are validated. But for some reason, the body and bottom div images are not showing up.

I suspect that the body image will not show up because there are divs inside that div, although I didn't think that would be a problem, but I can't understand why the bottom div won't show up.

My XHTML:

Code:
<?xml version="1.0" encoding="utf-8" ?>
<!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">

<head>

<link rel="stylesheet" type="text/css" href="style.css" />

<title>Eric's Site :: Home</title>

</head>

<body>

<h3 style="float:left;margin: 0px 0px 0px 10px;">Eric's Site</h3>
<div class="navmargin">
<div class="about"><p style="margin-top:5px;"><a href="other.html">Other</a></p></div><div class="videos"><p style="margin-top:5px;"><a href="videos.html">Videos</a></p></div><div class="home"><p style="margin-top:5px;">Home</p></div>
</div>

<div class="greentop"></div>

<div class="greenbody">

<div class="left">

   <img src="images/buddywinkingbaw.gif" alt="MY PUPPY IS SO AWESOME." />

   <h2>
      Suggestions?<br /><br />
   </h2>

   <p>
      <a href="mailto:airick1994atsympatico.ca">E-mail me here</a>
   </p>

   <p>
      If you have a suggestion for me (regarding this website) or notice something wrong with the site, <strong>please</strong> e-mail me and tell me.  I'm really just making this site for practice, so I want it to be as good as my ability will allow.
   </p>

</div>

<div class="main">

   <h2>
      Stuff You Should Read
   </h2>

   <h6>
      First Day
   </h6>

   <p>
      Welcome to my site.  I've been working hard on this site for a while, trying out this tabs look.  I really, <strong>really</strong>, want you to <a href="mailto:airick1994atsympatico.ca">email me</a> if you see something wrong with the site, or if you think there is something I could add or remove to make it look better.<br /><br />
      One thing I aimed at doing with this look is to make it look the same on ALL monnitors, with ALL resolutions.  What I mean is, I tried to make this site look the same on my monitor as on anyone else's.<br /><br />
      So again, please <a href="mailto:airick1994atsympatico.ca">e-mail me</a> if you see something wrong, or if you have a suggestion, etc.  Thanks for visiting.<br /><br />
      More updates are soon to come, I hope, so keep checking in to see what I've added (though, I don't expect it'll really be all that great).
   </p>

</div>

</div>

<div class="greenbottom"></div>

</body>

</html>


and my CSS:

Code:
body {
   background-color: #a4a4a4;
   width: 700px;
   margin: auto;
}


h1 {
   font-family: "arial bold";
   font-size: 36px;
}

h2 {
   font-family: "arial bold";
   font-size: 28px;
   text-align: center;
}

h3 {
   font-family: "arial bold";
   font-size: 20px;
   text-align: center;
}

h4 {
   font-size: 16px;
   font-family: "arial bold";
   text-align: center;
}

h6 {
   font-family: arial;
   font-size: 12px;
   font-weight: bold;
   margin-bottom: 0px;
   text-align: center;
}


p {
   font-family: arial;
   font-size: 12px;
   color: #000000;
}



img.page {
   margin: 0px;
}



/* !! NAVIGATION !! */

div.navmargin {
   margin-right: 28px;
   margin-top: 5px;
   height: 25px;
}

div.home {
   width: 100px;
   margin: 0px 2px 0px 2px;
   height: 25px;
   float: right;
   background-image: url('images/home.png');
   text-align: center;
}

div.videos {
   width: 100px;
   margin: 0px 2px 0px 2px;
   height: 25px;
   float: right;
   background-image: url('images/videos.png');
   text-align: center;
}

div.about {
   width: 100px;
   margin: 0px 2px 0px 2px;
   height: 25px;
   float: right;
   background-image: url('images/about.png');
   text-align: center;
}

/* !! HOME PAGE !! */

div.greentop {
   width: 700px;
   background-image: url('images/greentop.png');
   background-repeat: no-repeat;
   margin: 0;
   height: 30px;
}

div.greenbody {
   width: 700px;
   background-image: url('images/greenbody.png');
   margin: 0;
   height: 100%;
}

div.greenbottom {
   width: 700px;
   background-image: url('images/greenbottom.png');
   background-repeat: no-repeat;
   margin: 0;
   clear: both;
}

/* !! VIDEO PAGE !! */



/* !! ABOUT PAGE !! */



/* !! OTHER STUFF !! */

div.left {
   float: left;
   margin: 0px 0px 0px 10px;
   width: 45%;
}

div.main {
   margin-top: 10px;
   float: right;
   width: 50%;
   margin: 0px 10px 0px 0px;
}

div.main p {
   margin-right: 10px;
}


/* !! LINKS !! */

a:link {
   color: #000000;
}

a:visited {
   color: #000000;
}

a:active {
   color: #000000;
}

a:hover {
   text-decoration: none;
   
}

a.nounder {
   font-weight: bold;
   text-decoration: none;
}


Any ideas?
Corey Bryant
Site Admin


Joined: 15 May 2004
Posts: 8301
Location: Castle Pines North, CO USA
PostPosted: Sun Apr 06, 2008 2:14 pm     Reply with quote


Well it seems to be outside all the other <div>. Did you check on another browser to see if it could be a image (png) problem?

Code:
<?xml version="1.0" encoding="utf-8" ?>

Will throw some browsers into quirks mode and make them do odd things. Try it without that as well.

_________________
Corey
Toll Free Phone Numbers | Processing Credit Cards | Microsoft Expression Web Blog
Airick1994



Joined: 20 Dec 2007
Posts: 101
Location: Canada, eh?
PostPosted: Sun Apr 06, 2008 3:23 pm     Reply with quote
No, neither helped. It can't be aproblem with png, because the top top images are showing up, just not the body and bottom.

Code:
<div class="greentop"></div>


That right there is the green thing with the black border (not the button, the other one above the body).

<div class="greenbody">

<div class="left">

<img src="images/buddywinkingbaw.gif" alt="MY PUPPY IS SO AWESOME." />

<h2>
Suggestions?<br /><br />
</h2>

<p>
<a href="mailto:airick1994atsympatico.ca">E-mail me here</a>
</p>

<p>
If you have a suggestion for me (regarding this website) or notice something wrong with the site, <strong>please</strong> e-mail me and tell me. I'm really just making this site for practice, so I want it to be as good as my ability will allow.
</p>

</div>

<div class="main">

<h2>
Stuff You Should Read
</h2>

<h6>
First Day
</h6>

<p>
Welcome to my site. I've been working hard on this site for a while, trying out this tabs look. I really, <strong>really</strong>, want you to <a href="mailto:airick1994atsympatico.ca">email me</a> if you see something wrong with the site, or if you think there is something I could add or remove to make it look better.<br /><br />
One thing I aimed at doing with this look is to make it look the same on ALL monnitors, with ALL resolutions. What I mean is, I tried to make this site look the same on my monitor as on anyone else's.<br /><br />
So again, please <a href="mailto:airick1994atsympatico.ca">e-mail me</a> if you see something wrong, or if you have a suggestion, etc. Thanks for visiting.<br /><br />
More updates are soon to come, I hope, so keep checking in to see what I've added (though, I don't expect it'll really be all that great).
</p>

</div>

</div>

The bolded text is the div correspnding with this:

div.greenbody {
width: 700px;
background-image: url('images/greenbody.png');
margin: 0;
height: 100%;
}

as is this:

<div class="greenbottom"></div>

with this:

div.greenbottom {
width: 700px;
background-image: url('images/greenbottom.png');
background-repeat: no-repeat;
margin: 0;
clear: both;
}

I don't understand why the image isn't showing up. There are no typos anywhere, and the image IS in the right folder. I am so confused.
Corey Bryant
Site Admin


Joined: 15 May 2004
Posts: 8301
Location: Castle Pines North, CO USA
PostPosted: Mon Apr 07, 2008 8:32 am     Reply with quote
Maybe give the <div> some height? Add a little content in there to see what happens.

And just because the other PNGs are showing up, don't take that for granted. Sometimes, images can become corrupt and they might need to be 'converted' again, even if it is the same file extension.

_________________
Corey
Payment Processing Forums | Massive Links Forums | International Web Developers Network
Airick1994



Joined: 20 Dec 2007
Posts: 101
Location: Canada, eh?
PostPosted: Mon Apr 07, 2008 1:50 pm     Reply with quote
There IS content over the body image, and I tried it with the footer, didn't help.

I guess my next question would be: what file extension should I use?
Corey Bryant
Site Admin


Joined: 15 May 2004
Posts: 8301
Location: Castle Pines North, CO USA
PostPosted: Mon Apr 07, 2008 2:46 pm     Reply with quote
Sorry I was looking at another <div>. There are some extensions in Firefox that would probably help you with this (one that outlines images). I found this one useful when making sure that the image(s) was being picked up by the browser.

If that does not help, International Web Developers Network should be able to offer a few suggestions.

_________________
Corey
Payment Processing Forums | Mile High Merchant Accounts | Microsoft Expression Web Blog
sticks464



Joined: 31 Dec 2006
Posts: 1166
PostPosted: Mon Apr 07, 2008 8:58 pm     Reply with quote
You just need to enclose the contents in a container and add a few heights
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {
   padding:0;
   margin:0;
}

body {
      background-color: #a4a4a4;
   font-family:"Arial", Helvetica, sans-serif;
   color:#000;
}

#container {
   width:700px;
   height:100%;
   margin:20px auto 0 auto;
}

div.greentop {
      width: 700px;
      background:#fff url('images/greentop.png') no-repeat;
      height: 30px;
}

div.greenbody {
      width: 700px;
      background:#4cff00 url('images/greenbody.png');
      height: 100%;
}

div.greenbottom {
      width: 700px;
      background:#fff url('images/greenbottom.png') no-repeat;
      height:30px;
}

div.left {
      float: left;
      margin: 0px 0px 0px 10px;
      width: 45%;
}

div.main {
      margin-top: 10px;
      float: right;
      width: 50%;
      margin: 0px 10px 0px 0px;
}
div .clear {
   clear:both;
   height:10px;
}

h1 {
      font-size: 36px;
}

h2 {
      font-size: 28px;
      text-align: center;
}

h3 {
      font-size: 20px;
      text-align: center;
}

h4 {
      font-size: 16px;
      text-align: center;
}

h6 {
      font-size: 12px;
      margin-bottom: 0px;
      text-align: center;
}


p {
      font-size: 12px;
}

/* !! NAVIGATION !! */

div.navmargin {
      margin-right: 28px;
      margin-top: 5px;
      height: 25px;
}

div.home {
      width: 100px;
      margin: 0px 2px 0px 2px;
      height: 25px;
      float: right;
      background-image: url('images/home.png');
      text-align: center;
}

div.videos {
      width: 100px;
      margin: 0px 2px 0px 2px;
      height: 25px;
      float: right;
      background-image: url('images/videos.png');
      text-align: center;
}

div.about {
      width: 100px;
      margin: 0px 2px 0px 2px;
      height: 25px;
      float: right;
      background-image: url('images/about.png');
      text-align: center;
}

div.main p {
      margin-right: 10px;
}

a:link {
      color: #000000;
}

a:visited {
      color: #000000;
}
a:hover {
      text-decoration: none;
}

a:active {
      color: #000000;
}
a.nounder {
      font-weight: bold;
      text-decoration: none;
}
</style>
</head>

<body>
<div id="container">
<h3 style="float:left;margin: 0px 0px 0px 10px;">Eric's Site</h3>
<div class="navmargin">
<div class="about"><p style="margin-top:5px;"><a href="other.html">Other</a></p></div><div class="videos"><p style="margin-top:5px;"><a href="videos.html">Videos</a></p></div><div class="home"><p style="margin-top:5px;">Home</p></div>
</div>

<div class="greentop"></div>

<div class="greenbody">
<div class="left">
<img src="images/buddywinkingbaw.gif" alt="MY PUPPY IS SO AWESOME." />

   <h2>
      Suggestions?<br /><br />
   </h2>

   <p>
      <a href="mailto:airick1994atsympatico.ca">E-mail me here</a>
   </p>

   <p>
      If you have a suggestion for me (regarding this website) or notice something wrong with the site, <strong>please</strong> e-mail me and tell me.  I'm really just making this site for practice, so I want it to be as good as my ability will allow.
   </p>
</div>
<div class="main">
<h2>
      Stuff You Should Read
   </h2>

   <h6>
      First Day
   </h6>

   <p>
      Welcome to my site.  I've been working hard on this site for a while, trying out this tabs look.  I really, <strong>really</strong>, want you to <a href="mailto:airick1994atsympatico.ca">email me</a> if you see something wrong with the site, or if you think there is something I could add or remove to make it look better.<br /><br />
      One thing I aimed at doing with this look is to make it look the same on ALL monnitors, with ALL resolutions.  What I mean is, I tried to make this site look the same on my monitor as on anyone else's.<br /><br />
      So again, please <a href="mailto:airick1994atsympatico.ca">e-mail me</a> if you see something wrong, or if you have a suggestion, etc.  Thanks for visiting.<br /><br />
      More updates are soon to come, I hope, so keep checking in to see what I've added (though, I don't expect it'll really be all that great).
   </p>
</div>

<div class="clear"></div>

</div>

<div class="greenbottom"></div>
</div>
</body>
</html>
Display posts from previous:   
Post new topic   Reply to topic    HTML Help Forum Index -> CSS All times are GMT - 8 Hours
Page 1 of 1

 
Jump to:  
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 vote in polls in this forum
HTML Help Archive
Powered by phpBB © 2001, 2005 phpBB Group
HTML Help topic RSS feed 
 
HOSTING / DESIGN
$1.99 Domain Registration
Cheap Web Hosting
Website Templates
MAKE MONEY
Sell Domain Names
Sell Website Templates

Home   |   Tutorials   |   Forum   |   Quick List   |   Link Directory   |   About
Copyright ©1997-2002 Idocs and ©2002-2007 HTML Code Tutorial