HTML - How To Superimpose An Image On A Site

I've found some help here already, so thanks in advance to the good folks that help us novices.

I have just a couple that need addressing, but they're pretty important to me, so hopefully someone can spell them out.

I'll explain them below but here's a quick rundown first:
1.) Wrapping text around a captioned image
3.) A pop-up text bar when a link is moused over.

1.) When I'm posting an image, a caption is almost always necessary. Here's the code I've been using for the image and caption:
"<table class="image">
<caption align="bottom">CAPTION</caption>
<tr><td><IMAGE LINK></td></tr>
</table>"
But when I post like that, there's a break between paragraphs to show the image, which disrupts the reading flow. I need a code that will let me post an image, add a bottom-aligned caption, and still have the story text appear alongside the image.
NOTE: I've been shown the "align=left/right" code, but where do I insert that in the code listed above?? I've tried right before and right after the image source code, but to no avail. Help, please!!

2.) I'm willing to spend hours to learn this one. Somebody, somebody has to know how to do this one. It's done on this site!
OK, here it is.
You mouse over a post listing, and a text bar appears next to the cursor. In that bar is the first few lines of the person's post.
HOW IS THIS DONE???
For someone looking to find new ways to boost hits on a news site, this is a priceless gem. If anyone knows how to do this or something similar in HTML, PLEASE let me know.


Thanks in advance to each and every person who reads this, and a special thanks to those who take the time to help. It means much.

aefattwotgm@aol.com

Hello,
This is my first post here, the site is great so far.
Anyways, I have a proxy site and I submitted it to alot of top lists, which require you to put a piece of code to link back to them. Problem is, the little pictures take up alot of space and take a while to load, so I was wondering if there is a way to disable images for a part of the page, so that it will be lots of text instead of pics. (the image link has alternative text).
Heres the site: http://www.redprox.com/

Thanks!

Hi,

My website sits of center on the iphone's. I think logic tells me that its something to do with the background image.

http://pjm.co.uk.uksite4.yourwebserv...splay&PageID=5

Please can someone help as I've been stuck on this for AGGGGEEEEESSS

Thanks alot
Joe

I am wondering if it is possible to create an INDEX.HTML to redirect to another website?

I would like it to display the redirected site, but if possible keep to the original address..

e.g.
A site named www.mysite.com, with an INDEX.HTML to redirect to www.othersite.com, which displays OTHERSITE with www.mysite.com in the address bar.

Hope I explained ok, any responce would be much appricated!
Thanks!

Hi all --

I'm having an interesting problem. I'm designing a web page that has a navigation banner (home - programs - schedule of events - contact us - downloads) that is made up of a .png for each page (i.e. home.png, programs.png, etc). My page is 1000px wide and all of the navigation banner's images add up to 1000px wide.

I'm using JavaScript to create an onMouseOver and onMouseOut effect on each of the images. The problem that I'm having occurs when I tried to add a link (either by <A HREF= or using an image map). Whenever I add a link to the image, a small (3px) area of white space shows up to the right of the image. This shifts all of my other images 3px to the right (and 3 more for each link I add to subsequent images) thus making the total width of the navigation banner over 1000px and the last image gets shoved to a new line.

I can find no way to get rid of this white space other than to remove the link from the image. There is no property on the page that adds any sort of padding, margins, or borders to images or links, so I can see no property that has to be changed.

Help! How do I get rid of this white space but still keep the link on the image??

[I posted this question on the Adobe forum to no avail, below is a screencap I took of the issue I'm having]

Thanks in advance!
//kl

PS - I am using both IE8 and Chrome to view this webpage. I've set all the margins/padding/borders to 0px. Here is my CSS and the part of the code that pertains to the navigation banner.

CSS:
Code:

<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-image: url(images/blue.bg.png);
background-repeat: repeat;
background-color: #009;
}
.oneColFixCtr #container {
width: 1000px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColFixCtr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
body, td, th {
color: #333;
}
#main_banner2 {
margin: 0px;
padding: 0px;
height: auto;
width: 1000px;
}
-->
</style>
 
</head>

Nav Banner:
NOTE:: below HAS to be all one paragraph because if i insert a carriage return in between images, it also adds the white space...
Code:

<body class="oneColFixCtr">
 
<!-- MAIN NAVIGATION BANNER -->  
<!--HOME--><img src="images/nav/home.png" alt="home" name="home" width="82" height="30" border="0" onMouseOver="document.images.home.src='images/nav/home_over.png'" onMouseOut ="document.images.home.src='images/nav/home.png'"/><!--PROGRAMS--><img src="images/nav/programs.png" width="111" height="30" border="0" name="programs" onMouseOver="document.images.programs.src='images/nav/programs_over.png'" onMouseOut ="document.images.programs.src='images/nav/programs.png'"/><!--SCHEDULE OF EVENTS--><img src="images/nav/scheduleofevents.png" width="189" height="30" border="0" name="scheduleofevents" onMouseOver="document.images.scheduleofevents.src='images/nav/scheduleofevents_ over.png'" onMouseOut ="document.images.scheduleofevents.src='images/nav/scheduleofevents.png'"/><!-- CONTACT US--><img src="images/nav/contactus.png" width="119" height="30" border="0" name="contactus" onMouseOver="document.images.contactus.src='images/nav/contactus_over.png'" onMouseOut ="document.images.contactus.src='images/nav/contactus.png'"/><!--DOWNLOADS--><i mg src="images/nav/downloads.png" width="267" height="30" border="0" name="downloads" onMouseOver="document.images.downloads.src='images/nav/downloads_over.png'" onMouseOut ="document.images.downloads.src='images/nav/downloads.png'"/><!--FACEBOOK--><im g src="images/nav/facebook.png" width="90" height="30" border="0" name="facebook" onMouseOver="document.images.facebook.src='images/nav/facebook_over.png'" onMouseOut ="document.images.facebook.src='images/nav/facebook.png'"/><!--TWITTER--><img src="images/nav/twitter.png" width="67" height="30" border="0" name="twitter" onMouseOver="document.images.twitter.src='images/nav/twitter_over.png'" onMouseOut ="document.images.twitter.src='images/nav/twitter.png'"/><!--BLOGGER--><img src="images/nav/blogger.png" width="75" height="30" border="0" name="blogger" onMouseOver="document.images.blogger.src='images/nav/blogger_over.png'" onMouseOut ="document.images.blogger.src='images/nav/blogger.png'"/><img src="images/home_banner.png" alt="home_border" width="1000" height="7" /><br />

So in January 2006 I posted a question about "making two buttons in one"



3 years and 5 months later i am happy to announce that I have found a solution.

Ok, so no I have not spent the last three years looking, but the need for one came around again yesterday so I revisited the project. All I needed was "simple" image toggle. Image 'A' click it once it changes to image 'B' click it again it changes back to image 'A'

All the "image toggle" codes I could find were extremely complex. I thought I had finally found one, it wasn't perfect, but it was the smallest and most basic thing I could find.

HTML Code:

<html>
<head>
<style type="text/css">
.on {background-image:url(playlist_btn.png); background-repeat:no-repeat;}
.off {background-image:url(playlist_btn_x.png); background-repeat:no-repeat;}
</style>

<script language="javascript">
function togglestyle(el){if(el.className == "on") {el.className="off";} else {el.className="on";}}
</script>

</head>

<body>
<div id="onoff" class="playlist_btn"><img src="blank.gif" width="50 height="50" onclick="togglestyle(onoff)"></div>
</body>
</html>

I tested it, it worked, so I considered problem solved. I placed it in my page and nothing. Turns out it wont work with a doc type - so it's useless.

Other problems, I'm not big on using "blank gif's" unless I have to, if you want multiple image toggles you need a new JS function for each one, and two lines of css as well. And, though I rarely use image rollovers anymore, it would certainly not be possible in this method.

So it was back to the drawing board. Well, I had actually already found the solution a few minuets prior to finding out that the above code is so good. I had coded a button that on rollover shows a tooltip, when you click the button, the text in the tool tip, changes, chick again and it reverts. All done with a simple showHide javascript function, that i am finfing out has many uses.

here is the awesome code:
Code:

function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}

function hideShow(elementid){
if (document.getElementById(elementid).style.display == ''){
document.getElementById(elementid).style.display = 'none';
} else {
document.getElementById(elementid).style.display = '';
}
}

I wont take credit for the showHide code, but I will take credit for the hideShow portion, obviously a monkey could have coded the revers, but iot does make it that much more universal. As the original code was designed to show something that was hidden, add the revers to hide something that is showing and it's perfect.

Now I will take a moment to say, though I have yet to find a problem with the code, it seems to work in most browsers, firefox, ie, safari, and validates for WC3 - In sure it has it's flaws. Until now, to show and hide divs I had used the MM_showHideLayers JavaScript function, which by default used the visibility style. It is of course a good script, and has many uses, it's not very big, but it is somewhat complex. The other thing to think about is that invisible objects still take up space. That's what is cool about the display:none: style, is that is not only invisible but it doesn't take up space.

So here is how I used the above to JavaScript to make a simple onclick image toggle:

HTML Code:

<img id="on" src="on.png" width="50" height="50" onClick="javascript:hideShow('on'); javascript:showHide('off')" alt="on">
<img id="off" src="off.png" width="50" height="50" onClick="javascript:hideShow('off'); javascript:showHide('plus')" style="display:none;" alt="off">

Cool huh? Now this example does not have a rollover either, but since it uses to individual images and is not replacing one image wioth another you could easily apply a rollover to both images. But, hold on, look at the above code, isn't that essentially a rollover? Change the first onClick to onMouseOver and the second to onMouseOut and look at that a 'brand new' method for mouseovers.

So lets take a look at this for a second, and compare MM_swapImage to this new hideShow method. As far as CSS rollovers I definitely prefer them to the MM_swapImage method, as they use a minimal amount of code. However they actually take a lot of math, construction the buttons is somewhat tedious, because css buttons use 1 image and change it's position, to work well you have to use a "blank.gif" and the the css can really add up if you have a lot of buttons:

Also, you can't go directly to a button in the document, you have to fish through the css to make any adjustments. But they are fast, they don't need to be preloaded and... they are pretty cool. But anyway, swapImage and hideShow...



The left is the MM_swapImage method. Now when you use the swapImage js you also have to use MM_swapImgRestore, MM_findObj, MM_preloadImages. You don't have to use the preload script but it does make thing work faster... supposedly, but that requires a onload script in the body tag, and if you have a lot of rollovers your body tag can get really long really quick. So what are the advantages, well we know for sure it works, and you only need on image in the document, however actualy having the image you are "swapping" too actually in the document can add functionality.

So as you can see, on the right, the showHide method is, in total code, much smaller. True you do need to use two images, so the total code in the body is longer but, it's more than evened out bu the minimal JavaScript, and I think it's worth it. You don't need to use a preloader, you have full control over both images, the up and over state, and unlike the swapImage method, though it's rare you would need to, your up and over images can actually be different sizes, which is kind of cool.

So here's the basic code for a rollover:
HTML Code:

<img id="up" src="up.png" width="50" height="50" onMouseOver="javascript:hideShow('up'); javascript:showHide('over')" alt="up">
<a href="http://google.com"><img id="over" src="over.png" width="50" height="50" onMouseOut="javascript:hideShow('over'); javascript:showHide('up')" style="display:none;" alt="over" border="0"></a>

To add a link the button you just apply it to the "over state" image. And unlike swapImage, though it is overkill, you can also add a "downstate" image quite easily.

So, back to the on/off button here is how you would code it using showHide with rollovers.
HTML Code:

<img id="on" src="on.png" width="50" height="50" onMouseOver="javascript:hideShow('on'); javascript:showHide('onover')" alt="on">
<img id="onover" src="on_over.png" width="50" height="50" onMouseOut="javascript:hideShow('onover'); javascript:showHide('on')" onClick="javascript:hideShow('onover'); javascript:showHide('offover')"  style="display:none;" alt="onover">
<img id="off" src="off.png" width="50" height="50" onMouseOver="javascript:hideShow('off'); javascript:showHide('offover')" style="display:none;" alt="off">
<img id="offover" src="off_over.png" width="50" height="50" style="display:none;" onMouseout="javascript:hideShow('offover'); javascript:showHide('off')" onClick="javascript:hideShow('onover'); javascript:showHide('off')"alt="offover">

So here is what is going on:
you have the upstate on.png image, when you mouse over it on.png is hidden and on_over.png is displayed. When you click on_over.png it is hidden and off_over.png is display, mouse off it and off.png is displayed. Make scene?

Now be aware, when you click, you are also in a scene "mousing off" so some flickering can occur. Firefox handles everything pretty well, IE and Safari not so much. When you click the on_over.png the click tells it to hide on_over.png and show the off_over.png, at the same time the mouseoff tells it to hide on_over.png and show the on.png. So fortunately the toggle with rollovers isn't perfect, but perhaps some more tweaking of the code or maybe, in this case swapImage would work better to do the rollovers...

But all in all I'd say its a solid concept. If you feel compiled to do so, reply with any comments, concerns or flaws you see.

This is my website that I am making...only the home page is ready as of right now....I have reached a point to which I am stuck! I really like the way that it looks but I am not sure how to improve it...the banner seems sort of plain to me....From the red at the top to the red at the bottom, I pretty much like the way that it looks....Would someone please take a look at it and give me some suggestions?
Here is the link:
http://crazyforclay.webng.com/index.htm
BTW....This is my first website, I know its not great!

how do i have it so that my website will appear the same? like standardised? i was working on my site on 2 different computers today, one was a mac and one was a pc and well, the mac version was different from the pc. what i mean is that the images and the links were not in the place that i wanted them to be.

Hi

well i am finally getting read to put my site together this weekend and i just have a few questions.

my site has been designed by a designer who has mocked it up in photoshop, illustrator etc. so the question that i have is how do i translate that into HTML?

here are a few screen shots of what my site will look like. also i'll be taking them down in a couple of days.

so here they are...





Thanks

Hi, I'm new here. I'm using Dreamweaver to make this site, and .Mac for hosting.

I'm looking for a way for me and one or two other people to update text on a site made in dreamweaver. Some kind of blog would work, but I need it to be ON the site, and match the theme. Please help if you can. This is probably easy, but I'm new to HTML and dreamweaver. Thanks in advance.

and when i go on google and put the name of my site in i get this message..

Quote:
Temporary holding page. This domain has been registered by registron.co.uk on behalf of a client.
where as other sites have say for example

Quote:
Google
The local version of this pre-eminent search engine, offering UK-specific pages as well as world results.
www.google.co.uk/ - 4k
im holding out to unveil my page

Thanks

I have just created a site with 50+ pages and want to create a HTML site plan page of just text links for the entire site, is there a simple way to do this, i have had a quick google search and can only seem to find PC software, any ideas for a mac user or any dreamweaver exensions etc that can help!!!!

Thanks in advance

the site http://www.googtwo.tk

(my site) is attempting to put a garfield comic for the day by an iframe.

if you look at the code, you'll see some irrelavent code, ignore it.

but the iframe, isn't goign to the size i want it to, and therefore you can't see the comic.

???

Hello there. I am new to this forum. I used to be big into HTML, etc, got busy for a couple years you can say, and well, now I am back and lost in some ways!
With that said, I hope someone here can assist me for what I am after.
I am making a site for a photographer friend of mine.
Here is it so far ... not yet done ...
http://starverse.ca/sam/index2.html

I want to make it so when you say update the photo area
EX: http://starverse.ca/sam/center.html
it will ONLY update that and I won't have to do anything to all the other items on the left/rights sites.
I guess like a site within a site.

I have been reading about using codes, such as :
<!--#include virtual="path to file/include-file.html" -->

<div id="nav">
<a href="...">...</a>
...
</div>

<?
require("/path/to/file.html");
?>

etc.

Nothing seems to work on my site.
What in the wide world of sports am I doing wrong???

I was hoping someone would know how to fix this minor problem I have with my title. On the top of the Page where it is in cursive font that says Harmony Dreams, it isn't aligned, and the top and bottom of the sentence seems to be cut off so that you can't see the rest of the sentence...

here is my site( it is still in progress): geocities.com/neko_koneko15

And is my HTML source:
HTML Code:

<script language="JavaScript">var PUpage="76001548"; var PUprop="geocities"; </script><script language="JavaScript" src="http://www.geocities.com/js_source/pu5geo.js"></script><script language="JavaScript"> var thGetOv="http://themis.geocities.yahoo.com/themis/h.php"; var thCanURL="http://us.geocities.com/neko_koneko15/index.htm"; var thSpaceId="76001548"; var thIP="76.186.78.161"; var thTs="1234407390"; var thCs="225e2da6424de1562de125c64d1a78fc";</script><noscript><link rel="stylesheet" href="http://themis.geocities.yahoo.com/jsoff.css?thIP=76.186.78.161&thTs=1234407390"></noscript><script language="JavaScript" src="http://us.geocities.com/js_source/geovck08.js"></script>
<!-- text above generated by server. PLEASE REMOVE -->
<script>alert("ﾎﾉ､､ﾌｴ､ﾁ Zz Sweet Dreams zZ")</script>

<html>
<head>
<title>｢ﾁharmony dreams｡ﾁ｢・/title>
<style type="text/css">

body {
font-family: verdana;
color: #02658E;
overflow: auto;
margin: 0px;
padding: 0px;
background: url([url]http://cbimg6.com/layouts/09/02/33633ac.png[/url]) repeat-x #0884B5; }

td {
font-family: verdana;
font-size: 9pt;
line-height: 20px;
text-align: justify; }

li { color: #FFFFFF; 
list-style: circle; 
margin-left: -5px; }

li a:link { color: #1A4550; font-weight: normal; }

li a:visited { color: #1A4550; font-weight: normal; }

li a:hover { color: #F7F8F9; font-weight: bold; }

a:link { color: #F7F8F9;
text-decoration: none;
font-variant: small-caps;
font-size: 9pt;
font-weight: bold; }

a:link img { border: 0; }

a:visited { color: #F7F8F9;
text-decoration: none;
font-variant: small-caps;
font-size: 9pt;
font-weight: bold; }

a:visited img { border: 0; }

a:hover { color: #1A4550;
text-decoration: none;
border-bottom: 1px dotted; }

a:hover img { border: 0; }

h1 {
font-family: Verdana;
font-size: 12pt;
text-align: left;
line-height: 9px;
letter-spacing: -1px;
margin: 10px;
padding: 5px;
border-bottom: 1px dotted;
}


h2 {
background-color: #DBF8FD;
font-family: arial, verdana;
font-size: 11pt;
text-align: center;
line-height: 8px;
letter-spacing: -1px;
font-weight: bold;
margin-top: 15px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
padding: 0px;
}

.title{
color: white;
position: absolute;
left: 50%;
top: 70px;
margin-left: -200px;
font-size: 24pt;
font-weight: bold;
text-align: left;
z-index: 200;
opacity: 0.7;
filter:alpha(opacity=70);
}

.subtitle{
position: absolute;
left: 50%;
top: 100px;
margin-left: -210px;
font-size: 13pt;
font-weight: bold;
text-align: left;
z-index: 201;
opacity: 0.3;
filter:alpha(opacity=30);
}


</style>

</head>
<body>




<center>
<table cellpadding="0" cellspacing="0" border="0" width="780" height="100%" valign="top" align="center" bgcolor="#0884B5" style="background-image: url([url]http://cbimg6.com/layouts/09/02/33633ad.png);[/url] background-repeat: repeat;">
<tr>
<td valign="top" width="547" style="background-image: url([url]http://i277.photobucket.com/albums/kk62/neskaya/layouts/sleepingpanda/top1.png);[/url] background-repeat: no-repeat;">




<!----------EDIT TITLE---------->


<div class="title"><p align="left"></font><font face="edwardian script ITC" size="24" color= "#FFFFFF">HarmonyDreams</a></font></strong></p></div>


<div class="subtitle">a sweet little dream...</div>

<!----------END---------------->



<div style="margin-left: 40px; margin-right: 12px; margin-top: 160px;"> 





<!-----------MAIN CONTENT------------->

<h1>Neskaya.Net Free Layout: Sleeping Panda</h1>

This layout was originally made as a <a href="http://neskaya.net/livejournal_layouts.php">livejournal layout</a> but due to its popularity in LJ, I converted it into a web template. I hope you like it! The panda image is from <a href="http://smilescan.com">Smilescan</a>. Just remember not to remove my credits, thank you. ♥<p>


<h1>Download</h1>

If you want to download the layout to upload to your own webspace, you must be registered and logged in at the <a href="http://forum.neskaya.net">forums</a>. While you're there, won't you drop in and say hi if you've found the site helpful at all? We love to make new friends. Anyway, once you're logged in, you'll be able to download the layout:<br />

<center><a href="http://forum.neskaya.net/download/file.php?id=63">Download the Layout</a></center><p />

Thank you and have a good day. Go back to <a href="http://neskaya.net">Neskaya.Net</a> for more resources?

<div align="right"><a href="mailto:strawbee{at}neskaya.net">♥</a> Strawbee</div><p />


<!---------END MAIN CONTENT---------->






</div>
</td>
<td valign="top" width="233" style="background-image: url([url]http://cbimg6.com/layouts/09/02/33633ae.png);[/url] background-repeat: no-repeat;">

<div style="margin-left: 25px; margin-top: 245px; width: 145px; font-size: 8pt;"> 





<!----------SIDEBAR CONTENT--------->


<h2>Menu</h2>


<center><img src="http://cbimg6.com/layouts/09/02/33633aa.gif"></center><p>

Yep, this is the sidebar. Write here, place links, or do whatever you want to do! More text more text~ more text more text.<p>



<h2>Links</h2>

<ul>
<li><a href="http://neskaya.net">Neskaya.net</a></li>
<li><a href="http://neskaya.net/faq.php">Terms of Use</a></li>
<li><a href="http://forum.neskaya.net">Cute Forums</a></li>
<li><a href="http://neskaya.net/layouts.php">More Layouts</a></li>

</ul>


<h2>Category</h2>
<ul>
<li><a href="http://neskaya.net/emoticons.php">Cute Emoticons</a></li>
<li><a href="http://neskaya.net/pixels.php">Kawaii Pixels</a></li>
<li><a href="http://neskaya.net/avatars.php">Cute Icons</a></li>
<li><a href="http://neskaya.net/quizzes.php">Fun Quizzes</a></li>
<li><a href="http://dressupgames.neskaya.net/88x31buttonmaker_bunny.php">Button Maker</a></li>
</ul>




<!--------END SIDEBAR--------------->





</div>
</td>
</tr>
<tr>
<td colspan="2" valign="top" width="780" height="200" style="background-image: url([url]http://i277.photobucket.com/albums/kk62/neskaya/layouts/sleepingpanda/bot.png);[/url] background-repeat: no-repeat;">
<div style="margin-left: 200px; margin-top: 62px; width: 450px; font-weight: bold; font-size: 8pt;">





<!----------COPYRIGHT INFO----------->

 &copy; <a href="mailto:addicted2pocky2000@yahoo.co.jp">Katie</a> 2009. Layout by <a href="http://neskaya.net" target="_blank">Neskaya</a>.</div>

<!-----------------END--------------->





<div style="margin-left: 300px; margin-top: 53px;"><a href="http://neskaya.net" title="More free & cute layouts, graphics, quizzes, and more!" target="_blank"><img src="http://cbimg6.com/layouts/09/02/33633ab.gif" width="450" height="40"></a></div></td></tr></table></center></body></html><!-- text below generated by server. PLEASE REMOVE --></object></layer></div></span></style></noscript></table></script></applet>
<link href="http://us.geocities.com/js_source/div.css" rel="stylesheet" type="text/css"><script language="JavaScript" src="http://us.geocities.com/js_source/div03.js"></script><script language="JavaScript" src="http://us.i1.yimg.com/us.yimg.com/i/mc/mc.js"></script><script language="JavaScript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/smb/js/hosting/cp/js_source/geov2_001.js"></script><script language="javascript">geovisit();</script><noscript><img src="http://visit.geocities.yahoo.com/visit.gif?us1234407390" alt="setstats" border="0" width="1" height="1"></noscript>
<IMG SRC="http://geo.yahoo.com/serv?s=76001548&t=1234407390&f=us-w85" ALT=1 WIDTH=1 HEIGHT=1>

On the top of the Page where it is in cursive font that says Harmony Dreams, it isn't aligned, and the top and bottom of the sentence seems to be cut off so that you can't see the rest of the sentence. please help...