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 add Background Image in css using master page

    How do I remove nav underline on hover from Bootstrap theme?

    How do I keep my background image at the bottom of the page?

    How to make list of all classes in the page using jQuery?

    How to change the CSS of entire page/website on click?

    How do I overlay text on an image who's size is to be set?

    How to set Twitter Bootstrap class=error based on AngularJS input class=ng-invalid?

    How to write CSS to convert div elements into a 3 or 4 column table?

    Jquery canvas cloud plugin - How to style canvas elements with CSS

    How do I move the search bar to the top without hiding it? [closed]

    How to manage two different size of textarea box in css

    How to show text on hover only in CSS

    How to detect IE8 separate from newer versions when IE8 compatibility set

    how to put links in one line [CSS]

    CSS: how to move element from one column to another one without changing the html?

    html, css - how to use display: inline-block

    How do I get this ul li dropdown menu to show on hover with jquery or javascript?

    How to remove outline dotted border with using css

    CSS flipping animation in IE: Turned side shows mirror content

    How to make CSS border on an image? [closed]

    How to override a property set in an id (CSS)

    CSS: How to change background color [closed]

    How to id dom table so I can position it on page?

    How to get the navigation bar to align to the center

    How to replace flex in this layout?

    How to have text slide in when I hover over navbar?

    How to edit css selectors to test something in Firebug?

    How to change logo in php header when change the header js class and CSS

    How to change element properties on hover with CSS in following case

    How to apply “!important” from CSS via jQuery? [duplicate]