Topic: Div Layers - 2 Questions $Pages that link to <a href="https://ozoneasylum.com/backlink?for=9604" title="Pages that link to Topic: Div Layers - 2 Questions" rel="nofollow" >Topic: Div Layers - 2 Questions\$

Author	Thread
Nethermind Bipolar (III) Inmate From: under the Milky Way tonight Insane since: Feb 2003	posted 02-21-2003 19:57 I am trying to use div layers to create text over an image background, and I have a couple of questions: First, do you think that this is the cleanest way to accomplish putting text over image backgrounds? I would rather learn a new way to do the same thing if it makes the code cleaner. Second, is there a way to place them so that they don't have screen res. differences? I use % with tables to get them liquid, but all I know about div layers is to use the exact pixel positioning. Right now, I have viewers directed to their screen res from a script detect, but of course that forces me to write several identical pages. The effect I am trying to accomplish is here (1024 version): http://www.bradandmelissa.net/index2.htm Thanks! ~Nethermind
DL-44 Maniac (V) Inmate From: under the bed Insane since: Feb 2000	posted 02-21-2003 20:44 Either I'm confused about what you're asking, or you're confused as to what the <div> tag is. A <div> is simply a block level element used to contain other elements. It can be formatted and styled the same as any other HTML element. As with any other HTML element, the best way to do this is via an external stylesheet. In your example, there doesn't seem to be anything liquid, as the image is not a tiling image that can fill in a liquid design... In the example you give, you don't need to specify the position at all, and I certainly wouldn't use absolute positioning by any stretch. All you really need is something to this effect - in your style sheet: .layer1 { background-image:url(path/to/image.gif); background-repeat: no-repeat; height:XXpx; width:XXpx; } and in your HTML - <div class="layer1> text... </div> Hopefully I understood well enough to give you a suitable answer...
Nethermind Bipolar (III) Inmate From: under the Milky Way tonight Insane since: Feb 2003	posted 02-21-2003 21:11 I am sure that the confusion is mine; thanks for giving me tips regardless of my muddled thinking! I guess what I was trying to talk about is positioning of div layers (absolute, as you said, is my problem right now). I didn't want to make them absolute, but didn't exactly know how to accomplish the same thing I had without that. I see now that the answer you gave is a simple solution to this problem. I don't have any CSS on this site (it isn't what I immediately think to do, and I need to change that). Does this mean (forgive the inexperience) that I'd need a separate style sheet for each page to give different background images for each page? Thanks again! ~Nethermind ~~~~~~~~ If we listened to our intellect, we'd never have a love affair. We'd never have a friendship. We'd never go into business, because we'd be cynical. Well, that's nonsense. You've got to jump off cliffs all the time and build your wings on the way down. ~~~~~~~~
Nethermind Bipolar (III) Inmate From: under the Milky Way tonight Insane since: Feb 2003	posted 02-21-2003 21:25 Yep, this is exactly the advice I needed! Thanks so much for your help. Now I have some tweaking and tedious writing to do. But at least I don't have to create mirror sites based on screen resolutions! This group rocks! ~N ~~~~~~~~ If we listened to our intellect, we'd never have a love affair. We'd never have a friendship. We'd never go into business, because we'd be cynical. Well, that's nonsense. You've got to jump off cliffs all the time and build your wings on the way down. ~~~~~~~~
DL-44 Maniac (V) Inmate From: under the bed Insane since: Feb 2000	posted 02-22-2003 00:51 Glad to be of help =) For starters, you should ideally have your style sheet as a seperate file, linked to in the <head> of your page. This makes the intent of CSS that much more evident and easy to implement: the seperation of content and style. Now, if you want to have a different background image for different pages, this is what you would do - 1) set a class that has the style specifications common to that <div>. say, perhaps along the lines of - (purely hypothetical example - ) .maindiv { background-color:#999; color:#000; margin:10px; padding:5px; width:600px; background-repeat:no-repeat; } then, for each different background-image you want to use, add an ID - #div1 { background-image:url(image/for/div1); } #div2 { background-image:url(image/for/div2); and so on. in your HTML, you would call it like this - <div class="maindiv" id="div1">blah blah blah</div> That method will assign the style attributes specified for both the 'maindiv' class, and the 'div1' id. You can also specify multiple classes for an element, but that can wait =) For more info things such as classes and id's, and lot's of other must have info on using CSS, check out these GN tutorials - http://www.gurusnetwork.com/tutorials/css/cssintro/cssintro1.html http://www.gurusnetwork.com/tutorials/css/cssintro2/cssintro2-1.html http://www.gurusnetwork.com/tutorials/css/box_model/style.html http://www.gurusnetwork.com/tutorials/css/cssprint/cssprint1.html And of course, for reference always make sure to check the w3c ( http://www.w3.org ). [This message has been edited by DL-44 (edited 02-22-2003).]

Topic: Div Layers - 2 Questions\$

Author

Thread

Nethermind
Bipolar (III) Inmate

From: under the Milky Way tonight
Insane since: Feb 2003

posted 02-21-2003 19:57

I am trying to use div layers to create text over an image background, and I have a couple of questions:

First, do you think that this is the cleanest way to accomplish putting text over image backgrounds? I would rather learn a new way to do the same thing if it makes the code cleaner.

Second, is there a way to place them so that they don't have screen res. differences? I use % with tables to get them liquid, but all I know about div layers is to use the exact pixel positioning. Right now, I have viewers directed to their screen res from a script detect, but of course that forces me to write several identical pages. The effect I am trying to accomplish is here (1024 version):
http://www.bradandmelissa.net/index2.htm

Thanks!
~Nethermind

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted 02-21-2003 20:44

Either I'm confused about what you're asking, or you're confused as to what the <div> tag is.

A <div> is simply a block level element used to contain other elements. It can be formatted and styled the same as any other HTML element. As with any other HTML element, the best way to do this is via an external stylesheet.

In your example, there doesn't seem to be anything liquid, as the image is not a tiling image that can fill in a liquid design...

In the example you give, you don't need to specify the position at all, and I certainly wouldn't use absolute positioning by any stretch.

All you really need is something to this effect -

in your style sheet:

.layer1 {
background-image:url(path/to/image.gif);
background-repeat: no-repeat;
height:XXpx;
width:XXpx;
}

and in your HTML -

<div class="layer1>
text...
</div>

Hopefully I understood well enough to give you a suitable answer...

Nethermind
Bipolar (III) Inmate

From: under the Milky Way tonight
Insane since: Feb 2003

posted 02-21-2003 21:11

I am sure that the confusion is mine; thanks for giving me tips regardless of my muddled thinking!
I guess what I was trying to talk about is positioning of div layers (absolute, as you said, is my problem right now). I didn't want to make them absolute, but didn't exactly know how to accomplish the same thing I had without that.

I see now that the answer you gave is a simple solution to this problem. I don't have any CSS on this site (it isn't what I immediately think to do, and I need to change that). Does this mean (forgive the inexperience) that I'd need a separate style sheet for each page to give different background images for each page?

Thanks again!

~Nethermind

~*~*~*~*~*~*~*~
If we listened to our intellect, we'd never have a love affair. We'd never have a friendship. We'd never go into business, because we'd be cynical. Well, that's nonsense. You've got to jump off cliffs all the time and build your wings on the way down.
~*~*~*~*~*~*~*~

Nethermind
Bipolar (III) Inmate

From: under the Milky Way tonight
Insane since: Feb 2003

posted 02-21-2003 21:25

Yep, this is exactly the advice I needed! Thanks so much for your help. Now I have some tweaking and tedious writing to do. But at least I don't have to create mirror sites based on screen resolutions!

This group rocks!
~N

~*~*~*~*~*~*~*~
If we listened to our intellect, we'd never have a love affair. We'd never have a friendship. We'd never go into business, because we'd be cynical. Well, that's nonsense. You've got to jump off cliffs all the time and build your wings on the way down.
~*~*~*~*~*~*~*~

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted 02-22-2003 00:51

Glad to be of help =)

For starters, you should ideally have your style sheet as a seperate file, linked to in the <head> of your page. This makes the intent of CSS that much more evident and easy to implement: the seperation of content and style.

Now, if you want to have a different background image for different pages, this is what you would do -

1) set a class that has the style specifications common to that <div>. say, perhaps along the lines of -
(purely hypothetical example - )

.maindiv {
background-color:#999;
color:#000;
margin:10px;
padding:5px;
width:600px;
background-repeat:no-repeat;
}

then, for each different background-image you want to use, add an ID -

#div1 {
background-image:url(image/for/div1);
}

#div2 {
background-image:url(image/for/div2);

and so on.

in your HTML, you would call it like this -

<div class="maindiv" id="div1">blah blah blah</div>

That method will assign the style attributes specified for both the 'maindiv' class, and the 'div1' id. You can also specify multiple classes for an element, but that can wait =)

For more info things such as classes and id's, and lot's of other *must have* info on using CSS, check out these GN tutorials -
http://www.gurusnetwork.com/tutorials/css/cssintro/cssintro1.html
http://www.gurusnetwork.com/tutorials/css/cssintro2/cssintro2-1.html
http://www.gurusnetwork.com/tutorials/css/box_model/style.html
http://www.gurusnetwork.com/tutorials/css/cssprint/cssprint1.html

And of course, for reference always make sure to check the w3c ( http://www.w3.org ).

[This message has been edited by DL-44 (edited 02-22-2003).]

Post Reply

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: Div Layers - 2 Questions

Insert Slimies »

Insert UBB Code »

Topic: Div Layers - 2 Questions $Pages that link to <a href="https://ozoneasylum.com/backlink?for=9604" title="Pages that link to Topic: Div Layers - 2 Questions" rel="nofollow" >Topic: Div Layers - 2 Questions\$