I have a dialog box where I want to have two button side by side .One button will be "Done" button and other will be "close" button.
html:
clickme
Css:
a.embeddedBrosweWindowDoneButton {
margin:10px 900px 0;
text-align:center;
display: block;
width:50px;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
/* button color */
background-color: #173553;
/* rounded corner */
border-radius: 5px;
/* drop shadow */
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
/* text shaow */
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}
I already have a "done" button .I want to have another button called close buton by side of done button . How can i have two buttons in line. I tried but one button was over the other button.
a.embeddedBrosweWindowDoneButton:hover {
background-color: #6D7B8D;
}
You have display set to block. It needs to be set to inline-block.
If you set it to block, the elements will reside on their own line within their parent container. Use inline-block to let them reside on the same line.
Put each button in a div and have the float attribute set to left.
.buttondiv {
float: left;
}
This CSS-style:
display: block;
Makes the buttons set themselves on different rows. If you apply float: right; on them both, you'll be able to set them beside eachother. Note that you a) might want to add a clearfix and b) invert the order of your elements (adding done before the second button) as float: right has a tendency to shift them unexpectedly.
Clearfix:
<div style="display: block; clear: both; height: 1px;"></div>
Add the element above to the "bottom" of the element that wraps the buttons, so that they won't "break loose" from their place and float outside the box.
Since it's got a display:block;, you can specify it's width, and then float it left or right, depending on how you would like to have the layout be. Once one is floated, the other one will wrap to the other side of it.
Here's a good article about floats: http://css-tricks.com/795-all-about-floats/
Using nobr can help you solve this problem.
<td>
<nobr><input type="submit" value="Submit">
<input type="button" value="Return"></nobr>
</td>
Related
I have this piece of code:
HTML:
<h3 class="section_title">Lorem ipsum <span class="c">Text</span></h3>
CSS:
.main_description .section_cost .section_title {
font-size: 18px;
border-bottom: 1px solid #ffffff;
padding-bottom: 5px;
margin-right: 60px;
}
I want to move the text inside the span to the max right side of the h3 underline even if i change the text inside the span to a longer or shorter one.
Image
you can use float
span{float: right}
Here is something about this CSS Layout - float and clear
Set the right attribute:
right: 0;
position: relative;
That sets the offset from the right hand side.
Edit:
I forgot about setting the position as well.
I have a toolbar with buttons, some have text in them and others don't. For some reason I don't really understand, they don't vertically align.
Why? and how to fix it?
#tools{
border: 1px solid black;
}
#tools button{
border-width: 2px;
border-style: outset;
border-color: #ccc;
height: 24px;
width: 24px;
font-size: 9pt;
}
#tools button:active{
border-style: inset;
}
button.Bl{
font-weight: bold;
}
button.Bo{
font-style: italic;
}
button.B4{
background-color: #A00;
text-shadow: 0.15em 0.15em #2A0000;
}
button.Bc{
background-color: #F55;
text-shadow: 0.15em 0.15em #3F1515;
}
<div id="tools">
<button class="B4 pallete" title="§4 Dark Red"></button>
<button class="Bc pallete" title="§c Red"></button>
<button class="Bl pallete" title="§r Bold">B</button>
<button class="Bo pallete" title="§r Italic">I</button>
</div>
http://jsfiddle.net/hjo41wm2/
Vertical alignment of inline elements - why this works the way it does.
Suppose that we have the following HTML (similar to the above):
<div id="tools">
<button class="ExA pallete" title="Example Auto">E</button>
<button class="Ex0 pallete" title="Example Zero">E</button>
<button class="B4 pallete" title="§4 Dark Red"></button>
<button class="Bc pallete" title="§c Red"></button>
<button class="Bl pallete" title="§r Bold">B</button>
<button class="Bo pallete" title="§r Italic">I</button>
</div>
I added two more buttons to illustrate a few concepts.
Let's look at the following CSS rules:
#tools{ border: 1px solid black; }
button{
border-width: 2px;
border-style: outset;
border-color: #ccc;
height: 48px;
width: 48px;
font-size: 24pt;
vertical-align: baseline;
}
button:active{
border-style: inset;
}
button.Bl { font-weight: bold; }
button.Bo { font-style: italic; }
button.B4{
background-color: #A00;
text-shadow: 0.15em 0.15em #2A0000;
}
button.Bc{
background-color: #F55;
text-shadow: 0.15em 0.15em #3F1515;
height: auto;
}
button.ExA {}
button.Ex0 {
height: auto;
font-size: 0;
}
Here we have six inline elements, all buttons, forming a line box, shown below:
The browser will compute a height for each inline element and then use the vertical alignment property (baseline by default) to align them with respect to each other.
In the case of the first two boxes and the last two boxes, there is a character
content with a specified font-size, 24pt in this example (exept for the 0pt one, which I will explain shortly).
In this case, the 1st, 5th and 6th boxes behave as expected, the three letters are
aligned vertically to a common baseline.
The 3rd and 4th buttons do not have a character, so the height of the inline box
computes to zero (line-height only applies to text). In the 3rd button, the button
has a fixed height so the browser vertically aligns the element to the baseline such
that the half the height is above the baseline and half below. This is more obvious
if you set height: auto for the 4th button, which will shrink the element to
zero height (except for the borders) and we see that the 0+margin element aligns
with the common baseline.
To confirm the behavior, consider the 2nd button, which has a character, and height: auto
and font-size: 0. In this case, the zero font-size forces the inline box height to
shrink to zero, and the height shrinks to zero (and border widths).
So, a button with no text is equivalent to a button with text displayed with a zero
font height.
All of this behavior is implied by the CSS specification:
http://www.w3.org/TR/CSS2/visudet.html#line-height
You need to read the sections carefully to tease out the implications.
See demo at: http://jsfiddle.net/audetwebdesign/0jm8th00/
Add this two lines to #tools button
display: inline-block;
vertical-align: bottom;
In CSS:
Add vertical-align:top; inside #tools button{ }
I don't know why but a quick fix is to insert a non-breaking space:
<button class="B4 pallete" title="Dark Red"> </button>
although the CSS solutions would be the recommended way to go.
I'm over my head trying to figure out this one... I'm sure there's something to do with line-height, just couldn't figure it out yet.
Anyway, based on the solution proposed by RedEyedMonster, I've came up with a css approach to identify any empty content button, and add a white space inside it... It fixes the issue:
button:empty:after {
content: "\0000a0";
}
Updated Fiddle
EDIT
This discussion on Google Forum seems to be dealing with extra padding on button tag elements...
I will make a jQuery plugin for one of my projects, and I am trying to simulate an input with divs and spans to make it "richer".
Instead of having [ input ], I will have [ span (containing a A for removing) + input] so the user will not see the difference because he will be typing on a real input without borders, and the result (when accepted) will appear in a small rectangular box at the left of the field.
But I have one problem: there's always a gap between the top of the div and the span containing the left text. Same for the input, the two do not have the same margin for the top and bottom.
I am trying to remove that incorrect top margin (or padding), it looks like 3px from the top and 2px for the bottom. I seem to have tried everything and I always end up to have too much pixels on the top of the span & input.
I have reproduced my problem here (only a few lines of css code):
http://jsfiddle.net/JB9Uq/1/
<div class="input-reference"><span>Content in span <i class="icon-remove">x</i></span><input type="text"></div>
I'd need some assistance on that, I tried margins, paddings, line height, display:inline-block... but it still does not seem to work.
Thank you for your help.
I think that is what you looking for
1. add a float left
2. add height and line height
<div class="input-reference"><span>Content in span <i class="icon-remove">x</i></span><input type="text"></div>
input, textarea, span {
font-family:sans-serif;
font-size:12px;
outline: none;
margin: 0;
border: 1px solid transparent;
}
.input-reference{
display: inline-block;
border: 1px solid #DDDDDD;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.input-reference:after{
content: "";
display: block;
clear: both;
}
.input-reference span,
.input-reference input{
display: inline-block;
float: left;
padding: 0 5px;
/*adjust your height here*/
line-height: 20px;
height: 20px;
}
.input-reference span{
background-color: #53A9FF;
color: #fff;
}
UPDATE
check jsfidle
http://jsfiddle.net/c5q7hauv/
I can't seem to align the label of an anchor tag that's been made to look like a button.
Cancel label is clearly off. I would like it to be aligned with the Next button's label. We need the Cancel button to be an anchor tag because this site needs to work without Javascript.
Anyone have any ideas?
<div class="submit-voucher footer">
Cancel
<input class="button default" type="submit" name="submit" value="Next" />
</div>
Here's the CSS from Firebug for the Cancel link/button:
a, a:active, a:visited {
color: #0066DD;
text-decoration: none;
}
.cancelLinkButton {
height: 22px;
vertical-align: middle;
}
.button, input[type="submit"], input[type="button"], button {
background: -moz-linear-gradient(center top , #FDFDFD 0%, #EBEBEB 60%) repeat scroll 0 0 transparent;
border: 1px solid #BBBBAF;
display: inline-block;
padding: 0 20px;
width: auto;
}
Here's the CSS for the DIV:
.submit-voucher.footer {
text-align: right;
vertical-align: middle;
border: 0 none;
font: inherit;
margin: 0;
padding: 0;
}
Thanks for the help.
EDIT: Added closing curly brackets to code in post.
Try using with line-height
.cancelLinkButton {
height: 22px;
vertical-align: middle;
line-height:22px;
}
Very simple. Just add some padding-top to .cancelLinkButton. From the looks of it, you probably need about 5px or so.
And depending on the border-box value on the element, you may need to decrease the height of the .cancelLinkButton the same amount of padding that you add. If you don't know what border-box is, then you almost definitely will need to decrease the height.
You are setting the CancelLinbutton property somewhere esle that is overriding the one you are setting below. Find out all the CSS references to cancelbutton and see what properties is actually use. You can use F12 and see which properties have been applied and which have been overridden.
.cancelLinkButton {
height: 22px;
vertical-align: middle;
}
My problem is with the below html
<div class="editor-container">
<div class="editor-row curFocus">
<div class="editor-label">
<label for="FirstName">First Name</label>
</div>
<div class="editor-field">
<input class="text-box single-line valid" id="FirstName"
name="FirstName" type="text" value="Nancy" maxlength="20">
</div>
</div>
</div>
When the user selects the input field, I add class "curFocus" to the outer div via some javascript to highlight both label and the input field.
My css is -
.editor-container {
border: thin solid #444444;
display: table; width: 100%;
}
.editor-row {
width: 100%; display: table-row;
}
.editor-label {
padding-left: .4em; width: 40%;
}
.editor-label, .editor-field {
padding-right: .4em; padding-bottom: .2em; padding-top: .2em;
display: table-cell;
}
.curFocus {
border: 2px solid #05365b;
background-color: #d3e5f2;
margin: 3px; padding: 3px;
}
My problem is that while using debuggers in Chrome 12 and IE9, they both show the border settings being applied to the outer div. But, when viewing the form, neither browser display's the specified border. All other css settings work correctly. I also tried changing definition of ".curFocus" to ".curFocus div". But this applied the style to each of the nested div's also, but did display borders on all of the divs.
While I'm not a CSS expert, it is not obvious why this shouldn't work.
Edit
Here is jsfiddle link - http://jsfiddle.net/photo_tom/KmsF5/1/. While testing this it does work correctly in IE9 if in IE7 compatibly mode. Otherwise, it does not display correctly.
Sorry about not including link, still getting use to fact that jsfiddle even exists.
Well, I can tell you what's causing it, but I can't tell you why. Elements with display: table-row; can't have a border applied to them. You can apply the border to the table-cell children of the .curFocus element, but not the table-row itself.
Again, no idea why this silly rule exists, but you can fix your problem with some CSS:
.curFocus {
background-color: #d3e5f2;
margin: 3px; padding: 3px;
}
.curFocus>div {
border: 2px solid #05365b;
border-width: 2px 0px; /* top and bottom border for all the table-row's immediate children (table-cells) */
}
.curFocus>div:first-child {
border-width: 2px 0px 2px 2px; /* left border for the leftmost table-cell */
}
.curFocus>div:last-child {
border-width: 2px 2px 2px 0px; /* right border for the rightmost table-cell */
}
See http://jsfiddle.net/d772N/
I think your problem is your display type on the .editor-row. display: table-row; Remove that and the problem will go away. Plus I don't think that all browsers support display: table-row; very well.
You might need a higher CSS specificity, as it is ambiguous which CSS styles will apply with the current definitions.
Try div.curFocus rather than .curFocus div for the class definition to apply the style to the div with that class name rather than its div children.