Grow your CSS skills. Land your dream job.

How to get anchor link to middle of a page.

  • # October 9, 2009 at 5:11 am

    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:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">









    masthead

    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.

    theater

    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.

    theater

    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.

    theater

    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.

    theater

    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

    # October 13, 2009 at 3:20 am

    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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".