|
| |
|
|
NedoMedo
Posts: 20
Joined: 4/2/2007
Status: offline
 |
Bookmark/Formatting problem - PLZ HELP - 4/2/2007 14:40:22
Hello all, I'm new and need help desperately,
This is the problem, I created a website: http://www.imageonesalonandspa.com/Services.htm
But when I click on some of the links, the formatting/location of some objects shifts/changes. Before I click on the links everything is fine, just like the way i made it in FP 2003. Here is how it happens:
If I just open the page and scroll down all the formatting around all the text is perfect. But when I click on the following links up top: Color & Highlighting, Texturizing & Sty.... or Makeup Application the little Top of Page picture link changes its positioning. I had other text there and that would change as well. Everything else on the page is created the same, yet only when I click on those 3 links things arund them change.
Please help
|
|
|
|
NedoMedo
Posts: 20
Joined: 4/2/2007
Status: offline
|
RE: Bookmark/Formatting problem - PLZ HELP - 4/2/2007 15:01:15
How do I create doctype and how will it help me? I am not sure what it is. I previewed the page in a few browsers and it worked fine. I know the pic Where your image is number 1 looks like crap, I will change it. Basically all that page is: text boxes and a few links, any idea on the formatting problem that changes when I click on it?
http://www.imageonesalonandspa.com/Aboutus.htm
is cretaed the same way, yet it has not problems.
Thanks a lot
| |
|
|
|
jaybee
Posts: 14442
Joined: 10/7/2003
From: Berkshire, UK
Status: offline
|
RE: Bookmark/Formatting problem - PLZ HELP - 4/2/2007 15:56:48
Lets see if I can explain this better. Google and the other Search ENgines don't see that page as you do. They look at the code behind the page and they go through to find relevant content that they can use to index your site.
Google reads the first 500 or so words on the page. This is what it will see when it reads your service page.
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="File-List" href="Services_files/filelist.xml">
<title>Image One Salon and Spa</title>
<!--[if !mso]>
<style>
v\:* { behavior: url(#default#VML) }
o\:* { behavior: url(#default#VML) }
.shape { behavior: url(#default#VML) }
</style>
<![endif]-->
<script language="JavaScript" fptype="dynamicanimation">
<!--
function dynAnimation() {}
function clickSwapImg() {}
//-->
</script>
<script language="JavaScript1.2" fptype="dynamicanimation" src="animate.js">
</script>
<!--[if gte mso 9]>
<xml><o:shapedefaults v:ext="edit" spidmax="1027"/>
</xml><![endif]-->
</head>
<body onload="dynAnimation()">
<p align="center">
<span style="position: absolute; left: 101; top: 16">
<img border="0" src="Services_files/Trim2.gif" width="800" height="559"><span style="position: absolute; left: 556; top: 171"><span style="position: absolute; left: -108; top: -18"><img border="0" src="Hello3.gif" width="359" height="36"></span></span></span></p>
<p><!--[if gte vml 1]><v:shapetype id="_x0000_t202"
coordsize="21600,21600" o:spt="202" path="m,l,21600r21600,l21600,xe">
<v:stroke joinstyle="miter"/>
<v:path gradientshapeok="t" o:connecttype="rect"/>
</v:shapetype><v:shape id="_x0000_s1040" type="#_x0000_t202" alt="" style='position:absolute;
left:69.75pt;top:36.75pt;width:426.75pt;height:27pt;z-index:1' filled="f"
stroked="f">
<v:textbox>
<table cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td align="center">
<p align="left">
<font face="Lucida Sans" color="#800000" style="font-size: 13pt">1002 Old
Hickory Lane - Jefferson Hills, PA - (412) 653-6034</font></td>
</tr>
</table>
</v:textbox>
</v:shape><![endif]--><![if !vml]><span style='mso-ignore:vglayout;position:
absolute;z-index:1;left:93px;top:49px;width:573px;height:40px'><img width=573
height=40 src="Services_files/image001.gif" v:shapes="_x0000_s1040"></span><![endif]></p>
<p></p>
<p><!--[if gte vml 1]><v:line
id="_x0000_s1035" alt="" style='position:absolute;left:0;text-align:left;
top:0;z-index:1' from="291.75pt,175.5pt" to="291.75pt,186.75pt" strokecolor="#f93"/><![endif]--><![if !vml]><span
style='mso-ignore:vglayout;position:absolute;z-index:1;left:388px;top:233px;
width:2px;height:17px'><img width=2 height=17 src="Services_files/image002.gif"
v:shapes="_x0000_s1035"></span><![endif]><!--[if gte vml 1]><v:line id="_x0000_s1038"
alt="" style='position:absolute;left:0;text-align:left;top:0;z-index:1'
from="346.5pt,175.5pt" to="346.5pt,186.75pt" strokecolor="#f93"/><![endif]--><![if !vml]><span
style='mso-ignore:vglayout;position:absolute;z-index:1;left:461px;top:233px;
width:2px;height:17px'><img width=2 height=17 src="Services_files/image002.gif"
v:shapes="_x0000_s1038"></span><![endif]></p>
<p><!--[if gte vml 1]><v:line id="_x0000_s1032"
alt="" style='position:absolute;left:0;text-align:left;top:0;flip:x;z-index:1'
from="135pt,175.5pt" to="135pt,186.75pt" strokecolor="#f93"/><![endif]--><![if !vml]><span
style='mso-ignore:vglayout;position:absolute;z-index:1;left:179px;top:233px;
width:2px;height:17px'><img width=2 height=17 src="Services_files/image002.gif"
v:shapes="_x0000_s1032"></span><![endif]></p>
<p><!--[if gte vml 1]><v:line id="_x0000_s1036"
alt="" style='position:absolute;left:0;text-align:left;top:0;flip:x;z-index:1'
from="211.5pt,175.5pt" to="211.5pt,186.75pt" strokecolor="#f93"/><![endif]--><![if !vml]><span
style='mso-ignore:vglayout;position:absolute;z-index:1;left:281px;top:233px;
width:2px;height:17px'><img width=2 height=17 src="Services_files/image002.gif"
v:shapes="_x0000_s1036"></span><![endif]></p>
<p></p>
<p><!--[if gte vml 1]><v:rect id="_x0000_s1039"
alt=""
href="file:///C:\Documents%20and%20Settings\Administrator\My%20Documents\IMAGE%20ONE\Services.htm"
style='position:absolute;left:140.25pt;top:173.25pt;width:66pt;height:15.75pt;
z-index:1' fillcolor="yellow" strokecolor="#ff9">
<v:fill opacity="19661f"/>
</v:rect><![endif]--><![if !vml]><span style='mso-ignore:vglayout;position:
absolute;z-index:1;left:186px;top:230px;width:90px;height:23px'><a
href="file:///C:\Documents%20and%20Settings\Administrator\My%20Documents\IMAGE%20ONE\Services.htm"><img
border=0 width=90 height=23 src="Services_files/image003.gif" v:shapes="_x0000_s1039"></a></span><![endif]><span style="position: absolute; left: 556; top: 171"></span></p>
<p></p>
<p dynamicanimation="fpAnimformatRolloverFP1" fprolloverstyle="font-family: Aharoni; text-transform: uppercase; font-weight: bold; padding: 0" onmouseover="rollIn(this)" onmouseout="rollOut(this)" language="Javascript1.2"><!--[if gte vml 1]><v:shape
id="_x0000_s1041" type="#_x0000_t202" alt=""
href="http://www.imageonesalonandspa.com/" title="C:\Documents and Settings\Administrator\My Documents\IMAGE ONE\index.htm"
style='position:absolute;left:78pt;top:169.5pt;width:61.5pt;height:24.75pt;
z-index:0' filled="f" stroked="f">
<v:textbox>
<table cellspacing="0" cellpadding="0" width="50" height="22">
<tr>
<td align="center" width="56" height="22">
<p align="left">
<a title="C:\Documents and Settings\Administrator\My Documents\IMAGE ONE\index.htm" href="http://www.imageonesalonandspa.com" style="text-decoration: none" dynamicanimation="fpAnimformatRolloverFP1" fprolloverstyle="font-family: Lucida Sans; text-decoration: blink; font-weight: bold" onmouseover="rollIn(this)" onmouseout="rollOut(this)" language="Javascript1.2">
<font face="Lucida Sans" size="4" color="#FFFF66">Home</font></a></td>
</tr>
</table>
</v:textbox>
</v:shape><![endif]--><![if !vml]><span style='mso-ignore:vglayout;position:
absolute;z-index:0;left:104px;top:226px;width:86px;height:37px'><a
href="http://www.imageonesalonandspa.com/"><img border=0 width=86 height=37
src="Services_files/image004.gif"
title="C:\Documents and Settings\Administrator\My Documents\IMAGE ONE\index.htm"
v:shapes="_x0000_s1041"></a></span><![endif]></p>
Now if you can find anything of interest in that lot I'll be surprised. Contrast that with the code behind the page in a site I've just done for a client.
<!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="application/xhtml+xml; charset=UTF-8" />
<meta name="verify-v1" content="+3sCu/KBezd9tiXLBs/xpS46p9R+FwcygG8ueIwiGZw=" /><meta name="author" content="JBVisions" />
<meta name="copyright" content="© JBVisions" />
<title>Malcolm Cook - An evening with ........</title>
<meta name="Keywords" content="Malcolm, Malcolm Cook, Cook, malcolmcook, after dinner speaker, after dinner speaking, raconteur, music industry, entertainment, UK, England" />
<meta name="Description" content="Malcolm Cook, after dinner speaker and raconteur, has been friend and manager to the stars for over 40 years" />
<link rel="meta" href="http://www.malcolmcook.co.uk/labels.rdf" type="application/rdf+xml" title="ICRA labels" />
<meta http-equiv="pics-Label" content='(pics-1.1 "http://www.icra.org/pics/vocabularyv03/" l gen true for "http://malcolmcook.co.uk" r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 0) gen true for "http://www.malcolmcook.co.uk" r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 0))' />
<link rel="stylesheet" href="css/stylesheet.css" type="text/css" />
<style type="text/css">
abbr { border-bottom-width: 1px; border-bottom-style: dotted; }
</style>
</head>
<!-- ********************************************* -->
<!-- put id tag in body for current page indicator -->
<!-- ********************************************* -->
<body id="home">
<div id="container">
<div id="header">
<div class="floatit">
<span class="nice">Nice to meet you, here's my card.</span>
<h1>After <strong>Dinner Speaker</strong></h1>
</div>
</div>
<div id="navigation">
<ul>
<li><a href="index.html" id="homenav">Home</a></li>
<li><a href="biography.html" id="bionav">Potted Bio</a></li>
<li><a href="portfolio.html" id="portnav">Gallery</a></li>
<li><a href="trivia.html" id="trivnav">Trivia</a></li>
<li><a href="contact.html" id="contactnav">Contact</a></li>
</ul>
</div>
<div id="content">
<h2>Nice to meet you!</h2>
<h3>An introduction</h3>
<p>Larger than life in more ways than one,
Mal has been in and around the entertainment and music industry for more
years than he'd care to remember. </p>
<p>Working with many of the big names over the years, he's amassed a
huge number of stories, anecdotes and hysterical tit-bits about the
stars of stage, screen and radio as well as tales of what goes on behind
the scenes, all of which, give a fascinating insight into what life is
really like without the tinsel and glitter.</p>
<p>All of these stories were going to waste until some bright spark
suggested that Mal
could share them with the world by way of a book and by offering
himself up as a modern day minstrel but, luckily for us all, without the
singing part.</p>
<p>I'm certain that his tales will provide the perfect end to any event
and I am therefore delighted to present to you, after dinner speaker and
raconteur extraordinaire, my friend, Mal
Cook</p>
_____________________________
If it ain't broke..... fix it until it is.
GAWDS
Now where did I put that Doctype?
| |
|
|
|
NedoMedo
Posts: 20
Joined: 4/2/2007
Status: offline
|
RE: Bookmark/Formatting problem - PLZ HELP - 4/2/2007 19:14:24
OK, my page sucks but i'm still going to try to make the best out of it. I know its not close to clean as yours but i'm trying. How can I make the text as clear as yours? I just used the add text button to add my text and you saw the code....its like hell. Also when I added a doctype my pics all shifted and i dont know how to get them where they should be. Any help ? Any suggestions how to clean the code? As you can see i'm not that good at this, but i'm learning, any suggestions would help.
Thanks
| |
|
|
|
NedoMedo
Posts: 20
Joined: 4/2/2007
Status: offline
|
RE: Bookmark/Formatting problem - PLZ HELP - 4/3/2007 8:03:06
Ok so the main text is all one big table with text. I havent added any meta tags yet but everything seems to work now. The only thing is that when I add a doctype all the pics in my page shift to the side quiet a bit. I tried all of these:
HTML 4.01 Strict, Transitional, Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
and it was the same problem. I even started a new page and put the doctype in first before anything and when I insrted my pics they looked completely off in the preview/browser.
Do I have to do something with the picture formatting for it to stay in place.
By the way thanks a lot, I really appreciate you taking your time to help a rookie out.
| |
|
|
|
NedoMedo
Posts: 20
Joined: 4/2/2007
Status: offline
|
RE: Bookmark/Formatting problem - PLZ HELP - 4/3/2007 8:47:17
Also, how bad is it that my page won't validate?
Besides the doctype, there are so many other errors showing, and i'm becoming really anxious about this since I don't know how to fix all of those.
| |
|
|
|
NedoMedo
Posts: 20
Joined: 4/2/2007
Status: offline
|
RE: Bookmark/Formatting problem - PLZ HELP - 4/3/2007 9:06:19
I copied and pasted some text from Notepad thats about it... I'm going to try to clean it up myself but I doubt i'll know. I just want it to work...
| |
|
|
|
NedoMedo
Posts: 20
Joined: 4/2/2007
Status: offline
|
RE: Bookmark/Formatting problem - PLZ HELP - 4/3/2007 9:27:54
I tried redoing everything from scratch, but get the same problem when adding a doctype that my pics move all the way for no reason, so i stopped. See below.
quote:
Ok so the main text is all one big table with text. I havent added any meta tags yet but everything seems to work now. The only thing is that when I add a doctype all the pics in my page shift to the side quiet a bit. I tried all of these:
HTML 4.01 Strict, Transitional, Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
and it was the same problem. I even started a new page and put the doctype in first before anything and when I insrted my pics they looked completely off in the preview/browser.
Do I have to do something with the picture formatting for it to stay in place.
By the way thanks a lot, I really appreciate you taking your time to help a rookie out.
| |
|
|
|
NedoMedo
Posts: 20
Joined: 4/2/2007
Status: offline
|
RE: Bookmark/Formatting problem - PLZ HELP - 4/3/2007 9:51:58
Ok,
I'm pretty sure i'm starting over. This is a page i'm doing as a favor for free, not that my crap should ever be charged LOL. I will publish it like it is so that there is somethign their customers can see if they need. (Maybe 5 -10 hits a month, a small place) But i'm going to start over with the doctype first and everythign carefully clean with tables and links. it should not take long as I have all the necessary materials.
First question, how do I add pictures after adding a doctype so they don't move/shift when viewed in browser ?
| |
|
|
|
womble
Posts: 6285
Joined: 3/14/2005
From: Living on the edge
Status: offline
|
RE: Bookmark/Formatting problem - PLZ HELP - 4/3/2007 17:02:16
Jaybee and Tailslide are right - starting from scratch with a clean slate is the only way you're going to get that anywhere near decent. There's absolutely no reason whatsoever for using images for all that.
At times I need to use screen magnification software and screen-reading software. With the magnification software we're not just talking jaggy images, we're talking crap images. With the screen reader I get absolutely nothing, because there's nothing there for a screen-reader, or search engines for that matter, to see. I'm outta there.
_____________________________
~~ "A cruel god ain't no god at all" ~~
~~ Erase hate. Practice love. ~~
| |
|
|
|
NedoMedo
Posts: 20
Joined: 4/2/2007
Status: offline
|
RE: Bookmark/Formatting problem - PLZ HELP - 4/4/2007 8:31:18
Thank you all for your help, I really had no clue that some of these things mattered in regards to the code cleanliness and structure. Starting over is the way to go. I started playing with tables already and realized I can do literally everything with them that I did the crappy way without them. Does it make a difference if I make one bigger table with more cells (harder) or more 1x1 tables (1 cell easy to move around/navigate) ?
Another question is, is it the same if I convert already written textbox text to a table compared to if I start out with a new table and insert text ? Converting would be much quicker, just wondering if the code will be a mess again, which would defeat the purpose of changing to tables.
Thanks
| |
|
|
|
jaybee
Posts: 14442
Joined: 10/7/2003
From: Berkshire, UK
Status: offline
|
RE: Bookmark/Formatting problem - PLZ HELP - 4/4/2007 9:43:23
quote:
ORIGINAL: NedoMedo
Thank you all for your help, I really had no clue that some of these things mattered in regards to the code cleanliness and structure. Starting over is the way to go. I started playing with tables already and realized I can do literally everything with them that I did the crappy way without them. Yep, amazing isn't it. You'll also find it a heck of a lot easier to look after as well.
quote:
Does it make a difference if I make one bigger table with more cells (harder) or more 1x1 tables (1 cell easy to move around/navigate) ? Use one table for most things and then break it up using cells. You can merge cells together if you need to make some wider to sit under 2 individual cells above them.
To clarify that, if you have a block of 4 cells for example. 2 on top and two underneath and you want to put something in each of the top two but would rather the two underneath was actually one so you could maybe put a wide picture in, then you can merge the two bottom ones together so they make a single cell but line up with the two above. Does that make sense?
If it's a very long page you will be better off either trying to do two different pages or using tables sitting on top of each other. When browsers render tables they do the whole layout before showing anything so if there's a lot on the page it helps to break it up into a number of stacked tables then your visitor can be reading the top bit while the ones underneath are being put together.
What you shouldn't do, because it makes maintenance difficult, is put tables inside tables.
quote:
Another question is, is it the same if I convert already written textbox text to a table compared to if I start out with a new table and insert text ? Converting would be much quicker, just wondering if the code will be a mess again, which would defeat the purpose of changing to tables.
Thanks
No start from scratch. If you start converting text boxes it's likely to pull all sorts of rubbish in. Set up the table and then type the text. Pain I know but you'll be glad you did later on when you have to make changes.
_____________________________
If it ain't broke..... fix it until it is.
GAWDS
Now where did I put that Doctype?
| |
|
|
|
NedoMedo
Posts: 20
Joined: 4/2/2007
Status: offline
|
RE: Bookmark/Formatting problem - PLZ HELP - 4/4/2007 10:01:53
Thats what i thought with converting tables. When Inserting pics into tables, is it easy to work with? I mean when I insert a pic into a cell, will the cell automatically resize itself to fit the picture? Or will the picture resize itself to fit into the cell ?
Also, I took out the crappy text/picture that you told me about on the first response. Since I want to use a font i downloaded to type the text out for that pic and no one else has the font, Is there a tool to convert text into images? What I did is, type the text into power point and save as in an image format. And you saw the result, the image looked all fuzzy with all formats tried.
Thanks, I hope I make sense.
| |
|
|
|
NedoMedo
Posts: 20
Joined: 4/2/2007
Status: offline
|
RE: Bookmark/Formatting problem - PLZ HELP - 4/4/2007 12:06:01
I have photoshop already but havent tried to make an image out of the text. What is the package name that comes with windows ?
| |
|
|
|
womble
Posts: 6285
Joined: 3/14/2005
From: Living on the edge
Status: offline
|
RE: Bookmark/Formatting problem - PLZ HELP - 4/4/2007 12:06:38
quote:
ORIGINAL: NedoMedo
quote:
Also, I took out the crappy text/picture that you told me about on the first response. Since I want to use a font i downloaded to type the text out for that pic and no one else has the font, Is there a tool to convert text into images?
If it's a particular font you want to use for say a page header, you can include the text in the header image - most graphics apps will let you add text into an image using whatever fonts you have installed on your machine. As Jaybee says, there are some free ones about, as well as some paid ones such as older versions of Paint Shop Pro (which is pretty good but without the steep learning curve or price tag of Photoshop). If you do that though, you need to use an "alt" attribute on the image which your text goes into, so for example if your header image had text in it that said "My Webpage", the code would look something like, <img src="myimage.jpg" height="50" width="100" alt="My webpage" /> When you insert an image, FrontPage gives you the option of adding alt text. Screen-readers will read whatever's in the alt attribute.
For menus and body text though you're always better sticking to standard fonts, because though screenreaders will read the alt attribute on images, it's a lot easier for search engines to effectively index your site if you're using text. The other problem with using text as images is that if people alter the default text size on their computer or increase the text size, images don't re-size, so they may have difficulty reading text in images.
_____________________________
~~ "A cruel god ain't no god at all" ~~
~~ Erase hate. Practice love. ~~
| |
|
|
|
NedoMedo
Posts: 20
Joined: 4/2/2007
Status: offline
|
RE: Bookmark/Formatting problem - PLZ HELP - 4/4/2007 12:46:38
You might be missunderstanding me. Maybe not.
I want to add the text: "Where your Image is # 1" to a few places on my sites. I want it to be in a font that looks like its handwritten. I found a font and downloaded it, but unless I make it an image i cannot put it up on my site for everyone else to see it. (no-one else has it downloaded).
So i need to make it an image...after all. I know its better to use regular fonts, but need something different this time.
| |
|
|
|
NedoMedo
Posts: 20
Joined: 4/2/2007
Status: offline
|
RE: Bookmark/Formatting problem - PLZ HELP - 4/4/2007 13:12:26
Also,
is there a way to make sure that my 5 main links: Home, Products, Services don't change their size when a user changes the default text size. I saw some pages where nothing changes, everything seems locked.
Ex: www.steelers.com
But on most pages the links don't change, just the text.
Can I prevent the links from changing or lock everything ?
Thanks
| |
|
|
|
NedoMedo
Posts: 20
Joined: 4/2/2007
Status: offline
|
RE: Bookmark/Formatting problem - PLZ HELP - 4/4/2007 13:31:56
yep,
Is there a tool to make an image out of non-standard font text?
when I open this page:
http://www.frontpagewebmaster.com/m-362610/tm.htm#362870
and change the text size to largest, only the left side of the screen gets bigger nothing else. How can I make that happen for me on my page, so themain links don't change?
What do you mean "Specify the font in pt " ? Would that help ?
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
