I'm designing an online clothing store, and on the product's page I want the product info (on the right) to align with the center of the image (on the left) while both of the divs are centered with the page. However, it seems that no matter what I do, the product info is always pushed down to the bottom corner of the image. It works when the image is removed completely, but unless that happens no formatting in CSS will affect the product-info div.
I've tried floating the elements to the left but that negates the text-align that keeps them centered, and any padding, margin, or dimension changes I make to the product-info only adds to the bottom of the div rather than shifting it up. There's probably something obvious that I'm overlooking, but I've been working on this problem for so long and just can't seem to find a fix.
Can someone please help me?
> Screenshot of how it looks <
* {
margin: 0px;
padding: 0px;
}
.product {
text-align: center;
}
.product-view {
top: 40px;
padding: 10px;
margin: 10px;
display: inline-block;
}
#product-image {
width: 400px;
height: 40%;
min-width: 40%;
min-height: 40%;
padding: 20px;
}
.product-info {
display: inline-block;
padding: 10px;
margin: 10px;
}
#product-name {
font-size: 25px;
text-transform: uppercase;
text-align: left;
}
#product-price {
font-size: 20px;
padding: 20px 0px;
text-align: left;
}
.product-info hr {
width: 278px;
opacity: 0.4;
}
#product-sizes {
padding: 5px;
text-align: center;
text-transform: uppercase;
width: fit-content;
}
#size-radio-btn {
display: inline-block;
width: 40px;
height: 40px;
text-align: center;
font-size: 15px;
border: 1px solid black;
margin: 5px 10px;
margin-left: 5px;
margin-right: 5px;
line-height: 40px;
color: black;
cursor: pointer;
}
#add-to-cart {
width: 278px;
height: 40px;
margin: 0 5px;
cursor: pointer;
background-color: black;
color: white;
text-transform: uppercase;
font-size: 15px;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="content">
<div class="product">
<div class="product-view">
<img id="product-image" src="/Media/hoodieblack.png">
</div>
<div class="product-info">
<div id="product-name">
<h3>Hoodie - Black</h3>
</div>
<div id="product-price">
<p>$80.00</p>
</div>
<hr>
<div id="product-sizes">
<label for="size-select">Size</label>
<div id="size-select">
<input type="radio" name="size" value="s" hidden id="s-size">
<label for="s-size" id="size-radio-btn">S</label>
<input type="radio" name="size" value="m" hidden id="m-size">
<label for="m-size" id="size-radio-btn">M</label>
<input type="radio" name="size" value="l" hidden id="l-size">
<label for="l-size" id="size-radio-btn">L</label>
<input type="radio" name="size" value="xl" hidden id="xl-size">
<label for="xl-size" id="size-radio-btn">XL</label>
<input type="radio" name="size" value="xxl" hidden id="xxl-size">
<label for="xxl-size" id="size-radio-btn">XXL</label>
</div>
</div>
<button type="button" id="add-to-cart">Add to Cart</button>
</div>
</div>
</div>
</body>
</html>
Simply add display: flex; to the main parent, in this case, .product. Then you can use align-items: center; to get them in line with one another.
You can also add max-width: 100%; to the image so it resizes accordingly.
* {
margin: 0px;
padding: 0px;
}
.product {
text-align: center;
}
.product-view {
top: 40px;
padding: 10px;
margin: 10px;
display: inline-block;
}
#product-image {
width: 400px;
height: 40%;
min-width: 40%;
min-height: 40%;
padding: 20px;
}
.product-info {
display: inline-block;
padding: 10px;
margin: 10px;
}
#product-name {
font-size: 25px;
text-transform: uppercase;
text-align: left;
}
#product-price {
font-size: 20px;
padding: 20px 0px;
text-align: left;
}
.product-info hr {
width: 278px;
opacity: 0.4;
}
#product-sizes {
padding: 5px;
text-align: center;
text-transform: uppercase;
width: fit-content;
}
#size-radio-btn {
display: inline-block;
width: 40px;
height: 40px;
text-align: center;
font-size: 15px;
border: 1px solid black;
margin: 5px 10px;
margin-left: 5px;
margin-right: 5px;
line-height: 40px;
color: black;
cursor: pointer;
}
#add-to-cart {
width: 278px;
height: 40px;
margin: 0 5px;
cursor: pointer;
background-color: black;
color: white;
text-transform: uppercase;
font-size: 15px;
}
.product {
display: flex;
align-items: center;
justify-content: center;
}
#product-image {
max-width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="content">
<div class="product">
<div class="product-view">
<img id="product-image" src="https://dummyimage.com/800/000/fff">
</div>
<div class="product-info">
<div id="product-name">
<h3>Hoodie - Black</h3>
</div>
<div id="product-price">
<p>$80.00</p>
</div>
<hr>
<div id="product-sizes">
<label for="size-select">Size</label>
<div id="size-select">
<input type="radio" name="size" value="s" hidden id="s-size">
<label for="s-size" id="size-radio-btn">S</label>
<input type="radio" name="size" value="m" hidden id="m-size">
<label for="m-size" id="size-radio-btn">M</label>
<input type="radio" name="size" value="l" hidden id="l-size">
<label for="l-size" id="size-radio-btn">L</label>
<input type="radio" name="size" value="xl" hidden id="xl-size">
<label for="xl-size" id="size-radio-btn">XL</label>
<input type="radio" name="size" value="xxl" hidden id="xxl-size">
<label for="xxl-size" id="size-radio-btn">XXL</label>
</div>
</div>
<button type="button" id="add-to-cart">Add to Cart</button>
</div>
</div>
</div>
</body>
</html>
Related
I recently received some help to fix an issue with my footer being in the middle of the page (much much appreciated!) but it looks like I have another issue - the photo in my header (supposed to be centered and fixed) is now more to the left and moves when I scroll the page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset= "utf-8">
<Title>Contact</Title>
<link rel="stylesheet" href="contact3.css">
</head>
<body>
<header>
<nav>
<ul>
<!-- list item one -->
<li>
Home
</li>
<!-- list item two -->
<li>
About
</li>
<!-- list item three -->
<li>
Services
</li>
<!-- list item four -->
<li>
Contact
</li>
</ul>
</nav>
<img src="CG1.svg" alt-text="Collision Guru Logo" width=250px height=80px class="center">
</header>
<h1> Contact Us</h1><div class="form-container">
<div class="form-container">
<img src="yellow car headlight collision.jpg" width=450px height=400px class="carimg">
<form action="C:\Users\elizabeth.sweeney\Downloads\form_data.php" method="post">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"> <br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br>
<label for="phone">Phone:</label><br>
<input type="phone" id="phone" name="phone">
<br>
<input type="checkbox" id="option1" name="option1" value="Paint">
<label for="option1"> Paint Job</label><br>
<input type="checkbox" id="option2" name="option2" value="Body">
<label for="option2"> Body Work</label><br>
<input type="checkbox" id="option3" name="option3" value="Clean">
<label for="option3"> Cleaning</label><br>
<div class="submitbutton">
<input type="submit" value="Submit"></div>
</form>
</div>
<footer>
<nav>
<div class="contactinfo">
440-555-6893 • mike.tarescavage#gmail.com
</div>
<div class="sociallinks">
<img src= "facebook-icon.png" width=30px height=30px> <img src= "IG-icon-2.png" width=30px height=30px>
</div>
</nav>
</footer>
</body>
</html>
CSS:
body {
margin: 0;
background: #ffffff;
font-family: century gothic;
font-size: 18px;
text-align: center;
padding-bottom: 40px;
}
header {
background: #000000;
height: 125px;
color: #ffffff;
}
a{
color: #ffffff;
text-decoration: none;
}
ul{
margin: 0;
padding: 0px;
/*this option by default dispose the elements in a row (flex-direction: row)*/
display: flex;
}
li{
list-style-type: none;
/*when I specify 2 values to margin, the first one is for the top and bottom side, the second for the left and right side*/
margin: 0 1vw;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
width: 50%;
top: 20px;
position: fixed;
}
h1 {
text-align: center;
font-family: century gothic;
font-size: 60px;
font-weight: bold;
color: #000000;
}
.form-container {
overflow: hidden;
}
form
{
float: right;
margin-right: 75px;
text-align: left;
display: inline-block;
}
input[type=text], select {
width: 100%;
text-align:left;
padding: 12px 20px;
margin: 8px 0;
margin-left: 30px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-right: 50px;
}
input[type=email], select {
width: 100%;
text-align:left;
padding: 12px 20px;
margin: 8px 0;
margin-left: 30px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-right: 50px;
}
input[type=phone], select {
width: 100%;
text-align:left;
padding: 12px 20px;
margin: 8px 0;
margin-left: 30px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-right: 50px;
}
input[type=checkbox] {
text-align: left;
display: in-line block;
margin-left: 30px;
}
.submitbutton {
text-align: center;
padding-left: 80px;
display: block;
}
input[type=submit] {
width: 75%;
margin-left: 30px;
background-color: #000000;
color: white;
padding: 12px 20px;
padding-left: 30px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
display: in-line block;
}
.carimg {
float: left;
margin-left: 50px;
padding-bottom: 90px;
}
footer {
background: #000000;
height: 125px;
color: #ffffff;
}
.footerlinks {
float: left;
word-spacing: 30px;
text-align: left;
padding-top: 50px;
margin-left: 20px;
}
.contactinfo {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
text-align: center;
padding-top: 50px;
}
.sociallinks {
float: right;
margin-right: 40px;
word-spacing: 20px;
}
This happened after adding the form-container class - not sure if that has anything to do with it, or perhaps another step needs to be taken with the photo? Or is it's completely unrelated.
Please let me know your thoughts.
Thanks! :)
If you want your logo to stay fixed in the top center on scroll, then update the css to be:
.center {
display: block;
margin-bottom: 20px;
width: 50%;
top: 20px;
left: 50%;
transform: translateX(-50%);
position: fixed;
}
But if you want it to only be centered on your header, then you just need to remove the "center" class form the logo.
You have display: fixed; applied to your .center class which is causing your img element in the header to move with the scrollbar. Removing the class="center" attribute from the img element solves the scrolling issue but now your image is positioned slightly to the right of where it was.
Trying to figure out how to align some buttons to some input fields and it's tricky as hell. I couldn't figure it out.
I've found a lot of things online:
Align button to input with float?
Align button with input forms with labels
Make form button/text field same height in all browsers?
I know I will get a lot of minuses but I just can't get my head around this and I need help.
I've lost a whole day modifying values and I have no clue on how to position things in CSS. I can't understand it.
.big-box {
position: absolute;
width: 60%;
top: 40%;
left: 50%;
text-align: left;
transform: translate(-50%, -50%);
text-align: center;
}
.box-head {
width: 100%;
display: grid;
border-bottom: 6px solid red;
margin-bottom: 50px;
margin-top: 40px;
text-align: center;
}
.textbox {
display: block;
float: left;
width: 75%;
overflow: hidden;
font-size: 20px;
padding: 5px 0;
margin: 10px 0;
border-bottom: 1px solid red;
}
.textbox input {
border: none;
outline: none;
background: none;
color: white;
font-size: 18px;
width: 97%;
float: left;
margin: 5px 5px;
}
#button {
display: grid;
width: 25%;
background: none;
border: 2px solid red;
color: white;
padding: 5px;
font-size: 18px;
cursor: pointer;
}
<div id="logo"><img url="logo.png"></div>
<div class="big-box">
<div class="box-head">
<div class="title">
<h1>Configuration Page</h1>
</div>
</div>
<form method="post" action="/url" onSubmit="return saveValue();">
<div class="textbox">
<input type="url" placeholder="Enter URL" name="getURL" value="">
</div>
<input id="button" type="submit" value="Enter">
<div class="textbox">
<input type="number" placeholder="Brightness" name="getBrightness" value="">
</div>
<input id="button" type="submit" value="Enter">
</form>
</div>
EDIT: This is how I've fixed it:
I've changed from class to ID: #textbox;
I've put #textbox and #button inside div: #box-box;
I've added display: flex; to #box-box and display: grid; to
both #textbox and #button.
Added margin-left: 25px; to #button;
Here is the result.
Thanks #Flavio Caruso for the inspiration.
<body>
<div id = "logo"><img url="logo.png"></div>
<div class = "big-box">
<div class = "box-head">
<div class = "title"><h1>Configuration Page</h1></div>
</div>
<form method="post" action="/url">
<div id="box-box">
<div id = "textbox" >
<input type="url" placeholder="Enter URL" name="getURL" value="">
</div>
<input id ="button" type="submit" value="Enter">
</div>
<div id="box-box">
<div id = "textbox" >
<input type="url" placeholder="Enter URL" name="getURL" value="">
</div>
<input id ="button" type="submit" value="Enter">
</div>
<div id="box-box">
<div id = "textbox" >
<input type="url" placeholder="Enter URL" name="getURL" value="">
</div>
<input id ="button" type="submit" value="Enter">
</div>
</form>
</div>
</body>
#logo {
width: 94%;
height: 50px;
background: url(logo.png) left no-repeat;
background-size:contain;
margin: 30px auto;
}
**#box-box {
display:flex;
}**
#textbox {
**display: grid;**
width: 70%;
overflow: hidden;
font-size: 20px;
padding 10px 0;
margin: 10px 0;
border-bottom: 1px solid red;
}
#textbox input {
border: none;
outline: none;
background: none;
color: white;
font-size: 18px;
width: 97%;
float: left;
margin: 5px 5px;
}
#button {
**display: grid;**
width: 25%;
background: none;
border: 2px solid red;
color: white;
padding: 5px;
font-size: 18px;
cursor: pointer;
margin: 10px 0;
**margin-left: 25px;**
margin-top: 30px;
}
There is a few changes you have to do, you must insert the input button inside the div class 'textbox' and add a display:flex, then you ajust the css from button to inline-block and float right.
like that:
.big-box {
position: absolute;
width: 60%;
top: 40%;
left: 50%;
text-align: left;
transform: translate(-50%, -50%);
text-align: center;
}
.box-head {
width: 100%;
display: grid;
border-bottom: 6px solid red;
margin-bottom: 50px;
margin-top: 40px;
text-align: center;
}
.textbox {
display: flex;
float: left;
width: 75%;
overflow: hidden;
font-size: 20px;
padding: 5px 0;
margin: 10px 0;
border-bottom: 1px solid red;
}
.textbox input {
border: none;
outline: none;
background: none;
color: white;
font-size: 18px;
width: 97%;
margin: 5px 5px;
}
#button {
display: inline-block;
float: right;
width: 25%;
background: none;
border: 2px solid red;
color: white;
padding: 5px;
font-size: 18px;
cursor: pointer;
}
<body>
<div id = "logo"><img url="logo.png"></div>
<div class = "big-box">
<div class = "box-head">
<div class = "title"><h1>Configuration Page</h1></div>
</div>
<form method="post" action="/url" onSubmit="return saveValue();">
<div class = "textbox" >
<input type="url" placeholder="Enter URL" name="getURL" value="">
<input id ="button" type="submit" value="Enter">
</div>
<div class = "textbox" >
<input type="number" placeholder="Brightness" name="getBrightness" value="">
<input id ="button" type="submit" value="Enter">
</div>
</form>
</div>
</body>
So here is my box:
BOX
Ok, now I want to add box near the input of the BET box.
<div id="x2"></div> <!-- HTML --->
/* CSS */
#x2{
width: 40px;
height: 40px;
background: cornflowerblue;
}
The box after I add it:
BOX-AFTER
As you can see, it messed up the thin gray line and everything underneath it. I'm really not sure why.
HTML:
<div class="gamebox">
<div id="bet-and-chance-texts">
<p id="bettext">BET</p>
<p id="profittext"><i class="fa fa-btc" aria-hidden="true"></i> PROFIT</p>
</div>
<div id="bet-and-chance-input-boxes">
<input class="default" id="userbet" onkeyup="checkBet()" value="0.00000000" placeholder="BTC" name="bet" autocomplete="off">
<div id="x2">x2</div>
<input readonly class="default" id="profitinput" onkeyup="" value="100" placeholder="BTC" name="bet" autocomplete="off">
</div>
<br>
<div class="line-separator"></div>
<div id="button-texts">
<p id="roll">ROLL UNDER</p>
<p id="payout">PAYOUT</p>
<p id="chance">CHANCE</p>
</div>
<div id="buttons">
<input class="hidden-boxed-input-roll" value = "50.00"/>
<input autocomplete="off" id="newpayout" onkeyup="calculateChance()" class="hidden-boxed-input" value = "2.000"/>
<input autocomplete="off" id="newchance" onkeyup="checkChance()" class="hidden-boxed-input" value = "50"/>
</div>
<br>
<div id="rolldice-section">
<button type="button" id="dicebutton" onclick="prepareRoll(authToken);" style="vertical-align:middle"><i class="fa fa-gamepad"></i> Roll dice</button>
</div>
</div>
CSS:
.gamebox {
height: auto;
padding: 20px;
width: 60%;
font-family: Helvetica Neue;
color: black;
margin-top: 20px;
margin-left: 20px;
background-color: white;
}
.line-separator{
height:.5px;
background: lightgray;
border-bottom:.5px solid lightgray;
}
#x2{
width: 40px;
height: 40px;
background: cornflowerblue;
float: left;
}
input[class="default"]{
padding: 12px 20px;
margin : 0 auto;
box-sizing: border-box;
text-align: center;
background-color: #E4ECF1;
display: inline-block;
}
p[id="roll"]{
display: inline-block;
float: left;
font-size: 13px;
}
p[id="payout"]{
display: inline-block;
margin-right: 25px;
font-size: 13px;
}
p[id="chance"]{
display: inline-block;
float: right;
font-size: 13px;
}
div[id=button-texts]{
text-align: center;
}
Why does everything below the thin gray line get messed up? How can I solve this?
Change this :
<div id="x2">x2</div>
to :
<span id="x2">x2</span>
since div have block display and you need to use span which is inline
then change your style, remove float and add some padding to #x2 :
#x2 {
padding: 13px;
width: 40px;
height: 40px;
background: cornflowerblue;
}
I have a Problem with a textarea in some div-blocks. It just will not accept the full width of the block, no matter what I do. I tried giving it a fixed 100% width, I tried giving it many more cols, I tried increasing the size manually in the browser, it just will not fill the complete container and I don't get why. It acts, as if there is an invisible col on the right of it, but there isn't.
**Note:**The text part (testwethsfjg.....) before the textarea is just to see if the text would be bound on the same boundaries as the textarea.
Maybe someone got an idea of what the problem could be. Help would be appreciated.
CODE
.comment-box {
padding-top: 20px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 20px;
margin-left: 200px;
margin-right: 200px;
background-color: #e9dac6;
border-radius: 25px;
border: 3px solid green;
}
.comment-box-empty {
margin-bottom: 20px;
background-color: white;
border-radius: 25px;
border: 1px solid black;
}
.comment-box-full {
margin-top: 20px;
margin-bottom: 0px;
margin-left: 30px;
margin-right: 30px;
background-color: white;
border-radius: 25px;
border: 1px solid black;
}
.comment-box-top {
margin: auto;
padding-left: 15px;
padding-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
background-color: #faebd7;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border: none;
width: 100%;
height: 100%;
}
.comment-box-top-text {
font-size: 19px;
font-weight: bold;
line-height: 1;
width: auto;
height: auto;
display: inline;
}
.comment-box-content {
padding-left: 15px;
padding-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
border: none;
width: 100%;
}
.comment-box-content-text {
text-align: justify;
font-size: 17px;
font-weight: 400;
line-height: 1.25;
}
<div class="comment-box">
<div class="comment-box-empty">
<form id="usr_comment">
<div class="comment-box-top">
<div class="comment-box-top-text">
<label for="name">Name:</label>
<input type="text" size="10" name="name" />
<label for="email">Email:</label>
<input type="email" size="15" name="email" />
<br />
<input type="checkbox" name="show_mail" value="showmail" checked />
<label for="show_mail">E-Mail für alle Sichtbar anzeigen?</label>
<br />
</div>
</div>
<div class="comment-box-content">
testwethsfjggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
<br />
<textarea></textarea>
<br />
<br />
<button type="submit" class="btn btn-primary btn-sm">Post</button>
</div>
</form>
</div>
#{ foreach (var comment in ViewBag.rb1.CommentList) { if (ViewBag.rb1count > 0) {
<div class="comment-box-full">
<div class="comment-box-top">
<div class="comment-box-top-text">
#comment.Name #comment.Email
</div>
</div>
<div class="comment-box-content">
<div class="comment-box-content-text">
#comment.Content
</div>
</div>
</div>
} } }
</div>
Screenshot of max width of textarea
you need to give width:100% to textarea, and if not yet, reset margin/padding, and to stop re-sizing the width I could use resize:none or resize:vertical depending on your case
here is a sample:
div {
width: 500px;
border: red solid;
box-sizing: border-box;
padding: 5px;
}
textarea {
width: 100%;
margin: 0;
padding: 0;
resize:vertical
}
<div>
<textarea></textarea>
</div>
Actually you can set the width to your textarea, but once the user changes it manually, the css won't work anymore, so you can add a resize:none to ensure the width of the textarea
textarea {
resize: none;
width: 90%;
}
I have the following HTML:
<div class="dispLoginSearch" style="text-align: left; overflow: hidden;"> <!-- LOGIN AND SEARCH -->
<div class="theLoginBox" style="clear: both;">
<div class="loginTitle">
Log in to <span style="font-family: 'blackjarregular'; font-size: 14pt; color: #FE7816;">My</span> <span style="font-family: 'trajanpro'; font-size: 12pt; color: #00529B;">WD</span> | Sign Up
<br />
<input type="text" value="Username" /> <input type="password" value="Password" /> <input type="button" value="Go" />
<br />
<span style="float: right;">Forgot login/password</span>
</div>
</div>
<div style="z-index: 99999999999;">
<input type="text" value="Search WD" />
</div>
</div> <!-- LOGIN AND SEARCH -->
CSS:
.dispLoginSearch
{
width: 47%;
height: 150px;
line-height: 150px;
vertical-align: middle;
float: right;
padding-right: 2%;
background: #FFFFFF;
border: 1px solid #0026ff;
}
.theLoginBox
{
border: 2px solid #D5D5D5;
border-radius: 4px;
width: 97%;
height: 90px;
padding: 10px;
white-space: nowrap;
background: #ff6a00;
}
.loginTitle
{
height: 88px;
display: block;
vertical-align: top;
white-space: nowrap;
font-weight: bold;
text-align: left;
background: #b6ff00;
}
When I view the website, I see the following:
What I would like it be shown:
How do I fix the issue? It is happening in both IE and other browsers.
UPDATE:
I added overflow: auto in the loginTitle class and this is what is shown:
Each section is taking up a lot of space and showing the scrollbar :/
This is because of line 5 of your CSS : line-height: 150px;.
Just remove it and you should be fine.
If you want it to look like image you attached, see here: http://codepen.io/anon/pen/FothH
html:
<form action="#">
<p>Log in to ###### | Sign up</p>
<input type="text" placeholder="Username"/>
<input type="password" placeholder="Password"/>
<input type="submit" value="Go"/>
Forgot login/password
</form>
css:
form {
border: 1px solid #d4d4d4;
display: block;
width: 375px;
font: 16px sans-serif;
padding: 0 0 0 15px;
border-radius: 5px;
-webkit-font-smoothing: antialiased;
}
form p {
margin: 5px 0 0;
font-size: 20px;
line-height: 35px;
}
input {
display: inline-block;
border-radius: 7px;
}
input[type=text], input[type=password] {
border: none;
background: #ebebeb;
font-size: 16px;
padding: 6px 10px;
width: 180px;
}
input[type=password] {
width: 120px;
}
input[type=submit] {
font-size: 16px;
width: 25px;
padding: 5px 0px;
background: none;
color: red;
border: none;
}
form a {
display: block;
line-height: 25px;
text-align: right;
margin-right: 30px;
color: #d4d4d4;
text-decoration: none;
margin-bottom: 5px;
}