I' m trying some simple exercise to improve my web development skills. I' m doing a simple translator. Of course for the front end I'm using HTML and CSS. For the backend I'm using Java Servlet.
I want to show two textarea one next to the other and two button under the text area on the left for translating and swapping the language(kind of google translate but with two buttons on the left of the first text area).
I achieved in a tricky way(I suppose?) what I want. But I think there is a better way to do it. Here is the fiddle. Someone can give me an hint, or any explanation on how do it or how works for align elements? Thank you!
Code here:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<title>Translator</title>
</head>
<body>
<h1>Welcome to translator!</h1>
<div class="div1">
<form id="form1">
<textarea class="inline-textarea" id="text1" form="form1"></textarea>
<input type="submit" value="Translate" id="translate">
<input type="submit" value="Swap" id="swap">
</form>
</div>
<div class="div2">
<form id="form2">
<textarea class="inline-textarea" id="text2" form="form2"></textarea>
</form>
</div>
<script type="text/javascript" src="js/jsScript.js"></script>
</body>
</html>
style.css
body {
font-family: 'Open Sans', sans-serif;
}
.div1 {
float: left;
margin-right: 2px;
}
#translate {
display: block;
}
#swap {
float: right;
position: relative;
margin-top: -21.2px;
margin-right: 35px;
}
Here the fiddle:
https://jsfiddle.net/8e6s1d25/
First thing I am not sure if you need two forms. You are just better off with one single form. And I am going to use two columns inside the <form> so that there's the input on the left and output on the right, as how you see in the Google Translate.
Next thing is that, I am not sure why you needed to give the Translate button, a display: block, which is causing you the problem. Combining all the above said, I have made a simple snippet below, that looks like the preview below:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
}
textarea {
width: 100%;
height: 5em;
border: 1px solid #ccc;
border-radius: 5px;
margin: 0;
}
.input, .output {
float: left;
width: 50%;
padding: 5px;
}
<h1>Welcome to translator!</h1>
<form action="">
<div class="input">
<textarea name="input" id="input"></textarea>
<input type="button" value="Translate" />
<input type="button" value="Swap" />
</div>
<div class="output">
<textarea name="output" id="output"></textarea>
</div>
</form>
Preview
Hope this is helpful. Feel free to ask any question to make yourself clear on the coding standards. What I have used is the one that's being used in live production sites. :)
Related
A button inside the legend of a fieldset is not clickable when the fieldset is a flexbox, this only happens in mobile Safari:
* {
box-sizing: border-box;
}
fieldset {
display: flex;
}
legend {
width: 100%;
}
button {
width: 100%;
font-size: 2rem;
}
button:hover {
background: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<fieldset class="col" data-un="u_SkwBump">
<legend>
<button>Click</button>
</legend>
</fieldset>
<script src="src/index.js"></script>
</body>
</html>
Here is also a CodeSandbox, since the snippet is hard to get running on mobile. Any ideas what could be causing this?
I found this flexbug, but I don't think that's the issue here, the flexbox works well on the fieldset as you can see, the columns are displayed side by side (at least on my phone). Just the button not being clickable.
Basiaclly, I am trying to make a upload form for my website. I was wondering if there is any CSS that would make this look much more pleasing and unique. The code below is only HTML. I only need the CSS but if you find any way to improve the HTML, let me know.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Form</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<form action = "index.php" method="post" enctype="mutlipart/form-data">
<label for="file">Choose a file:</label>
<input type="file" name="file1"/>
<input type="submit" value="send!"/>
</form>
</body>
</html>
One way you could improve is change the <input type="submit" value="send!"/> code to <button id="" class="" type="submit">Your Text Here</button>. Also for css codes for like buttons I reccomend use something like this
ButtonIDHere {
border-radius: 25px;
border: 4px solid blue;
padding: 10px;
}
and to make inputs a little nicer use something like this
.InputClass {
position: absolute;
width: 150px;
top: 150px;
left: 730px;
z-index: 4;
}
Also maybe change the border color and stuff.
yo so what do you actually wanna see I just made the form centred and added some colour.
do u want the buttons to look nicer?
https://jsfiddle.net/jqc05Ldk/5/
.container{
width: 50%;
margin: 0 auto;
padding: 24px 24px;
background-color: #57b3e4;
height: auto;
color: #BBDEF0;
border-radius: 25px;
}
input[type="submit"]{
border-radius: 25px;
border: 4px #00A6A6 solid;
background-color: #00A6A6;
color:#BBDEF0;
cursor:pointer;
}
input[type="submit"]:hover{
color: #00A6A6;
background-color: #BBDEF0;
}
For these type of file inputs you can use form control in bootstrap which does not include the external css that much because bootstrap is a css framework and the button styling also will be nice when we use bootstrap Try this code.This code also includes the alert that comes after send button.Try doing these type of forms with bootstrap
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Form</title>
<style>
.container{
width: 300px;
height: 150px;
border: 1px solid black;
border-radius: 25px;
}
</style>
<script type="text/javascript">
function showMessage(){
alert("Thanks Your papers have been evaluated");
}
</script>
</head>
<body>
<form action = "index.php" method="post" enctype="mutlipart/form-data">
<div class="container mt-4 mb-2">
<form>
<div class="form-group mt-2">
<label for="exampleFormControlFile1">Example file input</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
<button type="submit" onclick = "showMessage()"class="btn btn-primary mt-2">send </button>
</div>
</form>
Hi I am new in Html & Css. I want to keep two input box side by side. Just like below picture
But unable to so, and don't have no idea how to achive this.
so far my code is
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="myCss.css">
<head>
<body>
<div>
<div id="leftDiv">
<input type="text" name="firstName" value=""/>
</div>
<div id="rightDiv">
<input type="text" name="lastName" value=""/>
</div>
</div>
</body>
</html>
and css
body {
background-color:#CCFFCC;
}
#leftDiv{
float:left;
padding:38px;
margin-left: 370px;
padding-right: 0px;
margin-right: 0px;
}
#rightDiv{
float:right;
padding:38px;
margin-right: 482px;
padding-left: 0px;
margin-left: 0px;
}
Please help me. Also if someone can provide me some book or tutorial reference where I can get some practical examples that will be great. I tried to find books or tutorials with practical example which can be used in actual application but did not find any. Please suggest me. Thanks for your time.
First you need to get rid of those extra margins,
then, we give a name to our parent div,
set a with (big enough for both #leftDiv & #rightDiv),
then only by floating them, you can get what you are looking for:
body {
background-color:#CCFFCC;
}
#parentDiv{
width:263px;
margin:auto;
}
#leftDiv{
float:left;
}
#rightDiv{
float:right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="myCss.css">
<head>
<body>
<div id="parentDiv">
<div id="leftDiv">
<input type="text" name="firstName" value=""/>
</div>
<div id="rightDiv">
<input type="text" name="lastName" value=""/>
</div>
</div>
</body>
</html>
Use this css and you will accomplish what you need very easy without margins or floats
Check it here: http://jsfiddle.net/w95yseee/
body {
background-color:#CCFFCC;
}
body > div{
display:table;
width:100%;
text-align:center;
}
#leftDiv{
padding:38px;
padding-right: 0px;
display:table-cell;
margin-right: 0px;
}
#rightDiv{
padding:38px;
padding-left: 0px;
display:table-cell;
margin-left: 0px;
}
I've done everything to try work this out but here's my problem:
It happened after wrapping my table in a form, Anyways, if possible I need this centred unless my centring is correct. Please tell me what I did wrong and what I should do next time!
HTML:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta charset="UTF-8">
<title>Game</title>
</head>
<body bgcolor="#336699">
<div id="login">
<form id="login" action="login.php" method="post">
<table>
<tr><td>Login</td></tr>
<tr><td>Username: <input type="text"></td></tr>
<tr><td>Password: <input type="password"></td></tr>
<tr><td><input type="submit"></td></tr>
</table>
</form>
</div>
</body>
</html>
CSS:
#header{
text-align: center;
}
#login{
font-family: "Arial", "serif";
margin-right: auto;
margin-left: auto;
width: 15%;
text-align: center;
border: solid 1px;
}
#table,th,td{
border: solid 1px;
}
Its because of the login ID, you have given it 15% width. Increase it to 50 or 60% and it will work.
#login{
font-family: "Arial", "serif";
margin-right: auto;
margin-left: auto;
width: 15%;
text-align: center;
border: solid 1px;
}
Working example:
http://jsfiddle.net/vcz72sxy/1/
EDIT
I have changed some code from the previous poster, added the align value within the table to center it.
http://jsfiddle.net/kc3gh83h/1/
There are two issues:
You've called id="login" twice, you can only call it once. So the rule for #login is being applied twice. If that was intentional, you want to change it to a class (.login)
The second, which takes care of the issue directly (as #Dan and #JSG have said) - change your width.
Here you go. Use this and you'll be set! Demo: http://jsfiddle.net/hfnqbboj/2
HTML
<body bgcolor="#336699">
<div id="login">
<form id="login" action="login.php" method="post">
<table align="center">
<tr><td>Login</td></tr>
<tr><td>Username: <input type="text"></td></tr>
<tr><td>Password: <input type="password"></td></tr>
<tr><td><input type="submit"></td></tr>
</table>
</form>
</div>
</body>
CSS
#header{
text-align: center;
}
#login{
font-family: "Arial", "serif";
margin-right: auto;
margin-left: auto;
text-align: center;
border: solid 1px;
}
#table,th,td{
border: solid 1px;
}
I have this :
<form method="post" accept-charset="UTF-8" action="#" style="margin-left:130px;">
<input type="text" style="color:black;height:150px;width:325px;line-height: normal !important;display:block;" >
</form>
very simple.
The text is in the mdll if the input , and i want the text will apear on top.
line-height: normal !important; not working.
Its working good at IE , but in firefox and chrome the text apears in the middle of the input.
What can i do ?
Whenever you want more space, use the <textarea> tag instead of the <input type="text"> tag.
Use Internal or external css because it is a very bad idea to use css rules in internal for multiple same type tags.
Check it how to use it
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
textarea{
-moz-box-sizing: border-box;
font-size: 0.857143rem;
line-height: 1.71429;
padding: 0.714286rem;
width: 325px;
height:150px;
}
</style>
</head>
<body>
<form method="post" accept-charset="UTF-8" action="#" style="margin-left:130px;">
<textarea id="comment" aria-required="true" rows="8" cols="45" name="comment"></textarea>
</form>
</body>
</html>
HTML:
<input type="text" class="input-lg"/>
css:
.input-lg {
height: 45px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}