I have following HTML button in my webpage:
The buttons have to be fixed width and if texts overflow it's width it should be wrapped by white-space:normal. The Search Staff (F2) and Select Item(F3) are wrapped correctly. But don't know why Company(F8) and Product(F4) buttons are not wrapping inside button. Here is the HTML layout for those button:
.menu_button {
width: 100px;
height: 50px;
background-color: #D0D0D0;
color: #0000FF;
font-size: 14px;
font-weight: bold;
cursor: pointer;
border-width: 4px;
white-space: normal;
vertical-align: middle;
}
<div id="option_bar">
<input id="check" type="button" class="menu_button" name="list_item" value="Item
(F1)" />
<input id="check" type="button" class="menu_button" name="company" value="Company(F8)" />
<input type="button" class="menu_button" name="search" value="Search Staff
(F2)" />
<input type="button" class="menu_button" name="select_item" value="Select Item
(F3)" />
<input type="button" class="menu_button" name="product" value="Products
(F4)" />
<input type="button" class="menu_button" name="bid" value="Bid
(F6)" />
<input type="button" class="menu_button" name="letter" value="Letter
(F7)" />
<input type="button" class="menu_button" name="price" value="Price
(F9)" />
<input type="button" class="menu_button" name="print" value="Print
(F12)" />
</div>
How to fix it?
Try adding a space before the open bracket.
You can use the word-wrap property.
The word-wrap property allows long words to be able to be broken and wrap onto the next line.
CSS syntax:
word-wrap: normal|break-word|initial|inherit;
p.test {
word-wrap: break-word;
}
Another way you can the same result is add an space between parenthesis and the last word letter.
Add space to before "(F8)" and before "(f4)"
I am not sure what you are trying to achieve from this, but still you can add space between "Company" and "(F8)", that would do exactly what you require like in Search Staff (F2), similarly you can do this for Product (F4).
<div id="option_bar">
<input id="check" type="button" class="menu_button" name="list_item" value="Item
(F1)" />
<input id="check" type="button" class="menu_button" name="company" value="Company (F8)" />
<input type="button" class="menu_button" name="search" value="Search Staff
(F2)" />
<input type="button" class="menu_button" name="select_item" value="Select Item
(F3)" />
<input type="button" class="menu_button" name="product" value="Products
(F4)" />
<input type="button" class="menu_button" name="bid" value="Bid
(F6)" />
<input type="button" class="menu_button" name="letter" value="Letter
(F7)" />
<input type="button" class="menu_button" name="price" value="Price
(F9)" />
<input type="button" class="menu_button" name="print" value="Print
(F12)" />
Related
I want to align this:
HTML view
to this but on the center of website:
Desired result
but It goes to left margin instead:
The reality
How can I make this one to be on the center of website?
I have tried using some combinations and different attributes but the result did not change.
.container{
text-align: center;
position:relative;
}
.inputArea{
margin: auto;
display: flow;
}
.deleteArea{
margin:auto;
display:inline-block;
}
<div class="container">
<div class="inputArea" >
<form th:action="#{/}" method="post">
<input type="text" th:id="inputWord" name="inputWord" />
<input type="text" th:id="inputTranslation" name="inputTranslation" />
<input type="text" th:id="language" name="language" value="English" />
<input type="submit" th:id="addWord" value="add" />
</form>
</div>
<div class="inputArea">
<form th:action="#{/delete}" method="post">
<input type="text" th:id="inputWordDelete" name="inputWordDelete" />
<input type="text" th:id="inputTranslationDelete" name="inputTranslationDelete" />
<input type="text" th:id="languageDelete" name="languageDelete" />
<input type="submit" th:id="deleteWord" value="delete" />
</form>
</div>
</div>
What should I change in my code to achieve the desired result?
Do you intend to achieve something like this? One option could be to use css grid...
.container{
text-align: center;
position: relative;
}
.inputArea form {
margin: auto;
display: inline-grid;
grid-template-columns: auto auto auto minmax(0px, 100px);
text-align: left;
}
<div class="container">
<div class="inputArea" >
<form th:action="#{/}" method="post">
<input type="text" th:id="inputWord" name="inputWord" />
<input type="text" th:id="inputTranslation" name="inputTranslation" />
<input type="text" th:id="language" name="language" value="English" />
<div><input type="submit" th:id="addWord" value="add" /></div>
</form>
</div>
<div class="inputArea">
<form th:action="#{/delete}" method="post">
<input type="text" th:id="inputWordDelete" name="inputWordDelete" />
<input type="text" th:id="inputTranslationDelete" name="inputTranslationDelete" />
<input type="text" th:id="languageDelete" name="languageDelete" />
<div><input type="submit" th:id="deleteWord" value="delete" /></div>
</form>
</div>
</div>
Here is another way to do it. Have you tried this?
.container {
width: 100%;
}
.container-inner {
margin: 0 auto;
display: table;
}
<div class="container">
<div class="container-inner">
<div class="inputArea" >
<form th:action="#{/}" method="post">
<input type="text" th:id="inputWord" name="inputWord" />
<input type="text" th:id="inputTranslation" name="inputTranslation" />
<input type="text" th:id="language" name="language" value="English" />
<input type="submit" th:id="addWord" value="add" />
</form>
</div>
<div class="inputArea">
<form th:action="#{/delete}" method="post">
<input type="text" th:id="inputWordDelete" name="inputWordDelete" />
<input type="text" th:id="inputTranslationDelete" name="inputTranslationDelete" />
<input type="text" th:id="languageDelete" name="languageDelete" />
<input type="submit" th:id="deleteWord" value="delete" />
</form>
</div>
</div>
</div>
I'm working on a calculator script which is working fine. (got it form a tutorial). Now I want the buttons to be images. for example 1.jpg 2.jpg etc.
<html>
<form name="calculator">
<input type="button" value="1" onClick="document.calculator.ans.value+='1'">
<input type="button" value="2" onClick="document.calculator.ans.value+='2'">
<input type="button" value="3" onClick="document.calculator.ans.value+='3'">
<input type="button" value="4" onClick="document.calculator.ans.value+='4'">
<input type="button" value="5" onClick="document.calculator.ans.value+='5'">
<input type="button" value="6" onClick="document.calculator.ans.value+='6'">
<input type="button" value="7" onClick="document.calculator.ans.value+='7'">
<input type="button" value="8" onClick="document.calculator.ans.value+='8'">
<input type="button" value="9" onClick="document.calculator.ans.value+='9'">
<input type="button" value="-" onClick="document.calculator.ans.value+='-'">
<input type="button" value="+" onClick="document.calculator.ans.value+='+'">
<input type="button" value="*" onClick="document.calculator.ans.value+='*'">
<input type="button" value="/" onClick="document.calculator.ans.value+='/'">
<input type="button" value="0" onClick="document.calculator.ans.value+='0'">
<input type="reset" value="Reset">
<input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
<br>Solution is <input type="textfield" name="ans" value="">
</form>
</html>
You can simply use image as input type for your form elements. That should work for you i think. :)
If you use the <button> tag instead of <input type="button" you can just do this:
<button>
<img src="example.jpg" />
</button>
Moshiach now!
You should use the <img src="image.jpg"> tag, like:
<html>
<form name="calculator">
<img src="1.jpg" onClick="document.calculator.ans.value+='1'">
<img src="2.jpg" onClick="document.calculator.ans.value+='2'">
<img src="3.jpg" onClick="document.calculator.ans.value+='3'">
<img src="4.jpg" onClick="document.calculator.ans.value+='4'">
<img src="5.jpg" onClick="document.calculator.ans.value+='5'">
<img src="6.jpg" onClick="document.calculator.ans.value+='6'">
<img src="7.jpg" onClick="document.calculator.ans.value+='7'">
<img src="8.jpg" onClick="document.calculator.ans.value+='8'">
<img src="9.jpg" onClick="document.calculator.ans.value+='9'">
<img src="minus.jpg" onClick="document.calculator.ans.value+='-'">
<img src="plus.jpg" onClick="document.calculator.ans.value+='+'">
<img src="mult.jpg" onClick="document.calculator.ans.value+='*'">
<img src="div.jpg" onClick="document.calculator.ans.value+='/'">
<img src="0.jpg" onClick="document.calculator.ans.value+='0'">
<input type="reset" value="Reset">
<input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
<br>Solution is <input type="textfield" name="ans" value="">
</form>
</html>
Note that this assumes your images are in the same folder as your .html file. If they are in a sub folder, like "images", you would do <img src="images/image.jpg">.
If you want to use that code and just want to add images to the buttons, you can use CSS:
<style>
Form input[type=button]:first-child {background: url(/image/btn1.png) no-repeat;}
Form input[type=button]:nth-child(2) {background: url(/image/btn2.png) no-repeat;}
</style>
You can read more about CSS pseudo-class here:
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
Also, Maybe this old quetions (and answers) will help:
How to add background image for input type="button"?
html input with background image
BTW - I think you should write your own calculator script - it is a basic must...
Good Luck!
I am trying to get form buttons to display inline in a row. I am using CSS to style HTML output from someone else's script, so I have to understand the structure in HTML. I can't change it to something I do understand. See the code below.
What are the default styles for these elements when used in this way? I was under the impression that was a block element and was inline. No matter how I try to style this with CSS, I can't change their position (except with a float, which I'd like to avoid in this case). Help! Thank you :)
<html>
<head></head>
<body>
<div class="comment_buttons">
<form class="button discussion__edit" method="get" action="/doku.php#discussion__comment_form">
<div class="no">
<input type="hidden" name="id" value="start" />
<input type="hidden" name="do" value="show" />
<input type="hidden" name="comment" value="edit" />
<input type="hidden" name="cid" value="f871dd5933621b4fe9070bab542ff3ea" />
<input type="submit" value="Edit" class="button" title="Edit" />
</div>
</form>
<form class="button discussion__toogle" method="get" action="/doku.php">
<div class="no">
<input type="hidden" name="id" value="start" />
<input type="hidden" name="do" value="show" />
<input type="hidden" name="comment" value="toogle" />
<input type="hidden" name="cid" value="f871dd5933621b4fe9070bab542ff3ea" />
<input type="submit" value="Hide" class="button" title="Hide" />
</div>
</form>
<form class="button discussion__delete" method="get" action="/doku.php">
<div class="no">
<input type="hidden" name="id" value="start" />
<input type="hidden" name="do" value="show" />
<input type="hidden" name="comment" value="delete" />
<input type="hidden" name="cid" value="f871dd5933621b4fe9070bab542ff3ea" />
<input type="submit" value="Delete" class="button" title="Delete" />
</div>
</form>
</div>
</body>
</html>
The form elements are inline, but the form and the div inside the form are block elements.
So change them to inline:
form, form div { display: inline; }
http://jsfiddle.net/fbCgk/
I just can't figure out to get the "submit" button to the right of the text box for the form found at the top of the loop on this page: http://www.babysavers.com.
The code I'm using is here:
<center>
<div style="width: 625px; height: 70px; border-style: dotted; border-color: #d7345a; border-width: 1px; padding: 5px;">
<form action="http://www.feedblitz.com/f/f.fbz?AddNewUserDirect&ajax=4" method="POST" name="FeedBlitz_9fe455b8521611e29f67003005ce8903">
<h3>Join over 8,900 subscribers! Enter your email below for FREE Updates:</h3>
<input style="display:none" type="text" name="EMAIL" value="" maxlength="64" size="65">
<input type="hidden" name="EMAIL_" value="" maxlength="64" />
<input type="hidden" name="EMAIL_ADDRESS" value="" maxlength="64" />
<input type="hidden" name="FEEDID" value="873069" /> <input type="hidden" name="cids" value="1" />
<input type="hidden" name="PUBLISHER" value="24085942" />
<input onclick="FeedBlitz_9fe455b8521611e29f67003005ce8903s(this.form);" type="button" value="Subscribe!" />
</form></div><script type="text/javascript" language="Javascript">// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
function FeedBlitz_9fe455b8521611e29f67003005ce8903i(){var x=document.getElementsByName('FeedBlitz_9fe455b8521611e29f67003005ce8903');for(i=0;i<x .length;i++){x[i].EMAIL.style.display='block';
x[i].action='http://www.feedblitz.com/f/f.fbz?AddNewUserDirect';}}
function FeedBlitz_9fe455b8521611e29f67003005ce8903s(v){v.submit();}FeedBlitz_9fe455b8521611e29f67003005ce8903i();
// ]]></script><br></center>
I know my code is sloppy, but all I want to do is line up the Submit button so it's to the right of the text box, not underneath it. Any help would be appreciated.
Set your display to inline rather than none:
style="display: inline;"
Try this change (display: inline):
<input type="text" size="65" maxlength="64" value="" name="EMAIL" style="display: inline;">
I am experiencing an issue with Firefox (tested with FF5/win, FF6/win, FF5/mac) having wider margins than any other browser I've tested. (IE9/win, Chrome/win, Opera/win, Safari/win, Safari/mac).
Admittedly, the HTML is unusual, I have 5 forms in a row, but I cannot find any documented problems with the idea, or any warning against it.
Here is the code:
HTML
<div style="background-color: rgba(255, 0, 0, 0.5); float: left; height: 82px; padding-left: 5px; padding-top: 12px; width: 502px;">
<span style="color: #514536; font-weight: bold;">Search By Destination:</span><br />
<div id="regions" style="margin-top: 5px;">
<form action="/view-the-collection/" method="post">
<input type="hidden" id="dest" name="dest" value="Caribbean" />
<input type="hidden" id="search" name="search" value="1" />
<button class="imgbtn" type="submit">
<img src="/a/i/pe_carrib_region.jpg" alt="Caribbean" />
</button>
</form>
<form action="/view-the-collection/" method="post">
<input type="hidden" id="dest" name="dest" value="Mexico" />
<input type="hidden" id="search" name="search" value="1" />
<button class="imgbtn" type="submit">
<img src="/a/i/pe_mexico_region.jpg" alt="Mexico" />
</button>
</form>
<form action="/view-the-collection/" method="post">
<input type="hidden" id="dest" name="dest" value="Thailand" />
<input type="hidden" id="search" name="search" value="1" />
<button class="imgbtn" type="submit">
<img src="/a/i/pe_thailand_region.jpg" alt="Thailand" />
</button>
</form>
<form action="/view-the-collection/" method="post">
<input type="hidden" id="dest" name="dest" value="Southern US" />
<input type="hidden" id="search" name="search" value="1" />
<button class="imgbtn" type="submit">
<img src="/a/i/pe_southus_region.jpg" alt="Southern US" />
</button>
</form>
<form action="/view-the-collection/" method="post" style="margin-right: 0px;">
<input type="hidden" id="dest" name="dest" value="Mustique" />
<input type="hidden" id="search" name="search" value="1" />
<button class="imgbtn" type="submit">
<img src="/a/i/pe_mustique_region.jpg" alt="Mustique" />
</button>
</form>
</div>
</div><br style="clear: both;" />
CSS
#container #regions form {
float: left;
margin: 0px 14px 13px 0px;
padding: 0px;
}
For most browsers, it renders like this:
Except in Firefox, which looks like:
I've made sure to remove padding and margins from every element in each of these forms, and it has no effect. I can't for the life of me figure out what is causing this, whether it is a browser incompatibility, or whether what I've coded is completely out of line. Can anyone advise?
Thanks in advance.
Heres a fix. Instead of adding margins to the forms, just set their widths to 97px each, and align the buttons/images to the left!!
Most likely a browser compatibility issue. I would suggest you using a CSS-reset like the HTML5 Boilerplate: http://html5boilerplate.com/
The extra space looks just about wide enough to be inter-word spaces. Does it go away if you try and cull away all whitespace between your HTML tags (ie between the <form>s and between the various parts of each form)?
You can use a very good and well referenced css package called Formalize CSS - Teach your forms some manners! to make the look and feel of your html form elements cross browser and cross os compatibility.