Help with basic HTML
Hi all.
I'm hoping someone out there has a stronger grasp on HTML than I do, and would be willing to help a girl out. 
So I want to display a "Made on a Mac" badge in the R hand sidebar of our summary page. Actually I already did. But in order to remain happy and kosher with Apple, I also need to display their legal snippet:
"Apple, the Apple logo, and Mac are trademarks of Apple Computer, Inc., registered in the U.S. and other countries. The Made on a Mac Badge is a trademark of Apple Computer, Inc., used with permission."
Thing is, I don't want that sitting in the middle of that side panel. I want it to hug the bottom at all times, like a footer. Obviously inserting a billion breaks isn't gonna cut it, because that bar changes lengths all the time
This is the code I currently have slapped together. (Please forgive the suckiness. I haven't written anything in HTML since 1998.) I know I probably need to use CSS, but I don't know much beyond that.
How do I fix it?
<p style="text-align: center;">
<a href="http://store.apple.com/">
<img src="http://www.collectivex.com/uploads/files/x/000/00a/300/madeonamac20050720.gif" alt="Made on a Mac" /></a></p>
<p>
Apple, the Apple logo, and Mac are trademarks of Apple Computer, Inc., registered in the U.S. and other countries. The Made on a Mac Badge is a trademark of Apple Computer, Inc., used with permission.<br /><br /></p>
Thanks,
Michele
| Topic | Replies | Likes | Views | Participants | Last Reply |
|---|---|---|---|---|---|
| Files section Problem | 0 | 0 | 19 | ||
| Unable to upload mp3 files to new version of site | 2 | 0 | 19 | ||
| Updated platform has bugs! | 0 | 0 | 17 |
Dear Michele,
How much I would have liked to help you out, unfortnately I am a novice too. What I do on the computer is only what's to do with my routine work. When something else pops in I either call somebody from my team or ask a competent IT Engineer from outside to come and fix it up or to insert it in our programme.
Have a nice and successful week. With my best regards.
Mahmood
Hello Michele,
Interesting problem which made me think a bit and look around for some possible (logical) solutions! At first I thought of a Table which would use two rows. The upper row would be for the "Made On A Mac" image, and the image could be centered at top of this table/data row. The lower row would contain the copyright notice text, but would be centered (and verticle aligned) at bottom of the row. The row borders could be set to 0 (zero) pix so they don't appear. However, I couldn't quit get the effect of the spacing without using line breaks, though I could have added a blank picture.
Regardless, I discovered that the "key" would be to control height percentage of the two rows or "table boxes" of some kind. After some Google searching, I stumbled upon a "div style" code that seems to work fine in typical HTML pages. I used two, so the first one displays the Image and is set for 90% and the second one contains the copyright text and is set at 10%. Evidently it will work dynamically so as the page height grows or shrinks, it still adds up to 100%, but that's only in theory as I have not been able to test that yet, but you probably can because you know exactly how/where you're going to use this.
You can copy the text below and then paste into your page.
Please read some more notes further below.
Note: HTML page with code is attached.
Click "View >> Page Source", then copy & paste the source code (between body tags)
into your summary page editor.
Application Tips:
I set the width at 250 px, but you can edit this to test for different widths that your page column might work best with, but probably this is pretty close... somewhere between 200 and 300 pixels for your width. Normally you want the upper & lower rows to match with same width, but you can of course experiment with different values.
You can also change the font size which is now set at 65% for the lower row, but you can tweak that as needed until the copyright text looks good compared to the rest of your page environment.
Finally, you can also tweak the height which is now set for 90% on the top row (or cell) and 10% for the bottom row. Normally you want the two to add up to 100%, but you can experiment and try smaller totals or even go over 100%. Apparently it's a relative thing so you can play with the settings and compare results.
After some testing it appears that it works best to set the top row to approx. 1200px height (instead of percentage) when using this code on CollectiveX, though on other kinds of web pages the % will also work fine. Using px (pixels) will work for even the longest pages on CollectiveX even when the "show all" listings feature is used.
When finished, please post a link to your summary page so we can see how it looks! I hope this will be a good solution that other Group managers can also use to insert their own images and text messages in similar space applications.
Michael