Problem with DIVs - Not working how I expected. 1

[grande]

Hi all, I'm kinda new to DIVs so bear with me.

I'm trying to get text to appear over an image. Pretty simple stuff, right? That's what I thought.

My HTML:

<div style="contentContainer" align="center">
  <img src="Images/textfield.gif">
  <div style="content" align="center" id="Main">
    TEXT GOES HERE!
  </div>
</div>

My CSS:

#contentContainer {
	position: absolute;
	width: 770px;
	top: 10px;
	z-index: 1;
}

#content {
	position: absolute;
	top: -700px;
	width: 760px;
	height: 760px;
	overflow: auto;
	padding: 5px;
	z-index: 10;
}

When I load the page, the text appears at the bottom of the page, under textfield.gif.

Where have I gone wrong?

LINK: subversives.awardspace.com/index2.html
(It's a work-in-progress)

-------------------------
Call me barely Impressive Captain.

 

[kaht]

grande, just make the image a background image for the container div, then you won't have to mess with the positioning of the content div (well not as bad as you normally would):

#contentContainer {
    position: absolute;
    width: 770px;
    top: 10px;
    [s]z-index: 1;[/s]
[!]    background:url(./images/textfield.gif) top left no-repeat;[/!]
}
#content {
    [s]position: absolute;[/s]
    [s]top: -700px;[/s]
    width: 760px;
    height: 760px;
    overflow: auto;
    padding: 5px;
    [s]z-index: 10;[/s]
}


<div style="contentContainer" align="center">
  [s]<img src="Images/textfield.gif">[/s]
  <div style="content" align="center" id="Main">
    TEXT GOES HERE!
  </div>
</div>

-kaht

[small]How spicy would you like your chang sauce? Oh man... I have no idea what's goin' on right now...[/small]

 

[grande]

First off, have a purple star for your awesome help thus far, it's greatly appreciated.

However, now the text is in the right place, and textfield.gif isn't showing up at all. What might cause this?

-------------------------
Call me barely Impressive Captain.

 

[kaht]

What might cause this?

2 things come to mind
[ol]
[li]your content div has a background defined and as such is overwriting what is behind it[/li]
[li]You have your css in an external file that is embedded in a css directory. If this is the case, your directory reference to the image is no longer valid (with respect to the css file). You will have to go down a directory to get to the "root" and then up to the image. Like so: background:url([!]..[/!]/images/textfield.gif) top left no-repeat;[/li][/ol]

-kaht

[small]How spicy would you like your chang sauce? Oh man... I have no idea what's goin' on right now...[/small]

 

[Vragabond]

You're using

<div style="contentContainer" align="center">
  <div style="content" align="center" id="Main">
  </div>
</div>

and in your css you assume that these divs have an id of contentContainer and content. Style attribute exists to insert inline css styles to the element, not to give it a name. You name the element by giving it a class (if there will be more elements with the same style on the page) and referencing it with a dot in css (.myClass) or an id (if the element appears only once on the page) and referencing it with a hash (#myId). So, since in your case in your css you are expecting your html to have certain ids, I suggest you add them:

<div id="contentContainer" align="center">
  <div id="content" align="center">
  </div>
</div>

Last but not least, why is your navigation handled via AJAX?
[/code]

 

[BillyRayPreachersSon]

Any why have red text on a red background? It's so unreadable you may as well just not have it there at all!

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[grande]

Last but not least, why is your navigation handled via AJAX?

I decided to try and learn it. It's my first feeble attempts at it.

Any why have red text on a red background? It's so unreadable you may as well just not have it there at all!

1) That's why I'm trying to fix the black background image.
2) I said it was a work in progress!

-------------------------
Call me barely Impressive Captain.