Creating layers using the Div? - Page...

User 463868 Photo


Registered User
89 posts

Ok so I have a form that I use for "Custom Shot Records" for dogs. I have it as an image (.gif), well I have the user pull up a form that I created using the flash forms. I found on the web this...

<!-- Layer 1 -->
<div
style="
top: 0;
left: 0;
width: 908;
hight: 733;
position: absolute;
z-index: 1;
visibility: hide;">
<img src="ShotRecordBackground.gif" width="908" height="733" border="0">

<!-- content will go here -->
</div>

<!-- Layer 2 ->
<div
style="
top: 350;
left: 650;
width: 40;
hight: 12;
position: absolute;
z-index: 2;
visibility: show;">
<!-- content will go here -->
<span style="color: #000000; font-size: 10px; font-family: arial; font-weight: bold;">Roscoe</span>
</div>

Well in the demo for this code it workds perfect! in my code however it puts the test "Roscoe" under the image even though I z-indexed it higher(2)??
What gives? I'm thinking its in the SHTML rather than HTML?
Just guessing here.

Help Please :-/
hogansbassets.com
eagleeye360.com
freight360.us
User 38401 Photo


Senior Advisor
10,951 posts

Jon Hogan wrote:
Ok so I have a form that I use for "Custom Shot Records" for dogs. I have it as an image (.gif), well I have the user pull up a form that I created using the flash forms. I found on the web this...

<!-- Layer 1 -->

width: 908;
hight: 733;


<!-- content will go here -->
</div>

<!-- Layer 2 ->

width: 40;
hight: 12;

<!-- content will go here -->
<span style="color: #000000; font-size: 10px; font-family: arial; font-weight: bold;">Roscoe</span>
</div>

Well in the demo for this code it workds perfect! in my code however it puts the test "Roscoe" under the image even though I z-indexed it higher(2)??
What gives? I'm thinking its in the SHTML rather than HTML?
Just guessing here.

Help Please :-/


Hiya Jon,

I'm not sure if this will help at all for your issue, but unless you're doing some foreign language that I'm unaware of here, which is entirely possible, the above highlighted text is mispelled and should be spelled:

height

Not sure if that will help at all, but might at least correct a mispelling if there isn't a language barrier here that is :)
User 463868 Photo


Registered User
89 posts

LOL: Wow you know I just added the "Width" & "Heigth" params just to see if it would help. But no I ddin't even notice it :)
But they aren't even nesissary. Correction made it still shows the text "Roscoe" under the img.
:/
hogansbassets.com
eagleeye360.com
freight360.us
User 422767 Photo


Registered User
259 posts

Could you post a link? There may be other silly errors. ;)
Aren't you a little short for a Storm Trooper?
User 463868 Photo


Registered User
89 posts

Ok. This is easier to post a link that I just found yesterday, but I can't seem to get this to work either. http://m.techrepublic.com/article/super … xt/5169871
So if any of you know css and can get this to place text over an image- please explain it to me. I don't want someone to do it for me ya know, I want to understand it. I have tried creating a css called shotrecordbackground but after looking at the default.css on my site hogansbassets.com it still makes no sence to me. The syntax doesn't match, html doesn't generate any error codes from the editor so its hard to determine what is going wrong. I can get the text to show but no back img and the text is at 0,0 not where I defined it. So I assume the first div tag is being thrown out.
Lol. Brings back memories :)
hogansbassets.com
eagleeye360.com
freight360.us
User 463868 Photo


Registered User
89 posts

This is a link that started this thread, http://www.willmaster.com/library/demo/ … oning.html
It is the html I started talking about. He puts a pic of old faithfull on a page (exactly) where he wants it to be then places text, text in a box over the image!!!
This is what I want to learn to do.
hogansbassets.com
eagleeye360.com
freight360.us
User 364143 Photo


Guest
5,410 posts

In this example, I have placed a blue box (in place of a pic) exactly where I want it on the page, and then placed another tex box exactly where I want it on the page. It mimmicks that example. Maybe it will help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
#bluebox{
position: absolute;
top: 100px;
left: 100px;
height: 300px;
width: 400px;
background-color: blue;
z-index: 1;
}
#textbox{
position: absolute;
top: 360px;
left: 105px;
height: 25px;
width: 380px;
border-style: solid;
border-style: ridge;
z-index: 2;
}
p {
color: white;
font-family: arial, verdana, sans-serif;
font-weight: normal;
font-size: 11pt;
margin: 2px;
text-align: left;
}
</style>
</head>
<body>
<div id="bluebox"><p>This is a blue box and text in place of an image</p></div>
<div id="textbox"><p>This is a caption for the image</p></div>
</body>
</html>
CoffeeCup... Yeah, they are the best!
User 463868 Photo


Registered User
89 posts

I'm on my phone at the moment, ill cut and paste it. I hope it works and with an img tag. Thanks I'll know in a few ;-)
hogansbassets.com
eagleeye360.com
freight360.us
User 463868 Photo


Registered User
89 posts

Ok, now I'm (We) are getting somewhere. Question: I noticed the "textbox", "p" and "bluebox" these labels are standard in html - right? So if I want to define new var's of a like type of "bluebox" I just do...
Example: #MyHeaderTitle{position: absolute;
top: 100px;
left: 100px;
height: auto;
width: auto;
background-color: blue;
z-index: 2;}

<!-- Then nest this in the main "BlueBox" div tags? Or do I not need to nest any of them that I define as absolut? --> <div id="MyHeaderTitle"><p><font face="ArgentumShine">HOGAN'S BASSETS.COM CUSTOM SHOT RECORD</font></p></div>

Then I could create as many z-index: 2's as nessisary to fill in the form using the global var from a submit-post form Right? I think this will work!!

You are the Man ;-)
hogansbassets.com
eagleeye360.com
freight360.us
User 364143 Photo


Guest
5,410 posts

Sorry, I'm not tracking. Not sure if it's how you posted or I am just tired. :)

In my example the #blubox defines an element that holds the image (or just blue color) within the style section. You can create as many as you want but change the name there and referencece the new name with a different id in the body section. The z-index defines the layering order.

To replace the bluebox background color with an image, change this code
background-color: blue;

with
background-image:url('image.gif');

and remove the <p>This is a blue box and text in place of an image</p> from the body section.
CoffeeCup... Yeah, they are the best!

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.