...

View Full Version : Link problem



Dante
03-01-2004, 12:04 PM
Hi there,

I hope that this problem isn't caused by something as daft as the problem that i posted here with the other day, (missing punctuation mark) but i've now come across a new problem with the webpage i'm making.

I want the links to be next to each other like in the page here : mypage (http://www.angelfire.com/ri2/eondreamhacker/HTML/5thpage.html). If you saw the links in the page they where 'next to' each other in each table, but i've only wrote the text in for these and they still need the <a href= etc, etc.

I just tried to do this with one of the tables and when i did it (see code below) the links appeared about three lines apart and i don't want any gaps. Now i know that if you viewed the source code for the page in the above link this code is rife with things that you would do differently, but i'm new to all this and the page(s) i'm setting up are just as much a learning process for me at the moment as they are something that could be/will be hopefully put online. All i'm asking at the moment is for the solution to my 'gap' problem, can you help?

I hope i've not missed anything too stupid out, and accept that the problem might require a completely different type of table design.

Here's the code for the part i'm having trouble with :

<th width="100" background="http://ww w.angelfire.lycos.com/ri2/eondreamhacker/HTML/tn_94.jpg">
<font face="arial, verdana, helvetica, sans serif" font color="#9900ff">
<a href="http:\\ww w.angelfire.lycos.com\ri2\eondreamhacker\HTML\2ndpage.html"><h5><u>Buddhism</u></h5></a><br>
<a href="http:\\ww w.angelfire.lycos.com\ri2\eondreamhacker\HTML\3rdpage.html"><h5><u>Taoism</u></h5></a><br>
<a href="http:\\ww w.angelfire.lycos.com\ri2\eondreamhacker\HTML\4thpage.html"><h5><u>Shamanism</u></h5></a><br>
<a href="http:\\ww w.angelfire.lycos.com\ri2\eondreamhacker\HTML\5thpage.html"><h5><u>Magick</u></h5></a>
</th>

(w ww to stop the linkage)

I know it's basic and maybe the wrong type of table completely but i thought i'd post here instead of spending days all over various tutorials on the net. It could take me weeks anyway to find a different type of table or simple solution and i'm sure you people will be able to suss it a lot quicker.:rolleyes:

mindlessLemming
03-01-2004, 12:42 PM
Well, there's a couple of things to mention here:
1. You're using header tags inside links. Header tags are used for headers, and as such have a top and bottom margin by default.
2. You've used <u> tags; links are underlined by all browsers by default.
3.The slashes in your links were all back-slashes; url's use forward slashes. (or did you change that on purpose too?)
4. You've started out learning the old way and will have to relearn most things if you realise this later on.
Here's your first step:


<html>
<head>
<style>
.links {
background:url(http://www.host.com/myBGimage.jpg);
width:100px;
}
.links a{
font-family:Arial, Verdana, Helvetica, sans serif;
color:#9900ff;
}
</style>
</head>
<body>
<table>
<th class="links">
<a href="http://www.angelfire.lycos.com/ri2/eondreamhacker/HTML/2ndpage.html">Buddhism</a>
<a href="http://www.angelfire.lycos.com/ri2/eondreamhacker/HTML/3rdpage.html">Taoism</a>
<a href="http://www.angelfire.lycos.com/ri2/eondreamhacker/HTML/4thpage.html">Shamanism</a>
<a href="http://www.angelfire.lycos.com/ri2/eondreamhacker/HTML/5thpage.html">Magick</a>
</th>
</table>
</body>
</html>


This is a basic html shell for what you were trying to achieve using CSS for sizing and font choice. See how much easier it is to see what's presentational info and what's your actual content?

:thumbsup:

Andrew.

Dante
03-01-2004, 01:20 PM
Nice one, thanks for the help!

I was just thinking when i came here to check on this that i should stop being lazy and start learning CSS aswell.

The back slashes are there because i've got mixed up due to using them with windowsME for the registry and the run box, i wondered when i'd make that mistake. Just a couple of things : I've used header tags in all of the other tables and no top and bottom margin has been put in, do you know why? The header tags are probably the main problem and it seems that once i used those in the tables with link code the top and bottom margin has decided to start working, that's why i got so confused.

I used the header tag because i really didn't know what type of tag it was and was using it for font size, how would i change the size of the font in the CSS you added then?

As for the <u> tags in links, well, that was just me not paying attention again. Leaves me wondering how many things away from the PC i don't pay attention to but that's another matter i suppose............

Finally what HTML is best to start learning, 4.01 like the W3Schools page advises?

mindlessLemming
03-01-2004, 01:39 PM
Personally I never bothered w/ HTML 4.0; just start with XHTML 1.0 and you can't go wrong ;) w3schools is a great place to learn.
<plug type="shameless"> I've got some decent links from when I started in my site too. (see sig.)**</plug>

While we're talking about your links; the href only needs to be relative to the file which is calling it.
eg: if your home page is at http://www.freehost.com/myaccount/home.htm,
then a link going to page stored in the same directory would only need href="page2.htm". Or if you are linking to another folder inside the main one...
href="images/photoOfSomething.jpg"
The way you have will obviously still work, but is overkill. What happens if you change hosts? You would have to go through all your code changing the links. If you use relative paths, you can just copy the entire site and dump it somewhere else.



.links a{
font-family:Arial, Verdana, Helvetica, sans serif;
color:#9900ff;
font-size:2em;
}


**edit: when my host's not down, that is. :mad:

lavalamp
03-01-2004, 03:22 PM
Originally posted by mindlessLemming
just start with XHTML 1.0 and you can't go wrongSure he could go wrong, he might end up learning XHTML 1.0 Transitional :(. Instead EVERYONE should code in XHTML 1.1! :D

Edit: I suppose I should realy post something else as well.

When I started with HTML I learned what I could from other sites on the web. I became really good at tables and created a mash of horrible tables for every page I made. Of course, there were font tags everywhere because each time I closed a td I had to close a font tag and then open a new one for the next cell.

When I learned about CSS I dropped tables like a hot rock. CSS has the ability to separate content from presentation, therefore the code is a lot simpler (although I think that mindlessLemming covered this).
While tables can still do a couple of things that CSS can't there are so many more ways in which CSS can outstrip tables, for one thing you don't have to worry about those pesky rowspans and colspans having to match up.

missing-score
03-01-2004, 06:05 PM
Im no expert on XHTML 1.1, but from what I have heard there is some problems with IE. I think XHTML 1.1 pages need to be served as application/xhtml+xml or something similar, and IE doesnt support this properly... not entirely sure here though, but either way, im good with XHTML 1.0 Strict at the moment.

me'
03-01-2004, 07:08 PM
You're right. XHTML has to be application/xhtml+xml to be valid, and IE will try to download the page if it finds that mime type.

Dante
03-01-2004, 07:21 PM
Cool thanks for the help, i'm glad that at least i seem to have the brains to find the right forums!:p

lavalamp
03-01-2004, 07:52 PM
I've never had a single problem when using XHTML 1.1, I also use the xml decleration which throws IE into quirks mode (dumass browser). Some nifty CSS soon sorted that out though.

Dante
03-01-2004, 10:20 PM
I'm nearly there now and have been looking at CSS at the W3Schools site, but i just need to know how to make the link text bold, i've tried adding : p.thicker {font-weight: 900} and putting <p class="thick"></p> either side of the link table but it isn't working. How would i do this?

missing-score
03-01-2004, 10:49 PM
you could approach this in 3 ways:


p.bold {
font-weight: bold;
}

<th class="links">
<p class="bold">
<a href="http://www.angelfire.lycos.com/ri2/eondreamhacker/HTML/2ndpage.html">Buddhism</a>
<a href="http://www.angelfire.lycos.com/ri2/eondreamhacker/HTML/3rdpage.html">Taoism</a>
<a href="http://www.angelfire.lycos.com/ri2/eondreamhacker/HTML/4thpage.html">Shamanism</a>
<a href="http://www.angelfire.lycos.com/ri2/eondreamhacker/HTML/5thpage.html">Magick</a>
</th>
</p>


should work.

You could do:


a {
font-weight: bold;
}

Which would work


Also, you could just do:


<p>
<strong>
<a href="http://www.angelfire.lycos.com/ri2/eondreamhacker/HTML/2ndpage.html">Buddhism</a>
<a href="http://www.angelfire.lycos.com/ri2/eondreamhacker/HTML/3rdpage.html">Taoism</a>
<a href="http://www.angelfire.lycos.com/ri2/eondreamhacker/HTML/4thpage.html">Shamanism</a>
<a href="http://www.angelfire.lycos.com/ri2/eondreamhacker/HTML/5thpage.html">Magick</a>
</th>
</strong>
</p>


Just make sure if you have some css like:


a {
font-family: blah;
font-size: blah;
}

that you do not have "font-weight: normal" as this will cancel the other formatting.

mindlessLemming
03-01-2004, 10:55 PM
.links a{
font-family:Arial, Verdana, Helvetica, sans serif;
color:#9900ff;
font-size:2em;
font-weight:bold;
}

Dante
03-02-2004, 02:23 AM
Nice one thanks again!:D

If i eventually get CSS and HTML sussed i'll remember to come back and help some newbies out myself. :)

mindlessLemming
03-02-2004, 03:30 AM
Originally posted by Dante

If i eventually get CSS and HTML sussed i'll remember to come back and help some newbies out myself. :)

Bingo! That's how these sort of communities work ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum