I'm currently cloning a site and in the "enter email" input, the text wont align and sticks to the bottom of the input, and i'd prefer it to be in the middle on the left. How can i fix this? any help appreciated <3
#import url("https://fonts.googleapis.com/css2?family=Inter:wght#400;500;700&display=swap");
:root {
--primary-text: #111111;
--secondary-text: #91908f;
--background: #fffefc;
--btn-primary: #e16259;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--b);
font-family: "Inter", sans-serif;
}
/* NAV */
header img {
float: left;
max-width: 100%;
height: 50px;
margin: 15px 60px;
}
header nav {
float: right;
margin-top: 30px;
padding-right: 20px;
}
header nav a,
header nav .vertical-line {
padding-right: 15px;
text-decoration: none;
color: #111111;
font-weight: 500;
}
header nav a:hover {
text-decoration: underline;
}
/* Hero Section */
.hero {
padding-top: 120px;
}
.hero-img {
display: flex;
justify-content: center;
max-width: 100%;
height: 200px;
}
h1 {
font-size: 70px;
text-align: center;
padding-top: 15px;
}
h4 {
text-align: center;
font-weight: 200;
font-size: 20px;
color: #91908f;
}
form {
display: flex;
justify-content: center;
}
input {
text-align: left;
width: 280px;
margin-top: 30px;
padding-top: 18px;
border: 1px solid #91908f;
border-radius: 4px;
margin-right: 10px;
}
input::placeholder {
margin-bottom: 20px;
}
form button {
width: 80px;
padding: 0px;
text-align: center;
margin-top: 30px;
color: #fffefc;
}
form label {
margin-top: 5px;
padding-left: 20px;
}
form .btn-primary {
display: inline-block;
background-color: #e16259;
border: 1px solid #af4d46;
text-align: center;
border-radius: 6px;
font-weight: 400;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notion</title>
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
</head>
<body>
<header>
<img src="img/logo.png" alt="Notion Logo">
<nav>
Product
Download
Resources
Pricing
Careers
<span class="vertical-line">|</span>
Sign Up
Log In
</nav>
</header>
<div class="hero">
<div class="hero-img">
<img src="img/hero.webp" alt="Illustration of 3 people using laptop computers on seperate desks with different expressions">
</div>
<h1>All-in-one workspace</h1>
<h4>One tool for your whole team. Write, plan, and get organized.</h4>
<form action="">
<input type="text" placeholder="Email">
<button class='btn-primary' type="submit">Sign Up</button>
</form>
<p>For teams & individuals - web, mobile, Mac, Windows</p>
</div>
</body>
</html>
In input selector you can change the padding-top: 18px to padding: 10px, as below. Then remove that input::placeholder.
input {
width: 280px;
margin-top: 30px;
padding: 10px;
border: 1px solid #91908f;
border-radius: 4px;
margin-right: 10px;
}
<form action="">
<input type="text" placeholder="Email">
</form>
You can remove padding of input and adjust by using height and line height
.ip {
height: 30px;
line-height: 30px;
padding: 2px 8px;
}
<input type="text" class="ip" />
Define height for the input class and for input::placeholder remove margin-bottom: 20px; and set margin to auto and also add some left-padding.
input {
text-align: left;
width: 280px;
height: 40px;/*add height for your input*/
margin-top: 30px;
border: 1px solid #91908f;
border-radius: 4px;
margin-right: 10px;
}
input::placeholder {
margin: auto;/*set margin to auto*/
padding-left: 10px;/*add some left-padding*/
}
<form action="">
<input type="text" placeholder="Email">
<button class='btn-primary' type="submit">Sign Up</button>
</form>
Instead of scratching your head around custom CSS, you can use third party CSS libraries like Bootstrap or Semantic-UI which provide a variety of feature rich CSS components and will eventually reduce your work.
Related
I want my website to be responsive and adjust to any device. I'm using glitch.com to create this website. For example on mac os, when I set my website to full screen there is a scrolling bar even thought I don't want there to be one. How can I achieve a responsive website? I've tried scaling my website down when on different devices but it wont work. Also, I provided some images and code below (including my website).
Website:
https://runturtle.glitch.me/
Code:
#import url("https://fonts.googleapis.com/css2?family=Rubik&display=swap");
#fname {
margin-bottom: 10px;
}
h1 {
font-weight: bold;
color: #dde6d8;
}
* {
font-family: "Rubik";
user-select: none;
}
form {
margin: auto;
}
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: #a0a0a0;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type="number"] {
-moz-appearance: textfield;
}
h1 {
align-items: center;
}
h3 {
color: #dde6d8;
}
input {
margin: 0 auto;
border: none;
color: black;
background-color: rgb(white);
width: 50%;
height: 15px;
outline: none;
padding: 9px 10px;
border-radius: 4px;
}
button {
color: #183505;
border: none;
cursor: pointer;
padding: 5px 10px;
background-color: #4d7135;
outline: none;
border-radius: 4px;
}
button:hover {
opacity: 0.8;
}
button:active {
cursor: loading;
}
body {
margin: 0;
padding: 0;
background: #1f2f15;
font-family: ubuntu;
color: white;
}
header {
display: flex;
align-items: center;
background: #486b2c;
}
header img {
width: 50px;
background: white;
border-radius: 5px;
margin: 0 20px 0 40px;
}
.dashboard {
width: 150px;
height: 800px;
position: absolute;
left: 10px;
top: 81px;
}
.home {
opacity: 1;
width: 150px;
}
article {
background: #131b0b;
width: 50%;
margin: 20px auto;
border-radius: 10px;
padding: 10px;
}
hr,
article .date {
color: #a0a0a0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Run Turtle</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<img
src="https://cdn.glitch.com/1c916b3c-8432-490c-9650-264f03c95b9e%2Frss-icon.png?v=1630185994030"
width="50px"
/>
<h1><strong>Run Turtle</strong></h1>
</header>
<main>
<article class="dashboard">
<h1>Dashboard</h1>
<hr />
<button
onClick="window.location.href='https://runturtle.glitch.me';"
class="home"
>
Home
</button>
<br />
<br />
<button
onClick="window.location.href='register.html';"
class="register"
>
Register
</button>
</article>
<article>
<h1>Welcome to Run Turtle</h1>
<hr />
<p>
Welcome to Run Turtle. Navigate Run Turtle with the dashboared on the
left.
</p>
</article>
</main>
<script src="index.js"></script>
</body>
</html>
Here's an image of when the browser is resized:
You can use the Bootstrap Grid System for a responsive website. The layout is in the form of rows and columns that can be adjusted depending on the device size.
Here's the documentation link.
Personally, I like AMP (Accelerated Mobile Pages.) I myself use it for my site and it works good with page layouts.
AMP has a page on how to set up your HTML document to make a responsive mobile page. Here is the article
I suggest you to follow #media rule. CSS Grid Layout Module will help you to solve the arisen problem. For an example I have put a solution code.
screenshot_1 screenshot_2
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
header {
display: flex;
align-items: center;
background: #486b2c;
}
header img {
width: 50px;
background: white;
border-radius: 5px;
margin: 0 20px 0 40px;
}
.menu {
float: left;
width: 25%;
text-align: center;
}
.menu article {
background-color: #1f2215;
padding: 8px;
height: 800px;
margin-top: 7px;
display: block;
width: 100%;
color: black;
}
input {
margin: 0 auto;
border: none;
color: black;
width: 50%;
height: 15px;
outline: none;
padding: 9px 10px;
border-radius: 4px;
}
button {
color: #183505;
border: none;
cursor: pointer;
padding: 5px 10px;
background-color: #4d7135;
outline: none;
border-radius: 4px;
}
button:hover {
opacity: 0.8;
}
button:active {
cursor: loading;
}
body {
margin: 0;
padding: 0;
background: #1f2f15;
font-family: ubuntu;
color: white;
}
.main {
float: left;
width: 60%;
padding: 0 20px;
}
h1 {
font-weight: bold;
color: #dde6d8;
}
#media only screen and (max-width: 620px) {
.menu,
.main {
width: 100%;
}
.menu {
height: 200px;
}
.main {
background: #1f2f15;
height: 600px;
}
}
</style>
</head>
<body style="font-family:Verdana;">
<div>
<header>
<img src="https://cdn.glitch.com/1c916b3c-8432-490c-9650-264f03c95b9e%2Frss-icon.png?v=1630185994030"
width="50px" />
<h1><strong>Run Turtle</strong></h1>
</header>
</div>
<div>
<div class="menu">
<article>
<h1>Dashboard</h1>
<hr />
<button>
Home
</button>
<br />
<br />
<button>
Register
</button>
</article>
</div>
<div class="main">
<h1>Welcome to Run Turtle</h1>
<hr />
<p>
Welcome to Run Turtle. Navigate Run Turtle with the dashboared on the
left.
</p>
</div>
</div>
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.
I'm trying to re-create Google's home page to try and improve my very basic skills. I'm trying to apply word spacing to the links in the navbar (Gmail & Images) but I can't get it to work. Can anyone point out where I'm going wrong?
I've just realised list-style-type: none; hasn't altered anything either.
html {
width: 100%;
padding: 0;
margin: 0;
}
.mainSection {
text-align: center;
margin-top: 10%;
}
input {
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 1%;
border: none;
padding: 10px;
width: 500px;
border: 1px solid lightgray;
outline: none;
font-size: 20px;
font-weight: lighter;
box-shadow: 0px 0px 18px -1px rgba(166, 166, 166, 0.93);
}
button {
outline: none;
margin-top: 3%;
display: inline-block;
width: 150px;
height: 35px;
border: 1px solid #eaeaea;
outline: none;
background-color: #f2f2f2;
color: #636363;
font-weight: bold;
}
.divider {
width: 10px;
display: inline-block;
}
.nav-wrapper {
margin: 0;
padding: 0;
overflow: hidden;
}
.nav-wrapper a {
float: right;
list-style-type: none;
word-spacing: 30px;
}
<nav>
<div class="nav-wrapper">
Gmail
<div class="dividerTwo"></div>
Images
<!-- Add sign-in button here -->
</ul>
</div>
</nav>
<main>
<div class="mainSection">
<img id="googleImg" src="googlemain.png" alt="Google" draggable="false">
<div id="search">
<input type="text">
<button id="Search" href="#">Google Search</button>
<div class="divider"></div>
<button id="Lucky" href="#">I'm Feeling Lucky</button>
</div>
</div>
</main>
padding-left would work fine.
.nav-wrapper a {
float: right;
order:1;
text-decoration:none;
padding-left:10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Google</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
width: 100%;
padding: 0;
margin: 0;
}
.mainSection {
text-align: center;
margin-top: 10%;
}
input {
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 1%;
border: none;
padding: 10px;
width: 500px;
border:1px solid lightgray;
outline:none;
font-size: 20px;
font-weight: lighter;
box-shadow: 0px 0px 18px -1px rgba(166,166,166,0.93);
}
button {
outline: none;
margin-top: 3%;
display: inline-block;
width: 150px;
height: 35px;
border: 1px solid #eaeaea;
outline: none;
background-color: #f2f2f2;
color: #636363;
font-weight:bold;
}
.divider {
width:10px;
display: inline-block;
}
.nav-wrapper {
margin: 0;
padding: 0;
overflow: hidden;
}
.nav-wrapper a {
float: right;
order:1;
text-decoration:none;
padding-left:10px;
}
</style>
</head>
<body>
<nav>
<div class="nav-wrapper">
<ul>
Gmail
<div class="dividerTwo"></div>
Images
<!-- Add sign-in button here -->
</ul>
</div>
</nav>
<main>
<div class="mainSection">
<img id="googleImg" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google" draggable="false">
<div id="search">
<input type="text">
<button id="Search" href="#">Google Search</button>
<div class="divider"></div>
<button id="Lucky" href="#">I'm Feeling Lucky</button>
</div>
</div>
</main>
</body>
</html>
Don't Required:
word spacing
<div class="dividerTwo"></div>.
Do only :
Apply some padding around .nav-wrapper a
.nav-wrapper a {
float: right;
list-style-type: none;
padding:0 .5em;
}
In this scenario you should use margin CSS property instead of word-spacing. The end CSS rule would look as follows:
.nav-wrapper a {
float: right;
list-style-type: none;
margin-left: 15px;
}
So I'm trying to create a landing page exactly like this (FYI, to work on my HTML/CSS skills, I have decided to exactly imitate this landing page just for practice!)
http://oi67.tinypic.com/b8qp8i.jpg
However, as you can see from what I did, the full background picture (sailing boat + ocean) does not show up in the first column: http://oi66.tinypic.com/o7ktgl.jpg
Another issue is that on the left side of the background image on the third column, I keep seeing on a small "broken page" icon (I don't know why it's there but it's really been annoying) ... is it an image problem or something wrong with the image file?
Help would be much appreciated, thank you!
Here is my full HTML and CSS code:
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta name="description" content="Your description goes here">
<meta name="keywords" content="one, two, three">
<title>Relaxr</title>
<!-- external CSS link -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="mainColumn">
<header>
<h1>Relaxr</h1>
<h2>Get piece of mind with a single tap</h2>
</header>
<span>
<button id="getButton">Get it Now</button>
</span>
</div>
<div id="secondColumn">
<header>
<h1>Benefits</h1>
<p>The perfect personal assistant. Relaxr does your job<br>for you so you can enjoy life as it is meant to be.</p>
<ul class="benefitss">
<li>Schedule meetings for you</li>
<li>Excel automation to complete your <br>work for you</li>
<li>Responds to e-mails on your behalf</li>
<li>Does all yor work for you with our<br>revolutionary technology</li>
</ul>
</header>
</div>
<div id="thirdColumn">
<img src="../images/testimonial_bg.jpg">
<p>“Relaxr changed my life. I’ve been able<br> to travel the world, spend limited time<br> working and my boss keeps thanking<br>me for crushing work.”</p>
<p>- Amanda, Intuit</p>
</div>
<div id="fourthColumn">
<button id="signupButton">Sign Up Now!</button>
</div>
<div id="fifthColumn">
<p>Relaxr</p>
<div id="footer">
<p>Copyright 2015. Relaxr.</p>
</div>
</div>
</body>
</html>
CSS:
/******************************************
/* SETUP
/*******************************************/
/* Box Model Hack */
* {
-moz-box-sizing: border-box; /* Firexfox */
-webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
box-sizing: border-box; /* IE */
}
/* Clear fix hack */
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clear {
clear: both;
}
.alignright {
float: right;
padding: 0 0 10px 10px; /* note the padding around a right floated image */
}
.alignleft {
float: left;
padding: 0 10px 10px 0; /* note the padding around a left floated image */
}
/******************************************
/* BASE STYLES
/*******************************************/
body {
color: #000;
font-size: 12px;
line-height: 1.4;
font-family: Open Sans;
background: url(../images/header_bg.jpg) no-repeat center top;
background-size: cover;
}
/******************************************
/* LAYOUT
/*******************************************/
/*MAIN COLUMN*/
#mainColumn {
width: 100%;
height: 450px;
text-align: center;
}
#mainColumn h1 {
color: white;
padding-right: 80%
}
#mainColumn h2 {
color: white;
font-size: 24px;
font-weight: 600;
letter-spacing: 1px;
margin-top: 50px;
text-align: center;
}
header {
height: 40%;
}
/*GET IT NOW BUTTON*/
#getButton {
background-color: yellow;
border-radius: 3px;
border-style: none;
font-size: 14px;
font-weight: 700;
height: 30px;
width: 130px;
}
/*SECOND COLUMN*/
#secondColumn {
width: 100%;
margin: auto;
height: 360px;
background-color: white;
}
#secondColumn h1 {
padding-left: 65px;
padding-top: 60px;
color: navy;
font-size: 20px;
font-weight: 700;
}
#secondColumn p {
font-size: 13px;
padding-left: 70px;
}
.benefitss {
margin-left: 80px;
padding-top: 20px;
font-size: 13px;
}
.benefitss li{
padding-top: 2px;
}
/*THIRD COLUMN*/
#thirdColumn {
width: 100%;
height: 250px;
}
#thirdColumn p:nth-child(2) {
color: #ffffff;
font-style: italic;
font-size: 15px;
text-align: center;
}
#thirdColumn p:nth-child(3) {
color: #ffffff;
font-size: 18px;
font-weight: 700;
text-align: center;
}
/*FOURTH COLUMN*/
#fourthColumn {
background-color: yellow;
width: 100%;
height: 75px;
}
/*SIGN UP BUTTON*/
#signupButton {
background-color: #000040;
color: white;
border-radius: 3px;
border-style: none;
font-size: 12px;
font-weight: 800;
height: 30px;
width: 150px;
margin-left: 42.9%;
margin-top: 25px;
}
#fifthColumn {
background-color: #000000;
width: 100%;
height: 225px;
position: absolute;
}
#fifthColumn p {
color: yellow;
text-align: center;
font-size: 24px;
font-weight: 800;
}
#footer p {
font-size: 9px;
color: #ffffff;
text-align: center;
padding-top: 11%;
}
I have been trying to play with line-height, formatting input for all browsers, padding, vertical-align and so forth but my placeholder still is in the middle of the box. Any suggestions?
I tried testing my code within jsfiddle to see if maybe it's just my css file, however; the results are the same.
http://jsfiddle.net/f0o4bcnv/
#postdoc {
background-color: gray;
width: 780px;
height: 500px;
margin-right: auto;
margin-left: auto;
border: 1px solid black;
margin-top: 30px;
margin-left: 30px;
padding-top: 30px;
float: right;
}
#postdoc label {
float: left;
width: 200px;
text-align: right;
margin-right: 10px;
padding-left: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
font-size: 25px;
margin-bottom: 30px;
margin-left: 20px;
}
#postdoc input[type="text"] {
margin-bottom: 30px;
height: 300px;
width: 500px;
font-size: 20px;
margin-left: 10px;
box-shadow: 0 0 5px black;
vertical-align: top;
/*padding-top: 0;*/
/*line-height: normal;*/
/*line-height: none;*/
/*vertical-align: top;*/
/*-webkit-input-placeholder: line-height: 1.5em;
-moz-placeholder: line-height: 1.5em;
-moz-placeholder: line-height: 1.5em;
-ms-input-placeholder: line-height: 1.5em;*/
}
#postdoc input[type="file"] {
margin-bottom: 30px;
height: 50px;
width: 500px;
font-size: 20px;
margin-left: 10px;
box-shadow: 0 0 5px black
}
#postdoc input[type="submit"] {
margin-bottom: 30px;
height: 45px;
width: 250px;
font-size: 30px;
margin-right: 100px;
float: right;
background-color: #4EA24E;
color: blue;
border-radius: 5px;
text-shadow: 0 0 10px yellow;
box-shadow: 0 0 10px black;
font-family: Rockwell, 'Courier Bold', serif;
}
#postdoc input[type="submit"]:hover {
color: gold;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="prostylesheet.css" type="text/css">
<meta http-equiv="X-UA-Compatible" content="IE=80" />
</head>
<body>
<h1 class="name"><font color = "#3399FF"> Prog-Assist | </font><font size = "12" font color = "#4EA24E"> Programs Deployed</font></h1>
<div id="header">
<div id="gradient">
<div class="nav">
<!-- container-fluid gives full width container of whole viewport -->
<div class="container-fluid">
<ul id="nav1" class="text-left">
<li><strong>Home
</li>
<li>Technologies
</li>
<li>Programs
</li>
<li>Blog</strong>
</li>
</ul>
<ul id="nav2" class="text-right">
<li><strong>Sign In
</li>
<li>Contact</strong>
</li>
</ul>
</div>
<!-- end container-fluid-->
</div>
<!--end nav-->
</div>
</div>
<!-- end header -->
<form id="postdoc" action="upload.php" method="POST" enctype="multipart/form-data">
<label>Comment:</label>
<input type="text" name="comment" placeholder="Comments">
<br>
<label>Text Document:</label>
<input type="file" name="documentfile" />
<br>
<input type="submit" name="submit" value="Post comment" class="button">
</form>
</body>
</html>
For this cases (multiline) you should use textarea:
<textarea style="height: 500px; width: 100%;">
Comments
</textarea>
Note: Input element only support single line.
I don't have an actual explanation for this. My guess would be the height distibutes evenly from top to bottom so the text sits in the middle. A solution would be to use padding instead:
#postdoc input[type="text"] {
margin-bottom: 30px;
/*height: 300px*/ //remove
width: 500px;
font-size: 20px;
margin-left: 10px;
box-shadow: 0 0 5px black;
padding: 0 0 50px; //add
}
FIDDLE
But if this is not for cosmetics and you're looking to let a user type a block of text, you should use <textarea></textarea> instead of <input/>.
You should use textarea instead of input.
Look this fiddle:
<textarea name="comment" placeholder="Comments"></textarea>
http://jsfiddle.net/f0o4bcnv/4/
To style the placeholder you can also use this css code:
::-webkit-input-placeholder { /* WebKit browsers */
color: red;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: red;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: red;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: red;
}
Note that only works on newer browsers.