Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Home, About, Portfolio, Contact, Linking

  1. #1
    Senior Member Wrams's Avatar
    Join Date
    Apr 2009
    Posts
    936
    Blog Entries
    1

    Question Home, About, Portfolio, Contact, Linking 25 Jul 2009 @ 22.20

    When creating a navbar menu across the website how do you link page to page and create space between the i.e. Home, About, Portfolio, Contact. etc...?

    I'm not quite sure what <a> tag to use. Well basic page to page is what I'm looking for.

    Thanks in advance for any help given.
    Last edited by Wrams; 16 Aug 2009 at @ 20.08.
      Reply With Quote

  2. #2
    Trusted Guru Jack Franklin's Avatar
    Join Date
    Dec 2008
    Posts
    409
    Blog Entries
    4

    Default 25 Jul 2009 @ 22.41

    Here is how one would semantically set up such a navigation:

    <ul>
    <li><a href="link.html">Page 1</a></li>
    <li><a href="link.html">Page 1</a></li>
    <li><a href="link.html">Page 1</a></li>
    <li><a href="link.html">Page 1</a></li>
    <li><a href="link.html">Page 1</a></li>
    </ul>

    Not sure what you mean about there being different types of <a> tags?
    Site: jackfranklin.co.uk Blog: ispeakwebstuff.co.uk Project: learnitscreencasts.co.uk
    I'm available for 1 to 1 lessons on HTML/CSS/PHP/Javascript/jQuery/Photoshop/Fireworks so please PM Me!
      Reply With Quote

  3. #3
    Senior Member Jason's Avatar
    Join Date
    Dec 2008
    Posts
    911

    Default 26 Jul 2009 @ 08.47

    To expand upon what Jack said you would have something like this in HTML

    Code:
    <ul id="nav">
      <li class="selected"><a href="">Link</a></li>
      <li><a href="">Link</a></li>
    </ul>
    Your CSS would then look something a bit like this.

    Code:
    ul#nav {
      height:30px; /*Define Height of navigation item*/
    }
    
    ul#nav li {
      float:left; /* Float the li elements so they appear side by side. */
      padding: 0 5px; /* Pad to the left and right of the li elements to give them a little spacing; */
    }
    
    ul#nav li a:hover { /* Make the link change when someone hovers over the link */
      text-decoration: underline;
    }
    
    ul#nav li.selected a { /* Highlight the current page. */
      color:red;
    }
    Hope that helps a little.
      Reply With Quote

  4. #4
    Senior Member Wrams's Avatar
    Join Date
    Apr 2009
    Posts
    936
    Blog Entries
    1

    Default 26 Jul 2009 @ 12.06

    Thank you guys i will try and use what you have both told me. Thank you!!
      Reply With Quote

  5. #5
    Senior Member Wrams's Avatar
    Join Date
    Apr 2009
    Posts
    936
    Blog Entries
    1

    Default 26 Jul 2009 @ 12.14

    quote
    Not sure what you mean about there being different types of <a> tags?
    Originally Posted by Jack Franklin View Post

    What i meant by different <a> tags is this

    <a href="url"> Your Text "></a>

    <a href="http://yourdomain.com" target="_blank"> Your Text </a>

    <a name="label"> Your Text </a>

    Also some more and wasn't sure if I had to use any of those.

    Obviously I haven't...Thanks anyway buddy...
      Reply With Quote

  6. #6
    Senior Member Jason's Avatar
    Join Date
    Dec 2008
    Posts
    911

    Default 26 Jul 2009 @ 13.21

    Ah Wrams, you are talking about attributes

    Code:
    <a href="url"> Your Text "></a>
    This opens up a link in the current browser window.

    Code:
    <a href="http://yourdomain.com" target="_blank"> Your Text </a>
    This opens a link in a new window/tab. You can use this when linking to external pages but many people do not use this any more as it forces the user into an action which they may not want. If a user wants to open up a link in a new tab they will hold control and click. Unless you have some pop up help or need the user to open a new window I would try to avoid this.

    Code:
    <a href="#content">Jump to Content</a>
    
    <a name="content">Welcome</a>
    This is useful on long pages where you want to aid accessibility by allowing the user to jump down the screen. The link above will jump the user up or down the page to the first line of content. This is helpful for accessibility if you have a big header which is similar on all pages.
      Reply With Quote

  7. #7
    Senior Member Wrams's Avatar
    Join Date
    Apr 2009
    Posts
    936
    Blog Entries
    1

    Default 26 Jul 2009 @ 15.31

    quote
    Ah Wrams, you are talking about attributes

    Code:
    <a href="url"> Your Text "></a>
    This opens up a link in the current browser window.

    Code:
    <a href="http://yourdomain.com" target="_blank"> Your Text </a>
    This opens a link in a new window/tab. You can use this when linking to external pages but many people do not use this any more as it forces the user into an action which they may not want. If a user wants to open up a link in a new tab they will hold control and click. Unless you have some pop up help or need the user to open a new window I would try to avoid this.

    Code:
    <a href="#content">Jump to Content</a>
    
    <a name="content">Welcome</a>
    This is useful on long pages where you want to aid accessibility by allowing the user to jump down the screen. The link above will jump the user up or down the page to the first line of content. This is helpful for accessibility if you have a big header which is similar on all pages.
    Originally Posted by Jason View Post
    Thanks Jason for those. I have a A4 sized black hard back book that i write important links and coding in general. So the mailto: and <a> tag and Doctype and CSS links are all in there that way i just flick through the pages, how many people actually memorize the Doctype...? or other long links...? Not many or your brain would burst...lol

    Anyway thank you for your links and explanations. Its always good to see an explaination after the coding. Great job.
      Reply With Quote

  8. #8
    Senior Member Wrams's Avatar
    Join Date
    Apr 2009
    Posts
    936
    Blog Entries
    1

    Default 26 Jul 2009 @ 20.06

    Right Guys i have used and done what you have wrote but theres one problem. How do i remove the bullets from infront the links...?

    Thanks
      Reply With Quote

  9. #9
    Trusted Guru Jack Franklin's Avatar
    Join Date
    Dec 2008
    Posts
    409
    Blog Entries
    4

    Default 26 Jul 2009 @ 21.39

    Code:
    ul {
    list-style: none;
    }
    Site: jackfranklin.co.uk Blog: ispeakwebstuff.co.uk Project: learnitscreencasts.co.uk
    I'm available for 1 to 1 lessons on HTML/CSS/PHP/Javascript/jQuery/Photoshop/Fireworks so please PM Me!
      Reply With Quote

  10. #10
    Senior Member Wrams's Avatar
    Join Date
    Apr 2009
    Posts
    936
    Blog Entries
    1

    Default 26 Jul 2009 @ 21.47

    quote
    Code:
    ul {
    list-style: none;
    }
    Originally Posted by Jack Franklin View Post
    Thanks Jack your a star...
      Reply With Quote

Page 1 of 2 12 LastLast

Similar Threads

  1. Linking form pages to show content in another
    By siham in forum Just Starting Out - Help Me!
    Replies: 9
    Last Post: 15 Feb 2010, @ 15.00
  2. Replies: 4
    Last Post: 10 Jul 2009, @ 16.43
  3. Content Linking
    By Michael in forum SEO (Search Engine Optimisation) & Search Engines
    Replies: 10
    Last Post: 29 Jun 2009, @ 06.59
  4. Remote linking of graphics
    By Dre in forum Imagery, Graphics & Typography
    Replies: 26
    Last Post: 6 Jun 2009, @ 02.05
  5. Troubles linking buttons to URLs in Flash
    By 41ex in forum Imagery, Graphics & Typography
    Replies: 0
    Last Post: 11 Apr 2009, @ 21.16

Tags for this Thread

Posting Permissions

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