0

I'm playing around with a simple website (I'm a beginner with HTML and CSS), where I made a simple menu with some submenus. The content of the page, mainly images and videos will be displayed in a scrollbox.

Now I thought that instead of creating different subpages, it'd be better to be able to jump down to the relevant content. I've tried out different solutions, but something's not working out - or at least, jsfiddle doesn't show it. 

    <div id="navigation">
    <ul>        
      <li>
        <a href="#">main menu</a>
            <ul>

                  <li><a href="#section1">section 1</a></li>
                  <li><a href="#section2">section 2</a></li>
                  <li><a href="#section3">section 3</a></li>
            </ul>
        </li>  
    </ul>   
</div>

that's my code for one part of the menu, here's the scrollbox with images:

    <div class="scroll" style="float:left;border: 1px solid black; width: 40em; 
     height:  30em; line-height: 3em; overflow-y: scroll; overflow-x:hidden; 
     text-align: center; margin:5%; margin-bottom: 5%; background-color: #ffffff; 
     color: #ffffff;">

     <img src="http://websiteurl.com/image.jpg" style="float: left; width: 95%; 
      padding: 3%; padding-right: 3%; display: block" alt="image1"> 
     <a name="section1"><img src="http://websiteurl.com/image2.jpg"
     style="float: left; width: 95%; padding: 3%; padding-right: 3%; alt="image2"></a></div>

So as you can see, I would like clicking on the menu link "section 1" cause to jump down the scrollbox to the desired image location without changing the page itself.

How would that be possible? or: where's the error in the anchoring? Thank you all for answers!

null
  • 3,469
  • 7
  • 41
  • 90
user2563759
  • 5
  • 5

1 Answers1

2

It's difficult reading the code with the inline css. I'd first suggest moving the css to a stylesheet, that would surely help readability and debugging.

Have you tested without the images or without the scroll box?

An anchor tag is normally just 

<a href="#myAnchorName">Click Here</a>

or if using images instead of links

<a href="#myAnchorImage"><img scr="imageLocation"/></a>

and then the anchor part is

<a name="myAnchorName"></a>
null
  • 3,469
  • 7
  • 41
  • 90
  • ah, thanks for the readability tip! that's a good one, will do that now. as for the anchor tags - exactly, that what i was trying with. however, it just jumps to the first image in the scrollbox (i've jsut now tried it without the box, and it's the same result). i have no clue why it doesn't jump further down.. – user2563759 Jul 11 '13 at 14:39
  • Here's a JS Fiddle with an ugly but working example of bouncing from top to bottom. http://jsfiddle.net/5684c/ Just realised I left the CSS in the window but it's not being used. Apologies for BR tags, I've not much time. – null Jul 11 '13 at 14:48
  • thanks for giving me your time anyway! i think you were a bit too fast though, it seems to be empty :) – user2563759 Jul 11 '13 at 14:50
  • A better Fiddle showing it moving between 3 images within your scroll box. http://jsfiddle.net/GuyTu/ – null Jul 11 '13 at 15:01
  • thank you steve, that's a great jsfiddle! oddly enough, i think there is some fault in the styling of the images. as soon as i apply style rules (via html or css), the jump doesn't work anymore - that was the thing blocking it, now i have to figure that out. – user2563759 Jul 11 '13 at 15:20
  • Woohoo! :) Glad I could be of some help. If you still have issues once the styling is sorted post again. – null Jul 11 '13 at 15:23