PDA

View Full Version : Newbie question, how do I set a pad around my text within a frame?


baldvogues
11-23-2010, 07:20 PM
Website created in Photoshop CS4 and then edits and tweaks done in Dreamweaver.

Right now my website looks like this:

http://www.newmodeproductions.com/index.html

I'd like for the text in the right side box to be actual text (not the .gif image that it currently is) so that I might get a Google hit now and then.
So I've revised the index page in Dreamweaver and now it looks like this:

http://www.newmodeproductions.com/index_revi.html

So my problem is that I can't figure out how to get the text layed out and looking like the .gif image text from the original index.html file. I know there are limitations with web text but I'd like to at least have it so that it fits within the 280x405 area so there would be some padding on the left side of the text allowing you to see the dark grey dotted line that you can see on the original index.html page. Any help greatly appreciated!

Ricky55
11-23-2010, 07:38 PM
Its not too far away you just need to add some padding left and increase the line height slightly.

To do this in Dreamweaver is actually harder than in code I think but if you select the paragraph of text in design view then in the CSS panel click create new CSS rule.

This will bring up the new CSS rule dialogue box from here just enter in your padding left and increase the line height. The padding is in box category and the line height is in the type category. I'd make the line height something like 20 pixels for a starter.

baldvogues
11-23-2010, 08:08 PM
Its not too far away you just need to add some padding left and increase the line height slightly.

To do this in Dreamweaver is actually harder than in code I think but if you select the paragraph of text in design view then in the CSS panel click create new CSS rule.

This will bring up the new CSS rule dialogue box from here just enter in your padding left and increase the line height. The padding is in box category and the line height is in the type category. I'd make the line height something like 20 pixels for a starter.

I'm using DW CS4...so I highlighted the text in the index_revi.html file and in the CSS panel I clicked new CSS rule, but I don't get a new dialog box. I have the option to edit the rule, but that brings up a dialog box with nothing but the ability to name the CSS rule I think is what's it's asking for. Nothing about line height or padding :(

baldvogues
11-23-2010, 08:14 PM
Its not too far away you just need to add some padding left and increase the line height slightly.

http://i121.photobucket.com/albums/o219/ernestmayhand/dw01.jpg

Ricky55
11-23-2010, 11:05 PM
Sorry mate I forgot exactly how that worked I don't use it much myself.

This page is really badly constructed using tables really you'd be best building it again using CSS.

But back to your text issue.

Its too hard to explain in text so I've recorded a short video for you mate. There;s no audio but you can see what I;m doing.

This is just doing what I said before but manually if you like.

Might have to give it a few minutes for the video to upload.

Let me know if you need any more help.

Cheers

Ricky

http://vimeo.com/17138466

baldvogues
11-23-2010, 11:50 PM
http://vimeo.com/17138466


Thanks a lot! Definitely helpful. Still a few things I need to work out...like redoing the whole thing :)
I created the site in Photoshop because it's easy for me to get it the way I want it to look there...but what a pain to update anything or change anything!!!! I definitely need to spend some time in DW and brush the cobwebs off what's left in the brain from my community college html class days.

gentleone
11-24-2010, 06:42 AM
I created the site in Photoshop because it's easy for me to get it the way I want it to look there...
There's nothing wrong with that... a lot of people make first a mockup in Photoshop, but where you do go wrong is exporting the whole thing in 'one click' for the web which result in bad code.

but what a pain to update anything or change anything!!!!
One of the biggest advantages of using CSS (Cascading Stylesheets), is that you only have to change one bit in your stylesheet to make a sitewide change.

So... HTML in combination with CSS are the basics to layout any design you have in mind.
http://articles.sitepoint.com/article/html-css-beginners-guide

baldvogues
11-24-2010, 01:09 PM
There's nothing wrong with that... a lot of people make first a mockup in Photoshop, but where you do go wrong is exporting the whole thing in 'one click' for the web which result in bad code.


One of the biggest advantages of using CSS (Cascading Stylesheets), is that you only have to change one bit in your stylesheet to make a sitewide change.

So... HTML in combination with CSS are the basics to layout any design you have in mind.
http://articles.sitepoint.com/article/html-css-beginners-guide



http://vimeo.com/17138466

Well I started from scratch in DW and am moving along at a slow but acceptable pace. Here's how far I've gotten:
http://www.newmodeproductions.com/index_test.html

Would you guys suggest that I use frames for when I redo my video and photo portfolio pages, here's the old ones:
http://www.newmodeproductions.com/video01-1.html
http://www.newmodeproductions.com/photo01-1.html

I don't know much about frames accept I think that would allow me to have the buttons on the right side and when you click it just changes the frame on the left side? I'll be searching for some tutorials this afternoon.

Ricky55
11-24-2010, 07:24 PM
No don't use frames.

There's a few ways of doing this. You could either have some kind of window box for the videos like this:

http://colorpowered.com/colorbox/

Or you could have them like you have in your layout and load them in with jQuery / Ajax like this: This would work like you have now without javascript but you would use jQuery to load just the videos rather than whole page for users with javascript enabled.

http://css-tricks.com/video-screencasts/85-best-practices-dynamic-content/

Or you could use Flash video and build a really nice interface in that. Only thing though this would rule out some users without the Flash Player such as mobile devices and Apples iPad, iPhone and iPod Touch. You can have a fall back option but I would probably go for the jQuery method.

On a side note. When you save your images always save for web from Photoshop and be sure to select the correct file format. Gif's are not designed for photographs, use png 8 bit or jpgs.