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?
Related
I'm attempting to move the buttons as listed below to the bottom of my page, below another div (which is essentially a large table) and the below html is outside of said div class but I'm actually stumped as to where I'm going so terribly wrong...
HTML
<div class="functions">
<button>Save File</button>
<input id="fileInput" type="file" style="display:none;" />
<button type="button" cmd>PDF</button>
</div>
CSS:
functions{
position:absolute;
bottom: 5%;
}
In order to select a class with CSS, you have to put a period in front the variable.
Try:
.functions{
position:absolute;
bottom: 5%;
}
There's a typo in your CSS.
functions{
Should be
.functions{
I am using w3.css in my codeiniter project and I want to put them next to each other.
Here is my code:
<a type="button" class="w3-btn w3-blue w3-pull-left" href="http://localhost/cblog/posts/ikkinchi-post">Tahrirlash</a>
<form action="http://localhost/cblog/posts/delete/2" method="post" accept-charset="utf-8">
<input type="submit" value="O`chirish" class="w3-btn w3-red">
</formm>
Why do you have type="button" attribute on your link?
To display the elements on one line change their style to:
display: inline-block;
Or if you don't need padding
display:inline;
So it will look like this
a,form{
display:inline-block;
}
You can take a look at the documentation for W3.css and see if there's a class that will make an element display inline and maybe use the classes designed for navigation bars. If there's not, then you can create a class yourself and assign it to the element you wish.
.displayInline { display: inline;}
I have following document structure ,
<div style="background:#000000;">
<input type="button" style="float:right" value="click here"/>
<input type="button" style="float:right" value="click here"/>
</div>
but dont give me result I want.I want the background to be repeated over div body like in shown in image
Any help would be highly appreciated
Firstly, you're missing a 0. #00000 isn't a valid hex colour code. Hex colour codes must either contain 3 or 6 hexadecimal digits. To resolve this, simply add a 0 (or remove two of the 0s):
<div style="background:#000000;">
...
</div>
From the CSS Color Module specification:
The format of an RGB value in hexadecimal notation is a ‘#’ immediately followed by either three or six hexadecimal characters. The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This ensures that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display.
Secondly, when floating elements you need to clear them afterwards, as floating takes them out of the page's context. For this we can refer to What methods of ‘clearfix’ can I use?.
<div style="background:#000; overflow: hidden">
<input type="button" style="float:right" value="click here"/>
<input type="button" style="float:right" value="click here"/>
</div>
Try this. Your Container includes floated divs so its rendered with 0 height.
Add to parent div haslayout:
overflow:hidden
div:after{content:''; display:block;
clear:both;}
<div style="width:100%;padding:3px;background:#000;text-align:right;">
<input type="button" value="Click" />
<input type="button" value="Cancel" />
</div>
Like this
demo
css
.divbg{
background-color:black;
height:22px;
padding:5px;
}
.divbg input{
float:right;
}
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..
I don't know the rendered width of DIV or any of the buttons. How do I change the markup such that the buttons are rendered with a uniform (or as close as can be) distance between each of them?
EDIT: Also, the buttons should consume the full width of the DIV.
<div>
<asp:Button ID="Button1" runat="server" Text="Action1" />
<!-- space between rendered buttons -->
<asp:Button ID="Button2" runat="server" Text="Action2" />
<!-- space between rendered buttons -->
<asp:Button ID="Button3" runat="server" Text="Action3" />
<!-- space between rendered buttons -->
<asp:Button ID="Button4" runat="server" Text="Action4" />
</div>
I am thinking this can't be done without a table, JavaScript or the use of at least some (relative) widths (if you can set percentages, it's easy.).
Or maybe putting each button into a div with display: table-cell, but I find that sick. Then rather be honest and use a table.
Feel free to prove me wrong, I'd be interested in alternative approaches myself.