Hi guys, I'm new to this forum and hope to get some help with a problem. I want to be able to jump to an anchor but not have it display at the top but in the middle, a specific area of a certain number of pixel down from the top. I've tried many times, using different div id to div class, but not able to have to work. I'm able have it jump to that particular anchor because I put the <a name="" /> at a certain section of the previous div. I know this is not a sustainable method since the content of the div's paragraph will change from time to time. Here's the code i have set up
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Columbia City Theater</title>
<link href="CCT_style.css" rel="stylesheet" type="text/css" />
<link href="theater.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-min.js"></script>
<script type="text/javascript" src="js/menu-color.js"></script>
<script type="text/javascript" src="js/jquery-color.js"></script>
<!--[if IE 6]><link href="ie6.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if IE 7]><link href="ie7.css" rel="stylesheet" type="text/css"><![endif]-->
</head>
<body>
<!-- <div id="bg"><img src="bg.jpg"></div> -->
<!-- This space is for the logo -->
<div id="masthead">
<a href="index.html"><img src="testmasthead.png" style="border: 0px" alt="masthead" /></a></div>
<!--Main menu-->
<div id="menu">
<ul class="main-menu">
<li class="main-theater">
<a href="theater.html" class="theater-link">THEATER</a>
<ul class="sub-theater">
<li><a href="#venue">Venue Info</a></li>
<li><a href="#floorplan">Floor Plan</a></li>
<li><a href="#equipment">Equipment Specs</a></li>
<li><a href="#production">Production Services</a></li>
<li><a href="theater.html">Gallery</a></li>
</ul>
</li>
<li class="main-studio">
<a href="studio.html" class="studio-link">STUDIO</a>
<ul class="sub-studio">
<li><a href="studioengineers.html">Engineers</a></li>
<li><a href="studioservices.html">Studio Services</a></li>
<li><a href="studioequipment.html">Equipment Specs</a></li>
<li><a href="studiogallery.html">Gallery</a></li>
</ul>
</li>
<li class="main-lounge">
<a href="lounge.html" class="lounge-link">LOUNGE</a>
<ul class="sub-lounge">
<li><a href="loungeevents.html">Events</a></li>
<li><a href="loungedrinks.html">Drinks Menu</a></li>
<li><a href="loungehours.html">Hours</a></li>
<li><a href="loungegallery.html">Gallery</a></li>
</ul>
</li>
<li class="main-calendar">
<a href="calendar.html" class="calendar-link">CALENDAR</a>
<ul class="sub-calendar">
<li><a href="calendarcurrent.html">Current Month</a></li>
<li><a href="calendarnext.html">Next Month</a></li>
</ul>
</li>
<li class="main-contact">
<a href="theater.html" class="contact-link">CONTACT</a>
<ul class="sub-contact">
<li><a href="contactdetail.html">Details</a></li>
<li><a href="contactnetwork.html">Networks</a></li>
<li><a href="contactfaq.html">F.A.Q.s</a></li>
</ul>
</li>
</ul>
</div>
<!-- content of page starts here -->
<a name="venue"/>
<div id="venue-info">
<div class="info-box"></div>
<div class="info-holder">
<div class="info">
<span class="info-title">
<h1>Venue Info</h1>
</span>
<p>A fully restored Vaudeville Theater circa 1919, located in the heart of the historic Columbia City District. The theater is operated by a team of experienced professionals with many years working in sounds and lighting. We can facilitate a variety of events and arrange to accommodate your needs. For more information about booking the venue for wedding, corporate or social events please contact Patrick Huntsman.<a name="floorplan" />
</p>
</div>
<div class="image-holder"></div>
<div class="images">
<img class="image" src="theaterinfo.jpg" style="border: 0px" alt="theater" /></div>
</div>
</div>
<div id="floorplan-info">
<div class="info-box"></div>
<div class="info-holder">
<div class="info">
<span class="info-title">
<h1>Floor Plan</h1>
</span>
<p>A fully restored Vaudeville Theater circa 1919, located in the heart of the historic Columbia City District. The theater is operated by a team of experienced professionals with many years working in sounds and lighting. We can facilitate a variety of events and arrange to accommodate your needs. For more information about booking the venue for wedding, corporate or social events please contact Patrick Huntsman.<a name="equipment" />
</p>
</div>
<div class="image-holder"></div>
<div class="images">
<img class="image" src="theaterinfo.jpg" style="border: 0px" alt="theater" />
</div>
</div>
</div>
<div id="equipment-info">
<div class="info-box"></div>
<div class="info-holder">
<div class="info">
<span class="info-title">
<h1>Equipments</h1>
</span>
<p>A fully restored Vaudeville Theater circa 1919, located in the heart of the historic Columbia City District. The theater is operated by a team of experienced professionals with many years working in sounds and lighting. We can facilitate a variety of events and arrange to accommodate your needs. For more information about booking the venue for wedding, corporate or social events please contact Patrick Huntsman.
</p>
</div>
<div class="image-holder"></div>
<div class="images">
<img class="image" src="theaterinfo.jpg" style="border: 0px" alt="theater" />
</div>
</div>
</div>
<div id="production-info">
<div class="info-box"></div>
<div class="info-holder">
<div class="info">
<span class="info-title">
<h1>Production Services</h1>
</span>
<p>A fully restored Vaudeville Theater circa 1919, located in the heart of the historic Columbia City District. The theater is operated by a team of experienced professionals with many years working in sounds and lighting. We can facilitate a variety of events and arrange to accommodate your needs. For more information about booking the venue for wedding, corporate or social events please contact Patrick Huntsman.
</p>
</div>
<div class="image-holder"></div>
<div class="images">
<img class="image" src="theaterinfo.jpg" style="border: 0px" alt="theater" />
</div><a name="production" />
</div>
</div>
<!--
<div id="footer">
<p>this is the footer</p>
</div>
-->
</body>
</html>As you can see I put the <a name="" /> inside the p tag of a different div.
here's the CSS
#bg {
position: fixed;
margin: 0px;
border: 0px;
padding: 0px;
left: 0px;
top: 0px;
width: auto;
height: auto;
overflow: hidden;
z-index: -1;
}
#bg img {
width: 100%;
opacity:0.9; filter:alpha(opacity=90);
}
#container {position: absolute;
width: 900px;
height: 2025px;
top: 0px;
background-color: none;
left: 200px;
margin: 0px 0px 0px 0px;
}
#venue-info{position: absolute;
top: 175px;
left: 200px;
}
#floorplan-info{position: absolute;
top: 610px;
left: 200px;
}
#equipment-info{position: absolute;
top: 1045px;
left: 200px;
margin: 0px 0px 0px 0px;
}
#production-info{position: absolute;
top: 1480px;
left: 200px;
padding-bottom: 165px;}
.info-box{position: absolute;
background-color: #ff3366;
width: 200px;
height: 290px;
margin: 0px;
padding: 0px;
opacity:0.75; filter:alpha(opacity=75);
}
.info-holder {position: absolute;
width: 200px;
top: 0px;
margin: 0px;}
.info {position: absolute;
width: auto;
height: 300px;
overflow: auto;
color: #000;
margin: 0px;}
.image-holder {position: absolute;
background-color: #ff3366;
width: 565px;
height: 385px;
left: 215px;
top: 0px;
opacity:0.75; filter:alpha(opacity=75);}
.images {position: absolute;
left: 215px;
top: 0px;}
.image{position: absolute;
left: 10px;
top: 10px;}
p{color: #fff;
padding-left: 10px;
padding-right: 5px;
padding-top: 30px;
font-size: .8em;
font-weight: normal;
letter-spacing: .5px;
line-height: 1.25em;
margin: 0px;}
.info-title h1{position: absolute;
background-color: #ff3366;
width: 190px;
padding-left: 10px;
font-size: 1.25em;
font-weight: normal;
text-align: left;
margin: 0px;}
#footer{position: absolute;
width: 100%;
height: 50px;
background-color: #ff33cc;
margin: -50px 0 0 0;
}here's a screen shot
[img]http://farm3.static.flickr.com/2550/3995265658_003e13130c_b.jpg[/img]
If anyone can help, I would really appreciate it. Thanks