View Full Version : Positioning pics around a div
chrishawthorne 03-10-2004, 11:48 PM I am goignto separate this picture,
www.freepgs.com/unsignedonline/blank.jpg
so I can use the borders from the content boxes, around a div layer. How do I use them around it?
bourdelson 03-10-2004, 11:55 PM If you're going to use that particular layout, why not just position divs over them, and not specify a background color? [Not specifying the background color will make it transparent.] If you just want the border, I'd say cut out the entire thing and make it the background image of the div.
chrishawthorne 03-11-2004, 12:01 AM Thats a good idea, how did www.ghettostomp.com get all their text and stuff on there?
I've never sliced a layout before, that's why I'm not sure hwo to do any of this
bourdelson 03-11-2004, 12:07 AM Their layout is sliced and everything is placed inside of a table. I think the only reason that their layout is sliced is because their links on the side are images, not text links.
What are you using or what have you used to slice your layout?
chrishawthorne 03-11-2004, 12:37 AM I haven't begun slicing it yet, because I don't really know how to do it yet.
edit: btw, sorry it took so long to respond, i never got a notification email
bourdelson 03-11-2004, 12:41 AM Well, I know that Paint Shop Pro comes with an image slicer, if you use a recent version of it. I don't think that Photoshop does. I use PSP for image slicing because it saves the HTML page with all of the coding on it.
Don't worry about how long it took you to respond. It's all good. ;)
chrishawthorne 03-11-2004, 12:44 AM Yeah, I downloaded the new PSP
I'm looking at this, and I just don't understand how any of this is going to work. And I also think I am going to have to make my buttons images as well, because I don't want just plain text. Oh god, im overwhelmed with this.
bourdelson 03-11-2004, 12:49 AM Well, it's really not that hard once you get used to it. File>Export>Image Slicer is how to get to the image slicer in PSP8. You have to have the image open inside of PSP already before you can access the slicer.
If by buttons you mean the buttons you link to other sites with, you can position those by putting them inside of the table cells after you've sliced it, or position them with div layers outside of the table.
chrishawthorne 03-11-2004, 12:59 AM So, I cut the buttons out of the picture, then slice it? AHHHH!
Ahh, there is hope. I didnt understand how this worked, but now I see how easy it is, I have sliced it now, so how do I put the buttons out, so I can insert those as linked images in the HTML?
bourdelson 03-11-2004, 01:06 AM What buttons are you talking about? The bluish part where your links are? Yes, you just find those and hyperlink them.
The images should have been saved automatically by PSP.
chrishawthorne 03-11-2004, 01:10 AM yes, I get all that, but how do I take the buttons, http://www.freepgs.com/unsignedonline/Layout2_1x1.gif
out of the sliced image, so i can position them in the layout, since they are going to be 8 individual images, linking to 8 different places. And also, I have an animated logo i would like to use for the top.
bourdelson 03-11-2004, 01:14 AM Along with your sliced images, PSP should have saved an HTML document with the table coding in it that places your image back together. Usually, it ends up saving in the same file as your broken up image, unless you choose to save it in another place. Look for that file, and you shouldn't have a problem with placing any buttons anywhere, because they'll automatically go back together with the table coding.
For your animated logo, just position it inside of the table cell where you want it to sit.
chrishawthorne 03-11-2004, 01:17 AM Ok, I am not sure how exactly I am supposed to be wording this. The buttons were all saved as one big image. Should I slice the buttons individually or what, so that I can make each button link somewhere different?
bourdelson 03-11-2004, 01:20 AM Yes, you should slice each one individually. [Sorry, I didn't click the link - my browser started getting all weird, and I didn't want my computer to freeze. :( Also, sorry I didn't understand what you meant.]
As a suggestion, you might want to start over using the original image with your image slicing, so that the table won't be thrown off, since you're going to be chopping it up again.
chrishawthorne 03-11-2004, 01:24 AM Alright, im gonna try it again now. thanks.
Say my logo is 200x200. should I cut the top 200x200 out of the image, and then add an image tag to the animation at the top of the code?
bourdelson 03-11-2004, 01:26 AM I guess you could do that, but then it would get really messy, so, what I'd suggest is after you've uploaded the table and all the images onto your site, locate the particular cell of the table where you want your image to be placed at, and put <img src="image.ext" style="position:absolute; top:px; left:px;" /> so that you can place it exactly where you want it to be.
chrishawthorne 03-11-2004, 01:31 AM I didn't think of it like that! Thanks sooooooooooooooooooooooooooooooooooooooooooooooooo ooooooooooooooooooooooo
much!! sorry, i just appreciate it so much!
bourdelson 03-11-2004, 01:35 AM :lol: It's not a problem at all. I'm happy I could help you so much. ^.^
chrishawthorne 03-11-2004, 01:51 AM I am sorry to bother you again, but I have noticed that it is less than even 800x600...how can I resize the whole thing so it will fill up the entire window?
bourdelson 03-11-2004, 02:50 AM To get it to fill up the entire window, you'd have to completely resize the image, then go back and slice it again. Either that, or try putting the table to a 100% size, but I don't know if that will work or not.
|