Text overflow - Post ID 152556

User 2078853 Photo


Registered User
8 posts

I found that I can see the overflows if I print (or print preview) the page in Internet Explorer - which helps find the problems easily. They go away if the font is decreased by one size, which is of course not what I really want to do!

I couldn't get advanced text to work in the text boxes (it's shaded). Not sure what I'm doing wrong.

I have to ask Camilla - is your cat an Egyptian mau?
User 271657 Photo


Ambassador
3,816 posts

Barbara - try clicking on your text to get the blue outline (not red) then see if you can check the advanced text option in the object properties box.
With advanced text, you can select a drop shadow then move the slider so it doesn't show if you want it to look like normal text. You can also use the fill tool (bucket) to add a color if it seems a little dull or fuzzy after converting to adv. text. :)
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 2078853 Photo


Registered User
8 posts

Thankyou Piantbrush.

I've got it now.

Barbara
User 104702 Photo


Registered User
293 posts

Hi all of you,

To use the advanced text option of VSD to avoid mixed-up, overflowing text in all circumstances (mobile phones, all kinds of screen resolution in general) is not a very good idea, because this is very SEO unfriendly. Search engines look mainly for text in webpages, and advanced text is an image, although there is a trick to solve this: copy the text in the 'alternate text' option of the image object.

The only good solution is to use a so-called 'liquid design', where text and other things are flowing inside the width and length of the screen automatically. Look here for an example: http://london.sonoma.edu/Writings . If you make the browser window narrower, you'll see what I mean. But there we have a problem: VSD can't do liquid designs.... :-(

There are several ways to overcome this:

1: Don't use VSD, but the Coffeecup HTML editor instead. This software can do liquid designs. This is the ONLY RADICAL solution.
2: Don't use the text box of VSD, for this is the cause of the problem. The only -partial- solution at this moment is to use the HTML box and to show text there in a frame that is scrolling vertically (in fact what I suggest to do is not a frame, but CSS code). See the 'news' part of my website http://sixties.johnvanhulst.com for an example). How to do this is shown in another thread on this forum: http://www.coffeecup.com/forums/designe … scroll-bar . And there you can find another example of a VSD user who solved this elegantly: http://elaynas.com/services.html

As this is no liquid design solution, your website visitor (for instance Smartphone users, they might have screen resolutions no wider than 240 pixels) still might have to do horizontal scrolling to see your site completely. So be sure to always center your site (mark 'center design' in 'page properties') and avoid to make it wide at all (maybe no more than 600 pixels).

A discussion about designing web sites for all occasions you can find here: http://mobiforge.com/designing/story/ef … reen-sizes

Have fun,

John van Hulst
John van Hulst
User 567863 Photo


Registered User
1 post

paintbrush wrote:
Barbara - try clicking on your text to get the blue outline (not red) then see if you can check the advanced text option in the object properties box.
With advanced text, you can select a drop shadow then move the slider so it doesn't show if you want it to look like normal text. You can also use the fill tool (bucket) to add a color if it seems a little dull or fuzzy after converting to adv. text. :)


This was a suggestion that worked for me. I was having trouble with text placement when viewed on Mac (Safari). The text overflowed into an additional line.

The "advanced text" option as described by Paintbrush worked,. Though I still had to play around with the "effects" (since I didn't really want any), this worked out for me as a solution to test overflow.

Thanks Paintbrush.
User 271657 Photo


Ambassador
3,816 posts

Advanced text has it's place - but as John mentioned, it shouldn't be used in place of paragraph text.
Check out this article about using text in VSD:

http://www.coffeecup.com/help/articles/ … -designer/

I've found that text boxes running over images, or images over text can cause problems. Also, make sure you use standard web fonts:

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

When you choose a font in VSD, you'll be able to select from everything on your computer - you can't be sure what others have on their computers. So stick to standard web fonts for paragraphs and save the Advanced Text for headlines, captions... and fill in the alt-text (under object properties).

I think a lot of us are going to be learning how to set up alternate pages for mobile devices :P I like the idea of having my regular VSD site with a link to a scaled-down version (basically one column, no graphics, just the most important info) and a link on that page back to the main site. Maybe CC should offer mobile device templates :D

Thanks for the compliment, John (the Elayna's site is mine) :)




I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.