SitePoint Sponsor

User Tag List

Results 1 to 18 of 18

Thread: HTML Question

  1. #1
    SitePoint Guru Michel32's Avatar
    Join Date
    Nov 2004
    Posts
    644
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML Question

    Hi,

    I have two questions:

    1. How can I move up a bit the Sign up banner (see screenshot 1 & for coding screenshot 2)?
    2. See screenshot 3: I placed URL inside 'a href' code, but link doesn't work when I click on it. I want to be able to link to other inner pages on the site!

    Many thanks
    Mike
    Attached Images Attached Images

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Michel32 View Post
    1. How can I move up a bit the Sign up banner (see screenshot 1 & for coding screenshot 2)?
    2. See screenshot 3: I placed URL inside 'a href' code, but link doesn't work when I click on it. I want to be able to link to other inner pages on the site!
    Rather than giving us screenshots, it's more helpful if you can give us a live URL (even it it's only a mock-up page on a development site, if you don't want to publish the actual URL) so that we can see exactly what's going on.

  3. #3
    SitePoint Guru Michel32's Avatar
    Join Date
    Nov 2004
    Posts
    644
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hereby, live URL: lotto revenues dot com

    Regarding the 1st screenshot, I removed the log-in button (this will be the case on any inner page). The same left side bar you will find on the site itself. The idea is to replace a href="#" with inner URL (I am creating new inner pages instead of having everything open on the index page).

    Thanks!
    Mike

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    One at a time.

    There is a "login" button above the "not registered yet" bar. You really cannot raise that bar by more than a few pixels. You might consider a different layout, such as putting the "login" button below the "not registered yet" bar.

    On the other hand, if you wish to go for raising the bar a small amount, I suggest the following changes:
    Code:
    .register {
        background: url("../img/bg-register.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
        float: right;
        height: 76px;
        position: relative;
        right: -16px;
        top: -10px;
        width: 684px;
        padding: 16px 26px 0 0;
        margin-right: -16px;
        margin-top: -20px;
    }
    Delete the red, add the blue.

    Position:relative is generally a poor way to move an object because the original space occupied by the object doesn't move, only the apparent position of the object changes. Margins are usually a better choice.

    Let us know if this works for you, then we'll go to the next item.

  5. #5
    SitePoint Guru Michel32's Avatar
    Join Date
    Nov 2004
    Posts
    644
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    One at a time.

    There is a "login" button above the "not registered yet" bar. You really cannot raise that bar by more than a few pixels. You might consider a different layout, such as putting the "login" button below the "not registered yet" bar.

    On the other hand, if you wish to go for raising the bar a small amount, I suggest the following changes:
    Code:
    .register {
        background: url("../img/bg-register.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
        float: right;
        height: 76px;
        position: relative;
        right: -16px;
        top: -10px;
        width: 684px;
        padding: 16px 26px 0 0;
        margin-right: -16px;
        margin-top: -20px;
    }
    Delete the red, add the blue.

    Position:relative is generally a poor way to move an object because the original space occupied by the object doesn't move, only the apparent position of the object changes. Margins are usually a better choice.

    Let us know if this works for you, then we'll go to the next item.

  6. #6
    SitePoint Guru Michel32's Avatar
    Join Date
    Nov 2004
    Posts
    644
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Changes made.
    Please let me know how to tackle 2nd item.

    Thanks!

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    I'm not exactly sure what you mean by "inner pages".

    Usually, one addresses a page either by using the full URL (as you have done) or with a shorter relative path.

    When I click the "signup" button on your site, I am taken to the signup.php page. Although there is a fragment identifier at the end of the URL, #SignupForm, I do not see the target of that identifier on the page so it simply opens at the head of the page.

    I believe that the third screen shot is the example you are talking about where you would like to address a particular target or line within a particular page.
    To do that, you must add the fragment identifier to the end of the URL (in the manner shown on the existing "signup" button), AND you must have a matching target ID within the page.

    I am presuming that the following lines are on different pages; however they could be on the same page in which case the href would only need to contain the tagetid.
    Code:
    <a href="http://www.mywebdomain.com/gotopage#targetid>
    Code:
    <div id="targetid>
    Does this help, or am I off base?

  8. #8
    SitePoint Guru Michel32's Avatar
    Join Date
    Nov 2004
    Posts
    644
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Screenshot 3 >>

    For example: <a href="#" class="bt-03">Tools</a>

    Right now clicking on anchor 'Tools', it will bring you to tools section on the home page. Right now I am creating inner page for this tools section (I don't want to open this section on the home page, but should open inner page called Tools that I created). Now I would re-place in the code "#" with for example URL "mywebdomain.com/tools ".

    After doing so, clicking on the tools anchor will not bring me to the new page mywebdomain.com/tools I created. Code <a href="mywebdomain.com/tools" class="bt-03">Tools</a> is not working! My feeling says I need to make changes to the CSS somehow, since my link code is correct!

    PS - Signup page you were referring to is a bit different case, since signup page itself is part of outsourced software.


    Thanks!

  9. #9
    SitePoint Guru Michel32's Avatar
    Join Date
    Nov 2004
    Posts
    644
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also:

    Based on your explanation:

    <a href="http://www.mywebdomain.com/tools#tools" class="bt-03">Tools</a>

    Where do I place code <div id="tools">? This will be inside code for page mywebdomain.com/tools? Where will I add this code, between the <body tags? How will it look like?

    Thanks again!

  10. #10
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The link to take you to the tools section in the current page:

    <a href="#tools">Tools</a>

    What to link it to (assuming you have a heading at the top of the tools section:

    <h2 id="tools">Tools</h2>

    if not then put the id on whatever you have at the top of the tools section in place of a heading.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  11. #11
    SitePoint Guru Michel32's Avatar
    Join Date
    Nov 2004
    Posts
    644
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The thing is that I don't want to use IDs for linking, but just a simple inner link page URL for linking to another page. How can I remove this ID thing?

    Thanks!!

  12. #12
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Michel32 View Post
    Also:

    Based on your explanation:

    <a href="http://www.mywebdomain.com/tools#tools" class="bt-03">Tools</a>

    Where do I place code <div id="tools">? This will be inside code for page mywebdomain.com/tools? Where will I add this code, between the <body tags? How will it look like?

    Thanks again!
    Michael,

    It sounds like you are saying that
    Code:
    <a href="http://www.mywebdomain.com/tools" class="bt-03">Tools</a>
    could be a menu button or a link on the home page that the user clicks and will be taken to a new page known as the Tools page.

    For that button to work, the tools page must be named tools.htm (or .html, or .php depending on your site).

    IF you want the user to go to the tools.htm page AND ALSO be taken to an list somewhere down the page named "inventory",
    THEN you would first have to be sure that the list has in ID of "inventory". IF the list has an ID of "inventory", you could ADD something called a fragment identifier to the URL of the tools page which would take the user directly to the "inventory" list on the tools page.

    This might be a menu button on the index page.
    Code:
    <a href="http://www.mywebdomain.com/tools#inventory" class="bt-03">Tools</a>
    This would be on your new page named "tools.htm".
    If you what the user to start at the top of the "tools.htm" page, then there is nothing more to do.
    If you want the user to be taken down the page to the "inventory" list, then that inventory box should have in ID of "inventory" (as felgall shows with the <h2> tag).
    Code:
    <div id="inventory">
        <ul>
            <li>little widget</li>
            <li>bigger widget</li>
            ....
        </ul>
    </div>
    Links to other pages work the same way whether they are "outsourced software" or home brewed, so I do not understand the confusion.

    The questions I am not clear about are whether you are talking about a fragment identifier or perhaps you do not know the difference between a URL and a relative path.

    Then, too, it is possible that we do not understand what you are trying to do.

    If you can post a link to your page, we would stand a better chance of helping.

  13. #13
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Michel32 View Post
    The thing is that I don't want to use IDs for linking, but just a simple inner link page URL for linking to another page. How can I remove this ID thing?

    Thanks!!
    You remove it by not writing it down or by not using it.

    A link to another page does not normally refer to an ID. See the code snippit at the top of post #12.

    It's really that simple.

    What is an "inner link page URL"? Are you talking about a relative path?... one that does not begin with "http://"? I don't know what "inner link page URL" means.

  14. #14
    SitePoint Guru Michel32's Avatar
    Join Date
    Nov 2004
    Posts
    644
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Please see my screenshots.

    I changed the linking code as I want it (screenshot - example) - I gave it a red border. The other screenshot (name: example 2) , gives location on the index page.

    Now when clicking on this link anchor 'Contact' it doesn't bring me to this page (it stays on the index). This is what I need to fix in order to get it work! (to me it looks that I need to make adjustments to the CSS somehow)

    Many thanks!
    Attached Images Attached Images

  15. #15
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,423
    Mentioned
    273 Post(s)
    Tagged
    5 Thread(s)
    You need to make sure you use the exact file name in your link. You probably just need to change http://www.lottorevenues.com/contact to http://www.lottorevenues.com/contact.html (or .php or whatever your file type is.) This assumes that your file contact.html is in the same directory (folder) as the page from which you're linking.

  16. #16
    SitePoint Evangelist WebMachine's Avatar
    Join Date
    Jun 2007
    Location
    Ontario, Canada
    Posts
    427
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Another possibility, if you still want to use http://www.lottorevenues.com/contact is to put your contact page in a folder named contact, and call the contact page index.html (or index.php) depending on your requirements. I never do this, because it just adds extra layers to the file structure of the site, but I have heard about this technique to keep the urls nice looking without having to do too much complicated coding.

  17. #17
    SitePoint Guru Michel32's Avatar
    Join Date
    Nov 2004
    Posts
    644
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using contact.html instead of contact doesn't change things for me. It still doesn't work. Problem is with linking from menu! Placing links somewhere else on the site is working fine for me.

    Thanks
    Mike

  18. #18
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,423
    Mentioned
    273 Post(s)
    Tagged
    5 Thread(s)
    On lottorevenues.com home page, clicking the "contact" link in the menu takes me to the page contact.html, which is what I would expect. The other links in that menu are internal page links and therefore take me to other parts of the home page - also what I would expect. So in what way do you mean it's not working for you?

    Edit:

    OK - now I see the problem. There is something very strange about your page, because when I first visited it, it was entirely unstyled, but the link, as I said, worked fine. If I enable JavaScript (which I don't usually), I see a styled version of the page - but the link doesn't work correctly. The menu buttons seem to pull up "tabs" for the different sections, rather than loading a whole new page, and they are incorrectly aligned, so that the section shown does not correspond to the item clicked.

    I suspect your problem lies with your JS, which is not my forte. Either way, you need to work out why your styling is only being applied when JS is enabled - that's definitely not right.


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
  •