SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Thread: Page linking

  1. #1
    SitePoint Member
    Join Date
    Feb 2014
    Location
    Urla, izmir Turkey
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Page linking

    Hello ,

    This is my first (start of many to come) question.

    I am currently following Ian LLoyd's book " Build your own website the right way using HTML and CSS" 3rd Edition and have a problem i.e. the pages I created do not link.

    The code I am using for the 3 pages is as follows: Index.html

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Bubble Under - The diving club for the south-west
    UK</title>
    <meta charset="utf-8"/>
    </head>
    <body>
    <div id="header">
    <div id="sitebranding">
    <h1>BubbleUnder.com</h1>
    </div>
    <div id="tagline">
    <p>Diving club for the south-west UK - let's make a
    splash!</p>
    </div>
    </div> <!-- end of header div -->
    <div id="navigation">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="contact.html">Contact Us</a></li>
    </ul>
    </div> <!-- end of navigation div -->
    <div id="bodycontent">
    <h2>Welcome to our super-dooper Scuba site</h2>
    <p><img src="divers-circle.jpg" width="200" height="162"
    alt="A circle of divers practice their skills"/></p>
    <p>Glad you could drop in and share some air with us!
    You've passed your underwater navigation skills and
    successfully found your way to the start point - or in
    this case, our home page.</p>
    </div> <!-- end of bodycontent div -->
    </body>
    </html>
    About.html

    Code:
    <!DOCTYPE HTML>
    <HTML lang="EN">
    <head>
    <title>"About BubbleUnder.co: who we are and what this site is for."
    </title>
    <meta charset="utf-8"/>
    <head/>
    <body>
    <div id="header">
    <div id= "site Branding">
    <h1> BubbleUnder.com</h1>
    </div> <!-- end of tag Branding div-->
    <div id="tagline">
    <p> Diving club for the south-west UK - let's make a splash</p>
    </div> <!-- end of tagline-->
    </div> <!--end of header div-->
    <div id="navigation">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="contact.html">Contact Us</a></li>
    </ul>
    </div> <!-- end of navigation div -->
    <div id= body content>
    <h2>About Us</h2>
    <p>Bubble Under is a group of diving enthusiasts based in the
    south-west UK who meet up for diving trips in the summer
    months when the weather is good and the bacon rolls are
    flowing. We arrange weekends away as small groups to cut the
    costs of accommodation and travel and to ensure that everyone
    gets a trustworthy dive buddy.</p>
    <p>Although we're based in the south-west, we don't stay on our
    own turf: past diving weekends away have included trips up to
    Scapa Flow in Scotland and to Malta's numerous wreck
    sites.</p>
    <p>When we're not diving, we often meet up in a local pub
    to talk about our recent adventures (any excuse, eh?).</p>
    </div><!-- end of body content -->
    </body>
    </html>
    and finally contact.html

    Code:
    <!DOCTYPE HTML>
    <HTML lang="EN">
    <head>
    <title>Bubble Under-The diving club for southwest UK
    </title>
    <meta charset="utf-8"/>
    <head/>
    <body>
    <div id="header">
    <div id= "site Branding">
    <h1> BubbleUnder.com</h1>
    </div> <!-- end of tag Branding div-->
    <div id="tagline">
    <p> Diving club for the south-west UK - let's make a splash</p>
    </div> <!-- end of tagline-->
    </div> <!--end of header div-->
    <div id="navigation">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="contact.html">Contact Us</a></li>
    </ul>
    </div> <!-- end of navigation div -->
    <div id= body content>
    <h2>Contact Us</h2>
    <p>To find out more, contact Club Secretary Bob Dobalina on
    01793 641207 or <a
    href="mailto:bob@bubbleunder.com">email
    bob@bubbleunder.com</a>.</p>
    </div><!-- end of body content -->
    </body>
    </html>
    When I try to link from Index to the other pages I get the message "Internet explorer cannot display the message.

    What am I doing wrong?

  2. #2
    SitePoint Addict bronze trophy
    Join Date
    Sep 2005
    Posts
    323
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Do you have all the files within the same directory?

  3. #3
    SitePoint Member
    Join Date
    Feb 2014
    Location
    Urla, izmir Turkey
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All the files are in the same folder

  4. #4
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,411
    Mentioned
    273 Post(s)
    Tagged
    5 Thread(s)
    Do each of the pages display OK on their own? i.e. does the problem only occur with the link? Can you try using a different browser?

    I may be missing something, but offhand I don't see any reason why your links shouldn't work.

  5. #5
    SitePoint Member
    Join Date
    Feb 2014
    Location
    Urla, izmir Turkey
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The pages display on their own -no problem

    I have used both Explorer and Firefox - same result.

  6. #6
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,411
    Mentioned
    273 Post(s)
    Tagged
    5 Thread(s)
    OK. I've copied your code into three separate files in the same directory and it's working fine here. However, while I was copying, I noticed that you've referred to the first two files as Index.html and About.html, while in your code they're index.html and about.html, without the capitalisation. If you're using Linux hosting, then that would account for the error. Linux is case-sensitive, so to Linux, Index.html and index.html are two different files. Check that your actual file names are identical to the names used in your code.

  7. #7
    SitePoint Zealot AirFor's Avatar
    Join Date
    Oct 2010
    Location
    Berrigan, NSW, Australia
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would assume the reason for this happening is because the files have the wrong name as the links or are located in different folder directories, the rest of the code looks great so good job!

  8. #8
    SitePoint Member
    Join Date
    Feb 2014
    Location
    Urla, izmir Turkey
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    AirFor
    I would assume the reason for this happening is because the files have the wrong name as the links or are located in different folder directories, the rest of the code looks great so good job!
    Quote Originally Posted by TechnoBear View Post
    OK. I've copied your code into three separate files in the same directory and it's working fine here. However, while I was copying, I noticed that you've referred to the first two files as Index.html and About.html, while in your code they're index.html and about.html, without the capitalisation. If you're using Linux hosting, then that would account for the error. Linux is case-sensitive, so to Linux, Index.html and index.html are two different files. Check that your actual file names are identical to the names used in your code.
    AirFor,
    All the files are in the same directories

    Technobear
    I am using Windows7 so the syntax has no effect

    Thank you all for the replies, however I have solved the problem but I have no idea why.

    I replaced this (after renaming the files)

    Code:
    <div id="navigation">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="contact.html">Contact Us</a></li>
    </ul>
    </div> <!-- end of navigation div -->
    with

    Code:
    <div id="navigation">
    <a href="index1.html">Home</a><br>
    <a href="about1.html">About Us</a><br>
    <a href="contact1.html">Contact Us</a><br>
    </div> <!-- end of navigation div -->
    Basically I dispensed with the 'list' function and used the 'br' function

    Any ideas why the list function did not work?

  9. #9
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,411
    Mentioned
    273 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by eshek View Post
    Any ideas why the list function did not work?
    None at all. It worked fine here when I copied the code from your first post, and I can see no reason why it wouldn't work for you. If you're just testing locally on Windows then yes, you're right, it's not case-sensitive and that wouldn't be the issue.

    Removing the <li>s and using <br> instead is really not best practice. I can understand that you need the code to work on your local machine, but you don't want to get into the habit of writing poor-quality code just to get around a local problem. Much better to try and discover the source of your local issue.

    Edit:

    I've just tested the same files on Windows 7, and there's no problem here. As I said before, there's no reason why there should be; using a list for navigation links has long been standard practice.

  10. #10
    SitePoint Member
    Join Date
    Feb 2014
    Location
    Urla, izmir Turkey
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The previous mail was what I found out - another reason for my failure was although I saved all the files in the same directory I saved them as (file) .html. When I changed to the br function it was saved as (file) without the .html function - it worked

    I deleted the .html from the originals and Hey Presto - it worked

    I have no idea why - any suggestions.

  11. #11
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,411
    Mentioned
    273 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by eshek View Post
    I have no idea why - any suggestions.
    Maybe. (I'm not really a Windows user.)

    If I recall correctly, more recent versions of Windows (e.g Win.7) hide the file extension - the .html or whatever - by default. You can go into the settings and change that, which is something I would always do. If your system is set to hide the extension, then when you save the file as index.html, your system will add an extension, and your file will end up as index.html.html. So when you try to visit that page, using a link to index.html, Windows can't locate the file, because that's not the actual filename. Does that make sense?

  12. #12
    SitePoint Member
    Join Date
    Feb 2014
    Location
    Urla, izmir Turkey
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    Maybe. (I'm not really a Windows user.)

    If I recall correctly, more recent versions of Windows (e.g Win.7) hide the file extension - the .html or whatever - by default. You can go into the settings and change that, which is something I would always do. If your system is set to hide the extension, then when you save the file as index.html, your system will add an extension, and your file will end up as index.html.html. So when you try to visit that page, using a link to index.html, Windows can't locate the file, because that's not the actual filename. Does that make sense?
    TechnoBear it makes absolute sense. Thank you

    I will press on - till the next problem


Tags for this Thread

Bookmarks

Posting Permissions

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