Layers ?

[SirChick]

I have a difficult problem and for the life of me and a few html experts we have not worked out how i even managed to do this.

 

I have this as a layout in 3 layers:

 

Background

then on top of the background

An image

then on top of the image

General text

 

Now i used the same code through out and it worked for all but one. Now the difference with this one anomaly is the layers are in this order:

 

Background

then on top of the background

General Text

then on top of the text

An Image

 

this is obviously wrong but we don't know why suddenly the text is given 2nd priority instead of 3rd. Meaning the image is over the text so the text is not visible anymore. Normally the text is visible over the image!

 

Image has been attached to show you. What should i been looking for in my html to fix this.. i would like to try myself firstly just need some guidance on what i need to look for... but if no success ill post my html up for you guys to try.

 

[attachment deleted by admin]

[php_tom]

I'm not exactly a CSS guru,  and I have no idea WHY its doing that (especially without seeing your code) but one possible fix would be to use the CSS z-index specifier to manually set which element is on top of other elements. See this link: http://www.w3schools.com/css/pr_pos_z-index.asp

 

Hope that helps.

[ohstereo]

Would you mind posting your code/CSS so we could find any problems?

[SirChick]

<div id="bv_" style="position:absolute;left:76px;top:225px;width:247px;height:79px;z-index:13" align="center">

<img src="menu_gradient.gif" id="Shape2" align="top" alt="" border="0" width="319" height="360"></div>

<div id="bv_" style="position:absolute;left:103px;top:291px;width:263px;height:79px;z-index:11" align="left">

<font style="font-size:13px" color="#000000" face="Arial">Your are living at  <?= $Country ?>. If you are new to this game why not click the Help Tutorial Link to the right hand side and get to grips with this game!<br>

</font></div>

<div id="bv_" style="position:absolute;left:150px;top:452px;width:172px;height:70px;z-index:12" align="center">

<font style="font-size:16px" color="#000000" face="Arial"><b><u>Player Stats:<br>

</font><font style="font-size:13px" color="#000000" face="Arial"></u></b>Muscle Strength:  <?= $Strength ?><br>

Muscle Dexterity:  <?= $Dexterity ?><br>

Self Defence Skill:  <?= $Defence ?><br>

Agility:  <?= $Agility ?><br>

Luck:  <?= $Luck ?><br>

Acumen:  <?= $Acumen ?><br>

</font></div>

 

<font style="font-size:13px" color="#000000" face="Arial"><b><u>Current User Statistics:<br>

</u></b><br>

Money: <?= $HandMoney ?> <br>

Total Stats:  <?= $TotalStats ?><br>

</font></div>

 

 

this is the code

[php_tom]

That doesn't help me much, because you don't have the images, etc. Do you have the page on a server where we could look at it in all its glory?

[SirChick]

"<img src="menu_gradient.gif""

 

 

second line is the image

[dbrimlow]

Without seeing your whole code in context (but judging by what I DO see) it looks to me like this is 100% quirks mode, non-valid code that "MAY" only ever work as intended in IE. A real browser would choke on the "<div id="bv_"..." being used three times.

 

NEVER use a named ID more than once on a page. HTML Pros should have spotted that immediately.

 

You also are not setting the overflow and/or visibility elements.

 

You designate the image once, yet use three different absolute positioned elements.

 

This code is a mess which means anything goes.

 

Browsers TRY to guess what you intend when you use non-valid code.

 

Show us the whole page (change your links and urls to generic junk if you are nervous). But without seeing the entire context, it is impossible to debug.

 

This is a very simple CSS layout solution that is being used within markup. Any CSS Pro could slap this together easily. But not from a page snippet that suggests the entire page may be flawed.

[SirChick]

i got it working just now. all i had to do was re-order the index numbers!

 

Basically the lower the index number the "older" the item is. So that would mean the index 1 was made first so if index 2 is in the same place as index1 it would be "above" index 1.

 

 

it is a bit messy cos i had to take out the php in between