Author Topic: Looking for some HTML input (Read 3227 times)

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:

<html>
<HEAD>
<TITLE>Tags By WillowRaven</TITLE><body background="background.jpg">
<h1><CENTERTags By WillowRaven</CENTER></h1>
</HEAD>
 To Request My Tags, click on the tag to open an

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

necessary. <table><CENTER>
<tr>
<td><a href="mailto:TagsByWillowRaven@gmail.com?subject=Forever tag"><img src="forever-sample.jpg">Forever</td>
<td></td><td></td>
<td><a href="mailto:TagsByWillowRaven@gmail.com?subject=Angels

Visit tag"><img src="angelsvisit-sample.jpg">Angels

Visit</CENTER></td>
<td></td><td></td>
<td><a href="mailto:TagsByWillowRaven@gmail.com?subject=America 1 tag"><img src="america1-sample.jpg">America 1</td>
<tr>
<td><a href="mailto:TagsByWillowRaven@gmail.com?subject=Evil But Nice tag"><img src="ebn-sample.jpg">Evil But Nice</td></a></img>
 
 
<h2>
<A HREF="main.html">Back to Main Page</A> 
<A HREF="aboutme.html">About WillowRaven</A> 
<A HREF="othergraphics.html">Other Graphics</A> 
<A HREF="tagrequests.html">Tags For Request</A> 
<A HREF="tagpickups.html">Tags For PickUp</A> 
</h2>
</body>
</html>

What am I missing, or doing wrong??

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

~Chelle/WillowRaven

Richard K Niner · « **Reply #1 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 tags where 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

<html>
<head>
 <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 */
 </style>
</head>
<body>
<h1>Tags By WillowRaven</h1>
To Request My Tags, click on the tag to open an email. Do NOT
 change the Subject Line. Put the names you want in list order. Manners are
 nice, but not necessary.

<table border="0">
 <tr>
 <td><a href="mailto:TagsByWillowRaven@gmail.com?subject=Forever tag"><img src="forever-sample.jpg"> Forever</a></td>
 <td><a href="mailto:TagsByWillowRaven@gmail.com?subject=Angels Visit tag"><img src="angelsvisit-sample.jpg"> Angels Visit</a></td>
 <td><a href="mailto:TagsByWillowRaven@gmail.com?subject=America 1 tag"><img src="america1-sample.jpg"> America 1</a></td>
 </tr>
 <tr>
 <td><a href="mailto:TagsByWillowRaven@gmail.com?subject=Evil But Nice tag"><img src="ebn-sample.jpg"> Evil But Nice</a></td>
 </tr>
</table>
<a href="main.html">Back to Main Page</a> 
 <a href="aboutme.html">About WillowRaven</a> 
 <a href="othergraphics.html">Other Graphics</a> 
 <a href="weightloss.html">Weight Loss Graphics</a> 
 <a href="tagpickups.html">Tags For PickUp</a>

</body>
</html>

(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.

WillowRaven · « **Reply #2 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:
http://www.willowraven.artistsworld.org/requests2.html

Here is the original page:
http://www.willowraven.artistsworld.org/tagrequests.html

Again, all help is greatly appreciated!!

Richard K Niner · « **Reply #3 on:** February 19, 2007, 03:03:20 pm »

Quote

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.)

WillowRaven · « **Reply #4 on:** February 19, 2007, 03:27:40 pm »

Thanks!!

'>

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::

'>

Richard K Niner · « **Reply #5 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*

Lucifurre · « **Reply #6 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.