Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Dan Sinclair
Dan Sinclair
1,420 Points

CSS Shape Links: How to display and link

I am trying to make my green css shape triangles to work as clickable links, but also as elements that remain absolute when scrolling.

Problem is, when I write absolute, the triangles stop being actual links. You can't click on them anymore.

When I leave out the absolute in the rule, they remain clickable links, but do not remain visible when you scroll.

Can anyone help with this?

.left-arrow {
    float: left;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 10px solid #32cd32;
    border-bottom: 10px solid transparent;
}

.right-arrow {
    float: right;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-left: 10px solid #32cd32;
    border-bottom: 10px solid transparent;
    z-index: -1;

}

 <article> 
         <a href="Sawtooth-Initiative.html" class="left-arrow">-</a>
      </article>

     <article>
         <a href="Bling-Ring-Shoes.html" class="right-arrow">-</a>
     <article>

1 Answer

kkswecpsyl
kkswecpsyl
8,155 Points

Keep in mind this code is not that efficient and I'm still a noob, but by using position:fixed; it kept the arrows visible when scrolling down the page, and they both were clickable. I deleted some of the code and also made the arrows bigger you could probably delete more but I don't know this stuff well yet.

I also added a circle positioned far down the page so you can see the scrolling works.

<html>
<style>
.main {
    width:900px;
    margin: 20px auto 0;
}

.left-arrow {

    margin: 200px 0 0 0;
    position: fixed;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 50px solid #32cd32;
    border-bottom: 50px solid transparent;

}

.right-arrow {


    margin: 200px 0 0 600px;
    position:fixed;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 50px solid #32cd32;
    border-bottom: 50px solid transparent;

}

.circle {
    float:left;
    width: 200px;
    height: 200px;
    margin: 4000px 0 300px 300px;
    border-radius: 50%;
    background: tomato;
}
</style>
<div class="main">
    <article> 
         <a href="Sawtooth-Initiative.html" class="left-arrow"></a>
      </article>

     <article>
         <a href="Bling-Ring-Shoes.html" class="right-arrow"></a>
     </article>
     </div>
     <div class="circle"> </div>

     </html>
Dan Sinclair
Dan Sinclair
1,420 Points

Thank you David! This made a lot more sense, plus I realized I was putting the html elements in the wrong place in my document.

Cheers!

kkswecpsyl
kkswecpsyl
8,155 Points

No worries :)