How to edit CSS so button appears on same line as input field?
Tags: html,css,stylesheet
Problem :
This is an issue inside a shopping cart, so unfortunately it's a multi-step process to view it:
- https://blendbee.com/shop/black-tea-blends/happy-times/
- Click one of the 3 "Add to cart" buttons
- Click "View Cart"
- Notice that the "Apply Gift card" button appears on a lower line. I'd like it to be to the right of the "Gift Cart" input field.
Thanks in advance guys! You rock.
Solution :
HTML:
<div id="entry">
<form>
<input id="input" placeholder="Coupon Code"></input>
<button id="submit" type="submit">Apply Coupon</button>
</form>
</div>
CSS:
input {
display: inline;
width: 70%;
}
button {
display: inline;
width: 20%;
}
The width makes it so that they two will never "overflow" the width of the containing div.
CSS Howto..
a:active : when you click on the link and hold it (active!). a:visited : when the link has already been visited. If you want the link corresponding to current page...
Quickest way is with a background image (set on the li or a, depending your design needs): background:transparent url("http://placehold.it/25x25") right center no-repeat; http://jsfiddle.net/daCrosby/8aTvn/1/...
I don't think a pure CSS solution would be possible here since you set the height absolutely using JavaScript. You could just add a guard like I've done in the...
Yes, it's possible, see the code below: a[title="test"] { color : red; } <a title="test" href="#">Test Link</a> ...
I don't think this can be handled with just css, but if you are looking to add some JS/jQuery to accomplish the task then I guess this thread should help...
You could easily adapt Coyier's code by removing the border and giving the pseudo element a height of 2px: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style media="all"> .featuredtext {...
You can check if the found elements are inside of other elements using jQuery $.contains() More info here how to do this here: http://api.jquery.com/jQuery.contains/ So for your example to find...
Instead of choosing display:inline for your li you could keep them as blocks and do this: li { float:left; } Then you could play with the margins to space them...
You cannot have a background-image protrude from any element. You could use a span attached to the element, or attach the background image to the element next to it, giving...
If you need it guaranteed to be loaded and the CSS is definitely on the same domain, you could request the contents via Ajax and then inject the properties directly....
... it works great, except that I cannot set the number value in the orange circle in the HTML! You can use CSS pseudo elements and HTML5 data attributes:...
There are multiple ways to achieve this, one would be to create an active state class for your favourite buttons and have this use the same styles as .fav:hover. Then...
You can access first label via: css=div[class='control-group'] label[class='control-label']:contains('Email') You can access second lavel via: css=div[class='control-group'] label[class='control-label']:contains('Password') Use these with command assertElementPresent, "contains" in element locator allows you to verify text...
Step 1: Include the Material Icons Stylesheet. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> Step 2 : CSS Code: .bullet li a:before { font-family: "Material Icons"; content: "\e5cc"; } Explanation: The value e5cc is...
SASS need to be complied into CSS sass-lang.com Try this if you don't want to install any SASS compiler. sassmeister.com...
try to use float:right;and try to show your code on jsfiddle.net like sites...
The easiest way is to wrap them in <div>s to get columns: <div class="wrapper"> <div class="red"> Red </div> </div> <div class="wrapper"> <div class="yellow"> Yellow </div> <div class="blue"> Blue </div> </div>...
You cannot access the content of the iframe if its loaded from a different domain. Like your parent page is abc.com and the content in your iframe is from xyz.com
In your html <table class="table1"> <tr> <td> ... </table> <table class="table2"> <tr> <td> ... </table> In your css: table.table1 {...} table.table1 tr {...} table.table1 td {...} table.table2 {...} table.table2 tr...
$(document).ready(function(){ $(window).scroll(function(){ var lScoll = $(this).scrollLeft(); $('.logo').css({ 'transform' : 'translate(500px)'}, 5000); }); }); This code says that when the DOM has loaded, run a function, then whenever the window is...
I deal with a lot of maps these days and I would be lost without this: http://visitmix.com/labs/ai2canvas/ Trace/convert your jpg to a vector image then open it in Illustrator and...
You can go for the Adobe Air to create the desktop widgets. The Adobe® AIR® 3 runtime enables developers to use HTML, JavaScript, Adobe Flash® software, and ActionScript® to build...
Try this: jsFiddle HTML: <div id="sidebar">aa</div> <div id="content">bb</div> CSS: #sidebar{ float:left; width:230px; min-height:10px; overflow:hidden; margin:auto; background: #faa; } #content{ min-height:10px; overflow:hidden; margin-left:230px; background:#cddfea; } ...
solved it. I changed width % to px for the floating div.
You can simply solve this by applying a negative margin that equals the width or height of the element. For an element of 100px height that is positioned to the...
You need to omit the space between #koolbutton and .active. #koolbutton { /*not active*/ } #koolbutton.active { /*active*/ } ...
When you set something as position: fixed it takes it out of the flow of the document. So other elements will not care where it is on the page and...
Change the CSS so that the effect is applied when hovering over the parent element, .rt_tilewrap. In doing so, the transition appears to be activated on hover of .rt_imgwrap and...
Try this: div.zoomed { zoom: 0.75; -moz-transform: scale(0.75); } Should work in: Firefox 3.5, IE 5.5+, Opera, Safari 4, Chrome Edit: You should also add -webkit-transform: scale(0.75); for Chrome and...
In the style.css of plugin "Display Posts Shortcode" do add one more class with css .listing-item { float:left; width:20%; } ...