I'm trying to do a google advanced search. I'm having trouble with the input text, I want to align them right just like Google, at a close distance and all accordingly.
This is my html:
<form action="https://www.google.com/advanced">
<div id="advanced">
Find pages with...<br/><br/>
all these words:<input type="text" name="words"><br/><br/>
this exact word or phrase:<input type="text" name="exact"><br/><br/>
any of these words:<input type="text" name="any"><br/></br>
none of these words:<input type="text" name="none"><br/><br/>
</div>
<input type="submit" value="Advanced Search">
</form>
This is my css:
#advanced input[type="text"] {
border-radius: 0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
width: 300px;
height: 15px;
padding: 5px 10px;
background-image: none;
font-size: 20px;
display: block;
float: right;
}
But that makes them go to the right... Way too much. I wish I could adjust it. This is how it looks like.
[1]: https://i.stack.imgur.com/zX83k.png
Any help is appreciated, thank you.
You can simply apply a width or max-width to the container (#advanced) in your current code:
#advanced {
width: 100%;
max-width: 520px;
}
#advanced input[type="text"] {
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
width: 300px;
height: 15px;
padding: 5px 10px;
background-image: none;
font-size: 20px;
display: block;
float: right;
}
<form action="https://www.google.com/advanced">
<div id="advanced">
Find pages with...<br/><br/> all these words:<input type="text" name="words"><br/><br/> this exact word or phrase:<input type="text" name="exact"><br/><br/> any of these words:<input type="text" name="any"><br/></br>
none of these words:<input type="text" name="none"><br/><br/>
</div>
<input type="submit" value="Advanced Search">
</form>
use flexbox
#advanced {
flex: 1;
flex-direction: column;
}
and remove
display: block;
float: right;
and remove the BR's
Related
These input text are already stacked vertically but they're not in-line along with the other text. Image:[1]: https://i.stack.imgur.com/UicEL.png
#advanced input[type="text"] {
border-radius: 0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
width: 300px;
height: 15px;
padding: 5px 10px;
background-image: none;
font-size: 20px;
display: block;
margin-left: 30%;
}
<form action="https://google.com/search">
<div id="advanced">
Find pages with...<br/><br/>
all these words:<input type="text" name="as_q">
this exact word or phrase:<input type="text" name="as_epq">
any of these words:<input type="text" name="as_oq">
none of these words:<input type="text" name="as_eq">
</div>
<input type="submit" value="Advanced Search">
</form>
What made it stack vertically was exactly the code:
display: block;
margin-left: 30%;
This looks to have been answered previously HERE - something like this might work for you, adding display:grid to the parent element.
#advanced input[type="text"] {
border-radius: 0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
width: 300px;
height: 15px;
padding: 5px 10px;
background-image: none;
font-size: 20px;
margin-left: 30%;
vertical-align:top;
}
#advanced {
display:grid;
grid-template-columns: max-content max-content;
grid-gap:10px;
}
#advanced.settings label { text-align:left; }
#advanced.settings label:after { content: ":"; }
<form action="https://google.com/search">
Find pages with...<br/><br/>
<div id="advanced">
all these words:<input type="text" name="as_q">
this exact word or phrase:<input type="text" name="as_epq">
any of these words:<input type="text" name="as_oq">
none of these words:<input type="text" name="as_eq">
</div>
<input type="submit" value="Advanced Search">
</form>
I have created a Contact Form, everything looks somewhat fine, the way I want it but having issues. The Form is not being responsive when re-sizing/scale the browser down. I have messed around, I think a little too much with the code to the point that I have no clue what i'm doing or have done. I'm about to lose my mind!
When I re-size the browser, the labels go outside of the container it's in. The submit button is also not centering even when I try margin: 0 auto;
I will post the HTML & CSS along with my CodePen below. Thanks for any help!
CodePen https://codepen.io/vCoCo/pen/MLReKK?editors=1100
HTML
<section id="contact">
<div class="container">
<form id="contactForm" action="contactform.php" method="post">
<h2> Get In Touch! </h2>
<div class="details">
<label for="firstName"> First Name </label>
<input type="text" id="firstName" name="firstName" placeholder="Enter First Name..." required>
</div>
<div class="details">
<label for="lastName"> Last Name </label>
<input type="text" id="lastName" name="lastName" placeholder="Enter Last Name..." required>
</div>
<div class="details">
<label for="email"> Email </label>
<input type="email" id="email" name="email" placeholder="Enter Email..." required>
</div>
<div class="details">
<label for="textMessage"> Message </label>
<textarea id="textMessage" name="textMessage" placeholder="Enter Message In Here..." required></textarea>
</div>
<input type="submit" value="Submit Message">
</form>
</div>
</section>
CSS
body{
background-color: grey;
}
/**** GLOBAL ****/
.container{
max-width: 80%;
margin: auto;
overflow: hidden;
border: 2px solid white;
}
/********** CONTACT FORM **********/
#contact{
max-width: 80%;
margin: 100px auto;
border: 1px dashed orange;
}
#contact .container{
width: 500px;
margin: 100px auto;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
#contactForm{
margin: 0 auto;
}
#contactForm h2{
text-align: center;
margin-bottom: 10px;
}
.details{
max-width: 500px;
margin: 15px;
padding: 10px;
border: solid 1px #ff0000;
overflow: hidden;
}
label{
margin-bottom: 10px;
}
input[type=text], input[type=email]{
width: 400px;
padding: 12px 20px;
margin: 8px 0;
border: 2px solid;
border-radius: 4px;
}
input[type=submit]{
width: 200px;
padding: 10px 20px;
color: #fff;
background-color: #000;
border: 2px solid #fff;
border-radius: 10px;
font-family: inherit;
cursor: pointer;
}
textarea{
width: 300px;
height: 200px;
resize: none;
font-size: 16px;
}
#contactForm textarea::placeholder{
font-size: 16px;
}
You have a problem with the width of several elements, you're setting fixed widths and it repercusses on mobile resolutions, also with the overflow of the container it make the childs to hide inside the parent.
A good solution for a responsive mode is to set the widths to 100% of the parent and setting a max width for greater resolutions.
I made a fork of your Codepen.
Important: most of the problem also is, make sure to set the box-sizing of global elements. i.e. * { box-sizing: border-box;}
Hope this helps.
Codepen https://codepen.io/devlumberjack/pen/rPbMzr?editors=1100
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 4 years ago.
This is probably a stupid question, but it has been driving me crazy the whole day. I need both divs with the class of contacthor to be aligned on the top, but not forcing them by using margin-top: -x or etc. Here is an image of the issue.
Also, Im new to web design so if I have useless code please explain.
Thanks.
#redcontact {
margin-bottom: 0;
padding-left: 5vh;
font-size: 15px;
line-height: 30px;
background: black;
}
.contacthor {
display: inline-block;
}
form > .contacthor > .input {
color: #C5B358;
font-size: 15px;
background-color: black;
margin-top: 0;
margin-left: 1vh;
margin-bottom: 1vh;
height: 30px;
width: 190px;
display: block;
}
.contacthor > textarea {
color: #C5B358;
font-size: 15px;
font-family: 'Montserrat', sans-serif;
width: 60vh;
height: 25vh;
background: black;
border: 1px;
border-style: solid;
border-radius: 3px;
border-color: grey;
padding-left: 4px;
margin-top: 0;
margin-bottom: 1vh;
margin-left: 1vh;
}
<div id="redcontact">
<form action="action_page.php">
<div class="contacthor">
<label for="name">Nombre</label>
<input class="input" type="text" name="name_user" placeholder="test">
<label for="org">Empresa</label>
<input class="input" type="text" name="org" placeholder="test">
<label for="mail">Mail</label>
<input class="input" type="text" name="mail" placeholder="contacto#test.com">
</div>
<div class="contacthor">
<p>Mensaje</p>
<textarea name="mensaje" tabindex="5" placeholder="text..."></textarea>
<input type="submit" value="enviar">
</div>
</form>
</div>
I would agree with Chere's answer in that you should be using something like CSS Grid or Flexbox. However, if you want to stay simple for this example, or just want to know why your code isn't working, here is a solution:
#redcontact {
margin-bottom: 0;
padding-left: 5vh;
font-size: 15px;
line-height: 30px;
background: black;
}
.contacthor {
display: inline-block;
}
form>.contacthor>.input {
color: #C5B358;
font-size: 15px;
background-color: black;
margin-top: 0;
margin-left: 1vh;
margin-bottom: 1vh;
height: 30px;
width: 190px;
display: block;
}
.contacthor>textarea {
color: #C5B358;
font-size: 15px;
font-family: 'Montserrat', sans-serif;
width: 60vh;
height: 25vh;
background: black;
border: 1px;
border-style: solid;
border-radius: 3px;
border-color: grey;
padding-left: 4px;
margin-top: 0;
margin-bottom: 1vh;
margin-left: 1vh;
}
.contacthor>p {
margin-bottom: 5px;
margin-top: 0;
margin-bottom: 1vh;
margin-left: 1vh;
}
.contacthor>input[value=enviar] {
display: block;
margin-top: 0;
margin-bottom: 1vh;
margin-left: 1vh;
}
/* ===== Styles to fix example ===== */
label, p {
color: white;
}
/* ===== Styles to answer your question ===== */
.contacthor {
vertical-align: top;
}
<div id="redcontact">
<form action="action_page.php">
<div class="contacthor">
<label for="name">Nombre</label>
<input class="input" type="text" name="name_user" placeholder="test">
<label for="org">Empresa</label>
<input class="input" type="text" name="org" placeholder="test">
<label for="mail">Mail</label>
<input class="input" type="text" name="mail" placeholder="contacto#test.com">
</div>
<div class="contacthor">
<p>Mensaje</p>
<textarea name="mensaje" tabindex="5" placeholder="text..."></textarea>
<input type="submit" value="enviar">
</div>
</form>
</div>
The main thing to take away from this is the addition of vertical-align: top. Here is a similar question and here is the documentation for the vertical-align property.
Note: I think there may have been some CSS missing, so the snippet looks a bit odd and I had to make a couple of unrelated changes.
Why is there a . before the input?
Also, I highly recommend not using vh or pixels. You should go with em. Without doing everything, you should probably try to do something like that, with flexbox.
#redcontact {
width: 100%;
height: 100%;
font-size: 15px;
line-height: 1.5;
background-color: #000;
color: #fff;
}
form {
display: flex;
padding: 2em;
.contacthor {
display: flex;
flex-direction: column;
width: 50%;
padding: 0 2em;
input,
textarea {
color: #C5B358;
background-color: transparent;
margin-left: 1em;
margin-bottom: 1em;
padding: 0.5em 1em;
width: auto;
display:block;
}
input {
border: 0;
}
textarea {
border: 1px solid grey;
border-radius: 3px;
}
}
}
I have made a grid. See if you are looking for somewhat similar thing.
https://codepen.io/kalpeshshende/pen/qJjomO
form{
display:grid;grid-gap:10px;
grid-template-columns:1fr 2fr;
}
.holder{
max-width:600px;
margin:auto;
background:black;
color:#C5B358;padding:10px;
}
.contacthor{
display:grid;grid-gap:10px;
}
textarea{
height:100px;
}
input[type=submit]{
width:120px;
}
p{
padding:0px;
}
input[type=text]{
background:black;
color:;border:none;
}
Markup :
<body>
<div class="holder">
<form action="">
<div class="contacthor">
<label for="name" >Nombre</label>
<input class="input" type="text" name="name_user" placeholder="test">
<label for="org">Empresa</label>
<input class="input" type="text" name="org" placeholder="test">
<label for="mail">Mail</label>
<input class="input" type="text" name="mail" placeholder="contacto#test.com">
</div>
<div class="contacthor">
<label for="Mensaje">Mensaje</label>
<textarea name="mensaje" tabindex="5" placeholder="text..."></textarea>
<input type="submit" value="enviar">
</div>
</form>
</div>
</body>
Try adding vertical-align: top; to contracthor.
For some reason I cannot get the submit button to center. I have tried everything from text-align: center; to margin: 0 auto; to a left and right margin at auto. The button will not center anyway I try. What am I failing to do?
.contactForm {
border: 2px solid black;
background-color: #F0F0F0;
width: 40%;
margin: 0 auto;
padding: 40px;
}
.contactButton {
margin-top: 15px;
margin-right: auto;
margin-bottom: 15px;
margin-left: auto;
width: 425px;
font-size: 20px;
font-weight: bold;
padding: 14px;
cursor: pointer;
background-color: #800000;
border: none;
color: #FFFFFF;
text-align: center;
}
<div class="contactForm">
<form action="" method="post" id="mycontactform">
<input type="text" class="inputbar" name="name" placeholder="Full Name" required>
<input type="email" class="inputbaremail" name="email" placeholder="Email" required>
<textarea rows="4" cols="50" name="message" class="inputbarmessage" placeholder="Message" required></textarea>
<label for="contactButton">
<input type="button" class="contactButton" value="Send Message" id="submit">
</label>
</form>
</div>
It's hard to center is, because it is inside a label. The label is an inline element too and will size around the button. Therefor text-align: center and other solutions don't work.
In the snippet below, I've made the label show itself as a block element, which automatically occupies the available width of the parent. Then you can easily center the button inside it:
The added piece:
label[for="contactButton"] {
display: block;
text-align: center;
}
The whole code:
.contactForm {
border: 2px solid black;
background-color: #F0F0F0;
width: 40%;
margin: 0 auto;
padding: 40px;
}
.contactButton {
margin-top: 15px;
margin-right: auto;
margin-bottom: 15px;
margin-left: auto;
width: 425px;
/* Make sure the button isn't too wide on small screens */
max-width: 80%;
font-size: 20px;
font-weight: bold;
padding: 14px;
cursor: pointer;
background-color: #800000;
border: none;
color: #FFFFFF;
text-align: center;
}
label[for="contactButton"] {
display: block;
text-align: center;
}
<div class="contactForm">
<form action="" method="post" id="mycontactform">
<input type="text" class="inputbar" name="name" placeholder="Full Name" required>
<input type="email" class="inputbaremail" name="email" placeholder="Email" required>
<textarea rows="4" cols="50" name="message" class="inputbarmessage" placeholder="Message" required></textarea>
<label for="contactButton">
<input type="button" class="contactButton" value="Send Message" id="submit">
</label>
</form>
</div>
Use text-align:center on the parent div.
Fiddle: http://jsfiddle.net/gopal/su3vg018/
.contactForm {
text-align:center;
}
Add this to your css file:
.contactForm label[for="contactButton"] {
display: block;
text-align: center;
}
I have design a login form using html and css. The styles are displayed correctly in chrome and firefox. But in IE it has some problems.
HTML
<div id="wrapper">
<div id="page">
<form id="adminLoginForm">
<label>User Name :</label>
<input type="text" class="uname"/>
<label>Password :</label>
<input type="password" class="pwd"/>
<input type="submit" class="loginSubmit submit" value="SUBMIT"/>
<p class="alert loginAlert">Test alert</p>
</form>
</div>
</div>
CSS
#wrapper{
width:1000px;
margin:0 auto;
}
p{
margin:0;
padding:0;
}
#page{
float: left;
width: 1000px;
min-height: 480px;
background-color: #FFFFFF;
padding-bottom:20px;
}
.submit{
float:left;
width: 130px;
padding-top: 5px;
padding-bottom: 5px;
font-weight: bold;
cursor: pointer;
height:30px;
background: url('/img/bg/submit.jpg');
border: none;
border-radius: 10px;
color: #960000;
}
.alert{
float: left;
width: 100%;
margin-top: 5px;
color: #C00;
display:none;
}
#adminLoginForm{
float: left;
width: 350px;
height: 170px;
margin-left: 325px;
margin-top: 150px;
background: url('/img/bg/b15.jpg');
border-radius: 10px;
box-shadow: 0px 0px 10px #A38D77;
padding-top: 10px;
}
#adminLoginForm label{
float: left;
width: 150px;
text-align: right;
font-weight: bold;
color: #000000;
font-size: 15px;
margin-top: 20px;
}
#adminLoginForm input{
float: left;
width: 150px;
margin-top: 19px;
margin-left: 5px;
padding-left: 5px;
padding-right: 5px;
}
#adminLoginForm input.loginSubmit{
width:130px;
margin-left:111px;
}
Output in Chrome & Firefox
Output in IE
I know the border-radius and box-shadow not works in IE. But I don't know why the gap between the label and text-boxes in IE. Can anybody help me to resolve this..?
If you wrap the contents of the form in a div that then becomes the only child of the form, the issue is fixed:
HTML:
<form id="adminLoginForm">
<div>
<label>User Name :</label>
<input type="text" class="uname"/>
<label>Password :</label>
<input type="password" class="pwd"/>
<input type="submit" class="loginSubmit submit" value="SUBMIT"/>
<p class="alert loginAlert">Test alert</p>
</div>
</form>
I thought of this because I recall (back in the days when it seemed XHTML would become the new web standard) that, with XHTML, native inline elements (like <label> and <input>) are not valid children of the <form> element.
I don't think that's the case with regular HTML, but the point is that the <form> tag and the various <input>elements are rather special, and tend to follow their own CSS formatting rules.
try to use table pattern for these type of designs..best compatibility trick for all browsers..
<div id="wrapper">
<div id="page">
<form id="adminLoginForm">
<table>
<tr><td><label>User Name :</label></td><td><input type="text" class="uname"/></td></tr>
<tr><td><label>Password :</label></td><td><input type="password" class="pwd"/></td></tr>
<tr><td colspan="2" style="text-align:center;"><input type="submit" class="loginSubmit submit" value="SUBMIT"/></td></tr>
</table>
<p class="alert loginAlert">Test alert</p>
</form>
</div>
</div>