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 Monica Anderson
Monica Anderson
3,621 Points

I am having trouble making my links align vertically and also my socialmedia icons go over my footer bar

I am having trouble making my links align vertically and also my social media icons go over my footer bar instead of being below it or on top of it.

Here is my html code:

<!doctype html>
  <html>

    <head>
      <meta charset="UTF-8">
      <title>Bob's Elegant Bathrooms</title>
      <link rel="stylesheet" href="bobs_css/normalize.css">
      <link href='https://fonts.googleapis.com/css?family=Great+Vibes|Average|Josefin+Sans:400,700,400italic' rel='stylesheet' type='text/css'>
      <link rel="stylesheet" href="bobs_css/stylenew.css">
    </head>

    <body>

      <header>
        <img src="bobs_images/headerdesktoplogo.png" alt"" id="header">
        <nav>
          <ul>
            <li><a href="index.html" class="selected">HOME</a></li>
            <li><a href="about.html">ABOUT</a></li>
            <li><a href="contact.html">CONTACT</a></li>
            <li><a href="account.html">ACCOUNT</a></li>
        </ul>
      </nav>
    </header>

    <img src="bobs_images/mainimagebobsbathroom.jpg" alt "" id="main">
    <h1>Now Open to Retail Customers</h1>
    <div id="wrapper">
      <section>
        <ul id="gallery">
            <li>
            <a href="toilets.html">
                <img src="bobs_images/toiletbuttonbobbathroomdesktopns.svg" alt "">
                </a>
            </li>
            <li>
            <a href="sinks.html">
                <img src="bobs_images/sinkbuttonbobbathroomdesktopns.svg" alt "">
                </a>
            </li>
            <li>
            <a href="showers.html">
                <img src="bobs_images/showersbuttonbobbathroomdesktopns.svg" alt "">
                </a>
            </li>
            <li>
            <a href="faucets.html">
                <img src="bobs_images/linkfaucetbuttondesktopns.svg" alt "">
                </a>
            </li>
            <li>
            <a href="bathtubs.html">
                <img src="bobs_images/bathtubbuttonbobbathroomdesktopns.svg" alt "">
                </a>
            </li>
        </ul>
    </section>
    </div>
    <footer>
            <p>&copy; 2014 Monika Anderson</p>
        <img src="bobs_images/footerbardesktop.png" alt "">
        <a href="https://www.linkedin.com/in/monikaanderson">
        <img src="bobs_images/socialmediaicons-03.svg" alt "" style="width:50px;height:50px;></a>
        <a href="https://twitter.com/visualizegrafix">
        <img src="bobs_images/socialmediaicons-02.svg" alt "" style="width:50px;height:50px;></a>
        <a href:"https://www.facebook.com/monika.anderson.5">
        <img src="bobs_images/socialmediaicons-01.svg" alt "" style="width:50px;height:50px;>""</a>
    </footer>
</body>
</html>

And here is my css: 

@charset "UTF-8";
/* CSS Document */

/***********GENERAL************/
/******************************/
/* site body */

#wrapper {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;
}

a {
    text-decoration: none;
    color: gray;
}

img {
    max-width: 100;
}
/*header*/
#header {
    background-image:url(bobs_images/headerdesktoplogo.png);
    background-repeat:no-repeat;
    background-size:cover;
}
body {
    background-color: fff;
    color: #999;
}

h1, h2 {
    color: black;
    font-family: 'Great Vibes', cursive;
    font-size: 1.75em;
    font-weight: normal;
    line-height: 0.8em
    text-align: center;
}

h1 {
    text-align: center;
}

nav {
    text-align: center;
}
/*nav links*/
nav a, nav a:visited {
    color: black;
}
/*selected nav links*/
nav a.selected, nav a:hover {
    color:rgba(59,91,160,1.00)
}

footer {
    text-align: left;
    margin: 0 auto;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 1.25em;
    padding-top: 50px;
    font-size: 0.75em;
}

/***********PAGE BUTTON LINKS**/
/******************************/

#gallery {
    margin: 0;
    padding: 0;
    list-style: none;
}

#gallery li {
    float: left;
    width: 70%;
    margin: 15%;
}

#main {
    max-width: 100%;
    text-align: center;
    margin: 5px 0
}

Thanks so much I have been trying to figure this out for hours. Thanks Monika

5 Answers

Craig Watson
Craig Watson
27,930 Points

Hi Monica,

spent a little more time on it hope you like it :)

https://w.trhou.se/zyffkf4edl

take a look at the stapshot and in the top right click the fork snapshot button, it will then become a workspace on your treehouse account to view and edit how you wish :)

Craig

Monica Anderson
Monica Anderson
3,621 Points

HI Craig, I really had more questions about what you sent me the border-radius is very strange and I am not sure why you added that. I will copy and paste your code in a bit and ask some questions thanks.

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi Monica,

there is a few thing going on that could be tweaked a little, would you mind if we set up a pen and I helped you get it all sorted and working smoothly ?

Craig

Monica Anderson
Monica Anderson
3,621 Points

Thanks so much. That would be great. How do I set up a pen?

Craig Watson
Craig Watson
27,930 Points

Id you go to this url you should be able to chat to as well as watch me code so we can get to the bottom of it :)

http://codepen.io/Craig-Watson/professor/8caf53b8b9a6f4c2d8ff827914c95134/

Craig

Monica Anderson
Monica Anderson
3,621 Points
Monica Anderson
Monica Anderson
3,621 Points

great thanks!

Monica Anderson
Monica Anderson
3,621 Points
Monica Anderson
Monica Anderson
3,621 Points

I tried getting on do I have to pay for this service?

Craig Watson
Craig Watson
27,930 Points

Not as far as im aware Monica, I am a pro user which means I pay but to watch I dont think you have to. Do you have an account with codepen, there basic account lets you code happily for free :)

Monica Anderson
Monica Anderson
3,621 Points
Monica Anderson
Monica Anderson
3,621 Points

I am trying to sign up right now hopefully it will just take a minute thanks

Craig Watson
Craig Watson
27,930 Points

No rush Monica let me know when you get through the sign up and we can try and get to the bottom of it, there is a chat at the bottom of the screen on codepen to so it will be quicker to keep in touch.

Craig