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

IP logged posted posted 02-21-2003 19:57 Edit Quote

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

IP logged posted posted 02-21-2003 20:44 Edit Quote

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

IP logged posted posted 02-21-2003 21:11 Edit Quote

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

IP logged posted posted 02-21-2003 21:25 Edit Quote

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

IP logged posted posted 02-22-2003 00:51 Edit Quote

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:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu