WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Home Button going down after adding Social Networks Icons (PHP + CSS code) (8 posts)

  1. djmasterphil
    Member
    Posted 1 year ago #

    Hi,

    I wanted to add social networks icons to my website. The style is kinda custom so maybe I made a mistake somewhere.

    Here is my style.css

    Here is my Header.php

    This is the code I use in header.php:

    <div id="header_icons">
    <ul><li><a href="http://www.facebook.com/dancetraxxrecords" target="_blank" alt="Facebook"><img src="/images/social_net/facebook.png" /></li></ul>
    <li><a href="http://www.twitter.com/DTRAXXRecords" target="_blank" alt="Twitter"><img src="/images/social_net/twitter.png" /></li></ul>
    <li><a href="http://www.youtube.com/dancetraxxrecords" target="_blank" alt="YouTube"><img src="/images/social_net/youtube.png" /></li></ul>
    <li><a href="https://plus.google.com/110939277150791472117/" target="_blank" alt="Google+"><img src="/images/social_net/googleplus.png" /></li></ul>
    <li><a href="http://www.lastfm.fr/label/Dancetraxx+Records" target="_blank" alt="Last.FM"><img src="/images/social_net/lastfm.png" /></li></ul>
    <li><a href="http://www.hardstyle.com/dancetraxx-records" target="_blank" alt="Hardstyle.COM"><img src="/images/social_net/hardstylecom.png" /></li></ul>
    </div>

    And in Style.css:

    #header_icons{
       float: right;
       margin-top: 0px;
       margin-right: 5px;
       width: 400px;
    
    }
    
    #header_icons li{
         float: right;
       margin: 2px 2px;
       display: inline ;
    
    }

    Can you guys please help me?

    Here is my live site so you can see the problem:

    http://www.dancetraxxrecords.com

  2. djmasterphil, please don't post that code here (again): it simply is not helpful at all to post that many lines of code.

    If you must share the code then post a link to your style.css like so

    http://www.dancetraxxrecords.com/wp-content/themes/gamerpress/style.css

    And post your PHP code via pastebin.com.

    http://codex.wordpress.org/Forum_Welcome#Posting_Code

    Edit: Thanks, you got it right that time. ;)

  3. djmasterphil
    Member
    Posted 1 year ago #

    anyone got idea :/ ?

    It is like if the code don't like when I put a link. Cause when I remove the code and just keep my facebook iframe, it is working fine.

    I don't know if I can write the code via another way so I can manage to remove this ''space'' between header and menu bar.

  4. paulwpxp
    Font hero
    Posted 1 year ago #

    Few things going on there.

    First, your html inside the <div id ="header_icons">..</div> has extra </ul> and missing all the closing </a>, this must be fixed.

    Second, you got extra menu container within another menu container, namely you got <div id="foxmenucontainer">..</div>
    inside <div id="catmenucontainer">..</div>, this must be fixed.

    Thirdly, you got this <a alt="Hardstyle.COM"> </a> output all over several times, not sure where that come from, but you must know it and remove it, one of them is right before the HOME link, which is the problem you see.

  5. djmasterphil
    Member
    Posted 1 year ago #

    So well.. I can't use that code? Cause even if I remove hardstyle one it takes only the last link in the home button. It is like if there was something missing to close this part of code cause now the whole menu is using it and well .. I really don't know what to do exactly. I will try to fix what you said but yeah .. I hope we will find a solution for this cause I really like the social icons so it would be sad to lose them you know :/

    Thanks again and hope we will find the problem soon!

  6. djmasterphil
    Member
    Posted 1 year ago #

    I tried what you said and well.. when I close div or I just add something everything is getting crazy. The whole mage lose the margin etc..

    I think we should find another way to write the code or.. to include it so it don't affect menu bar. I did removed the second menu (with the icon) so now we can see the space between menu and website.

    Help please :D ?

  7. djmasterphil
    Member
    Posted 1 year ago #

    Yay!

    Finally solved it!

    Since the last line of code was taken into the menu. I said to myself.. why not adding a ''FAKE'' code.

    So I added just after the link hardstyle :

    <a></a>
    With notthing inside the tag and well.. it did worked well :-)

    Resolved!

  8. paulwpxp
    Font hero
    Posted 1 year ago #

Topic Closed

This topic has been closed to new replies.

About this Topic