I don't know why, but my text input and my submit button margin are linked, so it's ugly and very annoying.
I have this on my main html file :
.banner {
width: 100%;
height: 100px;
display: inline-flex;
margin: 0px;
background-color: #1b2936;
}
.logo {
width: 200px;
height: 100px;
}
input[type=text] {
background-color: #10151b;
border: #10151b 5px solid;
border-radius: 7px;
height: 50px;
width: 500px;
color: white;
font-family: jetbrainsRegular;
}
.search {
width: 50px;
height: 50px;
}
.searchbtn {
margin-top: 0px;
border: #1fa2f3 5px solid;
border-radius: 30px;
background-color: #1fa2f3;
}
.nomargin {
margin-top: 0;
}
<div class="banner">
<img class="logo" src="logo.png">
<form action="query.php">
<label>
<input type="text" id="query" placeholder="Mot" class="nomargin">
</label>
<label>
<button type="submit" class="searchbtn"><img src="search.png" class="search"/></button>
</label>
</form>
</div>
I am searching for a way to unlink their margins...
There is no margin, it's an issue with your form. Try this:
form{
display:flex;
}
Or (but I don't recommend it):
input[type=text]{
float:left;
}
Flex gives you much more flexibility (pun intended) and it's much easier to work with. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Related
My assignment is to make a login page, and the inputs and buttons have to have a 320px width, including a 2px border and 15px padding. I create two classes for the inputs and button, and in CSS I am specifying these widths for both but the button keeps coming out shorter. Right now it's coming out like this: 1
I'm fairly new at this so I apologize if my code is messy/this might seem like a silly question.
Here's my code:
HTML
<form class="signup" action="/signup/" method ="post">
<fieldset name="sign-up">
<legend>Sign up</legend>
<div class="input">
<label for="email">Email</label></br>
<input class="inputbar" placeholder="foo#bar.com" type="email" name="email" id="email" required/></br>
<label for="password">Password</label></br>
<input class="inputbar" placeholder="1234passw0rd" type="password" name="password" id"password" required/></br>
</div>
</fieldset>
<button type="signupbutton">Sign up</button>
</form>
CSS
.signup {
width: 320px;
padding: 40px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: white;
}
.signup fieldset{
border: none;
}
.input{
text-align: left;
}
.inputbar, button{
border: 2px solid lightgrey;
border-radius: 2px;
padding: 15px;
width: 250px;
}
button{
background-color: mediumseagreen;
color: white;
}
Thanks everyone!
It's best to set the container width and then the elments inside to 100%. Using box-sizing: border-box; is key here.
* {
box-sizing: border-box;
}
.signup {
width: 320px;
padding: 40px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: white;
}
.signup fieldset{
border: none;
padding: 0;
margin: 0;
}
.input{
text-align: left;
}
.inputbar, button{
border: 2px solid lightgrey;
border-radius: 2px;
padding: 15px;
width: 100%;
}
button{
background-color: mediumseagreen;
color: white;
}
.inputbar, button{
border: 2px solid lightgrey;
border-radius: 2px;
padding: 15px;
width: 250px;
}
It appears you have set the width of the button to 250px. Try changing that to 320px.
Remove the text align on th input class
.input{
text-align: left;
}
and do this
.signup .input label {
text-align: left;
display: inline-block;
width: 100%;
padding-left: 20px;
}
Aside that the everything is working alright in chrome
what browser are you using to run your test?
this is whati have on my browser
I am working on a website but I have a problem arranging input items.
This is what I want it to look like:
but it looks like this:
My HTML code:
<div id="search">
<form action="">
<input class="search-area" type="text" name="text" placeholder="Search here">
<input class="search-btn" type="submit" name="submit" value="SEARCH">
</form>
</div>
My CSS code:
#search{
width: 650px;
float: left;
padding: 20px;
margin-left: 50px;
}
.search-area{
width: 650px;
height: 50px;
background: #fff;
border: none;
border-radius: 10px;
float: left;
padding-left: 15px;
}
.search-btn{
width: 100px;
height: 50px;
border-radius: 10px;
border: none;
color:#fff;
background: brown;
margin-left: -100px;
}
Please help me to understand the problem.
Add position:relative to your main div, which is the #search.
Then add position:absolute to the button, and right:0 in order to align it to the right of the relative element.
#search{
position:relative;
}
.search-btn{
position:absolute;
right:0
}
Maybe you will also need a top positioning of the button. You can add top:5px for example to achieve that.
Cheers
To position the search-button above another element it has to be position: absolute.
Here you go:
body {
background: lightgreen;
}
#search {
position: relative;
width: 550px;
padding: 20px;
}
.search-area {
width: 550px;
height: 50px;
background: #fff;
border: none;
border-radius: 10px;
padding-left: 15px;
}
.search-btn {
position: absolute;
top: 20px;
right: 0;
width: 100px;
height: 52px;
border-radius: 10px;
border: none;
color: #fff;
background: brown;
}
<div id="search">
<form action="">
<input class="search-area" type="text" name="text" placeholder="Search here">
<input class="search-btn" type="submit" name="submit" value="SEARCH">
</form>
</div>
How can I add an image inside this search box? I'd like the image to be positioned inside and to the left of the palceholder text...
Here is the fiddle
HTML:
<div class="searchbar">
<h1>Welcome...</h1>
<div id="sb-search" class="sb-search">
<div class="search-wrapper">
<input class="search-input" placeholder="Search..." type="text" value="" name="search" id="search"/>
<img class="search-pic"src="img/search-icon.png"/>
</div>
</div>
</div>
thanks
Add this to your CSS which will position the image inside the input field.
.search-wrapper {
position: relative;
}
.search-wrapper img {
position: absolute;
top: 0px;
left: 0px;
}
Then you just need to use padding and change the top and left values to move everything about so it fits nicely and nothing is overlapped.
You might also need to set a width and height to the image so it's not too big for the input field.
You can solve it like this:
#mixin searchbar-font {}
#mixin searchbar-styles {
border: none;
outline: none;
color: $header-bg-color;
padding: 20px 65px 20px 20px;
background: transparent;
flex:1;
}
#mixin search-bar-input {
border: none;
outline: none;
}
.search-input {
border: none;
outline: none;
color: $header-bg-color;
padding: 20px 65px 20px 20px;
background: transparent;
flex:1;
}
.search-wrapper {
position: relative;
background: white;
display: flex;
align-items: center;
.search-input {
#include searchbar-font;
#include searchbar-styles;
}
.search-submit {
#include search-bar-input;
}
}
<div class="searchbar">
<h1>Welcome...</h1>
<div id="sb-search" class="sb-search">
<div class="search-wrapper">
<img class="search-pic" src="img/search-icon.png" />
<input class="search-input" placeholder="Search..." type="text" value="" name="search" id="search" />
</div>
</div>
</div>
Attached Fiddle
Technically you need to set your parent tag's position to relative, then set the image inside's position to absolute. Then you can overlay the image on your Input field. Also, one more thing to remember is you might want to set you z-index. Just in case, your image does not get behind of your input field. Make sure you are giving enough space to for your image by setting the input's padding left to somewhere around your image's width.
.search-wrapper{
.search-input{
padding-left: {image.width}px;
}
img{
position:absolute; left:0; top:0;
}
}
This should do the work.
<div class="search-container">
<input type="text" placeholder="Search...">
<img src="search-icon.png" alt="search icon">
</div>a
.search-container {
display: flex;
align-items: center;
position: relative;
}
input[type="text"] {
border: 1px solid gray;
border-radius: 20px;
padding: 10px 40px 10px 20px;
font-size: 16px;
width: 500px;
}
img {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
height: 20px;
width: 20px;
}
<div class="search-container">
<input type="text" placeholder="Search...">
<img src="search-icon.png" alt="search icon">
</div>
.search-container {
display: flex;
align-items: center;
position: relative;
}
input[type="text"] {
border: 1px solid gray;
border-radius: 20px;
padding: 10px 40px 10px 20px;
font-size: 16px;
width: 500px;
}
img {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
height: 20px;
width: 20px;
}
I have no idea whats going on here. Have a form contained in a div, and the div has a background color.
It works on one part of my website, but just doesn't work at all on another. Here's a Jsfiddle of whats going on
Also the affected code posted here:
form {
text-align: center;
}
input {
font-family: 'Cabin', sans-serif;
}
.submit-button {
text-decoration: none;
width: 80%;
background-color: white;
text-align: center;
height: 35px;
border-radius: 10px;
display: inline-block;
}
.input-half {
width: 40%;
display: inline-block;
float: left;
margin-left: 5%;
margin-right: 5%;
}
.input-half-2 {
width: 40%;
display: inline-block;
float: right;
margin-left: 5%;
margin-right: 5%;
}
input[type=text]:focus {
background-color: lightblue;
}
.contact-contain {
background-color: lightgray;
max-width: 100%;
}
.image-back {
width: 100%;
}
#back-img {
width: 100%
}
.cont-textarea {
resize: none;
width: 80%;
height: 110px;
}
<div class="contact-contain" id="link-c"><br>
<h1>Contact Over The Horizon:</h1><br><br>
<form>
<div class="input-half">
<label for="contname">Your Name</label><br>
<input class="input-box" type="text" name="contname"><br>
<label for="eaddress">Your Email</label><br>
<input class="input-box" type="text" name="eaddress"><br>
<label for="subj">Message Subject</label><br>
<input class="input-box" type="text" name="subj">
</div>
<div class="input-half-2">
<label for="contactmsg">Message Content</label><br><br>
<textarea class="cont-textarea"></textarea><br><br>
<button class="submit-button" type="submit" name="submitq" value="Send"><span>Submit Quote</span></button><br>
</div>
</form>
</div><br>
Wild guess: You want your div to contain your form (which has zero height). Do this:
.contact-contain {
overflow: hidden;
}
Demo
Trust me you will get better with time, but I think, to achieve what you want you can simply set a custom body background-color like this
body {background-color: lightgray;}
and you should be good
I have set my search bar div element as inline-block, as well as the img.
However, the div element is below the image, instead on the same horizontal line.
Anyone can advise me why this is happening?
body {
margin: 0;
}
#header {
width: 100%;
height: 60px;
background-color: #f1f1f1;
}
#header img {
height: 56px;
display: inline-block;
margin-left: 20px;
}
#search {
display: inline-block;
}
#search input {
display: inline-block;
width: 584px;
height: 38px;
border: 1px solid #d9d9d9;
}
#search input:hover {
border: 1px solid black;
}
<div id="header">
<img src="http://orig04.deviantart.net/1d83/f/2013/087/5/6/google_icon_by_slamiticon-d5z7lrp.png" />
<div id="search">
<form>
<input type="text" name="search" />
</form>
</div>
</div>
Your styles are working as they should; the #search input element's width is just too wide! Try looking at the result on a wider screen, and you will see the elements appear inline as expected.
Anticipating your next question, you can prevent wrapping of inline elements using the rule (on the container, e.g. #header):
white-space: nowrap
Anticipating your next question (if I may be so bold), you will probably want to set CSS rule:
vertical-align: middle
on both #header img and #search to get the look you want.
Here is the code snippet with what you want. The problem here is width of input. Since its more it bring the div to next line.
body {
margin: 0;
}
#header {
width: 100%;
height: 60px;
background-color: #f1f1f1;
}
#header img {
height: 56px;
display: inline-block;
margin-left: 20px;
}
#search {
display: inline-block;
height: 100%;
position: relative;
top: -22px;
}
#search input {
display: inline-block;
width: 480px;
height: 38px;
border: 1px solid #d9d9d9;
}
#search input:hover {
border: 1px solid black;
}
<div id="header">
<img src="http://orig04.deviantart.net/1d83/f/2013/087/5/6/google_icon_by_slamiticon-d5z7lrp.png" />
<div id="search">
<form>
<input type="text" name="search" />
</form>
</div>
</div>
The total width of image and search input is greater than full width of screen. Try with lesser width either of image or search input.
try this one
body {
margin: 0;
}
#header {
width: 100%;
height: 60px;
background-color: #f1f1f1;
}
#header img {
height: 56px;
display: inline-block;
margin-left: 5px;
}
#search {
display: inline-block;
height: 100%;
position: relative;
top: -22px;
}
#search input {
display: inline-block;
width: 450px;
height: 38px;
border: 1px solid #d9d9d9;
}
#search input:hover {
border: 1px solid black;
}
<div id="header">
<img src="http://orig04.deviantart.net/1d83/f/2013/087/5/6/google_icon_by_slamiticon-d5z7lrp.png" />
<div id="search">
<form>
<input type="text" name="search" />
</form>
</div>
</div>