CODEWITHSUNDEEP
htmlcssnavigationscroll
Claire
Claire

Reputation: 149

Scroll to a location on a page

I'm trying to move to a specific location on the page after a link is clicked. Here's my website:

http://violetoeuvre.com/

I want the page to jump to the writing section when the top writing link is clicked, and same thing for contact, similar to this:

http://jsfiddle.net/4ygcf/

But, when I sub in the appropriate ids, it's not working. Here's my html:

<div class="wrapper_nav_box">
    <div id="nav_menu" id="nav_box_1"><a href="#home_writing">WRITING  |</a></div>

and css:

.side_nav_contact {
        display:block;
        float:left;
        background:rgba(100,255,255,0);
        margin-top: 840px;
        width:200px;
        height: 50px;
}

#nav_box_l {
    display: block;
    float:left;
    width:247px;
    text-align: right;
    padding-top: 169px;
    margin-top: 0;
}


#nav_menu a:link{
        font-family: 'Playfair Display', serif;
        font-size: 30px;
        font-weight: 100; 
        color:rgba (255,255,255,1);
        text-decoration: none; 
        text-align: center;
        letter-spacing:0.2em;
}

#nav_menu a:hover{
        font-family: 'Playfair Display', sans-serif;
        font-size: 30px;
        font-style: italic;
        font-weight: 100; 
        color:rgba (255,255,255,1);
        text-decoration: none; 
        text-align: center;
        letter-spacing:0.2em;
}

I suspect that this is because I'm using two ids (#nav_box_l and #nav_menu). #nav_menu is how I'm styling the links, while #nav_box_l contains "Writing." I tried combining but this doesn't work. Should I just use one? Does this technique not work if I want to jump to a class (.side_nav_content), not id?

Thanks.

Upvotes: 0

Views: 111

Answers (2)

Dennis Traub
Dennis Traub

Reputation: 51634

An HTML element may only have one id and only one element may have that id. You can use a classfor the styling.

.nav_box_l {
  display: block;
  float:left;
  width:247px;
  text-align: right;
  padding-top: 169px;
  margin-top: 0;
}

<div id="nav_menu" class="nav_box_1">...</div>

Upvotes: 1

Andy
Andy

Reputation: 14575

"Writing" link:

home_writing is currently a class, change that to an id <div id="home_writing"> and it will work

"About" link:

You have set the link to <a href="home_text"... rather than <a href="#home_text", stick the # in and that should work too

"Contact" link:

You don't have a div called #contact, which is what you are linking to, change the <div class="home_contact"> to <div id="contact"> and that one should work too

Upvotes: 1

Related Questions