Let me start by saying that I have very limited knowledge of html, CSS, etc. Most of what I know is based on following examples. Currently, I am working on a header menu where each link acts as an anchor within the page (the divs are hidden until clicked). However, I have encountered a problem that I can't seem to solve. Here's how my links are set up within the page:
<div class="header">
<a href="#B1">Block 1</a>
<a href="#B2">Block 2</a>
</div>
When clicked, this will give me a URL like "localhost/test1.html#B1". However, one of the div blocks contains the following code:
<div id="B1">
<a href="#slide-one">
<a href="#slide-two">
</div>
I have realized that I can't use a URL like
"localhost/test1.html#B1#slide-one"I'm not sure if it's even possible to have an anchor link to a page that already has an anchor in place. I cannot utilize jQuery, flash, java, or anything other than HTML/CSS. While I assume it might not be possible, I wanted to make one last attempt and ask for help here.
EDIT: I've updated the sample code for better explanation:
<style type="text/css">
div#Menu {
height:90px;
left:0;
position:fixed;
top:-5px;
width:100%;
text-align:center;
}
div#B1 {
position:absolute;
left:-1000px;
margin-top:0;
}
div#B1:target {
top:100px;
left:375px;
}
div#B2 {
position:absolute;
left:-1000px;
margin-top:0;
}
div#B2:target {
top:100px;
left:375px;
}
</style>
</head>
<body>
<!--Header Menu-->
<div id="Menu" class="header">
<a href="#B1">Block 1</a>
<a href="#B2">Block 2</a>
</div>
<div id="B1" class="blocks">
<div id="Slider1" class="Slide">
<ul>
<li id="slide-one"><img src="slide-one.png"/></li>
<li id="slide-two"><img src="slide-two.png"/></li>
</ul>
<a href="#slide-one">Slide 1</a>
<a href="#slide-two">Slide 2</a>
</div>
</div>
<div id="B2">
<div id="Slider1" class="Slide">
<ul>
<li id="slide-three"><img src="slide-three.png"/></li>
<li id="slide-four"><img src="slide-four.png"/></li>
</ul>
<a href="#slide-three">Slide 3</a>
<a href="#slide-four">Slide 4</a>
</div>
</div>
The setup includes CSS image sliders with thumbnail navigation that link to anchors within each section. When I click on Block #1 in the menu, it opens showing an image slider gallery inside it. My page URL changes to "test1.html#B1". The image slider also has anchors for each image.
In a regular situation, the slider alone would give URLs for each image like "test1.html#slide-one". But since this is nested and the image slider is a child element of the "B1" block, I need Block #1 to remain open while navigating through the images.