Limit number of lines shown in a textbox, but not limiting the user to write - html

I have a case I am not sure how to figure it out.
I am trying to do a design to put a button over a textbox, to make my layout looks nice, but when users start typing information in textbox, it hides behind the button. I know I have 1 of 2 solutions, but I don't know how to do it:
1- either to find another way to do the layout.
2- limit the number of lines for the user to enter, but this way I am going to have a restriction for long data.
Below is my HTML and CSS:
body{
background: #000;
}
.nl-main{
width: 300px;
border: 1px solid white;
border-radius: 6px;
padding: 10px;
}
.header{
padding: 3px;
}
.header span{
color: white;
}
.nl-txt-main, .nl-btn-main{
display: inline-block;
}
.nl-btn-main .nl-btn{
border-radius: 5px;
background: blue;
color: white;
left: -50px;
position: relative;
}
.nl-txt-main .nl-txt {
width: 200px;
border-radius: 5px;
}
<div class="header">
<span>Search our database</span>
</div>
<div class="nl-controls">
<div class="nl-txt-main">
<input type="text" class="nl-txt"/>
</div>
<div class="nl-btn-main">
<input type="button" value="Send" class="nl-btn"/>
</div>
</div>
I want the button to be like part of the textbox itself, When you try to run the code, and write a long sentence in the textbox, it will hide under the button. How do I solve it?
Thank you.

Remove left:-50px; from you button
body{
background: #000;
}
.nl-main{
width: 300px;
border: 1px solid white;
border-radius: 6px;
padding: 10px;
}
.header{
padding: 3px;
}
.header span{
color: white;
}
.nl-txt-main, .nl-btn-main{
display: inline-block;
margin:0;
}
.nl-btn-main .nl-btn{
background: blue;
color: white;
left: -4px;
position: relative;
border-bottom-right-radius: 5px;
margin:0;
border-top-right-radius: 5px;
}
.nl-txt-main .nl-txt {
width: 200px;
border-bottom-left-radius: 5px;
margin:0;
border-top-left-radius: 5px;
}
<div class="header">
<span>Search our database</span>
</div>
<div class="nl-controls">
<div class="nl-txt-main">
<input type="text" class="nl-txt"/>
</div>
<div class="nl-btn-main">
<input type="button" value="Send" class="nl-btn"/>
</div>
</div>

Related

How to align these two elements in this position in HTML?

I have two elements which I want to align this way on Top Bar :
Below you can see the HTML and CSS for the two of the elements:
I tried using margins or padding but it didn't look I was going anywhere like that.
* {
box-sizing: border-box;
}
.example input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
}
.example button {
float: left;
width: 20%;
padding: 5px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
}
.example {
margin: 3px auto;
max-width: 300px;
}
<div>
<div class="topnav">
<div class="example">
<input type="text" placeholder="Search.." name="search2">
<button type="button"><i class="fa fa-search"></i></button>
</div>
<div style="float:right;">
<button type="button">+ New location</button>
</div>
</div>
Did you try using right?
First change float: left; in your two CSS classes (input field and button) to float: right;.
This way, the input field and the button are next to each other on the right side.
Then you can move your "right-floated" elements using:
right: 50px;, for isntance.
You could have use flex system layout to make it easier, but to do this in the way it is we should change couple of things:
Change order of div.example and the div that contains new location button in html
Set float: right to both div.example and the other div
Set margin-right: 50px to second div
* {
box-sizing: border-box;
}
.example input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
}
.example button {
float: left;
width: 20%;
padding: 5px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
}
.example {
/* NEW */
float: right;
/* Endof NEW */
margin: 3px auto;
max-width: 300px;
}
<div>
<div class="topnav">
<!-- Changed order -->
<div style="float:right;margin-right:50px;">
<button type="button">+ New location</button>
</div>
<div class="example">
<input type="text" placeholder="Search.." name="search2">
<button type="button"><i class="fa fa-search"></i></button>
</div>
<!-- Endof change -->
</div>
I changed order of elements, add a little margin and float right to the first element.
<div>
<div class="topnav" style="margin-right: 100px;">
<div style="float:right;">
<button type="button">+ New location</button>
</div>
</div>
<div class="example">
<input type="text" placeholder="Search.." name="search2">
<button type="button"><i class="fa fa-search"></i></button>
</div>
</div>
It's better to use flex and/or multi-column presentation, but with your current html-structure, one of the simplest options would be to add the second button to the "example" div and to use separated classes for buttons.
* {
box-sizing: border-box;
}
.example input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
}
.example button {
float: left;
padding: 5px;
background: #2196F3;
color: white;
font-size: 17px;
cursor: pointer;
border: 1px solid grey;
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
}
.example .button--search {
border-left: none;
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
width: 50px;
}
.example .button--new-location {
margin-left: 15px;
border-radius: 6px;
}
<div>
<div class="topnav">
<div class="example">
<input type="text" placeholder="Search.." name="search2">
<button type="button" class="button--search"><i class="fa fa-search"></i></button>
<button type="button" class="button--new-location">+ New location</button>
</div>
</div>
</div>

How to position a button on website using html/css

EDIT: The background is simply an image & the section where I place the image is the one I have given
My webpage currently looks like this and I have indicated where I want the button, however I'm very new to coding in general and not sure how to achieve this.
Picture of website page:
This is my html code, very simple just needed to add the button
<section class="slide kenBurns">
<div class="content">
<div class="container">
<div><p class="ae-2">
</p></div>
<div class="wrap">
<div class="fix-7-12">
<!-- <h1 class="ae-1">Messes Make Memories</h1> -->
</div>
</div>
</div>
</div>
<img
src="assets/img/background/flood2.png"
width="1450"
height="850"
></img>
</section>
well, try this one code
<!DOCTYPE html>
<html>
<head>
<style>
.img {
width:100%;
height: auto;
top:0;
left:0;
position: relative;
z-index: 1;
}
.anybutton {
top:11%;
left:55%;
width:100px;
height:40px;
position: absolute;
z-index: 2;
background: orange;
}
</style>
</head>
<body style="text-align:center; margin: 0px;">
<div class="mycenter" id="">
<img src="assets/img/background/flood2.png" class="img" id="img" />
<input type="button" class="anybutton" id="myab" value="Right Here" />
</div>
</body>
</html>
There 2 types of a buttons
There the real button. Its used to fire an event for JavaScript. It works as in the example below and can by styled like below. You can insert it whereever you want.
button {
background-color: blue;
width: 200px;
font-size: 20px;
padding: 10px;
border-radius: 5px;
border: 3px solid yellow;
color: white;
cursor: pointer;
}
<button id="ID">I'm a Button</button>
Then there is the Pseudo-Button. Its not a real button. It is just a div box to style a link like a button:
.button {
background-color: blue;
width: 200px;
font-size: 20px;
padding: 10px;
border-radius: 5px;
border: 3px solid yellow;
color: white;
text-align: center;
}
<div class="button">I'm a Button</div>
Insert a <button> tag in the same parent div which has code for this particular section
Set the css property of the parent element to position: relative
Set the css property for the <button> to position: absolute
Lastly, use
top : 40px;
right : 100px;
for the css property of button tag
Note: Change the value of top and right property as per convenience.
.button {
border: none;
padding: 15px 42px;
border-radius: 15px;
color: magenta;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 8px 10px;
cursor: pointer;
}
.button3 {
background-color: pink;
left: 50%;
position: absolute;
}
<button class="button button3">Button 3</button>
.button {
border: none;
padding: 15px 42px;
border-radius: 15px;
color: magenta;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 8px 10px;
cursor: pointer;
}
.button3 {
background-color: pink;
left: 50%;
position: absolute;
}

CSS- can't resize text input

It was probably asked before / someone had a similar problem, but I have been searching for a long time and couldn't find any solution to my problem.
I have a div called loginBox that is centred, and has a form in it. I want the text boxes in the form to take almost the entire width of the form (It should look like google's new sign in form).
I am setting the input's margin to auto and the width to 90% using css, but for some reason it has no effect. Even when I set the width to a number (i.e 200px), the width remains unchanged.
The only way I could make it work is increase the padding of the input to 100px, but this is both not responsive, and not a good practice.
This is the code I am using:
body {
margin: 0;
background-color: #EEEEEE
}
.menu {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
.menu a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
}
.pageMain {
width: 100%;
padding: 16px;
margin-top: 70px;
height=1500px;
}
.loginBox {
display: table;
margin: auto;
width: 50%;
background-color: white;
box-shadow: 2px 2px lightgrey;
padding: 25px;
}
input {
margin: auto;
width=90%;
padding: 12px 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
<div class="menu">
<a class="active" href="index.html">Home</a>
Grades
Behavior
Homework
Learning Enviroments
Time Table
People
<a style="float: right" href="contact.html">Contact</a>
<a style="float:right" href="contact.html">Login</a>
</div>
<div class="pageMain">
<div class="loginBox">
<h3>Sign in</h3>
<h4>With your RSIS account</h4>
<form>
<input type="text" size="300" name="username" value="Email, RSIS username or id">
</form>
</div>
</div>
Screenshot of what I get right now
Fix your width. Instead of = it should be :. Your code seems fine otherwise. And width: 100% works just the way you intended.
Also, as mentioned in the comments, It should be height: 1500px; in .pageMain
body {
margin: 0;
background-color: #EEEEEE
}
.menu {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
.menu a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
}
.pageMain {
width: 100%;
padding: 16px;
margin-top: 70px;
height: 1500px;
}
.loginBox {
display: table;
margin: auto;
width: 50%;
background-color: white;
box-shadow: 2px 2px lightgrey;
padding: 25px;
}
input {
margin: auto;
width:100%;
padding: 12px 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
<div class="menu">
<a class="active" href="index.html">Home</a>
Grades
Behavior
Homework
Learning Enviroments
Time Table
People
<a style="float: right" href="contact.html">Contact</a>
<a style="float:right" href="contact.html">Login</a>
</div>
<div class="pageMain">
<div class="loginBox">
<h3>Sign in</h3>
<h4>With your RSIS account</h4>
<form>
<input type="text" size="300" name="username" value="Email, RSIS username or id">
</form>
</div>
</div>
the first look into your css file
height=1500px; // Why =, not :? <----- PageMain class
width=90%; // <---- same here in input class
change:
width=90%;
height=1500px;
to:
width:90%;
height:1500px;
also use * { box-sizing: border-box;} for remove scrollbars.

hide element in another parent

How would i go about hiding or showing an element that is contained in a container, based on another container's hover state?
Here's what i have so far, as an example:
HTML5
<div class="left-menu-container">
<div class="left-menu-inner-container">
<div class="left-menu-item-container">
<a href="AppsDashboard" class="left-menu-link">
<div class="left-menu-item-first">
Find an Application
</div>
</a>
<div class="sub-menu">
<input type="text" value="Enter app name here" onclick="Clear(this, 'Enter app name here');" onblur="Reset(this, 'Enter app name here');" />
</div>
</div>
</div>
</div>
CSS3
div.left-menu-container {
float: left;
width: 19%;
padding-right: 1%;
}
div.left-menu-inner-container {
width: 100%;
}
div.left-menu-item-container
{
width:100%;
}
div.left-menu-item-first {
width: 93%;
border: 1px solid #999;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;
transition: 0.15s ease-in-out;
color: black;
min-height: 26px;
padding-left: 1%;
}
div.left-menu-item-first:hover {
width: 97%;
border: 1px solid #999;
color: white;
background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159));
padding-left: 3%;
}
div.left-menu-item-container .sub-menu {
width: 97%;
border: 1px solid #999;
color: white;
background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159));
padding-left: 3%;
display: none;
}
div.left-menu-item-first:hover left-menu-item-container.sub-menu {
position:absolute;
width: 80%;
border: 1px solid #999;
color: white;
background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159));
float:left;
display: block;
z-index: 1000;
float: left;
}
However, that simply does not work. Hovering over the left-menu-item-first div does not show the submenu contained in the left-menu-item-container parent. Do they really and absolutely must be children of the parent for this to work with Pure CSS? I can and already had a JQuery version setup and going but i wanted to do it via CSS only if possible.
You can only alter child elements and sibling elements on hover, never a completely different element.
if you put the submenu right after the first menu element, you can use the sibling selector + as follows:
div.left-menu-container {
float: left;
width: 19%;
padding-right: 1%;
}
div.left-menu-inner-container {
width: 100%;
}
div.left-menu-item-container
{
width:100%;
}
div.left-menu-item-first {
width: 93%;
border: 1px solid #999;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;
transition: 0.15s ease-in-out;
color: black;
min-height: 26px;
padding-left: 1%;
}
div.left-menu-item-first:hover {
width: 97%;
border: 1px solid #999;
color: white;
background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159));
padding-left: 3%;
}
div.left-menu-item-container .sub-menu {
width: 97%;
border: 1px solid #999;
color: white;
background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159));
padding-left: 3%;
display: none;
}
.left-menu-link:hover + .sub-menu {
position:absolute;
width: 80%;
border: 1px solid #999;
color: white;
background-image: linear-gradient(rgb(44,119,208),rgb(27,90,159));
float:left;
display: block;
z-index: 1000;
float: left;
}
<div class="left-menu-container">
<div class="left-menu-inner-container">
<div class="left-menu-item-container">
<span class="AppsDashboard">
<a href="AppsDashboard1" class="left-menu-link">
<div class="left-menu-item-first">
Find an Application
</div>
</a>
<div class="sub-menu">
<input type="text" value="Enter app name here" onclick="Clear(this, 'Enter app name here');" onblur="Reset(this, 'Enter app name here');" />
</div>
</span>
</div>
</div>
</div>
Since there is no CSS parent selector, try altering your html such that the hovered item is a sibling of left-menu-item-container.sub-menu
Try using a CSS sibling selector:
Change:
div.left-menu-item-first:hover left-menu-item-container.sub-menu
to
div.left-menu-item-first:hover + left-menu-item-container.sub-menu
Or
Change:
div.left-menu-item-first:hover left-menu-item-container.sub-menu
to
.left-menu-link:hover + left-menu-item-container.sub-menu

Recaptcha Image Not Displayed Correctly

I have problem with google re-Captcha. It happens rarely, but still, sometimes the image is not displayed correctly. It misses some parts. Here is the image:
http://bit.ly/1olZoih
Here is my Html:
<div id="recaptcha_widget" style="display:none">
<div id="recaptcha_image"></div>
<div class="recaptcha_only_if_incorrect_sol" style="color:red">Error: Invalid code, please try again</div>
<div class="recaptcha_only_if_image">Please enter the code from the image above:</div>
<input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />
<div><img id = "restart-button" src="/images/restart.png" width = "20px" height = "20px"></div>
</div>
And I apply only this css to it:
#recaptcha_widget{
margin-top: 10px;
width:508px;
}
.recaptcha_only_if_image{
margin-left: 3px;
margin-bottom:7px;
line-height: 20px;
color: #747474;
font-size:13px;
}
#recaptcha_response_field{
width: 233px;
height: 21px;
padding-left: 7px;
border: 1px solid #dadada;
border-radius: 2px;
color: #4d4d4d;
float:left;
}
#recaptcha_response_field:focus{
outline:rgb(184, 167, 130) auto 2px;
}
#restart-button{
margin-top: 2px;
margin-left: 10px;
}
#recaptcha_image{
margin-bottom: 10px;
}
#recaptcha_challenge_image{
border: solid 1px #e2e2e2;
border-radius: 5px;
}
I'm not resizing the picture and it comes 300x57 px.
Thanks in advance :)
Try giving width to the Captcha div.
Width: ;