VERY BASIC: How to inline social media logos on a header


Tags: html,css,header

Problem :

I just started trying to learn how to code 4 days ago. I've been learning html and css to start. I want to try and put everything that i've learned together, by creating a website for myself.

I'm trying to create a fixed header. On the left side of the header I want to incorporate my social media accounts by linking them to the little icons of each website. However, they stack on top of eachother even though I have them set at inline.

I need help getting them to align next to each other, and put them all into the same size.

I appreciate any help that I get!

Here is my html code:

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="/Users/Hunter/Documents/Website(CSS).css"> 
        <title>Hunter's Website</title>
    </head>
    <body>
        <div class="top">
            <div class="social">
                <div class="row">
                    <div id="twitter" class="col-md-4">
                        <a href="http://twitter/#.com"><img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_color-512.png" /></a>
                    </div>
                    <div id="instagram" class="col-md-4">
                        <a href="http://instagram/#.com"><img src="http://www.roommagazine.com/sites/default/files/pictures/Instagram-circle-icon-150x150.png" /></a>
                    </div>
                    <div id="quora" class="col-md-4">
                        <a href="http://quora/#.com"><img src="https://s3.amazonaws.com/uploads.startups.fm/wp-content/uploads/2013/01/quora-logo.jpg" /></a>
                    </div>  
                </div>
            </div>
        </div>
        <div class="jumbotron">
        </div>
        <div class="pictures">
        </div>
        <div class="bottom">
    </body>
</html>

CSS Code:

div .top {
    height: 20px;
    width: 100px;
    background-color: black;
    display: inline;
}

#twitter #instagram #quora {
    height: 5px;
    width: 5px;
    z-index: 10;
    float: left;
    clear: both;
    margin: 2px;

}

.jumbotron {
    height: 50px;
    width: 50px;
    background-image: url("insert grad picture")
}


Solution :

You have a problem here

#twitter #instagram #quora 

this means that you are looking for a div that has id=quora inside a div called instagram inside a div called twitter . what you are looking for is this

#twitter,#instagram,quora{
/*your style*/
}

    CSS Howto..

    how to replicate pinterest.com's absolute div stacking layout [closed]

    How do I prevent my menu div element to not overlay the footer div element?

    Two navbar-inner on the same page how to change the padding of each?

    How can I make a textfield highlight in red only after its input is proven as incorrect?

    How do I set a CSS url to an absolute location?

    How to change the CSS from the last child?

    how can I align text/image/links within a grid
    of the twitter bootstrap css?

    How to switch between multiple CSS animations?

    How to get height of CSS manipulated image?

    How to add ::after in the HTML link tag

    Shadow-Piercing descendant combinator, '/deep/' , including '::shadow' pseudo elements, are being deprecated so how do we pierce the Shadow DOM?

    How did he get the sidebar to remain on the left, even as the right side of the page can scroll?

    How to scroll in a div?

    How can I reduce the space between two elements in CSS?

    Text overlay over image on hover. How to stop other divs from moving

    How to resize button without cutting the text inside

    How to set animation in css?

    How do I minify CSS and Javascript? [duplicate]

    How to select the parent's parent in CSS?

    How to keep an image and text (vmax font) aligned when resizing browser?

    how to properly resize navbar fixed in bootstrap

    Hide and show when click a button

    how to customize css ellipse for a text string [duplicate]

    How to change the Img tag src through css only? [closed]

    how to fix the css padding in this situation?

    How can I generate a random color with Stylus CSS?

    How to reuse footer with only HTML/CSS?

    How to change both fill and stroke in svg with css

    How to get all blue background divs to align to the left and get all the red divs to align to the right using the css float property?

    How do you input CSS into an animate