Photoshop Contest PhotoshopContest.com
Creative Contests. Real Prizes. Essential Resource.
You are not logged in. Log in or Register

 


Photoshop Contest Forum Index - Computer Problems - HELP NEEDED - web page related - Reply to topic

Goto page 1, 2  Next

Post Thu Mar 11, 2010 9:57 am   Reply with quote         


I was trying to help a friend of mine create an image and slice it for a web page template..... I think my slices should work fine and saved it out. Now I have it in dreamweaver and I'm trying to make the leftpage and right page of the book background images in those cells so that I can place text over them, but everytime I try to do it the images dont line up correctly. I have tried setting the cell width and height to the image dimensions, but still can't get it right.

Here is a link to the unedited html file that photoshop created.

http://www.volkswes.com/SHIVVYDIVVYDIV/akd/

Does anyone have any suggestions on how to do this.....or an easier route for doing a similar style page?




TutorMe
Site Moderator

Location: Sitting in this room playing Russian roulette, finger on the trigger to my dear Juliet.

Post Thu Mar 11, 2010 10:04 am   Reply with quote         


Take the image out of the table, set the image as the background of the table, and the width and height of the table to the width and height of the image. If you want a code sample, let me know, and I'll post one.




Post Thu Mar 11, 2010 10:11 am   Reply with quote         


TutorMe wrote:
Take the image out of the table, set the image as the background of the table, and the width and height of the table to the width and height of the image. If you want a code sample, let me know, and I'll post one.


Well, that's what I tried to do, but I guess I didn't code it correctly because it is leaving a gap and not lining up correctly.... I don't have much experience in this area so, sure a sample would be a great help




Post Thu Mar 11, 2010 10:27 am   Reply with quote         


Another question that I thought about......will the image still work fine as a background if I nest another table inside one of those cells in order to try and create a contact form?




rett435

Location: Tennessee

Post Thu Mar 11, 2010 3:13 pm   Reply with quote         


Looks fine to me...in Firefox




Post Thu Mar 11, 2010 3:31 pm   Reply with quote         


Yeah, sometimes lining those images up in a table can be tricky. I've tried before puting a line break <BR> after the image in a table cell will make it line up correctly. Don't ask me why, because it shouldn't work that way, but sometimes it does.

If you need help in looking at it, let me know and I can see what I can do with it.

Another option (and what I'm leaning toward nowadays) is to get rid of the table and use DIV tags with style sheets. You can set the background image and exact positioning much easier with stylesheets.

Cool




Post Thu Mar 11, 2010 3:52 pm   Reply with quote         


Depending on where you are going with this you really should be using <div> tags and CSS to create the template. I've thrown together a quick and dirty sample, however, I only used CSS on the two <td> columns where text would go. It is still a table layout, but now I've given the table a CSS ID as well as the two halves, col-left and col-right. Inside each respective <TD> is a <div> tag with either copy-left or copy-right as the ID for CSS to style.

File is here.




Post Thu Mar 11, 2010 4:20 pm   Reply with quote         


tadams wrote:
Depending on where you are going with this you really should be using <div> tags and CSS to create the template. I've thrown together a quick and dirty sample, however, I only used CSS on the two <td> columns where text would go. It is still a table layout, but now I've given the table a CSS ID as well as the two halves, col-left and col-right. Inside each respective <TD> is a <div> tag with either copy-left or copy-right as the ID for CSS to style.

File is here.


Nice work Tadams!! Cool




Procyon
Site Admin

Location: Toronto, ON

Post Thu Mar 11, 2010 7:02 pm   Reply with quote         


rett435 wrote:
Looks fine to me...in Firefox


Yup, same.




_________________
Feel free to PM me, but PM a mod if you think they can help you. If you've won a prize, contact me!
Michel

Location: Montreal, Canada

Post Thu Mar 11, 2010 8:42 pm   Reply with quote         


Tadams is pointing in the right direction. Volkswes, I'm sorry to inform you that tables and cells are for displaying, well, tables and cells. You really have to learn about CSS and tags such as div, id and class. It's not really that hard and it takes only a few days to learn. New versions of browsers are developed with xhtml and CSS in mind.




Post Thu Mar 11, 2010 9:16 pm   Reply with quote         


I have a lot to learn....that looks good to me. Very nice tadams! Thanks a bunch! I'll check out the code and see if I can understand it.

I'll try to find some info or tutorials that I can start playing with. Maybe I'll see if I can find some CSS books at the library.

Any other suggestions for the page? I am always trying to learn more and always open to any criticism.

Thanks
Wesley




Post Thu Mar 11, 2010 9:35 pm   Reply with quote         


One of my favorite tools for working with CSS is CSSEdit. This is a great tool for troubleshooting, viewing other people's work and once you understand CSS, you can use it to write code and see live updates. Stylemaster by WestCiv is another CSS tool I use. The company also has a fine set of tutorials and online books for purchase.

Get a good book. Keep it simple. The web is full of CSS templates and widgets, so you may find it easier learning to tweak one of these. Remember to check your work in different browsers and on Macs and PCs.




Procyon
Site Admin

Location: Toronto, ON

Post Fri Mar 12, 2010 1:38 am   Reply with quote         


may I suggest firebug as well?
check out the website and video
http://getfirebug.com/




_________________
Feel free to PM me, but PM a mod if you think they can help you. If you've won a prize, contact me!

Post Fri Mar 12, 2010 9:06 am   Reply with quote         


Thanks again guys, I really appreciate all the help and tips.


Procyon: Love to see that you are still using the chicken eating a cupcake and mcrib sammich gif...one of my favorites

Here are some of the others from way back then





















TofuTheGreat

Location: Back where I belong.

Post Fri Mar 12, 2010 9:18 am   Reply with quote         


tadams wrote:
One of my favorite tools for working with CSS is CSSEdit. This is a great tool for troubleshooting, viewing other people's work and once you understand CSS, you can use it to write code and see live updates. Stylemaster by WestCiv is another CSS tool I use. The company also has a fine set of tutorials and online books for purchase.

Get a good book. Keep it simple. The web is full of CSS templates and widgets, so you may find it easier learning to tweak one of these. Remember to check your work in different browsers and on Macs and PCs.
If you're on a PC then the Web Developer Toolbar and Firebug are two indispensable plugins for Firefox. They should be required tools for web work. WBT allows you to also edit the CSS of any site right from the browser. Firebug helps with troubleshooting Javascripting woes.

As for books I just tried one of the O'Reilly "Head First" and "Head Rush" books. They're AWESOME if you're a visual learner with ADHD (like, cough, me). They're not reference books but rather are books to teach you the core concepts so that you can then deal with the tedium of the reference books. They've got an XHTML/CSS book. I haven't read it but based on the AJAX one I'm reading I'd recommend it.




_________________
Why I do believe it's pants-less o'clock! - Lar deSouza
”The mind is like a parachute, it doesn’t work if it isn’t open.” - Frank Zappa
Created using photoshop and absolutely no talent. - reyrey

Goto page 1, 2  Next

Photoshop Contest Forum Index - Computer Problems - HELP NEEDED - web page related - Reply to topic

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Navigate PSC
Contests open  completed  winners  prizes  events  rules  rss 
Galleries votes  authentic  skillful  funny  creative  theme  winners 
Interact register  log in/out  forum  chat  user lookup  contact 
Stats monthly leaders  hall of fame  record holders 
PSC advantage  news (rss)  faq  about  links  contact  home 
Help faq  search  new users  tutorials  contact  password 

Adobe, the Adobe logo, Adobe Photoshop, Creative Suite and Illustrator are registered trademarks of Adobe Systems Incorporated.
Text and images copyright © 2000-2006 Photoshop Contest. All rights reserved.