I am a php programmer.
I am not able to decrease the size of a few text boxes in my html form, they are in the same .
Read these examples - http://www.w3schools.com/css/css_reference.asp#dimension
<html>
<head>
<style type="text/css">
input {height:100px; width:200px; }
</style>
</head>
<body>
<input type="text" />
</body>
In this case all html "input types" would have height 100x and width 200px. Instead if you use a "class" you style only those elements which are assigned that specific class.
<html>
<head>
<style type="text/css">
.tb {height:100px; width:200px; }
</style>
</head>
<body>
<input type="text" class="tb"/>
<br />
<input type="text" />
</body>
You can also use an "id" for that specific html element. Ids should be unique in an html page
<html>
<head>
<style type="text/css">
#tb {height:100px; width:200px; }
</style>
</head>
<body>
<input type="text" id="tb"/>
<br />
<input type="text" />
</body>
If you are using CSS, a simple width and height property work just fine.
textarea {height:100px; width:100px; }
You also can write this way,
<html>
<head>
<style type="text/css">
input[type=text] {height:50px;width:200px;}
</style>
</head>
<body>
<input type="text" />
</body>
You can also specify the rows and cols attributes of the textareas to control their size. Rows are the horizontal lines and cols is the number of characters wide you want the texarea to be
<textarea name="myText" rows="10" cols="80">Enter some text</textarea>
Provides a fairly short and wide textarea.
Related
I need the input field under the image and not aligned. How I would go about centering the image and input field (+button)horizontally and vertically. As of now the input field is next to the image and I would like it below the image.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Solution for Technigo Coding Challenge</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<style>
body{
background-color:#18344e;
}
div {
position:absolute;
top:0;left:0;right:0;bottom:0;
background: g;
display: flex;
align-items: center;
justify-content:center
}
</style>
</head>
<body>
<div>
<center><img><a href=><img src="http://i.imgur.com/jl99RSf.gif" title="source: imgur.com" /></a></img></center>
<form action="/action_page.php"><center><form>
<strong>Search</strong>:<input type="text">
<input type="submit"value="Enter"></form></center>
</div>
<body/>
</html>
The problem can be solved simply by setting CSS text-align: center. I have also removed some HTML issues such as tags that weren't closed <form> & <img>, and tags that weren't required <center>.
Also, I would strongly suggest that instead of styling all div elements, you use class selectors .className and style specific classes, or use ID selectors #elementId to style individual elements.
body {
background-color: #18344e;
}
div {
text-align: center;
}
<body>
<div>
<a href="#"><img src="http://i.imgur.com/jl99RSf.gif" title="source: imgur.com" />
</a>
<form action="/action_page.php">
<strong>Search</strong>:<input type="text">
<input type="submit" value="Enter">
</form>
</div>
</body>
Just add to CSS margin-top equals to 10em.I will make what you want.
In addition, you've messed up some html codes. Especcially, you made mistakes using form tag.I fixed those issuses.Besides, that I have added class to div tag since it better to specifiy.
body {
background-color: #18344e;
}
div.main {
margin-top: 10em;
text-align: center;
}
<body>
<div class="main">
<a href="#"><img src="http://i.imgur.com/jl99RSf.gif" title="source: imgur.com" />
</a>
<form action="action_page.php">
<label for="search">Search:</label><input type="text">
<input type="submit" name="submit" value="Send">
</form>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Solution for Technigo Coding Challenge</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
body{
background-color:#18344e;
}
div{
position:absolute;
top:0;left:0;right:0;bottom:0;
background: g;
display: flex;
align-items: center;
justify-content:center
}
</style>
</head>
<body>
<div>
<center><img src="http://i.imgur.com/jl99RSf.gif" title="source: imgur.com" />
<br/>
<form action="/action_page.php">
<strong>Search</strong>:<input type="text">
<input type="submit"value="Enter">
</form>
</center>
</div>
</body>
</html>
Seems to work fine in Opera and Chrome but the same code in FF and IE11 hides the text, which is no fun at all. I don't have a Mac so I don't know what it's like in Safari.
Here is a plunker demonstrating the issue.
I've tried adding line-height and overflow:visiblebut neither seem to have much effect.
css:
#userResponse {
font-size: 2em;
padding: 1em 0.25em;
text-align: center;
}
html:
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css#3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<input class="form-control" id="userResponse" type="text">
</body>
</html>
Bootstrap also has classes for input tags to increase the height of text fields, try with input-lg, hope it meets your requirement
<input class="form-control input-lg" type="text">
remember to put all form-control inside form-group
<div class="form-group">
<input class="form-control input-lg" type="text">
</div>
for more http://getbootstrap.com/css/#forms-control-sizes
Luzan's solution is probably the best approach. However, to keep the the spacing similar to how it appears in chrome with the padding I gave it a new fixed height of 58px and removed the padding entirely. This seems to give consistent results across all four browsers.
Updated Plunker.
html:
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css#3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<input class="form-control" id="userResponse" type="text" value='abcdefghijklmnopqrstuvwqyz'>
<div class="form-group">
<input class="form-control custom" type="text" value='abcdefghijklmnopqrstuvwqyz'>
</div>
</body>
</html>
css:
/* Styles go here */
#userResponse {
font-size: 2em;
padding: 1em 0.25em;
text-align: center;
}
.custom {
text-align:center;
font-size:2em;
height:58px;
}
I have one problem: I have simple HTML code and CSS code, but the CSS doesn't work... Please, can you told me, when I have something wrong?:
<html>
<head>
<link rel="icon" type="image/ico" href="http://eslgfx.net/nodelogo/lol_small.ico"/>
<title> LOL (fake :D) </title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body link="#CDA221" vlink="lime" alink="#CDA221">
<body background=http://i.imgur.com/0TugbQI.png">
<h1> My page </h1>
<form name="form" method="post" action="file:///C:/Documents%20and%20Settings/Filip/Desktop/formular.html">
<br> Please, enter your personal data:<br>
Name: <input type="text" name="meno" maxlength="20"><br>
Password: <input type="password" name="password" maxlength="20"><br>
<input type="submit" name="Send" value="Odoslať">
<style type="css">
input[type="submit"] {
background: url(data:image/jpeg;base64,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);
width: 200px;
height: 50px;
border: 0;
}
<style>
</form>
</body>
</html>
The out put is:
I want to change "submit" button appearance. Please help.
You can use:
<style type="text/css">
instead of:
<style type="css">
Also, you just need one <body> tag and you're missing open " for background value:
<body background="http://i.imgur.com/0TugbQI.png"link="#CDA221" vlink="lime" alink="#CDA221">
<!-- ------------^ Missing " here -->
as well as closing your <style> tag using </style>
<style type="css"> is inconsistent across browsers!!
do it this way
<style media="screen" type="text/css">
/* css styles*/
</style>
or simply :
<style>
/* css styles*/
</style>
you haven't closed your <style> tag too!! :)
Merge the two tags to one
<body link="#CDA221" vlink="lime" alink="#CDA221" background=http://i.imgur.com/0TugbQI.png">
Use "text/css" instead of "css"
Put the <style> tag into the <head> tag.
Chrome seems to not like having an overflow on certain input fields, it causes some very strange results. Use the following code to replicate. I don't understand why there is an offset.
<!doctype>
<html>
<head>
<title>Test</title>
<style type="text/css">
input {
overflow: hidden;
}
</style>
</head>
<body>
<input type="text" />
<select><option>Hello</option></select>
<input type="submit" value="Ok..." />
</body>
</html>
I'm trying to get the second textbox to be across from the first one. Right it is at the bottom righthand side.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div>
<h2>Top</h2>
<div>
<h2>TextBox 1</h2>
<div>
<input type="text" />
</div>
</div>
<div style="float:right;">
<h2>textbox2</h2>
<div>
<input type="text" />
</div>
</div>
</div>
</body>
</html>
One way is adding float: left; to the first container div, as this shrinks its width to the width of its content, allowing both inputs to appear side by side.
http://jsfiddle.net/uwFyp/
Just float the first one left
<div style="float:left;">
fiddle
You basically just need to float both of the divs containing your h2 and input elements. You can either float both left or float the first one left and the second one right (as in this example from your code above):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div>
<h2>Top</h2>
<div style="float:left;">
<h2>TextBox 1</h2>
<div>
<input type="text" />
</div>
</div>
<div style="float:right;">
<h2>textbox2</h2>
<div>
<input type="text" />
</div>
</div>
</div>
</body>
</html>
Floating both div's left would position the second div right after the first one.
You might also find you need to put a clearing div <div style="clear:both;"></div> immediately after your second floating div. This will prevent elements following these two from being positioned immediately after the last floated element.
floating divs for alignment of inputs gets tricky messy with lots of extra code try this cleaner approach that can be styled via CSS:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<style>
.horz-inputs label, .horz-inputs input {display: inline-block;}
/*add any css you want to the inputs and labels from this point forward
</style>
<body>
<div class="horz-inputs">
<h2>Top</h2>
<label>TextBox 1</label>
<input type="text" />
<label>TextBox 2</label>
<input type="text" />
</div>
</body>
</html>