html css markup to make a side by side set of buttons WordPress
- SOLVED
Hi guys, having a bit of a brain fart to make something that should be fairly easy in HTML.
I have attached a screenshot of the 2 buttons that are side by side. The site is responsive, and when the page media size shrinks the buttons fall under each other, and span the full width.
Could someone please create the markup of the html for each button so that they will sit beside each other. I have set the margin to the left of the first button as 6px. Right now the buttons are images. I need them to be html and css so I will update the background to reflect the site.
I am pretty sure that this would be simple for some.
Answers (2)
John Cotton answers:
http://jsfiddle.net/SY2KH/2/ any good?
John Cotton comments:
Thickened up the lower line:
http://jsfiddle.net/SY2KH/3/
Ciaran Whelan comments:
Hi John,
That is exactly what I am looking for. However, a small amendment, and I think you will find this amendment that I need easy. Both the buttons need to share the same equal width in each div similar like I have shown in the images.
Can each of those buttons have their own div inside a span div, and then the individual divs have 100% width? The main span div to have 50% each side?
That will ensure that when the media size is changed "responsive" the divs will drop under each other and then span 100% width of the body. Does that make sense? Unfortunately I am working localhost. So have no live site to show.
Ciaran
Ciaran Whelan comments:
John,
I have managed to sort the completion of what I needed with them sitting side by side and span 100% in independent divs nested inside a main div. Thank you for the major head start to my dead head moment. I will close this off with the vote 100% to you. Thank you once again.
Ciaran Whelan comments:
John,
I noticed that I need to still add the a title and url.
Here is my original from using the images. Please advise where to place that title and url using your html markup.
<strong>Your Markup</strong>
<a class="bin-button"><span class="bin-option">I need a skip bin</span><span class="bin-large">Place Order</span></a>
<strong>My HTML on the page with the image button</strong>
<a title="Please collect my bin as it is already full" href="http://www.tour.dev/please-collect-my-bin/"><img class="please-collect" style="margin-top: 6px;" alt="Advise us that your skip bin is ready to collect" src="http://www.tour.dev/wp-content/uploads/2013/03/Advise-us-that-your-skip-bin-is-ready-to-collect.jpg" width="457" height="100" /></a></div>
Ciaran Whelan comments:
Sometimes I just need to trust my own attempts at html, I am just not so confident sometimes.
My markup below seems to do what I want. Thank you once again.
<blockquote><div id="bin-buttons">
<a class="bin-button" title="Please collect my bin as it is already full" href="http://www.tour.dev/please-collect-my-bin/"><span class="bin-option">I have filled my skip</span><span class="bin-large">Please Collect</span></a></div></blockquote>
Naveen Chand answers:
<div class="custom-buttons">
<button type="button" style="float:left">Button 1</button>
<button type="button" style="float:left">Button 2</button>
<p style="clear:floats"></p>
</div>
Ciaran Whelan comments:
Sorry Naveen, but that does not really answer my question. I have shown a screenshot of what I have on my site right now using images as the buttons. I want the html markup for each of those buttons and the css to get the buttons to look like I have posted as images.
Naveen Chand comments:
Okay. In my code, you can replace the texts 'Button 1' and 'Button 2' with <img> tags. Something like this:
<div class="custom-buttons">
<button type="button" style="float:left"><img style="width:50px" src="image-1.jpg"></button>
<button type="button" style="float:left"><img style="width:50px" src="image-2.jpg"></button>
<p style="clear:floats"></p>
</div>
instead of image-1.jpg and image-2.jpg you can add your own image links there.
I guess you can as well use a background style for buttons [such as <button style="background:url("image.jpg")... ], but the above solution is ideal.
Ciaran Whelan comments:
Naveen, Please read the question... you will see that your answer is still not correct.
<blockquote>Right now the buttons are images. I need them to be html and css so I will update the background to reflect the site.</blockquote>
Thank you for your effort though.