Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    6
    Rep Power
    0

    Adding social media icons


    Hello,

    I'm trying to add social media icons with a "hover" effect on my website "rom1m dot com" to link to my social media profiles.
    Here's my problem :

    - I've noticed that the social media icons don't appear at all on Firefox (v22), and display an error on IE (v10).... but no problem with Chrome, any help ?

    - So i think my code must not be the best to do what i wanted (I'm kind of a beginner in css). What do you think ?

    In the Header :
    <div class="social" id="facebook">
    <a href='facebook adress' target=”_blank” alt=”Facebook”><img /></a>
    </div>
    <div class="social" id="vimeo">
    <a href='vimeo adress' target=”_blank” alt=”Vimeo”><img /></a>
    </div>
    <div class="social" id="youtube">
    <a href='youtube adress' target=”_blank” alt=”Youtube”><img /></a>
    </div>
    In the Stylesheet :
    #facebook a img{ position:absolute; left:72%; margin-top: 10px; z-index: 1; content:url(images/facebook_dark.png); }
    #facebook:hover a img{ content:url(images/facebook_active.png); }
    #vimeo a img{ position:absolute; left:74%; margin-top: 10px; z-index: 1; content:url(images/vimeo_dark.png); }
    #vimeo:hover a img{ content:url(images/vimeo_active.png); }
    #youtube a img{ position:absolute; left:76%; margin-top: 10px; z-index: 1; content:url(images/youtube_dark.png); }
    #youtube:hover a img{ content:url(images/youtube_active.png); }
    PS: I put a preload code for the hover images.


    Thank you very much to whoever take the time to answer.

    Sincerely,

    Rom1m
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4304
    Welcome to DevShed Forums, sunnyy.

    Using "curly quotes" in your code like that is not valid. You need to make sure you use "straight quotes". You're not using MS Word by any chance, are you? I recommend you use a good programming editor like PSPad or Notepad++ instead of whatever you're using.

    The src and alt attributes are required on <img> elements. There is more than one way to provide them while still doing CSS image switching.

    This is an interesting question, but I'd like to give others a chance to respond, so I'll hold further comment for now. Here's a link to his page, rom1m.com, for others' convenience.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    275
    I've never heard of a CSS rule called "content"..that, to me, should be "background".
    I, also, hate the use of "position:absolute"..to me that property [absolute] should be used as a LAST resort.
    (position:relative; or using floats is much better IMHO)

    I would probably go about this by only using 1 DIV to surround the 3 images, then, use SPANs [to more easily target the Anchor tags and proper use of :hover] and NOT use the IMG tag at all. Something along these lines [not tested]:
    Code:
    <div class="social">
    <span  id="facebook">
    <a href='facebook adress' target=”_blank” alt=”Facebook”></a>
    </span>
    <span id="vimeo">
    <a href='vimeo adress' target=”_blank” alt=”Vimeo”></a>
    </span>
    <span id="youtube">
    <a href='youtube adress' target=”_blank” alt=”Youtube”></a>
    </span>
    </div> 
    
    
    <style type="text/css">
    div.social{
    height:/*tall enough to fit the images*/;
    width:/*wide enough to fit all 3 images*/;
    position:relative;
    top:/*top positioning*/;
    left:/*left positioning*/;
    }
    #facebook a{ 
    background:url(images/facebook_dark.png); 
    height:32px/*height of image*/;
    width:32px/*width of image*/;
    display:inline-block;
    margin:0 5px;
    text-decoration:none;
    }
    #facebook a:hover{ 
    background:url(images/facebook_active.png); 
    }
    #vimeo a{ background:url(images/vimeo_dark.png); 
    height:32px/*height of image*/;
    width:32px/*width of image*/;
    display:inline-block;
    margin:0 5px;
    text-decoration:none;
    }
    #vimeo:hover a:hover{ 
    background:url(images/vimeo_active.png); 
    }
    #youtube a{ 
    background:url(images/youtube_dark.png); 
    height:32px/*height of image*/;
    width:32px/*width of image*/;
    display:inline-block;
    margin:0 5px;
    text-decoration:none;
    }
    #youtube:hover a:hover{ 
    background:url(images/youtube_active.png); 
    } 
    </style>
    Last edited by DonR; July 27th, 2013 at 12:47 PM.
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4304
    Originally Posted by DonR
    I've never heard of a CSS rule called "content"
    You mean "property", not "rule".

    The content property. In CSS2.1 the content property is only for use with the ":before" and ":after" pseudo-elements. A proposed CSS3 module extends that property for broader use. Apparently Webkit and Opera browsers have implemented some of that proposed module, but Mozilla and IE have not.

    Originally Posted by DonR
    use SPANs [to more easily target the Anchor tags and proper use of :hover]
    What is the "proper use of :hover"? Why do you need extra elements there?

    In case you're interested, I'd use a <ul>.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    275
    Originally Posted by Kravvitz
    You mean "property", not "rule".
    I, actually, originally, had typed out "property" and changed it..guess I shoulda stuck with first intuition


    Originally Posted by Kravvitz
    What is the "proper use of :hover"? Why do you need extra elements there?
    From what I can recall in the past, IE was known for not liking :hover used on anything other than anchor tags. (was that all in my head or was it real?)
    But, I do realize that :hover in most any other browser can be used nearly anywhere and work.


    Originally Posted by Kravvitz
    In case you're interested, I'd use a <ul>.
    Nah, thats OK, we weren't really that interested
    ...just kidding, I wouldn't have thought of using a list, mostly because of my hangup with IE
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4304
    Originally Posted by DonR
    I, actually, originally, had typed out "property" and changed it..guess I shoulda stuck with first intuition
    Ah, second guessing. Yes, often one's first thought is correct.

    Originally Posted by DonR
    From what I can recall in the past, IE was known for not liking :hover used on anything other than anchor tags.
    True. IE6 only supports ":hover" on <a href=""> elements.

    IE6 is so very old now and this is not a critical thing (I assume the images only change in color), so it's probably not worth worrying about for this.

    Originally Posted by DonR
    I wouldn't have thought of using a list, mostly because of my hangup with IE
    Why would IE make a difference?
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    6
    Rep Power
    0

    Thanks ! But...


    Hi guys!

    Thank you so much for your suggestions and informations, it's enlightening !

    I added the new piece of code and it seems to work on every browsers. So... thumbs up !

    But ! (of course there's a "but" ) I'm having a very hard time to position it...
    I put it at different positions in my header and either it gets stuck at the top of the page like it is now, without considering the position i specified and being kind of "out of the content" > rom1m dot com, either it messes other things up, like the menu...

    i'd just like to have the same position it had before (you know on the top right, above the menu without altering anything)

    there must be something overriding it from the rest of the code of the website or something i don't get... but in any case, it gets way over my head lol... any ideas ?


    Thx again for everything !
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    275
    Thats where Kravvitz's idea of using an Unordered List [UL] is the best option.
    It allows you to float the entire LIST right, so, your icons will be where you want them.

    On a sidenote, whatever program you are using for writing your code, stop using it.....as it is adding weird "fancy curly quotes" to some of your properties [which Kravvitz has already pointed out ] and is causing illegal code.
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    6
    Rep Power
    0
    Hi DonR,

    Sorry for the curly quotes, i didn't unsderstand the first mention of the problem...

    I'm not acquainted with Unordered Lists, how would that work ?

    Thx
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    275
    It sounds to me like you just want someone to write the code for you.
    It isn't difficult for you to do some research on your own as there are numerous HTML learning sites. I like THIS ONE myself.
  20. #11
  21. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    6
    Rep Power
    0
    Not sure what you mean, excuse me if my question was unclear.
    Thank you very much for the link, i't ll help a lot !

    If it's okay i'd like to post again to have an updated opinion of anyone interested in helping once i figure out tthe solution to the problem... hoping i won't have to disturb again with my poor css skills until then

    thx again!
  22. #12
  23. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    275
    The idea is that you would be using the unordered list instead of the <span> tags and would place the links [<a> tags] inside each <li> item. And would, basically, float the <ul> right to push it over to the right side.

    As for my other comment....I don't mind helping people as long as they try to do some of the work themselves and not just copy/paste code that others are writing.
    So, if you are just wanting help, I'll try to help, but, if you just want to copy/paste the code then there is a "Hire a Programmer" forum that you can post in...just my 2cents.
  24. #13
  25. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    6
    Rep Power
    0
    Thanks for the help !
    So i tried to do it with an unordered list like this :

    Code:
    header : 
    <div class="social">
    <ul> 
    <li id="facebook"><a href='facebook adress' target=”_blank” alt=”Facebook”><img src='wp-content/themes/Webly/images/facebook_dark.png'/></li> 
    <li id="vimeo"><a href='vimeo  adress' target=”_blank” alt=”Vimeo”><img src='wp-content/themes/Webly/images/vimeo_dark.png'/></li> 
    <li id="youtube"><a href='youtube adress' target=”_blank” alt=”Youtube”><img src='wp-content/themes/Webly/images/youtube_dark.png'/></li> 
    </ul> 
    </div> 
    
    css : 
    <style type="text/css"> 
    div.social ul{ 
    float: right; 
    } 
    div.social ul li{ 
    display: inline; 
    float: right; 
    margin-top: 20px; 
    padding-right: 3px; 
    z-index: 1; } 
    </style>
    The thing is, everything i put as an attribute of the <ul> like you said is not considered, but only what i specify for the <li>. So i put a float:right, and it works, but after that i'm stuck, i can't put it on the top of the menu where i want it, not with a "position" (unless i put it as 'absolute' but you said it was not be used so...) or a "left" attribute or something like that...

    And with that technique, i've lost the "hover effect", so i tried to specifiy an ID for each <li> and keep the code used before, but it didn't work...

    it felt like i was almost there but not at all! i tried so many combinations so many times... well, i guess i'm pretty bad at this lol...

    (sorry if there's any anomaly in my code, i've tried using notepad++ as suggested but i'm still trying to get the hang of it...)
  26. #14
  27. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    275
    your code is still showing some curly quotes being used.[looks like it is from you copying my copying of your code and not fixing all of them in my code]
    As for your code, you didn't close your <a> tag and there is no need to use the <img> tag [once again].
    It really isn't a difficult changeover from the code I gave... to using the list in its place.

    It would be something like this [Not Tested but should be close]:
    html Code:
    <div class="social">
    <ul>
    <li  id="facebook">
    <a href='facebook adress' target="_blank" alt="Facebook"></a>
    </li>
    <li id="vimeo">
    <a href='vimeo adress' target="_blank" alt="Vimeo"></a>
    </li>
    <li id="youtube">
    <a href='youtube adress' target="_blank" alt="Youtube"></a>
    </li>
    </ul>
    </div> 
     
     
    <style type="text/css">
     
    div.social{
    height:/*tall enough to fit the images*/;
    width:/*wide enough to fit all 3 images*/;
    position:relative;
    top:/*top positioning*/;
    left:/*left positioning*/;
    overflow:hidden;/*may be needed to contain the UL float*/
    }
    div.social ul{
    float:right;/*to float the whole list to right side*/
    }
    div.social ul li{
    float:left;/*to make list items line up horizontally in correct order*/
    }
    #facebook a{ 
    background:url('images/facebook_dark.png'); 
    height:32px/*height of image*/;
    width:32px/*width of image*/;
    display:inline-block;
    margin:0 5px;
    text-decoration:none;
    }
    #facebook a:hover{ 
    background:url('images/facebook_active.png'); 
    }
    #vimeo a{ background:url('images/vimeo_dark.png'); 
    height:32px/*height of image*/;
    width:32px/*width of image*/;
    display:inline-block;
    margin:0 5px;
    text-decoration:none;
    }
    #vimeo:hover a:hover{ 
    background:url('images/vimeo_active.png'); 
    }
    #youtube a{ 
    background:url('images/youtube_dark.png'); 
    height:32px/*height of image*/;
    width:32px/*width of image*/;
    display:inline-block;
    margin:0 5px;
    text-decoration:none;
    }
    #youtube:hover a:hover{ 
    background:url('images/youtube_active.png'); 
    } 
     
    </style>
    Last edited by DonR; July 31st, 2013 at 01:05 PM.
  28. #15
  29. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    6
    Rep Power
    0
    Hi DonR !

    I tried to keep your code in the first place but i hadn't the right knowledge to apply it like this. Thanks to your last post, i applied it and after some work, especially on the rest of the code of the website that was overriding some things like the position, it works !!! And on all the browsers i tried so far

    Thank you so much, i learned a lot with that css exercise !
    And thank you for your patience with a beginner like me, seriously!

    Hoping i can help you back in the future
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo