Text Over Images?

[migroo]

Okay I can't find a good way of superimposing text over an image. Sometimes I will set the image as a background that does not repeat but that doesn't always work. Because the image must be an exact size and I often want to change the size. I also sometimes use a div tag but for sum reason div tags and tables don't always work together. There is probably a simple way of doing this but I can't figure it out. Right now I have the header for a forum I am building and I want to put text on it. There is also I footer.

[real_illusions]

A few ways of doing this.One way, so you can resize the image is to set a containing div, and have position:relative; tied to it in the CSS.Then, insert 2 divs inside, one of which contains your image, and the other contains the text. Then use position:absolute; to position the 2 divs in relation to the top left corner. You might have to use z-index to ensure the text appears above the image.<div id="container"><div id="image"><img src="image.jpg" alt="" /></div><div id="text"><p>Hello! I love furry bunny rabbits.</p></div></div>And in the CSS:#container{position:relative;}#image{position:absolute;top:0;left:0;}#text{position:absolute;top:0;left:0;}Hope that helps

[sp_mmf]

what about z-index ?http://www.w3schools.com/Css/pr_pos_z-index.asp

[thescientist]

I would avoid absolute and relative positioning just for the sake of getting text over an image.

[migroo]

Why? Is there something bad about relative and absolute positioning? Lol I hope there aint anything to bad because I use them all the time.

[jeffman]

Absolute positioning has its place. I see good designers using it mostly in CSS menus.As a general layout tool, it makes pages very difficult to maintain. A small change to one element usually leads to cascading changes to other elements. If you are strictly a hobbyist, and you have very few pages, that might not seem important.Serious developers use more fluid positioning techniques.

[ProblemHelpPlease]

When you have 1000 lines of css items positioned 10 down 5 across 6 left 76 right, you start to lose the will to live. Learning to create a fluid page saves a lot of time in the long run. Not all pages can be created in a fluid manner but always try and do so where possible.

[thescientist]

Why? Is there something bad about relative and absolute positioning? Lol I hope there aint anything to bad because I use them all the time.

they don't seem to translate nicely if you are in the habit of creating flexible and fluid sites, in particular when using absolute positioning.

[migroo]

I think I have started to run into what you are talking about and my style sheets are only 500-900 lines. What positioning techniques should I use to create flexible and fluid pages? I am here because I want to learn how to do thing correctly not just what sorta, kinda, halfway, work. In the tutorials they cover tags, syntax, and how to make your pages validate correctly. But as far as strategy for making a fluid page you are sorta on your own. Thanks

[thescientist]

there's a lot of topics about fluid and flexible layouts, and I'm sure there infinite more of them on the web. What is primarily boils down to is using something like %'s or em's for widths and typically setting a min or max width to the page. Every layout is different and ultimately will require its own fair bit of refinement on that technique.

[jeffman]

A common strategy is to think of your page as columns. In its most basic form, each column would be a div, and each div would float, so that the divs form a horizontal series from left to right.A typical 3-column layout has a fixed width for the left and right columns, and the center column has no defined width. This allows it to fit the space between the columns no matter how wide the screen is. That is your "fluid" column. For this to work, the left column floats left, and the right column float rights. Usually the center column floats left. Structurally, that looks something like this:

---------------------------------------------------------+ (fixed width) +	 (fluid width)	 + (fixed width) ++			   +					   +			   ++			   +					   +			   ++			   +					   +			   ++			   +					   +			   ++			   +					   +			   ++			   +					   +			   ++			   +					   +			   ++   << float	+	   << float		+	float >>   ++			   +					   +			   ++			   +					   +			   ++			   +					   +			   ++			   +					   +			   ++			   +					   +			   ++			   +					   +			   ++			   +					   +			   ++			   +					   +			   ++			   +					   +			   ++			   +					   +			   +---------------------------------------------------------

Obviously, any of the three+ columns could be your fluid column. You would have to adjust the float properties of the other columns so that the fluid column floats in the correct direction. If it floats in the wrong direction, it could have zero width. Experimentation is your best teacher for that. When I'm developing a page like that, I like to give all my box elements a unique background color so I can track them. I remove/change the colors before I "publish" the page.

[migroo]

I think I see what you are saying and I can see that being a really good idea. I have been spending a lot of time looking at how professionally built web pages that I really like have been structured. I have trouble with this sometimes as may of these pages are very complicated. I am using Firebug its an add-on for Fire Fox that lets you inspect every part of a web page and it will show you the css for that element. I was looking at a page and they had an image set as a background and they had resized it how do you do that? Also as a rule is it better to use a lot of tables and a position things accordingly or cut down on the tables and just position things according to the body tag?

[thescientist]

you use CSS to position things relative to their containing element, with the body being one of those parent elements. I would strongly encourage you to not consider using tables for layout, and instead only use them for what their meant for. A background can be "resized" if you set it to repeate, and then if the elements height or width is declared in something like %'s, then the background image will "resize" accordingly, because it will just repeat less or more depending on the situation.

[roundcorners]

using the method given by real illusions does mean that the image can resize with the size of the browser window, which adds to the flexibility of the design.

[migroo]

I would strongly encourage you to not consider using tables for layout, and instead only use them for what their meant for.

What are tables meant for? I have noticed that a lot of badly made sites use a lot of tables.

[ShadowMage]

Tables are meant for tabular data. Ex. a schedule or spreadsheet data chart

[migroo]

okay so positioning images is the wrong use of tables.

[Ingolme]

okay so positioning images is the wrong use of tables.

Using tables for styling, positioning and designing is incorrect.This is tabular data:

	 |  A  |  B  |  C  |------------------------  X  | 39  | 65  |  4  |------------------------  Y  |  0  | 83  | 29  |------------------------  Z  | 41  | 94  | 20  |

[migroo]

Okay Well I will stop using tables for styling thanks for the tips!