I cant make my HTML and CSS code link. (Yes, i have looked it up, but it still wont work)
My HTML code
(Name: test1.html, complete path: /tacocraft.net/tacocraft.net/testing-and-stuff/test1.html/)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type= "text/css" href="test1css.css" />
<body>
<h3>Please input username and password</h3>
<div>
<form action="/action_page.php">
<label for="fname">Username</label>
<input type="text" id="fname" name="firstname" placeholder="Username(Admin)">
<label for="lname">Password</label>
<input type="text" id="lname" name="lastname" placeholder="Password(Admin)">
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
And my CSS (Name test1css.css, path: /tacocraft.net/tacocraft.net/testing-and-stuff/test1css.css/)
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
You are missing the closing </head> tag.
Without the </head> it will not properly link, as it views the rest of it to be nested in the head. The CSS never takes effect.
Related
I just started learning HTML and CSS none of the fixes google has suggested have managed to align my contact box to the center of the page. I have tried justify-content, align-items, align-content, and display flex in combination with the stuff above. My page either stays the same or the box aligns itself to the upper left.
I have had a lot of trouble with the things I have built in html so far never aligning center. I would just like to understand why this is happening.
<!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>Contact Us</title>
<link rel="stylesheet" href="./CSS/Style.CSS" />
</head>
<body>
<div class="contact-box">
<form>
<!--unsure what HTML validations means but I added required to the name and email fields-->
<input
type="text"
class="input-field"
placeholder="Full Name"
required
/>
<input
type="text"
class="input-field"
placeholder="Your Email"
required
/>
<!--puts drop down in form-->
<select id="Priority">
<option value="Priority">Message Priority</option>
<option value="High">High Priority</option>
<option value="Medium">Medium Priority</option>
<option value="Low">Low Priority/ non-urgent</option>
</select>
<!--I don't understand why the placeholder isn't showing-->
<textarea
type="text"
class="input-field textarea-field"
placeholder="Your Message"
>
</textarea>
<!--Makes button-->
<button type="button" class="btn">Send Message</button>
</form>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body{
background-color: lightpink;
font-family: sans-serif;
}
/*styles contact box*/
.contact-box{
width: 500px;
background-color: antiquewhite;
box-shadow: 0 0 20px 0 #999;
/*below here I comment everything out within contact box styling and tried all the center alignment things I could find*/
top: 50%;
left: 50%;
transform: translate(-50%.-50%);
position: absolute;
}
form{
margin: 35px;
}
/*styles inputs name, email,etc*/
.input-field{
width: 400px;
height: 40px;
margin-top: 20px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #777;
border-radius: 14px;
outline: none;
}
/*Makes message box bigger*/
.textarea-field{
height: 150px;
padding-top: 10px;
}
/*styles send message button*/
.btn{
border-radius: 20px;
color: #fff;
margin-top: 18px;
padding: 10px;
background-color: #47c35a;
font-size: 12px;
border: none;
cursor: pointer;
}
/*styles dropdown menu*/
input [type=text], select{
width: 400px;
height: 40px;
margin-top: 20px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #777;
border-radius: 14px;
outline: none;
}
I guess you just have a typo here:
transform: translate(-50%.-50%);
It should look like this:
transform: translate(-50%,-50%);
please replace "margin : 35px" with "padding : 35px" in form class and use below 4 lines in contact-box class to center your form:
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);
attaching the corrected code for your reference, hope it helps!
<!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>Contact Us</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: lightpink;
font-family: sans-serif;
}
/*styles contact box*/
.contact-box{
width: 500px;
background-color: antiquewhite;
box-shadow: 0 0 20px 0 #999;
/*below here I comment everything out within contact box styling and tried all the center alignment things I could find*/
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);
}
form{
padding: 35px;
}
/*styles inputs name, email,etc*/
.input-field{
width: 400px;
height: 40px;
margin-top: 20px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #777;
border-radius: 14px;
outline: none;
}
/*Makes message box bigger*/
.textarea-field{
height: 150px;
padding-top: 10px;
}
/*styles send message button*/
.btn{
border-radius: 20px;
color: #fff;
margin-top: 18px;
padding: 10px;
background-color: #47c35a;
font-size: 12px;
border: none;
cursor: pointer;
}
/*styles dropdown menu*/
input [type=text], select{
width: 400px;
height: 40px;
margin-top: 20px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #777;
border-radius: 14px;
outline: none;
}
</style>
</head>
<body>
<div class="contact-box">
<form>
<!--unsure what HTML validations means but I added required to the name and email fields-->
<input
type="text"
class="input-field"
placeholder="Full Name"
required
/>
<input
type="text"
class="input-field"
placeholder="Your Email"
required
/>
<!--puts drop down in form-->
<select id="Priority">
<option value="Priority">Message Priority</option>
<option value="High">High Priority</option>
<option value="Medium">Medium Priority</option>
<option value="Low">Low Priority/ non-urgent</option>
</select>
<!--I don't understand why the placeholder isn't showing-->
<textarea
type="text"
class="input-field textarea-field"
placeholder="Your Message"
>
</textarea>
<!--Makes button-->
<button type="button" class="btn">Send Message</button>
</form>
</div>
</body>
</html>
You should try to put the code below in your CSS file. When you start writing, upper left is the starting point, that's where your content is going.
html {
text-align: center;
}
I am attempting to create a textbox in which the user of my webpage can type inside. However, I am unable to allow the text to start at the top of the box and go down. In contrast, it stays in the center left and simply keeps going in one line. How can I align and break the text so that it may wrap around the box?
I've tried removing certain parts of the code that could be dedicated to text, but none of that worked. I also looked at other examples, but none worked.
<!doctype html>
<html>
<head><title> css </title></head>
<body>
<body style="background-color:lightgray;">
<style>
ul.a {
list-style-type: circle;
}
body {
font-family: "Arial"; font-size: 17px;
}
ul {
text-align: left;
}
input[type=text], select {
width: 90%;
padding: 12px 20px;
margin: 8px 0;
display: block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
<center><div style="width:100px;height:60px;border:0px solid #000;"></div>
<div style="width:1000px;height:500px;border:1.5px solid #000;">
<body>
<p><strong> ? </strong></p><hr>
<ul class="a">
<li>?</li>
<li>?</li>
<li>?</li>
</ul>
` <texterea action="/action_page.php" target="_blank">
<p><input class="w3-input w3-padding-100px w3-border" type="text" placeholder="Message" required name="Message" style="height:200px"></p>
<p><button class="w3-button w3-light-grey w3-block" type="submit">SEND</button></p>
</texterea>
</div></center>
</body></html>
I want the text to be able to wrap the box, but it is just continuously in the center, which is very annoying.
Your <textarea> tag should be nested in a <form> tag. You're close, you just look to be confusing your nesting/tags .
I think you want to do something like this :
<form action="/action_page.php" target="_blank">
<p><textarea class="w3-input w3-padding-100px w3-border" placeholder="Message" required name="Message" style="height:200px"></textarea></p>
<p><button class="w3-button w3-light-grey w3-block" type="submit">SEND</button></p>
</form>
You appear to be confusing the textarea with input type text. Input type text is used for single line input, and textarea works as a text box for paragraph type input. All input tags should be placed within the form tag, and it's the form tag that sets the target for the form's submission:
<style>body {
background-color: lightgray;
}
ul.a {
list-style-type: circle;
}
body {
font-family: "Arial";
font-size: 17px;
}
ul {
text-align: left;
}
input[type=text],
select {
width: 90%;
padding: 12px 20px;
margin: 8px 0;
display: block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
<center>
<div style="width:100px;height:60px;border:0px solid #000;"></div>
<div style="width:1000px;height:500px;border:1.5px solid #000;">
<p><strong> ? </strong></p>
<hr>
<ul class="a">
<li>?</li>
<li>?</li>
<li>?</li>
</ul>
<form action="/action_page.php">
<textarea rows="10" cols="60" placeholder="Message"></textarea>
<p><button class="w3-button w3-light-grey w3-block" type="submit">SEND</button></p>
</form>
</div>
</center>
Here is an example of what i think you are after: https://jsfiddle.net/zjs2ugLy/1/
One of the biggest issues you have is you have a typo in textarea (texterea)
CSS
body {
background-color:lightgray;
font-family: "Arial"; font-size: 17px;
}
ul.a {
list-style-type: circle;
}
ul {
text-align: left;
}
input[type=text], select {
width: 90%;
padding: 12px 20px;
margin: 8px 0;
display: block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
HTML
<html>
<head><title> css </title></head>
<body>
<center>
<div style="width:100px;height:60px;border:0px solid #000;"></div>
<div style="width:1000px;height:500px;border:1.5px solid #000;">
<p><strong> ? </strong></p><hr>
<ul class="a">
<li>?</li>
<li>?</li>
<li>?</li>
</ul>
<form action="/action_page.php">
<textarea rows="4" cols="50" target="_blank"></textarea>
<p><button class="w3-button w3-light-grey w3-block" type="submit">SEND</button></p>
</form
</div>
</center>
</body>
</html>
I have coded a small form, it is part of a bigger webpage and I am taking small steps, according to specification.
I am curious if I could have done it better in some way. If I could streamlined the code or used some other command or syntax that is better?
Perhaps there are some redundancies?
Also is there a good way to move the Send button so it is centered in the middle and is there a way to move it closed to the bottom without too much hassle? Or to move the placeholder text close to the left?
I will enclose a link to a pen and you can check out the code there.
https://codepen.io/anon/pen/pYNPrw
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title></title>
</head>
<body>
<form action="#">
<h2>xyz xyz</h2>
<div class="input-wrapper">
<label for="name">Name:</label>
<input type="text" name="Name" placeholder="Name...." id="name">
</div>
<div class="input-wrapper">
<label for="email">Epost:</label>
<input type="text" name="Epost" placeholder="Epost...." id="epost">
</div>
<button type="submit">Senden</button>
</form>
</body>
</html>
I have changed your code by adding margin property to adjust position of the button and commenting transform property. but if you could use a style library like bootstrap or material design you can sort out a form way more faster
h2 {
margin: 0;
padding: 0;
margin-bottom: 2.3rem;
}
form {
float: left;
display: inline-block;
padding: .5rem;
height: 205px;
width: 168px;
border: 2px solid black;
font-family: Sans-Serif;
font-size: 12px;
}
.input-wrapper {
margin-bottom: .5rem;
}
label {
width: 50px;
display: inline-block;
text-align: left;
font-family: Sans-Serif;
font-size: 14px;
}
input {
width: 90px;
padding: .5rem;
height: 3px;
border: 2px solid black;
text-align: left;
}
button {
padding: .5rem;
display: block;
width: 55%;
background: lightgrey;
color: black;
border: 2px solid black;
text-align: center;
border-radius: 5px;
font-size: inherit;
/* transform: translate(50%, 50%); */
margin: 60px auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title></title>
</head>
<body>
<form action="#">
<h2>xyz xyz</h2>
<div class="input-wrapper">
<label for="name">Name:</label>
<input type="text" name="Name" placeholder="Name...." id="name">
</div>
<div class="input-wrapper">
<label for="email">Epost:</label>
<input type="text" name="Epost" placeholder="Epost...." id="epost">
</div>
<button type="submit">Senden</button>
</form>
</body>
</html>
If I click in the input fields, the padding should go to zero so that the border is next to the text.
Problem is that it keeps the width and thus flows out of the div parent ;[
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
background-color: lightblue;
border-radius: 5px;
padding: 10px;
}
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0 8px 0;
box-sizing: border-box;
border: 2px solid grey;
outline: none;
display: block;
}
input[type=text]:focus {
border: 2px dotted grey;
padding: 0;
margin: 21px;
}
</style>
</head>
<body>
<div>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" value="John">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname" value="Doe">
</form>
</div>
</body>
</html>
If you want to adjust for the changed padding, simply redefine the width in the :focus block as well, with something like
width: calc(100% - 42px);
So your :focus block should look something like:
input[type=text]:focus {
width: calc(100% - 42px);
border: 2px dotted grey;
padding: 0;
margin: 21px;
}
The "42px" is because you defined the margin as 21px horizontal, so you need to account for there being 21px both left and right.
I have been hustling with this for couple of days, and I can't seem to figure out a good way to add a tool tip to the background url, I have two images in background, far left is a user icon and far right is help icon. I am looking forward to add a tooltip or title on mouse hover over only to the tooltip.png icon which is located to the far right.
can anyone suggest a better way to implement this.
following is the code
input[type=text], input[type=p] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
background-color: #FFFFFF;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
padding-left: 46px;
}
input[type=text] {
background: url('https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/user.png') 10px center no-repeat, url('http://visiblearea.com/blog/pub/System/JQueryPlugin/plugins/tooltip/tooltip-bubble-reverse.png') right 10px center no-repeat;
background-size: 24px 24px, 15px, 15px;
background-color: #FFFFFF;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Log In</title>
</head>
<body>
<form id="loginform" onsubmit="return false;">
<input type="text" id="email" placeholder="Username or Email" padding="10px">
</form>
</body>
</html>
any help is much appreciated, thank you
input[type=text], input[type=p] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
background-color: #FFFFFF;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
padding-left: 46px;
z-index:-1;
}
input[type=text] {
background: url('https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/user.png') 10px center no-repeat;
background-size: 24px 24px, 15px, 15px;
background-color: #FFFFFF;
}
img{
position:absolute;
right:15px;
top:20px;
}
#username{
position:relative;
}
.tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
right:15px;
z-index: 1;
}
img:hover + .tooltiptext {
visibility: visible;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Log In</title>
</head>
<body>
<form id="loginform" onsubmit="return false;">
<div id="username">
<img src="http://visiblearea.com/blog/pub/System/JQueryPlugin/plugins/tooltip/tooltip-bubble-reverse.png" width=20px; height=20px;>
<span class="tooltiptext">You have to enter username</span>
<input type="text" id="email" placeholder="Username or Email" padding="10px">
</div>
</form>
</body>
</html>
Here is a link that may help you out with this.
http://www.w3schools.com/css/css_tooltip.asp