Wednesday, 8 February 2006 - 9:14 AM EST

Here's what you need to do.

Check out the images on my site and the alt messages and how I have them. Just right-click, go to "View Source," and then read the HTML coding wherever you see the images placed. I didn't resize the images, so the alt command should be fairly straight forward. It's like this:



If you miss a space, it's easy to make a mistake with HTML and even easier to make mistakes with JavaScript and DHTML.

Wednesday, 8 February 2006 - 10:38 AM EST

an alt tag is not the way to show a "thought" on mouseover. The purpose of an alt tag is to display some text if for some reason the picture does not display, such as a bad file path, someone viewing with images turned off, or using a text reader.. What you really want to do is add a "title" to the image tag. Like this...

<img src="100_0254.JPG" alt="Here's me and my sissy" title="Here's me and my sissy">

be very careful about your image code spacing. In your code many images contain a space between the first " and the image name and the alt tags don't end with a second"

You may not have gotten all the images in place as you think. They are in place only in your own view because of your use of absolute positioning. That treats a web page more like a rigid scrapbook and may not be flexible enough for viewing under conditions other than your own. But if you want to keep that positioning anyway, your image code should be edited to look like this....

<img src="100_0254.JPG" style="position:absolute;top:700;left:500;" alt="Here's me and my sissy" title="Here's me and my sis">

I changed the title just a bit from your alt tag so you could see the difference and know where to edit if needed. Notice all the spacing I tightened up and where I added missing " 's. The code below is an example of what you're using now. it contains some errors such as a space between the first enclosing " and your file name, a missing " at the end of your style parameters and a missing quote at the end of your alt description. the end slash / is not needed in your code.

<img src=" 100_0254.JPG" style="position:absolute;top:700;left:500; alt="Here's me and my sissy />

good luck and hope this helps

Wednesday, 8 February 2006 - 11:43 AM EST

David- can I add some constructive comments re your site? I know you did not ask for that when you were kind enough to respond to this poster's question which I'm sure she appreciates but here goes anyway... I like the look of your frontpage. It is simple and uncluttered in it's design but I had to view source just to figure out how to navigate your site. Your navigation set up is not very intuitive and in some circles would be called 'mystery meat' navigation. If communication is your goal then you might want to make it a little easier for visitors to find your navigation. I would not have thought to scroll over those little circles that to me simply look like a part of the larger image and are too small to draw attention to their navigation role. Had I not looked at the source code you would have lost me as a visitor.

Just MHO and nothing more :).

Wednesday, 8 February 2006 - 7:57 PM EST

Hi don. I thought I'd add my reply here instead of to the earlier post you had below.....
from an earlier post down, you said:

"Hey, thanks! I couldn't get it to work with the player, but I did figure it out finally. I also used your scaled down version of the song (another thanks). I have the db Power Amp and love it, just didn't know how to get it that small LOL. And I knew about the AF banners. I just start changing things from the source code of the page and forget to take it all out everytime. I ended up with three of them before I finally remembered to delete it. LOL"

my comment:
well I am so glad that you used that smaller file and you will find that dbpoweramp is quite easy to use....
also notice a neat feature of that application:
that if you hover over the sound file on your computer and right click, you will notice that the dbpoweramp installation gives you an option in the R/C menu to "convert this", choose that, then a small .app window comes up, chose the format you want to convert it too like if it's .wav, like your first file was, I converted it to .wma and I chose Mono instead of stereo and also some other things there that got the file size down,(play with the settings and see what you get...)
and I also told you that I had created an mp3 and converted using a smaller file option there and got your 7mb to a 600kb file doing that...but I posted the .wma for you because that one is 300kb and it still sounded good....

you should really change your code on your page to embed instead of bgsound because netscape, mozilla browsers recognize the embed not the bgsound, and IE recognizes the embed code now, and netscape browsers are widely used by people now.....but I still like to use the one I posted for you in your previous comment.....or the one I left on my test page..
https://www.angelfire.com/mi2/magoosplace/index.htm
-----------------------
I said:
"you should really get an index.html homepage so that your angelfire addy will default to your homepage...."


You asked:
I wonders "How do you do this?". LOL

well it's not hard at this point because your just starting out....
just rename your excisitng page to index.html use all lower case like that......index.html is better to use then index.htm, btw.
or you could create a different hompage, call that one index.html, if you like, and use this excisitng page now as an album page named as the picpage1.htm.......and then use a navigation link to this page, and other album pages you might build to your site...

however if this is the only page your planning then rename it.....or it's up to you to leave it as is, but it makes for easier url if you don't have to type the picpage1.htm to it.....
all you would need to do if you rename is just use this url:
https://www.angelfire.com/blog/donspage.com
and it will bring you to your home index.html page by default.....
------------
cw,
I noticed that don is using css script with absolute positioning, maybe check his script out to see if it looks correct to you...I don't know css that well...LOL
https://www.angelfire.com/blog/donspage.com/style.css

hth

Wednesday, 8 February 2006 - 8:09 PM EST

cw, I see your comment above does refer to what you saw in the css.....sorry.

I think the way to go for Don would be to build a table to insert those pics....? although the css will be handier if he plans more photo pages like he has now...

Wednesday, 8 February 2006 - 10:44 PM EST

QOUTE FROM CW: You may not have gotten all the images in place as you think. They are in place only in your own view because of your use of absolute positioning. That treats a web page more like a rigid scrapbook and may not be flexible enough for viewing under conditions other than your own. END QUOTE

So what you are saying is that my page looks different on another computer? Or on another browser? I'm not totally understanding all of this LOL. (sorry, I'm new at all of this) But anyway, how should I write this in order to have it looking like I do now, but on any computer or browser? Please keep in mind that I am trying to keep enough space laterally between the pics that you can still see the background image. And thank you very much for your time, I did go back and write the code the way you first showed me and it worked great. Just now I have to figure out how to do it right LOL.

Thursday, 9 February 2006 - 9:51 AM EST

don- you have a small personal site so I wouldn't worry about it much but yes there can be differences between not only other computers but other browsers as well.... and also differences related to whatever particular screen resolution the page is being viewed in. For instance- your cartoon and marquee display differently for me between netscape and IE... the marquee is under the cartoon in Netscape and next to the cartoon in IE. (you can get them displaying the same I think by adding a line break <br> between the cartoon and the marquee code.) There is also a minor and insignifcant difference in the way the dotted css border you're using displays between browsers. I also have a feeling that the alt tag may display as a "thought" in windows IE browsers though the title tag I showed you works in all browsers for any OS. But the most important thing affecting your particular display is screen resolution. The underlying pic you're using is set for "center". What is the center of the screen in 800 x 600 resolution is not the same position as the center of 1024x 768 etc. Though I understand and like the effect you're going for, it will render differently depending on the circumstances under which your page is being viewed. You can see for yourself the effect of screen resolution by changing the screen resolution on your computer, reloading the page and comparing the differences between resolutions.

There will always be differences between various viewing conditions. You can often get them pretty much the same in everyone's view if you're at least aware of the many different situations your pages may be viewed. Then you can choose to design accordingly. I'm not certain though that you will be able to adapt your current design to fit all conditions.... but again- as a small personal site, if all your viewers are using the same browser, same resolution etc. I wouldn't lose sleep over it.

Thursday, 9 February 2006 - 12:53 PM EST

don- I redid your page as relatively positioned images inside a table. To get this to view reasonably well in several resolutions I cut down the widths of some images. It looks to me like you probably have a large monitor with a large resolution. My page is designed for 1024x768 and up as that res is becoming the most common smaller resolution though some of your viewers may still be using 800x600 and they will need to scroll L/R to see even these smaller images set inside my table. Now let's see if i can explain what I did.

First I removed all the absolute positioning from your images and created a three column, three row table with a width of 90%... the table will take up 90% of the browser screen no matter what resolution it's viewed in. Then I put the images in the far right and far left cells of the table, leaving the center cells free so the background image would show through. But to hold the width of the middle cells, I placed an invisible spacer image into one of the middle cells (last middle cell in last row though which central cell it is put in doesn't matter.) The invisible image was stretched to 164 pixels wide using the width parameter of it's image code. I chose 164 pixels because that's how wide your background image is so it will keep the background image visible at all times ... well not exactly all times- just when the browser window is wide enough such as when maximized in smaller resolutions (1024x768). More on that below.

I manipiulated the size of most of your images through their html image tags because their uploaded widths are too wide to display across smaller screen resolutions. I think i resized most to 330 pixels wide. hang in here and try to follow me lol (330 x2) +164 =824 pixels or the actual display width of the table at it's widest (those figures come from the last row of images which are the widest).

Because the images are now displaying smaller. I made several images links to the full size image which can be viewed full size by clicking on the pic. Each linked pic will open in a new window but that can be changed to open in the same window if you wish. Again, a personal pref.

I set alignments for every image to horizontal center and vertical middle just for aesthetic reasons and my personal pref. Every image is centered vertically and horizontally in it's cell.

The link above is to my redo- I hope I have all the file paths right. I am hotlinking to your own account to reach them. I left the table border on this page so you can better visualize the table. The same page with the table border removed is here

https://www.angelfire.com/folk/dollhouseprintables/picpage2.html

Set up like this your page will be more adaptable to a wider range of conditions, though even now the background image can be hidden just by resizing your browser screen to make it narrower. Still it's better than what I saw in your original page in my own view

Thursday, 9 February 2006 - 1:16 PM EST

I redid it as a table as you suggested. You *can* mix tables and css. It's the absolute positioning that's doing him in, not the css.

Absolute positioning can be written into css or plain html. In either case, it's like gluing something into position on a page like you would into a scrapbook. Though it has it's uses... such as in the css layout for the blog panels, etc., absolute positioning lacks flexibility and causes display problems in many cases such as what don is trying to do here.

Thursday, 9 February 2006 - 1:17 PM EST

Well jeez- I forgot to tell you something very important- I also centered the table which is why it remains centered in any resolution over your little cutie Austyn which is centered from your stylesheet.

Thursday, 9 February 2006 - 3:14 PM EST

the table looks great, cw...
however the table doesn't center in IE but it does in netscape.

For IE If I re-do the page using center tag ahead of the table then it works....

cheers

Thursday, 9 February 2006 - 4:04 PM EST

thanks mamagoo- I'll have to check that. It's most likely something I did when I slashed and burned the html. I moved a bunch of stuff by hand trying to get the marquee to center then moved it back because it covered the BG picture on initial loading.

Thursday, 9 February 2006 - 4:22 PM EST

can you check again mamagoo. It was definitely a fault on my end that I think is corrected.

and
https://www.angelfire.com/folk/dollhouseprintables/picpage2.html

thanks!

Thursday, 9 February 2006 - 7:43 PM EST

Wow! Thanks a lot! You didn't have to do any of this, but I thank you! I feel kinda bad copying this and using it, but I realize you did it for that reason and you spent a lot of time with it. And I really like the way you fixed my marquee with the behavior set to "slide". I was also wondering how to do that. LOL You and mamagoo amaze me and have helped me make a decision to go back to school to learn this stuff in a lot better detail. I really enjoy the challenge of this stuff. Thanks again to both of you for all your help! I will get all this switched over by tomorrow.

Thursday, 9 February 2006 - 7:46 PM EST

By the way, you can go ahead and delete that page if you want. I copied it and will get to it soon.

Thursday, 9 February 2006 - 8:19 PM EST

Glad you liked it don :) I took the pages down asap.

These pages did not take long to make. I just used a page builder that can edit a live site. I opened your page via it's URL and just made a few clicks and changes in the editor. I used the wysiwyg builder that comes free with netscape7 which can't be beat for the price. basically all I added was 2 simple tables, one for your marquee and 'thought' text and the other for your images. The tables could be given css border styles like the one that frames your page name and have many other styling options as well.

re your marquee- I don't know how you viewed it before but your version displayed differently between my IE and Netscape7 browsers. I liked the way it turned up in Netscape better so editted the code a bit to make it display the same way in both browsers.

First I added a line break <br> right after your image code and before the marquee code to make the marquee break to a new line (like hitting the return key). Then decreased the width of the marquee (from 120 in your original code) to 112 - the same width as your cartoon image above it. That makes the image and marquee look like they are one and the same thing.

There are some good online html tutorials at htmlgoodies.com and lissaexplains.com. The last is aimed for kids but the instructions are clear and simple. they even cover stuff like css.

hope that helps and happy building!

Thursday, 9 February 2006 - 8:58 PM EST

don- you're going to need my spacer gif for your page. The link to it is above. You won't see anything but just save it. it's a 1x1 px gif. Once saved to your pc, upload it to your account for use as a spacer when needed. Just add any height or width parameters you need to the img src code wherever you use 'pixel gif'. In my use in the central cell column of your image table, I add it to one of the central cells and stretched it to width="164" in html (or width: 164px; as a css style) when writing the img src code.

Friday, 10 February 2006 - 7:28 PM EST

Hey, you still spent your time helping me! I'm just glad people like you are around. Thanks for the .gif also.