Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14

Thread: Link problem

  1. #1
    New Coder
    Join Date
    Jan 2004
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Link problem

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

  • #2
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    <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?



    Andrew.
    Last edited by mindlessLemming; 03-01-2004 at 12:48 PM.

    I take no responsibility for the above nonsense.


    Left Justified

  • #3
    New Coder
    Join Date
    Jan 2004
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    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?

  • #4
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
     .links a{
      font-family:Arial, Verdana, Helvetica,  sans serif;
      color:#9900ff;
      font-size:2em;
     }
    **edit: when my host's not down, that is.
    Last edited by mindlessLemming; 03-01-2004 at 01:49 PM.

    I take no responsibility for the above nonsense.


    Left Justified

  • #5
    Regular Coder
    Join Date
    Aug 2003
    Location
    Loughborough University
    Posts
    427
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by mindlessLemming
    just start with XHTML 1.0 and you can't go wrong
    Sure he could go wrong, he might end up learning XHTML 1.0 Transitional . Instead EVERYONE should code in XHTML 1.1!

    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.
    Last edited by lavalamp; 03-01-2004 at 03:29 PM.
    AMD Athlon "Barton" XP 3200+ (11*200.5MHz = 2.2GHz)
    BFG GeForce 6800 Ultra OC 256Mb
    3 * Kingston 256Mb PC3200 DDR400
    Seagate Barracuda 120Gb Ultra ATA-100 and Seagate Barracuda 160Gb, SATA-150

  • #6
    Senior Coder missing-score's Avatar
    Join Date
    Jan 2003
    Location
    UK
    Posts
    2,194
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #7
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #8
    New Coder
    Join Date
    Jan 2004
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cool thanks for the help, i'm glad that at least i seem to have the brains to find the right forums!

  • #9
    Regular Coder
    Join Date
    Aug 2003
    Location
    Loughborough University
    Posts
    427
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    AMD Athlon "Barton" XP 3200+ (11*200.5MHz = 2.2GHz)
    BFG GeForce 6800 Ultra OC 256Mb
    3 * Kingston 256Mb PC3200 DDR400
    Seagate Barracuda 120Gb Ultra ATA-100 and Seagate Barracuda 160Gb, SATA-150

  • #10
    New Coder
    Join Date
    Jan 2004
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #11
    Senior Coder missing-score's Avatar
    Join Date
    Jan 2003
    Location
    UK
    Posts
    2,194
    Thanks
    0
    Thanked 0 Times in 0 Posts
    you could approach this in 3 ways:

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

    Code:
    a {
          font-weight: bold;
    }
    Which would work


    Also, you could just do:

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

    Code:
    a {
    font-family: blah;
    font-size: blah;
    }
    that you do not have "font-weight: normal" as this will cancel the other formatting.

  • #12
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
     .links a{
      font-family:Arial, Verdana, Helvetica,  sans serif;
      color:#9900ff;
      font-size:2em;  
      font-weight:bold;
     }

    I take no responsibility for the above nonsense.


    Left Justified

  • #13
    New Coder
    Join Date
    Jan 2004
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nice one thanks again!

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

  • #14
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

    I take no responsibility for the above nonsense.


    Left Justified


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •