How to get anchor link to middle of a page.

[justaname]

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

Code:

• THEATER
  • Venue Info
  • Floor Plan
  • Equipment Specs
  • Production Services
  • Gallery
• STUDIO
  • Engineers
  • Studio Services
  • Equipment Specs
  • Gallery
• LOUNGE
  • Events
  • Drinks Menu
  • Hours
  • Gallery
• CALENDAR
  • Current Month
  • Next Month
• CONTACT
  • Details
  • Networks
  • F.A.Q.s

Venue Info

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.

Floor Plan

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.

Equipments

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.

Production Services

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.

As you can see I put the <a name="" /> inside the p tag of a different div.
here’s the CSS

Code:

#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

[godwinsam]

Hello,

Please try the following steps,
1.<a name="" id="sample"></a>
2.#sample{
margin : 0 auto;
}

or

1.
<center>
<a name="" id="sample"></a>
</center>

Thanks & Regards

[Author]

Posts