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 10 of 10
  1. #1
    c12
    c12 is offline
    New Coder
    Join Date
    Jan 2013
    Posts
    20
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Cool #anchor link displaces div

    Hello all,

    I've been wrestling with a problem and searching all over the net for about a week now for a solution to a problem with the #anchor tag. For some reason, every time I click the link with the anchor it directs to the right page but displaces my top menu bar along with the div's underneath it.

    Page 1
    Code:
    <li><a href="page2.php#downpage2">To page 2</a></li>
    Page 2
    Code:
    <h3><a name="downpage2" style="text-decoration: none; color: #1d1d1d;">Page 2 Text</a></h3>
    The only other code that could matter is for the menu bar and that's a lot of code but basically is ul's, li's, h3's and p's, and some CSS.

    Please let me know if you have any idea's on how to solve this problem!
    Any help is greatly appreciated.

    Thanks
    CC

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    Post code for or link to page2.php. What you gave us should not be causing your problem.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    c12 (09-05-2013)

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,928
    Thanks
    15
    Thanked 229 Times in 229 Posts
    Well, name for anchor tags has been depreciated in favor of id, so you might try changing name to id.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • Users who have thanked DrDOS for this post:

    c12 (09-05-2013)

  • #4
    c12
    c12 is offline
    New Coder
    Join Date
    Jan 2013
    Posts
    20
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Thanks for the responses.

    Well, I changed the name to id and it didn't make any difference :/

    Here is the link that is involved with the problem.

    http://comp.uark.edu/~cchalfan/Anti-...s.php#NanoLock

    From what I can tell the menu displacement is partly separate from the div's underneath, because when i edit the <div id=content> to say <div id=content style="position:relative; top:400px;"> the menu bar does not come down with it.

    Then when i change <div id="menubar.php"> to <div id="menubar.php" style="position:relative; top:200px"> the menu bar comes down.

    Thanks again!
    Last edited by c12; 09-05-2013 at 07:41 PM. Reason: add information

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,634
    Thanks
    0
    Thanked 649 Times in 639 Posts
    The anchor should be specified as:

    <h3 id="downpage2">

    then it can't move anything because its a part of the heading.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    c12
    c12 is offline
    New Coder
    Join Date
    Jan 2013
    Posts
    20
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    The anchor should be specified as:

    <h3 id="downpage2">

    then it can't move anything because its a part of the heading.
    I tried that and It didn't work.

    Thanks though.

  • #7
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    Check page in my editor and here http://validator.w3.org/check?uri=ht...Inline&group=0

    Some major things to worry about. You use the <nav> tag in a xhtml11/DTD doctype. That's html5 stuff.

    This bothers me.
    Code:
                    <!--<div class="col_5">
                        <h2>Here is some content with side images</h2>
                    </div>
                    <div class="col_3">
                        <img src="img/01.JPG" width="70" height="70" class="img_left imgshadow" alt="" />
                        <p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in sem mauris. Aenean a commodo mi. Praesent augue lacus.<a href="#">Read more...</a></p>
                        <img src="img/02.JPG" width="70" height="70" class="img_left imgshadow" alt="" />
                        <p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.<a href="#">Read more...</a></p>
                    </div>
                    <div class="col_2">
                        <p class="black_box">This is a black box, you can use it to highligh some content. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Quisque vestibulum nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus at velit varius gravida. Nulla ipsum risus.</p>
                    </div>
                </div><!-- End 5 columns container -->
    There should be an end of comment here
    Code:
                    </div>-->
                </div><!-- End 5 columns container -->
    You are missing some beginning and ending tags.

    I've never used web-kit with this doctype so don't know if that's kosher. But filter: in CSS is HTML5 Same for transition:

    Page errors need to be corrected, that may make things work for you.

    PS using name or id for anchors; either should work for now, makes no diff which you use, but id is the new wave.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    c12 (09-05-2013)

  • #8
    c12
    c12 is offline
    New Coder
    Join Date
    Jan 2013
    Posts
    20
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Thanks again for your response.

    Okay, that's good stuff to know..

    I've looked at the errors and the majority of them I don't think were actually problems, like the opening and closing brackets. Because when I looked at most of those kinds of problems on the source code in the browser and in my file, and it had all the necessary brackets and quotes.

    But I did change a few other little things like the style type and i tried out 2 different doctypes (that seems to be my biggest problem, but i'm not familiar with them and other standards).

    I tried both of these doctypes

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
    and neither of them had any noticeable effect. :/

    Arg.. I don't understand why this is happening.

    Another thing is that when i'm editing it in Firebug if I make the <div id="menubar.php"> into

    Code:
    <div id="menubar.php" style="position:relative; top:330px;">
    then it is perfectly the way i want it.

    But if i were to put that in the code, then that page would be distorted when going through a link without the anchor.

    Are there any little hacks or javascript to account for this?
    Last edited by c12; 09-05-2013 at 10:15 PM.

  • #9
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,634
    Thanks
    0
    Thanked 649 Times in 639 Posts
    While having a . in an id is valid such ids have problems as the dot has different meanings with respect to most of the places where ids can be used. For example the dot means a class definition when you try to reference the id from css and so the css will not be applied correctly.

    There could also be problems trying to use the id in JavaScript.

    It is only really when using the id as an anchor within the HTML that the dot in the id is unlikely to cause problems.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #10
    c12
    c12 is offline
    New Coder
    Join Date
    Jan 2013
    Posts
    20
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    While having a . in an id is valid such ids have problems as the dot has different meanings with respect to most of the places where ids can be used. For example the dot means a class definition when you try to reference the id from css and so the css will not be applied correctly.

    There could also be problems trying to use the id in JavaScript.

    It is only really when using the id as an anchor within the HTML that the dot in the id is unlikely to cause problems.
    Ok. Well I changed the <div id="menubar.php"> to <div id="menubar"> and it didn't make any difference.


  •  

    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
    •