Furtopia | Family Friendly Furry Forum and IRC Chat!

the basement => the archives => web design support => Topic started by: WillowRaven on February 15, 2007, 12:53:49 pm

Title: Looking for some HTML input
Post by: WillowRaven on February 15, 2007, 12:53:49 pm
Hey!  I know I haven't posted recently - lot going on in my personal life.  Thought I would take a break from it and work on my page.  I am having a problem though with one of the pages and I am hoping someone can shed some light.  The page I'm working on is here:

My Webpage

See the links that go back to my other pages, towards the top?  I want them on the bottom of the page, after the tags.  However, no matter how I write up the .html page I can't seem to get them to move down.  Currently, my html is as thus:

<TITLE>Tags By WillowRaven</TITLE><body background="background.jpg">
<h1><CENTER<font face="Pointed Brush" color="FFFFFF" size="7">Tags By WillowRaven</font></CENTER></h1>
<br><br><B><font face="Pointed Brush" color="FFFFFF" size="5">To Request My Tags, click on the tag to open an

email.  Do <u>NOT</u> change the Subject Line.  Put the names you want in list order.  Manners are nice, but not

<td><a href="mailto:TagsByWillowRaven@gmail.com?subject=Forever tag"><img src="forever-sample.jpg"><B><font

face="Pointed Brush" color="FFFFFF" size="5"><p>Forever</font></B></p></td>
<td><font face="Pointed Brush" color="FFFFFF" size="5"><a href="mailto:TagsByWillowRaven@gmail.com?subject=Angels

Visit tag"><img src="angelsvisit-sample.jpg"><B><font face="Pointed Brush" color="FFFFFF" size="5"><p>Angels

<td><a href="mailto:TagsByWillowRaven@gmail.com?subject=America 1 tag"><img src="america1-sample.jpg"><B><font

face="Pointed Brush" color="FFFFFF" size="5"><p>America 1</font></B></p></td>
<td><a href="mailto:TagsByWillowRaven@gmail.com?subject=Evil But Nice tag"><img src="ebn-sample.jpg"><B><font

face="Pointed Brush" color="FFFFFF" size="5"><p>Evil But Nice</font></B></p></td></a></img>
<B><font face="Pointed Brush" size="5"><A HREF="main.html">Back to Main Page</A></font><br>
<B><font face="Pointed Brush" size="5"><A HREF="aboutme.html">About WillowRaven</A></font><br>
<B><font face="Pointed Brush" size="5"><A HREF="othergraphics.html">Other Graphics</A></font><br>
<B><font face="Pointed Brush" size="5"><A HREF="tagrequests.html">Tags For Request</A></font><br>
<B><font face="Pointed Brush" size="5"><A HREF="tagpickups.html">Tags For PickUp</A></font><br>

What am I missing, or doing wrong??

Thanks in advance for any suggestions, input, advice, etc.


Title: Looking for some HTML input
Post by: Richard K Niner on February 15, 2007, 03:41:48 pm
Richard K Niner blinks and scans through the code himself

Well, when I look at the page, the links are in fact at the bottom of the page.  That being said, the code is very messy.  Among the problems I've noticed...
  • Many structural errors (most of which require the browser to correct, which may be the cause for your problem)
  • The opening tag for centered text is missing the ">" (thus, that text is not centered)
  • Every single string of text is surrounded by a font tag (and most are surrounded by b tags as well), all of which specify the same font face (that most people wouldn't have) and colour. (not as big of a problem, but keeps the code messy)
  • Multiple <br> tags where <p></p> tags would work better (as above)

Basically, what you have is a page that is likely to render differently depending on what web browser everyone uses, whether it's MSIE, Firefox/Mozilla/Netscape, Opera, Safari/Konqueror, or something completely different.

After a bit of playing around with it, I got the following solution:
Code Sample
   <title>Tags By WillowRaven</title>
   <style type="text/css">/* This section allows me avoid using font, center, b, and u tags, and eliminates various attributes from the body tag */
body {
   background: purple url(background.jpg); /* setting the background image and an appropriate colour in case of failure to load */
   color: white; /* since all non-link text is white... */
   font-family: "Pointed Brush",sans-serif; /* In quotes is the font you're using already, that sans-serif part is for those of us without it */
a:link {
   color: #3300ff; /* This was the colour you originally had set (link) */
a:visited {
   color: #ffccff; /* And so was this one (vlink) */
table a:link { /* "table a:link" means any link inside a table */
   color: white; /* since you wanted white text in the mail links */
h1 {
   text-align: center;
   font-size: xx-large; /* equivalent to size="7" in font tag */
p {
   font-weight: bold;
   font-size: large; /* equivalent to size="5" in font tag */
em {
   font-style: normal;
   text-decoration: underline;
/* The rest of this page is for actual content.  Note that very little attention is paid to how it looks */
<h1>Tags By WillowRaven</h1>
<p>To Request My Tags, click on the tag to open an email.  Do <em>NOT</em>
   change the Subject Line.  Put the names you want in list order.  Manners are
   nice, but not necessary.
<table border="0">
      <td><p><a href="mailto:TagsByWillowRaven@gmail.com?subject=Forever tag"><img src="forever-sample.jpg"><br>Forever</a></p></td>
      <td><p><a href="mailto:TagsByWillowRaven@gmail.com?subject=Angels Visit tag"><img src="angelsvisit-sample.jpg"><br>Angels Visit</a></p></td>
      <td><p><a href="mailto:TagsByWillowRaven@gmail.com?subject=America 1 tag"><img src="america1-sample.jpg"><br>America 1</a></p></td>
      <td><p><a href="mailto:TagsByWillowRaven@gmail.com?subject=Evil But Nice tag"><img src="ebn-sample.jpg"><br>Evil But Nice</a></p></td>
<p><a href="main.html">Back to Main Page</a><br>
   <a href="aboutme.html">About WillowRaven</a><br>
   <a href="othergraphics.html">Other Graphics</a><br>
   <a href="weightloss.html">Weight Loss Graphics</a><br>
   <a href="tagpickups.html">Tags For PickUp</a>

(Note: anything between /* and */ is a comment: you don't have to copy them, as I only put them there to explain what I was doing.)

I hope this is of help.
Title: Looking for some HTML input
Post by: WillowRaven on February 19, 2007, 12:14:04 pm
Thanks - much appreciated.  I'm still learning HTML (on my own, not in a class or anything) so input is very much appreciated.

After I had posted my original question, I had fiddled around with the HTML a bit more and - not sure how I did it! - managed to get the links to the bottom.  

I understand the point about the font - I just liked the look of a different font instead of the traditional "Arial" or "Times New Roman" (which I can't STAND and refuse to use).  Any suggestions on what to do or use to avoid using the ho-hum fonts like Times New Roman?  Heck, even Comic Sans and Verdana are better than that.  

As for the font color - figured the white would show better against the darker background than a different color (I tried a pale pinkish color  as well as a very pale purple and they were difficult to read).

Again, suggestions are appreciated as I'm new and learning as I go!!


EDIT:  adding the following ~

I tried your code, read the notes you put in it as well (deleted before trying) - it looks much different than my original page.  First, no background (it's now plain white) - and the font, which I have loaded on my computer, is not showing.  Also, I had name of tags under them - no longer there.  (And had them clickable.)  How would I show those in your codes so that they would show up?

Here is the page with your codes:

Here is the original page:

Again, all help is greatly appreciated!!

Title: Looking for some HTML input
Post by: Richard K Niner on February 19, 2007, 03:03:20 pm
Warning: Selector expected.  Ruleset ignored due to bad selector.
Source File: http://www.willowraven.artistsworld.org/requests2.html
Line: 5

There's a forward slash right after the opening <style type="text/css">/ tag (highlighted in bold here) - that's what's causing most of the problems. (specifically, it ignores the section from "body {" to the first "}", thereby resulting in a white background, black text, and the default font)

Deleting that one character will fix those problems.  (Don't feel bad, this happens to me a lot too.)

If it helps, http://www.htmlhelp.com/ provides a good reference for anything HTML and CSS related.  (CSS is that stuff inside the <style></style> section.)

Title: Looking for some HTML input
Post by: WillowRaven on February 19, 2007, 03:27:40 pm
Thanks!!   :D

I didn't even see the / at the beginning - just deleted it, saved and re-loaded it up and it looks fine!  LOL

And thank you for the link as well - will check it out as soon as I post this.  I appreciate all your help!  

::hugs::   :)
Title: Looking for some HTML input
Post by: Richard K Niner on February 19, 2007, 07:01:16 pm
Don't sweat it.  I'm just doing my job to make the internet a safer and more open place for everybody

*hugs back*
Title: Looking for some HTML input
Post by: Lucifurre on May 25, 2007, 03:09:28 am
Incidentally, the essential problem with your original HTML was that the table tag wasn't closed. Putting a </TABLE> in there before the final links makes the original look the way I think you want it.