SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    links on the same page

    How can I set up the links on the same page?

    I got this webpage:

    http://www.polarpos.com/features/

    And I want those three links at the top to go back to the various places on the website. How can I do that?

    Also can anyone tell me how come the general button is separate from the other two buttons?

    This is my HTML code:

    Code:
    <h2>What kind of business do you have?</h2>&nbsp;
    [one_third][button type="button_call_to_action marker" url="#top" target="" ]General[/button][/one_third][one_third][button type="button_call_to_action marker" url="#top" target="" ]Hospitality[/button][/one_third][one_third last=last][button type="button_call_to_action marker" url="#top" target="" ]Retail[/button][/one_third]
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <h1>POS Features for All</h1>
    &nbsp;

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    It's easy to set up those on-page links. It's the same method you used to link to the #top element. You place an id on the element you want to jump to, and an href on the link to it with the id in it. E.g.

    Code:
    <a href="#hospitality" class="th_button button_call_to_action marker"><span>Hospitality</span></a>
    
    <h1 id="hospitality">Hospitality POS Features</h1>
    You can't have two ids on an element, though, so you'll need to move the "top" link to some other element. I would normally put it at the end of an entry (e.g. at the end of the Hospitality section). You don't normally want to jump back to the top at the start of a section, but at the end.

    So at the end of the Hospitality section, have something like:

    Code:
    <p href="#top">Return to top</p>
    In terms of the unevenly spaced buttons, it's this line that's causing it:

    Code:
    .grid_8 .one_third {
      width: 190px;
    }
    Just remove that line.

    NOTE: regarding the first issue, you don't have a logical heading structure. Headings like Hospitality should not be <h1>s. In HTML5, yes, you are allowed to have more than one, but even then, there is a logic to it which you aren't following here. Really, you should have one H1 on the page, and everything below that be a logical subdivision of that. E.g.

    <h1>What kind of business do you have?</h1>

    <h2>POS Features for All</h2>

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    awesome thanks. what you think I should set the width to?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    I'm not sure you need to set a width.

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks, i appreciate the help.


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
  •