Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    Nov 2009
    Posts
    20
    Thanks
    4
    Thanked 0 Times in 0 Posts

    LOGO - CHALLENGE Add Text W/O Photoshop or Java


    This is the Logo we will be using.



    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
    Last edited by Clickman; 11-20-2009 at 09:08 PM. Reason: corrections

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    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.

  • #3
    New Coder
    Join Date
    Nov 2009
    Posts
    20
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Clickman, I changed your image so it's upped here - deleted
    Last edited by Excavator; 11-21-2009 at 08:33 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Clickman View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Nov 2009
    Posts
    20
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New Coder
    Join Date
    Nov 2009
    Posts
    20
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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 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

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    No positioning other than the 10px margin to move the h1 down a bit.

    This is all that does it -
    Code:
    #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 -
    Code:
    #logo {
    		margin: 10px 0px 0px 200px;
    		line-height: 50px;
    background: #f00;
    	}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    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.

  • #11
    New Coder
    Join Date
    Nov 2009
    Posts
    20
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Text box still wanted - best for me

    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

  • #12
    New Coder
    Join Date
    Nov 2009
    Posts
    20
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    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

  • #13
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Clickman View Post

    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #14
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Quote Originally Posted by Clickman View Post
    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:

    Code:
    <!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>

  • #15
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Clickman View Post
    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. Just what you're looking for.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •