Need beginner help--How do I align a...

User 465959 Photo


Registered User
5 posts

I just figured out how to use Website Font 4.1, Whew, I can center the <h1> header and I can make it come out from the left side. What I need it to do is to come off the left, but space out--like 12 spaces.
My webtest page is http://www.tigertelecom.net/newwebtest/
This version is centered, but it is too far to the right. I want the name of the company to align with the picture.
I've tried a lot of work arounds, including....<h1>(space-space-space-etc...)Company Name</h1> but nothing seems to work. If anyone can help me put the Company Name in the right spot, starting above the picture of the steer chute, I'd appreciate it.
I am using VSD on an already built page, HTML Editor to try to tweak the Website Font <h1> info , and Website Font 4.1.
User 463058 Photo


Ambassador
1,073 posts

You'll notice as you change the width of the browser window that everything pretty much stays where it is except that h1 header which is centered. You need it to be absolutely positioned like everything else.
User 465959 Photo


Registered User
5 posts

Cary: Thank you for the tip. Withi in mind, this morning, I tried the following and I seem to be getting somewhere.
I put an object in VSD where I wanted the header. I then inserted the <h1> tag into the "body" of the object. I then opened HTML Editor and inserted the Website Font code in the INdex. Sure enough, the header had become an object (Object 15)
I removed any other <h1> tags from previous attempts and uploaded the whole idea to www.tigertelecom.net/newwebtest2
As you can see, I still have work to fix the object size and background, but at least I solved the problem of how to move a header around using my beginner skills. Thanks, Todd
P.S.--is that outcropping in your photo in AZ?
User 463058 Photo


Ambassador
1,073 posts

That was at the top of the Grand Canyon. They had recently had a small fire there, and the smoke was still clearing out.
User 37670 Photo


Registered User
2,138 posts

Hi. Having a look at your links. In your second link, in IE, things are messed up (see attached picture).
I think you will need to add some absolute positioning to your code. VSD uses it to align everything where you put it in the program window. When you use other programs like font maker, they don't know what type of program you are going to put them in, so they write their own code (that works until you insert it into anothe program).

Here is something you can try. In the code you inserted into VSD from font maker, you have code that looks like this:
css: [
'.sIFR-root { line-height: 1em; font-size: 56px; color: #000000; background-color: #FFFFFF; text-align: center; font-weight: normal; font-style: normal; text-decoration: none; visibility: hidden; }',


Right where it says text-align: center; replace that part with something like this:
position:absolute; top:20px; left:100px;

Now you will have to play with the numbers for top and left to get the font where you want it, and I don't honestly know if this will solve the issue, but it's worth a try.

Keep in mind that you should save your work or print the code so that you can reverse any changes to at least get back to what you have in case my suggestion does not work.

Good Luck
Attachments:
E-Learning Specialist
www.mainsites.ca is my website, and yes, some of it is crappy.
User 465959 Photo


Registered User
5 posts

Thanks, Cliff: This has been a real learning experience for me. I even bought a book on CSS yesterday....
What I have now is close to "good enough" if you were to check http://www.tigertelecom.net/newwebtest

Last night, I struggled for a while placing the code <h1> Company Name</h1> and finally got it away from the left margin using a replacement fragment: margin-left: 200px.--similar to your code insertion recommendation. But your code is better and I'll try it out--because........(and the story goes on)....the actually Company name was clipped off after the PH in Photography. I tried everything--thinking I had a left over fragment or border and nothing lept out at me. I figure there might be a <h1> right margin limiter in there someplace? Your code piece may help me fix it and I can try again.
So finally, I open VSD and created an HTML box and put <h1>AZ Family Horse Photography</h1> in there, added the code from the Webfont fool into the Header box on the VSD menu, and voila....
I found this to be a really interesting problem so I will go back and try to do it the "CSS" way (versus my VSD way).
I'm also going to try once again to lift the code onto a separate CSS stylesheet, but that didn't work last night for me, so, got to go back to the "baby steps" and break it all down.

Lessons Learned about Website Font
Lastly--and if anyone is still reading this about my beginner efforts with Website font--I will make the following "lessons learned" statements that are probably self-evident to most web designers, but as someone who is new to this, I'll make them so that the next new guy might at least avoid my confusion. I didn't find this info in the instructions, but it is in the Youtube video--the link from the Coffeecup page didn't work for me, but if you go to Youtube and search, it comes up.
1. Website font builds the characteristics of a font for your text. It will save those characteristics, but not your text itself. When you reopen your saved file, it will only have the font characteristics, not your "saved" <h1> text.
2. Your text /headline needs to be included in the "body" of your html document as something similar to: <h1>Company Name</h1>
3, You can use the HTML tool to insert the code into the header, and the <h1> line into the body, OR, you can also use VSD, by opening the HTML tool window, inserting the <h1> line into the HTML portion of the dialog box, and then adding the Website font code to the Edit=>Edit Header dialog.
4. Clarification is needed regarding uploading the folder "websitefontdata." Upload the entire folder as a folder, not the individual components.

Lastly: I like Coffee Cup software. I find this to be a really encouraging environment where you can start off really simple and grow. The website font experience was part of me stretching a bit, and I enjoyed it. I also bought a copy of the Webmaster Jam Session 2007 last year, and it was very inspiring. From watching that video, I have developed my own color palettes, font preferences, etc. I liked that it was about design, and text, and color--important stuff that I am coming to late in the game. Finally "Kudos to Coffee Cup" for creating this really neat environment.

User 37670 Photo


Registered User
2,138 posts

Well done! The new <h1> heading looks great!

Was checking out your site and came accross a problem on your "Info" page. Where your blog is supposed to be, all I see is an empty white box area. Looks like maybe a simple mistake of leaving spaces in file names used on the Internet. Your blog's .swf file is called "az family horse photography blog.swf"
The Internet does not like spaces in names of files. That means images, folders, .swf, and others. Try to use simple, easy to remember names.
"horse_photo_blog" works because of the _ between words. "horse-blog" will not work and "horse blog" won't work because of the space. There could be other reasons why I don't see the blog, but the name of the .swf file is the most obvious.

Love the site, the horses are beautiful to see in all those images. Great job.
E-Learning Specialist
www.mainsites.ca is my website, and yes, some of it is crappy.
User 465959 Photo


Registered User
5 posts

Cliff:
Thanks for checking out the scene. The existing page is at http://www.azfamilyhorsephotography.com (actual web address is: Http://www.tigertelecom.net)

The "newwebtest" folder is my test folder for the webfont exercise, and I didn't plug the blog into it. I hope that is the one you were looking at.

The blog should come up on my production page in the main area. (notice the cheesy flash title--that's what I'm going to replace with my new websitefonts). I will however follow up on your suggestion on the blog title in an upcoming rev--keeping it simple makes sense.

Thank you also for enjoying the photos.


Todd







User 447551 Photo


Ambassador
139 posts

I just went to your site using Firefox and noticed that your
A Z Family Horse Photography Image comes down over your picture and just comes to below your name.
Your background is partially transparent but only about 50%

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.