Reply to thread

Message

<blockquote data-quote="Markshall" data-source="post: 217918" data-attributes="member: 1872">I like it, it's pretty nice.&nbsp;But you could've saved yourself a few lines of code in your CSS. At the minute you have:&nbsp;[code].social-facebook {&nbsp; &nbsp; background: url(../images/social/facebook.png) no-repeat;&nbsp; &nbsp; width: 64px;&nbsp; &nbsp; height: 64px;&nbsp; &nbsp; float: left;&nbsp; &nbsp; padding-right: 150px;}.social-twitter {&nbsp; &nbsp; background: url(../images/social/twitter.png) no-repeat;&nbsp; &nbsp; width: 64px;&nbsp; &nbsp; height: 64px;&nbsp; &nbsp; float: left;&nbsp; &nbsp; padding-right: 150px;}.social-youtube {&nbsp; &nbsp; background: url(../images/social/youtube.png) no-repeat;&nbsp; &nbsp; width: 64px;&nbsp; &nbsp; height: 64px;&nbsp; &nbsp; float: right;}[/code]What you could do is:[code].social-icon {&nbsp; &nbsp; width: 64px;&nbsp; &nbsp; height: 64px;&nbsp; &nbsp; float: left;&nbsp; &nbsp; padding-right: 150px;}.social-icon:last-child {&nbsp; &nbsp; padding-right: 0;}.social-facebook {&nbsp; &nbsp; background: url(../images/social/facebook.png) no-repeat;}.social-twitter {&nbsp; &nbsp; background: url(../images/social/twitter.png) no-repeat;}.social-youtube {&nbsp; &nbsp; background: url(../images/social/youtube.png) no-repeat;}[/code]And then in your HTML, do this:[HTML]&lt;div class=&quot;social-icons&quot;&gt;&nbsp; &nbsp; &lt;a href=&quot;http://twitter.com/IntactDev&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;social-icon social-twitter&quot;&gt;&lt;/div&gt;&nbsp; &nbsp; &lt;/a&gt;&nbsp; &nbsp; &lt;a href=&quot;http://facebook.com/IntactDev&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;social-icon social-facebook&quot;&gt;&lt;/div&gt;&nbsp; &nbsp; &lt;/a&gt;&nbsp; &nbsp; &lt;a href=&quot;http://youtube.com/IntactDev&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;social-icon social-youtube&quot;&gt;&lt;/div&gt;&nbsp; &nbsp; &lt;/a&gt;&lt;/div&gt;[/HTML]It's more professional and saves code in your CSS. Hope it helps, if you decide to go with it. <img src="/styles/default/xenforo/smilies/emojione/smile.png"&nbsp; class="smilie" loading="lazy" alt=":)" title="Smile&nbsp; &nbsp; :)" data-shortname=":)" /></blockquote>

[QUOTE="Markshall, post: 217918, member: 1872"] I like it, it's pretty nice. But you could've saved yourself a few lines of code in your CSS. At the minute you have: [code].social-facebook { background: url(../images/social/facebook.png) no-repeat; width: 64px; height: 64px; float: left; padding-right: 150px; } .social-twitter { background: url(../images/social/twitter.png) no-repeat; width: 64px; height: 64px; float: left; padding-right: 150px; } .social-youtube { background: url(../images/social/youtube.png) no-repeat; width: 64px; height: 64px; float: right; }[/code] What you could do is: [code].social-icon { width: 64px; height: 64px; float: left; padding-right: 150px; } .social-icon:last-child { padding-right: 0; } .social-facebook { background: url(../images/social/facebook.png) no-repeat; } .social-twitter { background: url(../images/social/twitter.png) no-repeat; } .social-youtube { background: url(../images/social/youtube.png) no-repeat; }[/code] And then in your HTML, do this: [HTML]<div class="social-icons"> <a href="http://twitter.com/IntactDev"> <div class="social-icon social-twitter"></div> </a> <a href="http://facebook.com/IntactDev"> <div class="social-icon social-facebook"></div> </a> <a href="http://youtube.com/IntactDev"> <div class="social-icon social-youtube"></div> </a> </div>[/HTML] It's more professional and saves code in your CSS. Hope it helps, if you decide to go with it. :) [/QUOTE]

Verification

Reply to thread

Connect with us

Newest members