lame question I know...

[wagnj1]

ok so I haven't used CSS for awhile and I can't remember something...
I have a picture that I want to place over a background in my html. the background is an empty polaroid and the main image should be displayed only in the white area of the polaroid, meaning that its offset at the top left corner by a bit. what would be a good style for this?

 

[wagnj1]

oh and I should mention that the polaroid is in a <td> section in around the middle of the page, which means the image will be in the same section.

 

[cLFlaVA]

I don't understand. Use CSS to give the td a specific height and width. Make the td's background the "empty polaroid". Then, Place an <img> tag in there. Give the image an appropriate top and left margin.

*cLFlaVA
----------------------------
[tt]clean slate...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Vragabond]

1. are you sure all images will fit into that background?

2. if you are, just add padding (left, right, top, bottom or all if you need) in the amount you want it to be.

 

[traingamer]

see "More Eric Meyer on CSS" chapter two. Modify to meet your needs.

http://more.ericmeyeroncss.com/projects/02/

traingamer

 

[wagnj1]

ok I've set the <td> background as the polaroid and that seems to be cool. now the problem is that it keeps repeating the background image down the row.

 

[cLFlaVA]

#thetdid {
    background: transparent url(path/to/url.gif) no-repeat top left;
}

*cLFlaVA
----------------------------
[tt]clean slate...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[traingamer]

assign a class to JUST one <td>
e.g. <td class="polaroid">
and modify your stylesheet appropriately.

traingamer

 

[wagnj1]

if I do this code:

#thetdid {
    background: transparent url(path/to/url.gif) no-repeat top left;
}

then nothing appears in the background. and yes, I've set the path to the picture correctly, its in the same directory as my html and it should be good to go.

 

[cLFlaVA]

and did you give the td an id, and did you replace #thetdid with the actual id?

*cLFlaVA
----------------------------
[tt]clean slate...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[wagnj1]

yah I changed thetdid in the css file and made the appropriate change in the html. I even changed the color from transparent to green and it made the change in the background color on the site but no .jpg still

 

[cLFlaVA]

please paste actual code...

*cLFlaVA
----------------------------
[tt]clean slate...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[traingamer]

Sounds like the url then...

traingamer

 

[wagnj1]

crap its going to try loading the picture from the css file isn't it...which isn't in the same directory as my polaroid.
css file is in htdocs/layout/ , image and html are in htdocs/images/

 

[wagnj1]

yah thats what it was, got it working, thanks a bunch!

 

[cLFlaVA]

just do an absolute...

if your site is

http://www.site.com/

and the image is

http://www.site.com/images/image.jpg

and your css is

http://www.site.com/css/css.css

then this should work anywhere:
[red]/[/red]images/image.jpg

*cLFlaVA
----------------------------
[tt]clean slate...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[wagnj1]

haha ok shoot I am having a bad day with this stuff...let me explain a bit more...I got the polaroid background there now, just one of them, and the picture overtop of it...but the picture won't align into the black space of the polaroid...I've set the width and height for the pic so it will fit but using top and left don't do anything. code is as follows:

td class="tdbg" height=400 width=500>
						
							<?
								$picture = $_GET['picture'];

								if ($picture == "") { exit; }
								
								echo "<img src='new/".$picture."' top=10 left=12 width=411 height=293>";
							?>
					</td>

I'm using PHP on my site as well, this section is just grabbing the name of the picture to display if someone has clicked on its hyperlink. The polaroid background is at the very top left corner but I can't get the picture to match the edge of the inside black section. Its hard to describe.
I have a pic here:

http://www.zionmainframe.org/users/merovingian5/polaroid.attempt.JPG

 

[traingamer]

Addjust the padding and margins to move it to the black section.

traingamer

 

[wagnj1]

there is no padding or margin set for the top of the picture. I've got it's left margin set up correctly but the top will not move up any more than it is.

 

[Foamcow]

<td class="tdbg" height=400 width=500>
                        
                            <?
                                $picture = $_GET['picture'];

                                if ($picture == "") { exit; }
                                
                                echo "<img src='new/".$picture."' [b]style='margin-left: 12px;margin-right: 10px;'[/b]>";
                            ?>
                    </td>

Or you may have to use padding instead of margins.

I'd also say to change your PHP for that line to something like this

echo ("<img src=\"new/".$picture."\" style=\"margin-left:12px;margin-right:10px;\">\n");

The \" is an escaped quote, meaning the PHP parser will not think it part of the PHP code and treat is as simple output. It will make your resulting HTML "nicer" and mean that your attributes are properly coded (with double quote marks).
In fact I'm not even sure you need to break out of the string to output the value of $picture. You may just be able to include $picture in the path name.

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time