Reply to thread

Message

<blockquote data-quote="Sysode" data-source="post: 250772" data-attributes="member: 25453">Okay this is how I've achieved it, not sure it's the best alternative but it'll do for now.Your HTML:[CODE]&lt;li&gt;&lt;a class=&quot;Button retrobutton&quot; href=&quot;https://retroslist.com/vote/Wrex&quot;&gt;Vote For {hotelname}&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=&quot;Button GreenButton&quot; href=&quot;Facebook Link Here&quot;&gt;Like Our Facebook Page&lt;/a&gt;&lt;/li&gt;[/CODE]Notice how I've added a class to the first button &quot;retrobutton&quot; this will come in handy later - if you have both buttons the same class name with the same styles it won't work. Now on to the CSS - the problem was (for me) that the first button wasn't appearing and this was fixed by adding a z-index:100; to make to appear. Then I could see that the buttons were overlapping (as you said). Anyhow here's the CSS:[CODE].GreenButton {background: #27ae60;margin-left:180px;}.retrobutton {z-index:100;background:blue;}[/CODE]I have kept your GreenButton class as it was when you posted this thread, only this time I had added a left margin to space it away from the first button ( you can play around with the actual width you want) and I have added a retrobutton class. The colour can easily be changed by yourself&nbsp; - so overall, the problem was just adding a left margiin to the second button to space it away from overlapping the first.</blockquote>

[QUOTE="Sysode, post: 250772, member: 25453"] Okay this is how I've achieved it, not sure it's the best alternative but it'll do for now. Your HTML: [CODE]<li><a class="Button retrobutton" href="https://retroslist.com/vote/Wrex">Vote For {hotelname}</a> </li> <li><a class="Button GreenButton" href="Facebook Link Here">Like Our Facebook Page</a></li>[/CODE] Notice how I've added a class to the first button "retrobutton" this will come in handy later - if you have both buttons the same class name with the same styles it won't work. Now on to the CSS - the problem was (for me) that the first button wasn't appearing and this was fixed by adding a z-index:100; to make to appear. Then I could see that the buttons were overlapping (as you said). Anyhow here's the CSS: [CODE].GreenButton { background: #27ae60;margin-left:180px;} .retrobutton {z-index:100;background:blue;}[/CODE] I have kept your GreenButton class as it was when you posted this thread, only this time I had added a left margin to space it away from the first button ( you can play around with the actual width you want) and I have added a retrobutton class. The colour can easily be changed by yourself - so overall, the problem was just adding a left margiin to the second button to space it away from overlapping the first. [/QUOTE]

Verification

Reply to thread

Connect with us

Newest members