need css help to set icons horizontally .

  • Resolved metro

    (@kiddie)


    11 years, 11 months ago

    Hi, need some simple css help.
    Need to set icons horizontally in footer. Now it is showing vertically.
    My icon css code is :-
    http://pastebin.com/v89BvXRP

    and for this my php code is :-

    <div id="social-logo">
<ul>
<li><a href="http://www.twitter.com/"><img src="http://ideaddict.com/images/Twitter-icon.png?1317226690" /></li>
<li><a href="http://www.facebook.com/"><img src="http://www.ourweetrip.com/wp-content/plugins/wp-greet-box/images/facebook_icon.png" /></li>
</ul>
</div>

    It is set as horizontally , but not working.
    Any help ?
    Thanks.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Michael

    (@alchymyth)

    11 years, 11 months ago

    It is set as horizontally , but not working.

    how?

    and what is the result?

    can you post a link to your site?

    http://www.w3schools.com/css/css_navbar.asp

    or search the web for ‘css styling lists horizontally’

    Thread Starter metro

    (@kiddie)

    11 years, 11 months ago

    Hello alchymyth,
    Thanks for you reply.
    Yes, this is showing vertically.
    see my site :-
    http://digitalfinance.info/sample/

    please see the code of my css file.

    #social-logo {
position:relative;
left:900px;
bottom:10px;
}
#social-logo li {
display:inline !important;
list-style-type: none;
}

    and my header php file.

    <div id="social-logo">
<ul?
<li>
<a href="http://www.twitter.com/"><img src="http://ideaddict.com/images/Twitter-icon.png?1317226690" />
<a href="http://www.facebook.com/"><img src="http://www.ourweetrip.com/wp-content/plugins/wp-greet-box/images/facebook_icon.png" />
</li>
</ul>

    egado

    (@egado)

    11 years, 11 months ago

    #social-logo ul a
{
float: left;
margin-right: 10px;
}

    but you have a markup error on that ul… so your html looks like this

    <div id="social-logo">
<ul? <li="">
<a href="http://www.twitter.com/" style="border: 0px none;"><img src="http://ideaddict.com/images/Twitter-icon.png?1317226690">
</a><a href="http://www.facebook.com/" style="border: 0px none;"><img src="http://www.ourweetrip.com/wp-content/plugins/wp-greet-box/images/facebook_icon.png">

            </a></ul?></div>

    take care of the correct syntax for lists… e.g.

    //EDIT error correction

    Thread Starter metro

    (@kiddie)

    11 years, 11 months ago

    Hi egado,
    Thanks for reply.

    Ok, i have changed my header.php

    <div id="social-logo">
<ul><li><a href="http://www.facebook.com/"><img src="http://digitalfinance.info/sample/wp-content/uploads/2012/05/facebook-icon.gif" /></li>
<li><a href="http://www.twitter.com/"><img src="http://digitalfinance.info/sample/wp-content/uploads/2012/05/twitter-icon.gif" /></li></ul>
</div>

    And your suplied css code in css file.

    But not working. Please see my site.

    Phil

    (@owendevelopment)

    11 years, 11 months ago

    Add this to #social-logo li:

    float: left;

    egado

    (@egado)

    11 years, 11 months ago

    Sorry was an error in my code… ive wrote: flaot: left; instead of float: left;

    Corrrect this or use Phil’s solution… 🙂

    Thread Starter metro

    (@kiddie)

    11 years, 11 months ago

    @ Phil and egado ,
    Many Many thanks. That’s working nicely now 🙂 .
    Nice support !

    Problem Solved !

    Phil

    (@owendevelopment)

    11 years, 11 months ago

    Glad it got resolved 🙂

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘need css help to set icons horizontally .’ is closed to new replies.