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 ROCKY BARAJAS
ROCKY BARAJAS
4,270 Points

Help wanted with a project

I am updating my website and am having trouble add a social link to the following html code..

<section class="social-footer">
            <h1>CONNECT WITH ME</h1>
            <div class="spacer"></div>
            <div class="footer-container">
                <div class="social-ico s-facebook"></div>
                <div class="social-ico s-soundcloud"></div>
                <div class="social-ico s-youtube"></div>
                <div class="social-ico s-twitter"></div>
                <div class="social-ico s-plus"></div>
                </div>
            <!--<div class="clear"></div>
        </section>

It is aligned in CSS here is the code..

/* Social Footer */
.clear{clear: both;}
.social-footer{
    width: 100%;
    height: auto;
    margin-bottom: 75px;
}
.footer-container{
    width: 630px;
    margin: auto;   
}
.footer-container .social-ico{
    width: 140px;
    height: 140px;
    background-color: #434141;
    cursor: pointer;
    float: left;
    margin: 0 35px;

    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.footer-container .social-ico:after{
    content: '';
    background: url("../img/icons/social-icons.png") no-repeat;
    width: 140px;
    height: 140px;
    position: absolute;
    display: inline-block;

    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.footer-container .social-ico:hover{background-color: #c3121c;}
.footer-container .social-ico:nth-child(4){
    margin-left: 140px;
    margin-top: -30px;
}
.footer-container .social-ico:nth-child(5){margin-top: -30px;}
.footer-container .social-ico.s-facebook:after{background-position: -5px -5px;}
.footer-container .social-ico.s-twitter:after{background-position: -125px -5px;}
.footer-container .social-ico.s-youtube:after{background-position: -255px -5px;}
.footer-container .social-ico.s-soundcloud:after{background-position: -5px -135px;}
.footer-container .social-ico.s-plus:after{background-position: -252px -131px;}

I downloaded this theme thinking it would be easy to edit...I have been stuck for 72 hours already..:( Please help!

5 Answers

James Barnett
James Barnett
39,199 Points

I'm not entirely sure what you are going for here was it something like this http://codepen.io/jamesbarnett/pen/nFdEa

There was a lot of CSS that didn't seem to be doing anything so I cleaned up your CSS a little bit.

I used font awesome icon fonts as you didn't link to any image assets and icon fonts are faster for page loads because they save on the http request. If font awesome doesn't have the icons you want, check out fontello.

James Gill
PLUS
James Gill
Courses Plus Student 34,936 Points
James Gill
James Gill
Courses Plus Student 34,936 Points

Rocky, this isn't general tech support, this is a forum for Treehouse students working on Treehouse problems.

Which Treehouse problem are you working on?

ROCKY BARAJAS
ROCKY BARAJAS
4,270 Points
ROCKY BARAJAS
ROCKY BARAJAS
4,270 Points

I know that, but in the past I have seen other students ask for help in this forum and got some help through replies for projects they were working on. My problem is related to a theme that has icons that I cannot seem to keep from going out of order. I am using what I learned in HTML a while back by coding like this... <a href="http://"asocialsite".com/myname"></a><div class="">. I cannot figure it out, so I was hoping someone could help here..been working on for 72 hours already.

James Barnett
James Barnett
39,199 Points

I have seen other students ask for help in this forum and got some help through replies for projects they were working on.

That's true, beginning web development questions are posted on the forum and sometimes other students are able to help out with that.

ROCKY BARAJAS
ROCKY BARAJAS
4,270 Points
ROCKY BARAJAS
ROCKY BARAJAS
4,270 Points

Hello James Barnett! After intense research on the web, I finally found the answer! These things are called SPRITES! You have to code them differently in the HTML page and target them. Thats why those icons were moving around! :) I haven't learned about those here @ Treehouse yet... I should do well once I test for them in the future Lol!!

ROCKY BARAJAS
ROCKY BARAJAS
4,270 Points
ROCKY BARAJAS
ROCKY BARAJAS
4,270 Points

Hi James Barnett! Thank you for your response/Codepen. I am going to take a look at how you set up your CSS and see if this will resolve my problem with my project. I was really breaking my head with it! I really really appreciate the help!