1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Putting icons side by side

Discussion in 'HTML & Website Design' started by Soupi, Feb 23, 2018.

  1. #1
    I want to put these two icons side by side (Facebook and Twitter)

    How would I do that, current code i have is this and right now they are on top of each other...

    <div class="widget-text">
                                                <a href="https://www.facebook.com/Pans/">
                                                    <img alt="FacebookPanAm" height="40" src="/images/img-icon-facebook.png" width="40"/>
                                                </a>
    
                                                <a href="https://twitter.com/intent">
                                                    <img alt="TwitterPanAm" height="40" src="/images/img-icon-twitter.png" width="40"/>
                                                </a>
                                            </div>
    Code (markup):

    SEMrush
     

    Attached Files:

    Soupi, Feb 23, 2018 IP
    SEMrush
  2. Blizzardofozz

    Blizzardofozz Well-Known Member

    Messages:
    132
    Likes Received:
    9
    Best Answers:
    1
    Trophy Points:
    118
    #2
    You should use CSS for this. You can do it with floats or display: inline-block.
     
    Blizzardofozz, Feb 23, 2018 IP
  3. Soupi

    Soupi Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    I wasnt able to do it, what would be the css code
     
    Soupi, Feb 23, 2018 IP
  4. Blizzardofozz

    Blizzardofozz Well-Known Member

    Messages:
    132
    Likes Received:
    9
    Best Answers:
    1
    Trophy Points:
    118
    #4
    a {
    display: inline-block;
    }
     
    Blizzardofozz, Feb 23, 2018 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,603
    Likes Received:
    1,542
    Best Answers:
    223
    Trophy Points:
    515
    #5
    Uhm, anchors are already display:inline, and there is NOTHING in the code you presented to make the images OR their anchors drop to separate lines. The problem must be in your EXISTING CSS somewhere.

    Though with that widget-text class that likely means the train wreck bloated laundry list of how NOT to build a website that is the typical turdpress template, so good luck with that!
     
    deathshadow, Feb 23, 2018 IP
  6. Blizzardofozz

    Blizzardofozz Well-Known Member

    Messages:
    132
    Likes Received:
    9
    Best Answers:
    1
    Trophy Points:
    118
    #6
    That is true. Somewhere in the CSS there is a rule: display: block for the anchors.

    Should be:
    .widget-text a { display: inline-block; }

    or even:
    .widget-text a { display: inline-block !important; }
     
    Blizzardofozz, Feb 24, 2018 IP