I have one div which contains one button and one form. Inside the form I have a button.
<div style="text-align : center;">
<button id="backButton" class="backButton" value="close" style="width: 100px;">Back</button>
<form method="POST" action="${rc.getContextPath()}/payasiaotclaims/generateIndividualOTClaimReport.json?id=${claimId}" target="_blank">
<button id="reportButton" class="reportButton" value="report" style="width: 100px;">Report</button>
</form>
</div>
Now the buttons are coming like stack one top of each other, but I want both buttons to come side by side. What CSS should I use?
try to give the float css attribute to your buttons
<button id="backButton" class="backButton" value="close" style="width: 100px; float:left;">
Use two divs for two buttons, and give float:left; in css..
Related
I have the following markup inside razor view, at the top navigation bar of my web site:-
<section id="login" class="navbar-search pull-right">
#if (Request.IsAuthenticated) { <span class="username customTopNavText " style=" display:block; ">
[ Logout ]
<i class="icon-user"></i> <strong > #User.Identity.Name.Substring(User.Identity.Name.IndexOf("\\") + 1) </strong></span>
<div class="customTopNavText" id="currentdate"></div>
<div class="customTopNavText" id="currenttime" ></div>
<form class="customSearch"method="GET" action="#Url.Action("Search", "Home")">
<input name="exactmatch" type="hidden" value="true"> <b>Search by Tag </b> <input class="push-up-button searchmargin" placeholder="Search by tag.." name="searchTerm2" data-autocomplete-source= "#Url.Action("AutoComplete", "Home")" type="text" style=" width:150px; margin-top:8px"/><input type="submit" value="Search" class="btn" />
</form>
<br/> Advance Search
}</section>
what i am trying to achieve is to have the "Advance Search link just below the search button, currently i am getting these output on IE:-
and on firefox:-
can anyone advice how i can force the advance search link to be just below the search button?
Thanks
One way would be to set margin-top to a sufficient height on Advance search. If it isn't "blocked" by the search input field, it will float to the right of the page, leaving you to just set the margin height.
In order to push Advance Search link just below the search button, inline style can be used like this i.e:
Advance Search
you can set the top and left according to the setting that fits to you. give multiple values to top and left and choose the best which fits to the area in which you wants.
Here,
position:relative // make position of your <a></a> absolute
top:30px; // place your <a></a> to 30px down from top of your parent div or element
left:200px; // place your <a></a> to a distance of 200px far from left border of your div or element
Hope this helps.
I would use a table inside the div/container to layout exactly where to put it. The container would hve the positioning applied to it and then the advanced search will always be in the same place as the search bar. all you would need to do is format the table and every browser you open, all the elements will be in the same place.
for example:
<form ...... >
<table>
<tr>
<td> Advance Search </td>
<td><b>Search by Tag </b></td>
<td><input class="push-up-button searchmargin" placeholder="Search by tag.." name="searchTerm2" data-autocomplete-source= "#Url.Action("AutoComplete", "Home")" type="text" style=" width:150px; margin-top:8px"/></td>
<td><input type="submit" value="Search" class="btn" /></td>
</tr>
</table>
</form>
I created the html fieldset with some textbox inside.
I want to add a close button to the fieldset using only css like this.
Is it possible? If it is, help me please. Here is my jsfiddle
i updated your fiddle http://jsfiddle.net/ukx35/18/
<fieldset style="position:relative">
<legend>Title</legend>
<input type="text"/>
<button style="position: absolute;right:10px;top:-5px;outline:5px solid #fff">
<img src="http://icons.iconarchive.com/icons/hopstarter/sleek-xp-basic/16/Close-2-icon.png"/>
</button>
</fieldset>
use position absolute for the close button and position relative for your fieldset
So, I was messing with CSS for my buttons and tried to test the following CSS code on the button element:
button {
width:85px;
height:29px;
background-color:#800080;
color:#FFFFFF;
font-size:14px;
font-weight:bold;
}
The 2 buttons at the end are created by this HTML:
<div id="header">
<div id="logo"><img src="logo.jpg" /></div>
<div id="search">
<form id="search-form">
<input type="text" style="width:80%;height:28px;background-color:#F5F5F5;font-size:16px;position:relative;top:-3px;"/>
<button type="button" style="position:relative;top:6px;"><img src="mgt.jpg" /></button>
</form>
</div>
<div id="upload" class="top-button"><button>Upload</button></div>
<div id="signin" class="top-button"><button>Sign in</button></div>
</div>
Last 2 buttons "upload" and "signin" are the ones n question.
and the result:
As viewed in Firefox. Any ideas what is causing this?
I don't see the issue .... Check out http://jsfiddle.net/vb7S3/
But I would still recommend not to use <button> tags and rather define style classes for #upload and #signin.
HTML
<button id="upload" class="top-button">Upload</button>
<button id="signin" class="top-button">Sign in</button>
CSS
#upload, #signin {
width:85px;
height:29px;
background-color:#800080;
color:#FFFFFF;
font-size:14px;
font-weight:bold;
}
Also <button> is tag may not be supported by all browsers.
Better Way...
HTML
<input id="button" class="upload-button" type="submit" value="Upload" />
<input id="button" class="sign-in-button" type="submit" value="Sign In" />
CSS
#button {
width:85px;
height:29px;
background-color:#800080;
color:#FFFFFF;
font-size:14px;
font-weight:bold;
}
Must include <input> tag inside the <form> ... </form> block.
see this demo on jsfiddle
you issue is id='upload' or id="signin"in
<div id="upload" class="top-button"><button>Upload</button></div>
there is some conflect between the CSS for upload and signin ids, possibly , some hieght value issue
It could be the height property that's causing this, since the purple area appears to be 29 px high. I'm not sure what the extra border below the text is, but it's possible that the border is being applied around the text instead of the entire button. Try adding border:none and see if that helps.
Ive been trying to style a submit button using an image. I would use CSS but the button is too complex design wise. I have tried adding a background image to a button but the image was badly positioned. I have also tried using
<input type="image" src="myimage.png">
But alas this is not a submit button so It doesn't work. I have looked and tried everything I believe possible but can't find a solution to making the button submit the form. Thanks.
if <input type="image"> doesn't work as expected just try instead
<button type="submit"><img src="myimage.png"></button>
but as I wrote in the comment above your code should work fine too
You have different possibilities for a submit button:
<input type="image">
<input type="submit">
<button></button> <!-- no type needed, since submit is the default type -->
These are all submit buttons. Pick the one, which suits you best.
Now you can choose to put an image between the button or use background-images and position them properly.
Example for button with background-image:
button {
background:url(data:image/gif;base64,R0lGODlhEgASAPYAAAAA/2NFB4tsE7KKCtCiDbWMCpFwDotwGdCgAe65FvjFKvjGLffDJNuqC5V1EaqJGPjHMPbKPvfOTLuRCo5yG+q3F/bEKG1SFdGjBvrcbeGuD2NFCY5wFfG+JPfNRpp1CLSOEfnJNPbOS/rPRsCSBmdJC8+mGvnLOv3ni/3nj/zkgPrUU9uqDWNCA9GoHfjSVfvie/rXW96tEmVHCreQFPnLP/fTXfrbdPzihf3qlP3mhsSYD5VzEPXEOffSWvrbcfzigP3rkqJ8DXFWFd2tFPrQSfnYYvvfdQAAAO7CNGVHDJh3DfLCK/nSUPraZ/zjfv3qkvzlhfvecqiCD2pNEL6TC/fGLvrSTfrbav3pjv3ojPzlgv3TT82kIWpOEZ55C+OyFfnMPvzdb/zda/3XWe/FOqiDEGpKAWZJDXNWEZt2B8KXDt6vHd+yIcifHKN+EXRTAmtQFmlMD2JCBWdIBmdIAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQF+gAAACwAAAAAEgASAAYH/4AAgoN1dHNzcnGDi4Rwb25tbGtqaWiMgmdmZWRjYmNkYWBfXoxnXVxiW1pZWltYV1ZVVIRTXFJRWVC6WU9OTUxLSoJwSWO4SEi6yEdGRURDAHRCV0+5yFBByEA/Pj08SnQ7ZDrWSDlQyDg3NjU0M3MyMTrK5lnIMFgvNS4tLSwrKqCcS4FiC5AnUoxcOWGiRQkSI6ToQKFjy5OLR7DEEBECxBwvH6zEQALjIgwYGUd66MBhA4A0Gkb4QJIhgxQsTkaKOIHhgiAlXyyIaIKsKBIPNSpQmDPIy4QOYUSIkCDCQwQIFR7MYCTHQQMGC6woYJAAwYGtl2ZcMFCAAIEBAg0utLi0aMOGfgHmMgoEACH5BAkFAAAALAYABQAGAAMABgcMgFCCg1BBhodBgoaBACH5BAkKAAAALAYABQAGAAMABgcOgEhIUFCCgkFBhoOFSIEAIfkEAQUAAAAsBgAFAAYAAwAGBwyAUIKDUEGGh0GChoEAOw==) no-repeat 5px center;
padding:5px 5px 5px 27px;
}
<button type='submit'>Submit</button>
(Or as a fiddle)
Use a button element and style it with css. Don't omit the text, you form should be accessible without images or css.
<button type='submit'>Informative submit text</button>
button {
background-image:url('myimage.png');
}
In case someone needs a newer html5 good answer:
<button id='' name='' value='' ><img src='img.jpg' /></button>
<input type="image" src="myimage.png">
or
<input type="submit" style="background:url(myimage.png)">
I've been wondering if there is any technique to use HTML/CSS like Flex/MXML. I mean, in MXML the HBox, VBox and Spacer are globally used, and their behavior is predictable. But in HTML/CSS we use a lot of float and it always have some 'hidden surprises'.
With Flex/MXML I would do:
<hbox width="100%">
<button label="Button A" />
<spacer width="100%" />
<button label="Button B" />
<button label="Button C" />
</hbox>
If you don't know flex I explain this code: the HBox places every element inside it side by side, and the Spacer is an invisible element; the spacer with 100% does not have the same width as the parent (HBox) but it fills the remaining space; this means that A will be aligned to the left, and the two other to the right.
Now in HTML/CSS I would make buttons B and C float to the right. I also would have to reverse the order of the buttons to the final result be the same. Besides, I probably would put some blank tag with "clear:both" to ensure that nothing below will be messed up.
So, is there any technique to obtain the same functionality in HTML/CSS? That would be fantastic if we could make .HBox .VBox .Spacer CSS classes and without javascript.
thanks in advance.
I do something similar to this using the following kind of markup
<div class="formline"><!-- kind of like your hbox -->
<div class="buttongroup" id="group1">
<button label="Button A"> <!-- of course, that's usually input type="submit" or something. -->
</div>
<div class="buttongroup" id="group2">
<button label="Button B">
<button label="Button C">
</div>
</div>
Then use CSS to style it.
I'd float group1 to the left, float group2 to the right. The enclosing formline contains the floating within it. The buttons appear in the correct order, I don't have to reverse them.
This is all logical/structural markup and can be styled different ways; it's not there just for presentation.
I use sensible names depending on what I'm doing, not things like "group1", "group2".
You could give your top level div a class named hbox and target its sub items. Example: http://jsfiddle.net/soparrissays/WJ2Lk/4/
html:
<div class="hbox">
<input type="button" value="Button A" class="left-button" />
<input type="button" value="Button C" />
<input type="button" value="Button B" />
<div class="clear"></div>
</div>
style:
.hbox {
margin-top:45px;
}
.hbox input {
float: right;
}
.hbox .left-button{
float:left;
}
.clear{
clear:both;
}
Is this what you are looking for?