# Solved: Background Troubles



## Pande

Can't seem to get the text to appear on top of an element, not below it.



Code:


<html>
<head>

<style type="text/css">
body
{
background-color: #000000;
background-image: 
url('http://img256.imageshack.us/img256/314/gridlargezj6.jpg');
background-repeat: repeat;
}
.sitebg 
{
left: 180px;
top: 20px;
background-color: #333333;
width: 80%;
height: 100%;
border: 3px solid #111111;
margin-left: 180px;
padding: 0px;
z-index: -90;
opacity:0.8;
filter:alpha(opacity=80);
}
h1
{
color: #669900;
font: small-caps 900 35px arial;
text-align: center;
margin-left: 190px;
}
h2 {
text-align: center;
font: small-caps 400 26px arial;
color: #669900;
margin-left: 190px;
}
a
{
text-decoration: none;
color: #669900;
font: small-caps 15px arial;
}
a.textlink
{
text-decoration: none;
color: #669900;
font: small-caps 15px arial;
margin-left: 190px
}
a:visited
{
text-decoration: none;
color: #669900;
font: small-caps 15px arial
}
a:hover
{
color: #99CC00;
font: small-caps 15px arial;
}
p 
{
font: small-caps 15px arial;
text-indent: 0.4cm;
color: #999999;
margin-left: 170px;
}
ul.page
{
font: small-caps 15px arial;
color: #669900;
margin-left: -19px;
list-style-type: none
}
ul 
{
font: small-caps 15px arial;
color: #999999;
margin-left: 190px;
list-style-type: disc
}
img.galleryright
{
opacity:0.4;
filter:alpha(opacity=40);
margin-left: 1px;
height: 190px;
width: 190px
}
img.galleryright:hover
{
opacity:1;
filter:alpha(opacity=100);
}
img.gallery
{
opacity:0.4;
filter:alpha(opacity=40);
margin-left: 190px;
height: 190px;
width: 190px
}
img.gallery:hover
{
opacity:1;
filter:alpha(opacity=100);
}
table.gallery 
{
border: 0;
border-collapse: seperate;
}
.vertmenu {
position: fixed;
left: 20px;
top: 20px;
opacity:0.8;
filter:alpha(opacity=80);
background-color: #333333;
font-size: 16px;
width: 12%;
height: 92%;
border: 3px solid #111111;
margin: 0px;
padding: 0px;
}
.vertmenu li {
width: 70px;
height: 90px;
color: #669900;
display: block;
}
.vertmenu a {
padding: 0px;
margin: 0px 0px;
text-decoration: none;
}
.vertmenu a:link {
color: #669900;
height: 49px;
width: 149px;
}
.vertmenu a:visited { /* visited link */
color: #669900;
}
.vertmenu a:hover { /* mouse over link */
color: #99CC00;
}
.vertmenu a:active { /* selected link */
color: #669900;
}

</style>

</head>

<body>
<div class="vertmenu">
<ul class="page">
<br><li>Link</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>

<div class="sitebg">
</div>

<h1>I am Fearghas!</h1>
<h2> This is my site :)</h2>
<p>This is just some text I decided to type here: LOL. :) Of course there is even more so I can test my indent and whatnot. :)</p>

<table class="gallery">
<tr>
<td><img class="gallery" src="http://img138.imageshack.us/img138/1918/shot0012kf5.jpg"/></td>
<td><img class="galleryright" src="http://img211.imageshack.us/img211/1871/shot0001uu0.jpg"/></td>
</tr>
<tr>
<td><img class="gallery" src="http://img211.imageshack.us/img211/1871/shot0001uu0.jpg"/></td>
<td><img class="galleryright" src="http://img138.imageshack.us/img138/1918/shot0012kf5.jpg"/> </td>
</tr>
</table>

<p><ul>
<li>Lol</li>
<li>Hehe
<a href=http://img211.imageshack.us/img211/1871/shot0001uu0.jpg>An Image</></li></ul></p>

<a class="textlink" href=http://img211.imageshack.us/img211/1871/shot0001uu0.jpg>An Image</>



</body>
</html>

This is the code.

I have a (temporary, don't worry) grey background floating right where I want it to be.. Everything is perfect, except that the text is not appear on top of it, it is being pushed down. I set the z-index to -90 for the background, so there is no way it gets more priority over anything. I even tried setting the z-index of my paragraphs and stuff to 1, or 2, but it still didn't work. Am I missing a very simple code? I was on w3schools.com and reading the z-index thing. All they have is a simple image, (essentially what I have) a bit of text, and the z-index for the image set to -1. So if I have the same things (plus positioning and opacity), why does it not work?

Also, while I am here, my background will not scroll. Its not set to fixed, or anything like that. It also only repeats, nothing else (not that I don't like that, but its strange). I put the repeat tag in the CSS to make sure that other browsers work (it could just be mine), but when I scroll down, the background stays where it is. Unless of course the grid lines are PERFECTLY spaced so that when it scrolls down a notch it moves the same amount of pixels... but I really doubt that.

EDIT: OMG! FOR REAL! They really are spaced perfectly... just tested it... haha, thats pretty cool.  So forget about the scrolling problem. Still got the repeat thing, but that isn't very high priority since I want it to repeat anyway.

The website in questions is here:
http://www.themappingacademy.bravehost.com

Anyway, thanks for the help,
Pande


----------



## tomdkat

I'm at work and can't access image hosting sites. Could you post the physical dimensions of the background image?

Thanks!

EDIT: Ok, I think the problem is you have NOT put your content INSIDE the DIV with the background. Your current code:


Code:


<div class="sitebg">
[b]</div>  <!--  This needs to be moved below the end of the content -->[/b]

<h1>I am Fearghas!</h1>
<h2> This is my site :)</h2>
<p>This is just some text I decided to type here: LOL. :) Of course there is even more so I can test my indent and whatnot. :)</p>

<table class="gallery">
<tr>
<td><img class="gallery" src="http://img138.imageshack.us/img138/1918/shot0012kf5.jpg"/></td>
<td><img class="galleryright" src="http://img211.imageshack.us/img211/1871/shot0001uu0.jpg"/></td>
</tr>
<tr>
<td><img class="gallery" src="http://img211.imageshack.us/img211/1871/shot0001uu0.jpg"/></td>
<td><img class="galleryright" src="http://img138.imageshack.us/img138/1918/shot0012kf5.jpg"/> </td>
</tr>
</table>

<p><ul>
<li>Lol</li>
<li>Hehe
<a href=http://img211.imageshack.us/img211/1871/shot0001uu0.jpg>An Image</></li></ul></p>

<a class="textlink" href=http://img211.imageshack.us/img211/1871/shot0001uu0.jpg>An Image</>
</body>

Updated code:


Code:


<div class="sitebg">

<h1>I am Fearghas!</h1>
<h2> This is my site :)</h2>
<p>This is just some text I decided to type here: LOL. :) Of course there is even more so I can test my indent and whatnot. :)</p>

<table class="gallery">
<tr>
<td><img class="gallery" src="http://img138.imageshack.us/img138/1918/shot0012kf5.jpg"/></td>
<td><img class="galleryright" src="http://img211.imageshack.us/img211/1871/shot0001uu0.jpg"/></td>
</tr>
<tr>
<td><img class="gallery" src="http://img211.imageshack.us/img211/1871/shot0001uu0.jpg"/></td>
<td><img class="galleryright" src="http://img138.imageshack.us/img138/1918/shot0012kf5.jpg"/> </td>
</tr>
</table>

<p><ul>
<li>Lol</li>
<li>Hehe
<a href=http://img211.imageshack.us/img211/1871/shot0001uu0.jpg>An Image</></li></ul></p>

<a class="textlink" href=http://img211.imageshack.us/img211/1871/shot0001uu0.jpg>An Image</>
[b]</div>  <!-- This is where the "sitebg" DIV should be closed -->[/b]
</body>

 At least, that's a starting point. 

Peace...


----------



## Pande

512 by 512.

Ha, I knew it would be something as simple as that... its because I was copying and pasting codes between the online file manager, the textedit document, and the w3schools automatic CSS/HTML preview.

I guess somewhere in there I just forgot to do that. 
Anyway, thanks again... dastardly div doohickeys...(lol, so simple...)
Oh well, this is my second day doing CSS/HTML. 

_Edit: Just changed the code... then I noticed that the opacity of the background and borders also seemed to now apply to teh images and text. Text wasn't so bad, but I didn't want the images to be transparent when they were hovered on. Is there a way to apply opacity only to the background/borders? I've tried so far:

background.test
opacity: etc
filter:alpha etc

and then making the background in the div to be background.test, but it didn't work. And yes, I did change the HTML tags. _


----------



## tomdkat

Well, hold on a minute. I'm not sure my answer was correct. Is the gridlargezj6 image something you wanted on the back of the entire page or just in the "sitebg" DIV?

Peace...


----------



## tomdkat

Pande said:


> _Edit: Just changed the code... then I noticed that the opacity of the background and borders also seemed to now apply to teh images and text. Text wasn't so bad, but I didn't want the images to be transparent when they were hovered on. Is there a way to apply opacity only to the background/borders? I've tried so far:
> 
> background.test
> opacity: etc
> filter:alpha etc
> 
> and then making the background in the div to be background.test, but it didn't work. And yes, I did change the HTML tags. _


Please post your update HTML so I can see exactly what you changed.  Also, can you post your background image in this thread so I can see the image you're working with?

Peace...


----------



## tomdkat

Ok, I think I see what you're after now. You can't apply the opacity to the DIV. You'll have to apply the opacity to the background image itself BUT it can no longer be the background of the DIV. You'll have to put the background image in as an image and apply the opacity to that. 

I'll see if I can cobble up an example for you. It would help if you could post the background image you want as the background of the "sitebg" DIV. 

Peace...


----------



## tomdkat

Ok, I've been playing around a bit with the background w/ opacity issue and to make it work the way you want, you'll have to make some adjustments to the size of your "sitebg" DIV. Baiscally, you'll need to use absolute positioning to get z-index to work. Doing so, I've been able to get the background positioned where you want AND the content on top of it, like you want, AND I've been able to get the desired opacity set on the background image. The problem is making the background image the proper size. Since "sitebg" has a percentage as its width, you'll need to have the background image scale as the "sitebg" DIV is resized. Having absolute positioning for the background image breaks this dynamic scaling of the image.

However, there IS another solution you could employ. Simply make the background image have the desired opacity. This eliminates the need for absolute positioning to get "z-index" to work and simplifies the CSS and supporting HTML a lot. Is this an option for you?

EDIT: I can post a screenshot of what I've got working, if you want to see how it looks. 

Peace...


----------



## Pande

So your saying I need to open up a doc in an image manipulator and change it so it has an alpha, then apply that instead of a colour?

That would make sense... only problem is that it would not apply to the borders. But thats ok, thats not a big deal. Come to think of it... can you apply images as borders? Set their thickness, and put a tilable image in? Then I could do the same for that too.

Lol, you are a genius. I am gonna try this out right away!
btw... here is the image: (this is the one behind everything, including divs. The background for the divs will either be a straight color (at least temporarily) or a not-too-busy image, but I will have to make that so not yet)










It is 512 by 512.

You also asked for the changed site code:



Code:


<html>
<head>

<style type="text/css">
body
{
background-color: #000000;
background-image: 
url('http://img256.imageshack.us/img256/314/gridlargezj6.jpg');
background-repeat: repeat;
}
.sitebg 
{
left: 180px;
top: 20px;
background-color: #333333;
width: 80%;
height: 100%;
border: 3px #111111;
margin-left: 180px;
padding: 0px;
z-index: -90;
background-opacity:0.8;
filter:alpha(opacity=80);
border-style: ridge;
}
h1
{
color: #669900;
font: small-caps 900 35px arial;
text-align: center;
margin-left: 190px;
}
h2 {
text-align: center;
font: small-caps 400 26px arial;
color: #669900;
margin-left: 190px;
}
a
{
text-decoration: none;
color: #669900;
font: small-caps 15px arial;
}
a.textlink
{
text-decoration: none;
color: #669900;
font: small-caps 15px arial;
margin-left: 190px
}
a:visited
{
text-decoration: none;
color: #669900;
font: small-caps 15px arial
}
a:hover
{
color: #99CC00;
font: small-caps 15px arial;
}
p 
{
font: small-caps 15px arial;
text-indent: 0.4cm;
color: #999999;
margin-left: 170px;
}
ul.page
{
font: small-caps 15px arial;
color: #669900;
margin-left: -19px;
list-style-type: none
}
ul 
{
font: small-caps 15px arial;
color: #999999;
margin-left: 190px;
list-style-type: disc
}
img.galleryright
{
opacity:0.4;
filter:alpha(opacity=40);
margin-left: 1px;
height: 190px;
width: 190px
}
img.galleryright:hover
{
opacity:1;
filter:alpha(opacity=100);
}
img.gallery
{
opacity:0.4;
filter:alpha(opacity=40);
margin-left: 190px;
height: 190px;
width: 190px
}
img.gallery:hover
{
opacity:1;
filter:alpha(opacity=100);
}
table.gallery 
{
border: 0;
border-collapse: seperate;
}
.vertmenu {
position: fixed;
left: 20px;
top: 20px;
opacity:0.8;
filter:alpha(opacity=80);
background-color: #333333;
font-size: 16px;
width: 12%;
height: 92%;
border: 3px ridge #111111;
margin: 0px;
padding: 0px;
}
.vertmenu li {
width: 70px;
height: 90px;
color: #669900;
display: block;
}
.vertmenu a {
padding: 0px;
margin: 0px 0px;
text-decoration: none;
}
.vertmenu a:link {
color: #669900;
height: 49px;
width: 149px;
}
.vertmenu a:visited {
color: #669900;
}
.vertmenu a:hover {
color: #99CC00;
}
.vertmenu a:active {
color: #669900;
}

</style>

</head>

<body>
<div class="vertmenu">
<ul class="page">
<br><li>Link</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>

<div class="sitebg">

<h1>I am Fearghas!</h1>
<h2> This is my site :)</h2>
<p>This is just some text I decided to type here: LOL. :) Of course there is even more so I can test my indent and whatnot. :)</p>

<table class="gallery">
<tr>
<td><img class="gallery" src="http://img138.imageshack.us/img138/1918/shot0012kf5.jpg"/></td>
<td><img class="galleryright" src="http://img211.imageshack.us/img211/1871/shot0001uu0.jpg"/></td>
</tr>
<tr>
<td><img class="gallery" src="http://img211.imageshack.us/img211/1871/shot0001uu0.jpg"/></td>
<td><img class="galleryright" src="http://img138.imageshack.us/img138/1918/shot0012kf5.jpg"/> </td>
</tr>
</table>

<p><ul>
<li>Lol</li>
<li>Hehe
<a href=http://img211.imageshack.us/img211/1871/shot0001uu0.jpg>An Image</></li></ul></p>

<a class="textlink" href=http://img211.imageshack.us/img211/1871/shot0001uu0.jpg>An Image</>


</div>
</body>
</html>

I will get down to these changes right away!
Thanks a lot tomdkat. 

But really, thanks a bunch! You've answered all my questions and got it right every time! This is why I love forums.


----------



## tomdkat

I can't access images hosted on image hosting sites. Please attach the background image to a post in this thread so I can download it.  Changing the width of "sitebg" to a static number should help a lot and I'll play around with that on my end. 

Peace...


----------



## Pande

I attached the file. 

I had a bright idea before which was to make two divs, on for the transparent background and one to hold the text, but that failed because to do that I neede dthe two divs to be inside each other and that of course was the same as having just one div.  So I guess I am going to make a tilable image with transparency and put that as the background.

I have one final question! (unless of course the answers lead to more )

Is it possible to have the div wrap itself to the text?
Even better, is it possible to make it only do this on the bottom edge, not the top, left, or right edges? This way I don't have to manually enter the height of the div for different pages (it's a tutorial site, so some might be small and some large).

Basically, I can set the padding from left to right myself. Its the bottom I want to stretch as the text gets bigger. I know there must be a css code, I have seen it done on countless websites, but even the most complicated google searches couldn't tell me. Also, I tried viewing page source for said sites but a lot of them block it. 

Cheers!
Pande


----------



## tomdkat

Pande said:


> I had a bright idea before which was to make two divs, on for the transparent background and one to hold the text, but that failed because to do that I neede dthe two divs to be inside each other and that of course was the same as having just one div.  So I guess I am going to make a tilable image with transparency and put that as the background.


You were close with your idea but the DIVs would have to be at the same level and absolute positioning would be needed for the z-index to work. Attached is your image with some transparency applied. You'll have to save the image as a PNG to get it to function the way you want. The original image you posted looks like it would work, provided you used a "brighter" font color (or one with greater contrast against the black background).



> Is it possible to have the div wrap itself to the text?
> Even better, is it possible to make it only do this on the bottom edge, not the top, left, or right edges? This way I don't have to manually enter the height of the div for different pages (it's a tutorial site, so some might be small and some large).
> 
> Basically, I can set the padding from left to right myself. Its the bottom I want to stretch as the text gets bigger. I know there must be a css code, I have seen it done on countless websites, but even the most complicated google searches couldn't tell me. Also, I tried viewing page source for said sites but a lot of them block it.


Wouldn't leaving the height and width of the DIVs unspecified do what you want? Can you post a link to a site that behaves the way you want yours to behave?

Peace...


----------



## Pande

I guess this one could count:

http://www.map-craft.com/index.php

However, pretty much every forum seems to have it too.

By not setting a height can I make it move only to where needed? I never though of that. 
I still want a specified width, but if I just simply don't have a specified height will it grow/shrink to nessesary size? Wow... the simplest things... I gotta start thinking straight. 

By the way... I appreciate your image help but... that background image I posted is the one for the actual background, not the div backgrounds. sorry I must of messed you up talking both about div backgrounds and about the strange repeat problems I had for the grid one. The background for the divs is just a colour. And I think I found the solution... I will edit this post as soon as I test it...

Again, MUCHO GRACIAS or something like that... MANY THANKS anyway!

Edit: Ok just got back from testing. Firstly, I tried using an image (a totally black gif) with 80% opacity applied to it in GIMP, but it showed up totally black in the editor and online. I also tried taking away the height and stuff of the div, and making sure there was some text, and then the div did not show at all. What strange problems I have... ah well... one day I will have control over them. *muahahaha*


----------



## tomdkat

Yeah man, you sent me down the WRONG path. 

So, before I proceed any further please clearly explain what it is you're wanting to do. 

Peace...


----------



## Pande

Well you gave me the suggestions earlier and I have it working now... the div expands downwards to fit the text inside it. And I added padding and everything to it too and it works just fine!
I still have the opacity issue where it changes the opacity of images too, and when I hover over them it doesn't go completely visable because of the div opacity. However, other than that, the only problem I have now is the banner for my site. I want to put it inside the div, but I don't want it to be affected by the padding. I have tried absolute positioning and its not altering where the thing goes.

here is the site: www.themappingacademy.bravehost.com
this is the css:



Code:


body
{
background-color: #000000;
background-image: 
url('http://img256.imageshack.us/img256/314/gridlargezj6.jpg');
background-repeat: repeat;
}
.divmain
{
top: 20px;
background-color: #333333;
width: 634px;
margin-left: 182px;
z-index: -90;
opacity:0.8;
left: 182px;
border: 2px solid #669900;
padding-right: 1cm;
padding-top: 0.5cm;
padding-left: 1cm;
padding-bottom: 1cm;
filter:alpha(opacity=80);
}
img.banner
{
position: absolute;
top: 0px;
left: 182px
}
h1
{
color: #669900;
font: small-caps 900 35px arial;
text-align: center;

}
h2 {
text-align: center;
font: small-caps 400 26px arial;
color: #669900;
}
a
{
text-decoration: none;
color: #669900;
font: small-caps 15px arial;
}
a.textlink
{
text-decoration: none;
color: #669900;
font: small-caps 15px arial;
}
a:visited
{
text-decoration: none;
color: #669900;
font: small-caps 15px arial
}
a:hover
{
color: #99CC00;
font: small-caps 15px arial;
}
p 
{
font: small-caps 15px arial;
text-indent: 0.4cm;
color: #999999;
}
ul.page
{
font: small-caps 15px arial;
color: #669900;
list-style-type: none
}
ul 
{
font: small-caps 15px arial;
color: #999999;
list-style-type: disc;
}
img.gallery
{
opacity:0.4;
filter:alpha(opacity=40);
height: 190px;
width: 190px
}
img.gallery:hover
{
opacity:1;
filter:alpha(opacity=100);
}
table.gallery 
{
border: 0;
border-collapse: seperate;
}
.vertmenu {
position: fixed;
left: 22px;
top: 20px;
opacity:0.8;
filter:alpha(opacity=80);
background-color: #333333;
font-size: 16px;
width: 12%;
border: 2px solid #669900;
height: 92%;
padding-left: 0.2cm;
padding-right: 0.2cm;
padding-bottom: 0.5cm;
padding-top: 0.5cm;
text-align: center;
font: small-caps 15px arial;
}

and when I alter the 'top' and 'left' settings, nothing happens.  it stays stuck to teh left of the screen, and right above the div (which is what I want, but its left spacing thats giving me issues)

with the banner, I want either: the banner inside the div, ( or at least visably, since my div has padding it would have to be placed "perfectly" over top the area I want) with a bottom border to seperate it (easily done)

or

put it directly on top of the div (easier) and give it everything but bottom border. But when I try to move it left, it doesn't work. 

Internet just seems to be playing rough with me. 

I really hope this will be the last question I have, you must be getting a little bored of answering newbs right about now. 

EDIT: you can ignore the stuff about positioning, in fact, I think maybe the website just needed some time to update. It is now again int he wrong spot, but its in the right one for what I need. 
I still have the opacity issue though, and so far nothing works. (ive tried transparent images as background and using two divs)

I suppose what I can do, since this will only be for one page, is use an absolute positioning for that too. It will take some setting up and of course every image is going to have a different one (I really want to avoid this, lol) but it should get the effect I want. In the mean time, its not _that_ bad having lines through my images. If you have another solution, I would appreciate it, but if its gonna take you like 3 hours to do don't sweat it... I think you have helped me enough already. 

As you say...
peace..
Pande


----------



## tomdkat

Ok, now that I can see the site I have a better understanding of what you're after. I believe I have a solution for you. Load this test page in Firefox or Opera:


Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Pande's page</title>
  <style type="text/css">
.navigation {
  border: 2px solid red;
  display: block;
  width: 200px;
  height: 600px;
  margin-left: 20px;
  margin-top: 20px;
  background-color: #333333;
  z-index: 0;
  opacity: 0.892;
  position: fixed;
}
.body {
  border: 2px solid white;
  display: block;
  margin-left: 230px;
  float: left;
  margin-top: 20px;
  width: 500px;
  height: 700px;
}
.nav-text {
  display: block;
  width: 200px;
  height: 600px;
  margin-top: 20px;
  margin-left: 20px;
  background-color: transparent;
  z-index: 5;
  position: fixed;
  padding-left: 10px;
  padding-top: 5px;
  padding-right: 5px;
}

  </style>
</head>
<body
 style="color: white; background-color: rgb(255, 255, 255); background-image: url(http://img256.imageshack.us/img256/314/gridlargezj6.jpg);"
 alink="#000099" link="#000099" vlink="#990099">
<div class="navigation"><br>
</div>
<div class="nav-text">nav text<br>
<br>
This is where the navigation menu goes.<br>
<br>
This probably won't work in IE, unfortunately.</div>
<div class="body">body</div>
</body>
</html>

Basically, what I did is create TWO DIVs for the navigation menu. One has the colored background with opacity applied. The other has a transparent background with NO opacity applied. Then, I positioned the second DIV on top of the first DIV and achieved the background with opacity.

Again, creating a background image with the desired opacity for the DIVs would be the simplest course of action. 

Peace...


----------



## Pande

I tried your image that you made and the one I made and neither presented a transparency. It was strange, because both of them appeared to have transparency when placed as images, rather than backgrounds to the div. Anyway, I think I have all this stuff sorted out now... my new problem is now the
banner to my site. I placed it inside the div... and it didn't go inside. I made sure absolute positioning was off, and still I found it hovering over the ads at the top of the page. I made sure it was between the tags.
I could possibly use absolute positioning to put it on top of the div perfectly, but I read somewhere that absolute positioning is like tables? to be avoided? Oh well... I'll wait a little to see if the thingy updates itself.


----------



## tomdkat

Pande said:


> I tried your image that you made and the one I made and neither presented a transparency. It was strange, because both of them appeared to have transparency when placed as images, rather than backgrounds to the div.


Did you view the page in IE or Firefox or Opera?



> Anyway, I think I have all this stuff sorted out now... my new problem is now the
> banner to my site. I placed it inside the div... and it didn't go inside. I made sure absolute positioning was off, and still I found it hovering over the ads at the top of the page. I made sure it was between the tags.
> I could possibly use absolute positioning to put it on top of the div perfectly, but I read somewhere that absolute positioning is like tables? to be avoided? Oh well... I'll wait a little to see if the thingy updates itself.


I can access your site at home but it's like not everything is loading. I'll take another peek at the banner tonight.

Attached is a screenshot of your page with the nav DIV having a background with NO opacity and the sitebg DIV having a background with 80% opacity. Both backgrounds are background images of the DIVs. As you can see, one is transparent while the other isn't.

Peace...


----------



## Pande

turns out I just had to flush my cache... and all my problems went away... transparent images now work, the banner is where is it supposed to be, the navigation bar is behaving itself and my div is stretching nicely. Apparently, the cache was saving old data and trying to combine it with changes in the CSS, and it was going crazy.

It would seem that when life gives you lemons... just take them and keep quiet, and the shame won't be so bad... :|

_Edit: Here is the website link again: http://www.themappingacademy.bravehost.com

This last question is going to not target your HTML/CSS experience, but rather your knowledge of websites in general. 
The question is:

Which looks better? The transparency (in the navbar) or the solid colour (in the div). I was comparing them, and I noticed two contrasts.

1. Having transparencies added depth that solid colour lacked, making the website 'pop out' more.
2. Having solid colour eliminated the 'grungy' feeling that is made when an opaque grey is overlayed on black.

So its tough to choose... as a web designer, which would you prefer seeing?
Thanks for all your help... you have helped me through the annoying learning stages, and although half my problems were because of my stupid cache, your examples and reminders helped immensely.

Thanks again for all the help!
Pande _


----------



## tomdkat

Personally, I like transparency but that's the geek in me.  I wouldn't consider myself a designer so I'm not the best person to ask, from a design standpoint. I guess having an opaque image might be easier for reading text so maybe minimizing the amount of transparency would be the best. Hopefully others will comment on this. 

If you're happy with your results, please mark this thread as "solved". 

Peace...


----------

