...

View Full Version : LOGO - CHALLENGE Add Text W/O Photoshop or Java



Clickman
11-20-2009, 08:52 PM
This is the Logo we will be using.

http://i448.photobucket.com/albums/qq210/clickman/Logo-FinalC.jpg

We want to be able to add text in the white area to the right of the HM oval.

The CSS style is Dynamic, not Static (expands or contracts in width according to the different browser sizes).

We will use different text in the logo on different pages - 30+.

We need some sort of "Text Box" that we can resize, choose different Fonts, Sizes, Alignment, etc. for each individual page in that white area.

Not Text Box as perhaps normally thought of. We want to enter text, then "save" everything as a finished web page for each different page.

How can we accomplish this? Any help will be appreciated.

Thanks,
Ron

SB65
11-20-2009, 08:56 PM
Maybe an easier solution is to use the jpeg unaltered on each page, and then place the text on top of the image using absolute positioning. You can then set the font size/colour/alignment solely through css, and set the actual text in the html of the page.

Clickman
11-20-2009, 09:12 PM
One of the other concerns we have is to be SEO friendly. Search engines look for the first readable "text" to be the most important.

The thought with having a "text box" is that the search engines would pick that up. Not sure if that would be the case with your solution?

Thanks,
Ron

Excavator
11-20-2009, 09:13 PM
Hello Clickman, I changed your image so it's upped here - deleted (http://www.google.com/search?hl=en&rls=com.microsoft%3Aen-us%3AIE-SearchBox&q=dreamweaver+properties+panel&aq=0&oq=dreamweaver+properties&aqi=g5)

Excavator
11-20-2009, 09:13 PM
One of the other concerns we have is to be SEO friendly. Search engines look for the first readable "text" to be the most important.


h1 is SEO friendly.

Clickman
11-20-2009, 09:25 PM
What method did you use to add text?

Familiar with the different headings, H1, H2 etc.

But unless text is "active" (probably wrong description) SE won't read it.

For example, the name Hairman won't be read by SE.

Thanks

Excavator
11-20-2009, 09:29 PM
For example, the name Hairman won't be read by SE.
Hairman is not text. It's part of your image.


This is the Logo we will be using.

...img deleted
We want to be able to add text in the white area to the right of the HM oval.


The h1 tag is doing that.

Clickman
11-20-2009, 09:44 PM
Hairman is not text. It's part of your image.

The h1 tag is doing that.

Okay, you have already figured out by now that I am HTML challenged :o I am using a WSWG editor. I can usually go into the code view and figure out most things after a bit of trial and error, but I'm a long away from being a coder.

That's why I originally thought of some sort of a "text box". Got to have 30 or so different "texts" on unique pages.

Couple questions;
1. did you use the "relative positioning" technique as mentioned before?
2. if not, how did you enter text?

Thanks,
Ron

Excavator
11-20-2009, 09:54 PM
No positioning other than the 10px margin to move the h1 down a bit.

This is all that does it -

#logo {
margin: 10px 0px 0px 200px;
line-height: 50px;
}

The h1 tag has an id="logo"
That margin is read clockwise - margin:top,right,bottom,left;
It's moving the h1 down 10px from the top and 200px over from the left.
The line-height:50px; matches the white space of your image.

To get a better visual idea of what h1 is doing, add a background color like this -
#logo {
margin: 10px 0px 0px 200px;
line-height: 50px;
background: #f00;
}

SB65
11-20-2009, 10:14 PM
As this is a logo, it would be better as an img on the page, not as a background image, I think, hence the absolute positioning suggestion.

Clickman
11-20-2009, 10:25 PM
OK played with it a bit. Still would have to enter a lot of different variables in HTML. Font, Size, Bold, Regular. Itals, etc.

Also, according to length of text a lot of trial & error to get spacing visually correct. Not all lines of text would start at the same point.

Being coding challenged, an active "text box" where I can choose those options from a menu would be WAY simpler.

Thanks

Clickman
11-20-2009, 10:29 PM
As this is a logo, it would be better as an img on the page, not as a background image, I think, hence the absolute positioning suggestion.

The Logo as an image - yes.

The text as an image - no. SE won't "read" it.

Would this solution treat the text as "text" or an "image"?

Thanks

Excavator
11-21-2009, 12:44 AM
Being coding challenged, an active "text box" where I can choose those options from a menu would be WAY simpler.

Thanks

I'm reasonably sure DreamWeaver can do this... I wouldn't have a clue how though. If you have DW, you don't say what resources are available to you, search their help files and see if they don't cover this.

It's still a learing curve though - DW is not alway intuitive. If you're going to deal with a learning curve anyway, why not learn the HTML/CSS that makes it work ...instead of the program that bandaids the application of that same HTML/CSS.

Who's writing this page for you? They may be able to suggest a content management system that will work for you.

SB65
11-21-2009, 08:20 AM
The Logo as an image - yes.

The text as an image - no. SE won't "read" it.

Would this solution treat the text as "text" or an "image"?

Thanks

The text is text - something like:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css" media="screen">
*{margin:0}
body{font-family:Arial, Helvetica, sans-serif}
#header{position:relative}
#strapline{position:absolute;top:16px;left:210px;font-size:2em}
</style>
</head>
<body>
<div id="header">
<img src="Images/Logo-FinalC.jpg" width="949" height="159" alt="Hairman"/>
<p id="strapline">Strapline goes here...</p>
</div>
</body>
</html>

Excavator
11-21-2009, 08:35 AM
Being coding challenged, an active "text box" where I can choose those options from a menu would be WAY simpler.


Yup, Dreamweaver's Properties panel (http://www.google.com/search?hl=en&rls=com.microsoft%3Aen-us%3AIE-SearchBox&q=dreamweaver+properties+panel&aq=0&oq=dreamweaver+properties&aqi=g5). Just what you're looking for.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum