I'm currently trying to use HTML together with CSS and my current problem is that I am not able to connect the input beside the arrow button:
I'm here asking how I am able to make the >> button as a "submit" button and that its beside the input?
--------------
| | >>
--------------
body {
padding: 5px 15px 30px 15px;
width: 500px;
height: 250px;
background-image: url('../images/bg2.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.text-center {
text-align: center;
}
.form-control {
margin: 600;
}
label {
display: block;
}
select,
input {
min-width: 100px;
border: 1px solid #fff;
background: #292942;
color: #fff;
border-radius: 25px;
padding: 5px 10px;
}
.mt10 {
margin-top: 20px;
}
.submit {
background-image: url('../images/arrow.png');
background-repeat: no-repeat;
background-position: center center;
width: 23px;
height: 23px;
margin-left: 350px;
}
<body>
<div class="text-center">
<div class="form-control">
<input type="text" id="discord-id-input" name="discord-id-input" placeholder="Discord ID" class="mt10">
<div id="discord-id-button" type="submit" class="submit">
</div>
</body>
Some simple flexbox properties get things into shape.
Other tips:
Use a button for submit. If you don't want button styling, take it off. Semantic use of elements is critical for consistent, familiar usage and for accessibility.
Whenever you find yourself using huge margins for layout, take a step back. That's not a good approach. Use flexbox or CSS grid to create a structure in which your content resides, and use margin or padding only to crate a bit of space between elements, or between grid containers and content.
Don't put hard widths on the body. That should almost always remain flexible to fit the screen.
body {
padding: 5px 15px 30px 15px;
/* width: 500px; */
height: 250px;
background-image: url('../images/bg2.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.text-center {
text-align: center;
}
.form-control {
margin: 600; /* invalid value */
display: flex;
align-items: center;
justify-content: center;
}
label {
display: block;
}
select,
input {
min-width: 100px;
border: 1px solid #fff;
background: #292942;
color: #fff;
border-radius: 25px;
padding: 5px 10px;
}
.mt10 {
margin-top: 20px;
}
.submit-btn {
background-image: url('https://via.placeholder.com/30');
background-repeat: no-repeat;
background-position: center center;
width: 23px;
height: 23px;
margin-left: 12px;
/* margin-left: 350px; */
}
<body>
<div class="text-center">
<div class="form-control mt10">
<input type="text" id="discord-id-input" name="discord-id-input" placeholder="Discord ID">
<button id="discord-id-button" type="submit" class="submit-btn" />
</div>
</div>
</body>
You could use flexbox, like so (Notice I changed the submit button to an HTML button):
.form-control {
display: flex;
align-items: center;
gap:10px;
}
input {
min-width: 100px;
border: 1px solid #fff;
background: #292942;
color: #fff;
border-radius: 25px;
padding: 5px 10px;
}
.submit {
background-image: url("https://img.icons8.com/material-two-tone/24/000000/arrow.png");
background-repeat: no-repeat;
background-position: center center;
background-color: transparent;
outline: none;
border: none;
width: 23px;
height: 23px;
}
<div class="form-control">
<input type="text" id="discord-id-input" name="discord-id-input" placeholder="Discord ID">
<button id="discord-id-button" type="submit" class="submit">
</button>
</div>
Related
I need to move form input element from left to the center of div element.
I tried to solve this problem by margin: auto and position: relative.
The second way works, but there is a small problem. When I change the size
of the browser window, the input element changes its position. How to avoid it
by solving the first problem at the same time?
Screenshot
#stretch5 {
display: flex;
justify-content: center;
align-items: center;
height: 30em;
background-image: url(img/newsletter.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.frame {
position: relative;
display: inline-block;
height: 25em;
top: 50px;
bottom: 100px;
margin: auto;
width: 100%;
border: 5px solid #fff;
margin-left: auto;
margin-right: auto;
transform: scale(0.8975, 0.8975) translate(-68.5808px, -31.2925px);;
}
.frame h2 {
font-size: 1.4em;
}
.frame input[type=submit] {
padding: 5px 15px;
background: #f7e0cd;
text-transform: uppercase;
border: 0 none;
display: inline-block;
margin: auto;
outline: 0;
cursor: pointer;
width: 2em;
}
<div id="stretch5" class="newsletter-opt-in">
<div class="frame">
<h2>Join our<span class="vip">VIP list</span></h2>
<p class="vip-list-paragraph">For the exclusive tips, free resources and best tips</p>
<form action="#">
<input type="submit" value="SUBSCRIBE">
</form>
</div>
</div>
Try in .frame input to change the element display to flex;. So the button is displayed in the middle of the page even if the page is reduced
.frame input[type=submit] {
padding: 5px 15px;
background: #f7e0cd;
text-transform: uppercase;
border: 0 none;
display: flex;
margin: auto;
outline: 0;
cursor: pointer;
width: 2em;
}
I hope it will solves your problem
Just apply text-align:center to the form.
#stretch5 {
display: flex;
justify-content: center;
align-items: center;
height: 30em;
background-image: url(img/newsletter.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.frame {
height: 25em;
border: 5px solid #fff;
border: 1px solid red;
display: flex;
flex-direction: column;
}
.frame h2 {
font-size: 1.4em;
}
form {
text-align: center;
}
.frame input[type=submit] {
padding: 5px 15px;
background: #f7e0cd;
text-transform: uppercase;
outline: 0;
cursor: pointer;
}
<div id="stretch5" class="newsletter-opt-in">
<div class="frame">
<h2>Join our<span class="vip">VIP list</span></h2>
<p class="vip-list-paragraph">For the exclusive tips, free resources and best tips</p>
<form action="#">
<input type="submit" value="SUBSCRIBE">
</form>
</div>
</div>
I'm new to CSS etc.
I'm trying to align 2 buttons next to each other, in center of the background image, so it stays in position even when the window is being resized.
Image for illustration:
Code:
body {
background-image: url('/image/bgcopy.png'), url(/image/bg2.jpg);
background-repeat: no-repeat, no-repeat;
background-attachment: fixed, fixed;
background-size: contain, cover;
background-position: center;
}
.button {
width: 200px;
height: 70px;
margin: 20px;
text-align: center;
}
.container {
text-align: center;
margin: 0 auto;
}
.button1 {
background-color: transparent;
color: white;
border: 2px solid red;
display: inline-block;
}
.button2 {
background-color: transparent;
color: white;
border: 2px solid red;
display: inline-block;
}
<div class="container">
<button class="button button1">Lang1</button>
<button class="button button2">Lang2</button>
</div>
So, maybe you could try:
.container{
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
Or have you seen anything about flexbox? Since you want it to be responsive, I think it might be the best altenative.
.container {
display: flex;
align-items: center;
justify-content: space-around;
}
Why you creating two classes with same properties? first you can remove properties from classes: button1 and button2 and then add these properties to button class like this:
.button {
width: 200px;
height: 70px;
margin: 20px;
text-align: center;
/* properties from class button1 or button2 */
background-color: transparent;
color: white;
border: 2px solid red;
display: inline-block;
}
And in button1 and button2 class add codes below to center these:
.button1 {
transform: translate(-50%, -50%);
position: absolute;
left: 40%;
top: 50%;
}
.button2 {
transform: translate(-50%, -50%);
position: absolute;
left: 60%;
top: 50%;
}
Don't change HTML code, classes are same.
Add this CSS code and change the top and left values as you need;
.btncenter{
top:50%;
left:40%;
position: absolute;
width:550px;
}
Edit HTML Code look like this;
<div class="btncenter">
<button class="button button1">Lang1</button>
<button class="button button2">Lang2</button>
</div>
Below Final code sample you can view;
body {
background-image: url('/image/bgcopy.png'), url(/image/bg2.jpg);
background-repeat: no-repeat, no-repeat;
background-attachment: fixed, fixed;
background-size: contain, cover;
background-position: center;
}
.button {
width: 200px;
height: 70px;
margin: 20px;
text-align: center;
}
.container {
text-align: center;
margin: 0 auto;
}
.button1 {
background-color: transparent;
color: white;
border: 2px solid red;
display: inline-block;
}
.button2 {
background-color: transparent;
color: white;
border: 2px solid red;
display: inline-block;
}
.btncenter{
top:50%;
left:40%;
position: absolute;
width:550px;
}
<div class="container">
<div class="btncenter">
<button class="button button1">Lang1</button>
<button class="button button2">Lang2</button>
</div>
</div>
I prefer to use #media queries per-width of the screen.
With position : absolute; and just play the top or left value as you need :D
There are multiple ways to do it. The code below will keep the buttons separated from each other until there is no space left. This should give you a start.
You can also use position: fixed if you need a more fixed solution. But I will recommend playing with flex property. It should solve most of the use-cases.
.btn-container {
display: flex;
align-items: center;
justify-content: space-around;
}
button {
background: pink;
color: #fff;
padding: 20px 40px;
}
<div class="btn-container"> <button class="first">Button 1</button><button class="second">Button 1</button></div>
I have a very simple html web page on which I display two buttons whose contents are pictures of text. The buttons have a white background and gold outline. However, they now have a black bar that protrudes from the right side of each button.
The only way I have found to be able to move them is running
<button class="button button2" style="vertical-align:middle"><a href=""><img class="chatbutton" src="img/chatbutton.png" />
where the vertical-align attribute changed if the bar is on the bottom right corner of the button or in the middle of it.
My code is:
.button {
border-radius: 12px;
background: white;
border: 4px solid #FFD500;
text-align: center;
padding: 20px;
margin: auto;
overflow: hidden;
}
.button:hover {
background: #FFD500;
outline: medium none;
}
.button1 {
width: 150px;
height: 75px;
}
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.main {
background-color: white;
background: white;
width: 95%;
margin: 0 auto;
text-align: center;
margin-top: 20px;
padding-top: 40px;
padding-bottom: 20px;
border: 2px solid #494A4A;
border-radius: 25px;
margin-left: auto;
margin-right: auto;
}
#media screen and (min-width: 480px){
.main {
background-color: white;
width: 50%;
margin: 0 auto;
text-align: center;
margin-top: 20px;
padding-top: 40px;
padding-bottom: 20px;
border: 2px solid #494A4A;
border-radius: 25px;
margin-left: auto;
margin-right: auto;
}
}
<body style="background-color:#494A4A">
<div class="outer">
<div class="middle">
<div class="main">
<button class="button button1" ><a href=""><img
class="filebutton" src="" /></button>
</div>
</div>
</div>
</body>
img { border-radius: 60px; box-shadow: 1px 1px 1px rgba(0,0,0,0.5); width: 284px; height: 108px; object-fit: none; object-position: 50% 20%; } // object position can be adjusted to fit your liking
<body>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsuLEXVtGfxNCEOgIKdeIT4ki9LK3JwiGAs0YtuAXJHay8WZhw">
</body>
I would actually make the image a button itself, rather then using a button tag. But you can also use the button tag and style it.
I have a and an on my page. However, I cannot seem to get these buttons to line up.
html
<div class="doubleButtonContainer">
<button class="moreAnswersButton" name="more_answers" onclick="showAllAnswers()">More answer fields...</button>
<input type="submit" class="button" name="submit" value="Finish" />
</div>
css
.moreAnswersButton, .button
{
height: 50px;
width: 125px;
text-align: center;
border-radius: 5px;
padding: 0;
}
.doubleButtonContainer
{
height: 70px;
text-align: center;
width: 325px;
}
JSFiddle Link
Add 'vertical-align' property to your to your buttons.
.moreAnswersButton, .button
{
height: 50px;
width: 125px;
text-align: center;
border-radius: 5px;
padding: 0;
vertical-align: bottom;
}
(the value can be bottom, middle or top. it's your preference)
I am making a login page and I would to position a custom image border to the center underneath the form.
The image is not positioning to the margin-left properly.
Can anyone suggest a solution?
Below is the code:
#import url(http://fonts.googleapis.com/css?family=Droid+Sans);
#import url(http://fonts.googleapis.com/css?family=Roboto);
* {
text-align: center;
}
img {
z-index: -1;
width: 350px;
height: 200px;
margin-top: 200px;
background-size: cover;
position: absolute;
}
body {
background-color: #ecf0f1;
}
#username {
margin-top: 250px;
margin-bottom: inherit;
margin-right: inherit;
width: 250px;
height: 35px;
font-size: 20px;
font-family: 'Droid Sans', serif;
border: 0px solid;
background-color: transparent;
}
#username:focus {
outline: none;
}
#password {
margin-top: 5px;
margin-bottom: inherit;
margin-right: inherit;
width: 250px;
height: 35px;
font-size: 20px;
font-family: 'Droid Sans', serif;
border: 0px solid;
background-color: transparent;
}
#password:focus {
outline: none;
}
#submit {
margin-top: 35px;
border: 0;
background: url(submit1.png);
background-repeat: no-repeat;
width: 200px;
height: 50px;
border: 0;
}
#submit:focus {
outline: none;
}
#submit:hover {
background-image: url(submit2.png);
}
#footer {
clear: both;
position: relative;
z-index: 5;
margin-top: 17em;
background-color: transparent;
font-family: 'Roboto', serif;
color: #bdc3c7;
height: 20px;
font-size: 10px;
}
<div id="main">
<div id="login">
<form action="Scripts/xxx.php">
<img src="border_transparent.png">
<input id="username" type="text" name="username" placeholder="Enter Username" />
<br>
<input id="password" type="password" name="password" placeholder="Enter Secret Password" />
<br>
<button id="submit" value="" />
</form>
</div>
</div>
<div id="container">
<div id="content"></div>
</div>
<div id="footer">© Project Blackhat Operatives 2015</div>
This is currently how my page looks: http://s7.postimg.org/vvfi8m1uj/Screen_Shot_2015_01_11_at_7_07_21_PM.png
This is what I am trying for the page to look like: http://s11.postimg.org/avy2caylv/Screen_Shot_2015_01_11_at_7_09_01_PM.png
It is centered, the issue is the background image behind it that you are absolute positioning. That isn't centered, you can add left: 50% and a negative margin to bring it back to the center (left positions it from the corner not the center):
img {
z-index: -1;
width: 350px;
height: 200px;
background-size: cover;
position:absolute;
left: 50%; //add
margin: 200px 0 0 -175px; //add
}
FIDDLE
What you should be doing though is adding that image as a background-image to either your form or #login containers. Positioning an img tag is not a great way of handling this.
Try
#submit:hover {
background-image: url("submit2.png");
}
Need quotes/double quotes.