I have HTML code that is not linking with the CSS file.
I have posted the code below.
When ever I try to make changes to the CSS file and save, nothing happens to the browser preview.
I used CSS code that I have used before, and know it is correct.
But that CSS file doesn't show up on the browser preview.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Moses Saygbe LAb 3 </title><!--Title of page-->
<link rel="stylesheet" type="tex/css" href="style.css">
</head>
<body>
<main>
<form id="apptf" class="header">
<h2>Family Medicine Practice</h2>
<header class="header">
Patient Information
</header>
<fieldset class="header">
<legend>Personal Information</legend>
<div>
<label for="first">First Name</label><br>
<input type="text" name="first" id="first" class="header">
</div>
<div>
<label for="last">Last Name</label><br>
<input type="text" name="last" id="last" class="header">
</div>
<div>
<label for="dphone">Daytime Phone</label><br>
<input type="text" name="dphone" id="dphone" class="header">
</div>
<div>
<label for="ephone">Evening Phone</label><br>
<input type="text" name="ephone" id="ephone" class="header">
</div>
<div id="visit-first">
<label for="visit">Is this your first time visiting our office?</label><br>
<input name="visit" type="radio" id="visit" value="Yes"> Yes
<input name="visit" type="radio" id="novist" value="No"> No
</div>
</fieldset>
<header class="header">
Appointment Information
</header>
<fieldset class="header">
<legend>Appointment Time</legend>
<div>
<label for="appointment">Date</label>
<input type="date" name="appointment" id="appointment" class="header">
</div>
<div>
<label for="time">Time</label>
<select name="time" id="time" class="header">
<option value="8am">8AM</option>
<option value="10am">10AM</option>
<option value="12pm">12PM</option>
<option value="4pm">4PM</option>
</select>
</div>
<div class="moreinfo">
<label for="moreinfo">Please describe the reason for the visit</label><br>
<textarea class="moreinfoh" name="moreinfo" id="moreinfo" cols="10" rows="10">.
</textarea>
</div>
</fieldset>
<button type="submit" value="submit" class="header">Submit</button>
</form>
<footer>
Moses Saygbe 2020
</footer>
<script>
window.onload=function(){ //diable right click
document.addEventListener("contextmenu", function(e){
e.preventDefault();
},false);}
</script>
</main>
And here is the CSS code. I tried relinking it, opening in a new browser. Still nothing fixes it.
#charset "utf-8";
html, body{
font-family: Arial, Helvetica, sans-serif;
padding-bottom: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(7, 7, 7);
background: url(../Week3lab/graphic/aldebaran-s-zzi-6FCQtF8-unsplash.jpg) no-repeat
center center fixed;
background-size: cover;
z-index: -1;
}
Does making your CSS this work?
#charset "utf-8";
html, body{
font-family: Arial, Helvetica, sans-serif;
padding-bottom: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-image: url("https://images.unsplash.com/photo-1588894167282-408680bb62f4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=756&q=80");
z-index: -1;
Related
I'm designing a simple web-app so that the company I work for can receive referrals from different businesses. I made most of the front page but I need some help with sending the info from the form to a specific email address when the submit button is pressed. I looked at some tutorials online but for some reason I'm not understanding it still. Any help would be appreciated.
This is what I have so far...
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body {
background-color: #e20404;
color: #FFFFFF;
font-family: Arial, sans-serif;
}
h1 {
font-size: 36px;
font-weight: bold;
margin: 0;
}
.hero {
background-image: url("phone-repair.jpg");
background-size: cover;
background-position: center;
height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.hero h2 {
font-size: 48px;
margin: 0;
text-shadow: 2px 2px #000000;
}
.hero p {
font-size: 24px;
margin: 20px 0 0 0;
text-shadow: 2px 2px #000000;
}
</style>
</head>
<body>
<br>
<br>
<header>
<h1></h1>
</header>
<br>
<br>
<section class="hero">
<h1><img src="https://scontent-dfw5-2.xx.fbcdn.net/v/t39.30808-6/310105465_435474288684271_2112950804519462739_n.jpg?_nc_cat=108&ccb=1-7&_nc_sid=09cbfe&_nc_ohc=vn1mBIuA8v8AX-c7mRv&tn=4IOIOF7YavKFUIEN&_nc_ht=scontent-dfw5-2.xx&oh=00_AfBHKCcI06i24ne9jd-Fztb2JIbgCBqb54G5S5HIRAA6bw&oe=63F30F2D" alt="image" height=500px width=400px><br>
<h2>Phone Doctors Referral Center</h2>
<form>
<br>
<label for="efname">Employee First Name:</label><br>
<input type="text" id="efname" name="efname" style="margin-top: 5px;"><br>
<br>
<label for="elname">Employee Last Name:</label><br>
<input type="text" id="elname" name="elname" style="margin-top: 5px;"><br>
<br>
<label for="elocation">Store Location:</label><br>
<input type="text" id="elocation" name="elocation" style="margin-top: 5px;"><br>
<br>
<br>
<br>
<label for="cfname">Customer's Full Name:</label><br>
<input type="text" id="cfname" name="cfname"><br>
<br>
<label for="cphone">Customer's # or email:</label><br>
<input type="text" id="cphone" name="cphone"><br>
<br>
<p>Is the phone an iOS or Android device?</p>
<form>
<select name="dropdown">
<option value="Android" selected>Android</option>
<option value="iOS" selected>iOS</option>
</select>
<br>
<br>
<label for="mphone">Model of Phone:</label><br>
<input type="text" id="mphone" name="mphone"><br>
<br>
<label for="wissue">What is the issue?</label><br>
<input type="text" id="wissue" name="wissue"><br>
<br>
<label for="anotes">Anything else we should know?</label><br>
<input type="text" id="anotes" name="anotes"><br>
<br>
<br>
<input type="submit" value="Submit">
</form>
</form>
<br>
</form>
</section>
<section>
<!-- Add more content here -->
</section>
<footer>
<!-- Add footer content here -->
</footer>
</body>
</html>
I recommand to use the action="mailto: field of your form. That way you should be able to send the form's data to a specific email. You could also use enctype=text/plain in order to have an easier form to read.
Here's an example to help you understand: <form action="mailto:someone#.com" enctype="text/plain">
This site covers the subject in more details, if you want more information: https://html.form.guide/email-form/email-form-mailto/
I hope this will help you.
I have a problem with your form, how can I put the text and the elements at the same distance, e.g. show the label next to the fields, they are not on the same line, i.e. not centered on the line,
pls see pic on the Link
My Form
I have a problem with your form, how can I put the text and the elements at the same distance, e.g. show the label next to the fields, they are not on the same line, i.e. not centered on the line,
pls see pic on the Link
My Form
I have a problem with your form, how can I put the text and the elements at the same distance, e.g. show the label next to the fields, they are not on the same line, i.e. not centered on the line,
pls see pic on the Link
My Form
body{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
background-color: #FFBB00;
}
.container{
width: 40%;
margin: 4% auto;
padding: 50px;
background-color: #fff;
border-radius: 15px;
box-shadow: #ccc 0 0 10px 0; /* للظل لحتى يطلع متناسب */
}
.title h1{
position: relative;
text-align: center;
font-size: 28px;
text-transform: uppercase;
}
.title h1::after{
content: "";
width: 30%;
height: 3px;
background-color: #FFBB00;
position: absolute;
top: 110%;
left: 35%;
}
.inputFeld{
padding: 10px;
margin: 10px;
border-radius:4px;
border: 1px solid #ccc;
}
.inputFeld:focus{
background-color: #FFBB00; ;
}
/* */
.parent-line{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
padding: 15px;
}
.parent-line .line-link{
display: flex;
flex: 1;
}
.parent-line .line-right{
flex: 1;
display: flex;
}
.parent-one-line{
padding: 15px;
}
.container .line label{
display: inline-block;
width: 150px;
text-align: left;
}
/* */
.btn{
padding: 19px 10px;
margin-bottom: 500px;
background-color: #000;
color: #fff;
border: none;
float: right;
cursor: pointer;
width: 100%;
}
.btn:hover{
background-color: #FFBB00;
color: #000;
}
.checken{
padding: 10px;
}
.select{
padding: 10px;
}
<!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>Document</title>
</head>
<link rel="stylesheet" href="style.css">
<style>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
</style>
<body>
<section class="container">
<dic class="title"><h1>ITEMS VERLINKEN </h1></dic>
<form action="">
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line"> <label class="" for=""> Link URL </label> <input class="inputFeld" type="text" name="" id="" > </div>
</div>
<div class="line-right">
<div class="line"> <label for=""> +articleNum+ </label> <input class="inputFeld" type="text" name="" id="" > </div>
</div>
</div>
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line"> <label for=""> Full PDF name </label> <input class="inputFeld" type="text" name="" id="" placeholder="Example: test.pdf ">
</div>
</div>
<div class="line-right">
<div class="line"> <label for=""> Full PDF Links </label>
<input class="checkbox" type="checkbox" name="" id="">
</div>
</div>
</div>
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line"> <label for=""> PDF Width in mm</label>
<input class="inputFeld" type="text" name="" id="" placeholder="Example: 212" size="4">
</div>
</div>
<div class="line-right">
<div class="line"> <label for=""> PDF Height in mm</label>
<input class="inputFeld" type="text" name="" id="" placeholder="Example: 290 " size="4">
</div>
</div>
</div>
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line">
<label for=""> Border around links</label>
<select class="select" name="" id="">
<option value="">No</option>
<option value="">Yes</option>
</select>
</div>
</div>
<div class="line-right">
<div class="line"> <label for=""> Border(RGB):</label>
<input class="inputFeld" type="text" name="" id="" placeholder="R" size="1">
<input class="inputFeld" type="text" name="" id="" placeholder="G" size="1" >
<input class="inputFeld" type="text" name="" id="" placeholder="B" size="1">
</div>
</div>
</div>
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line">
<label for=""> Border Width(mm)</label> <select class="select" name="" id="">
<option value="">0</option>
</select>
</div>
</div>
<div class="line-right">
<div class="line">
<label for="">Margin top (mm)</label> <select class="select" name="" id="">
<option value="">0</option>
</select>
</div>
</div>
</div>
<!-- -->
<div class="parent-one-line">
<div class="line"> <label for=""> Save settings: </label> <input class="inputFeld" type="text" name="" id="" placeholder="Example: Customer1 ">
<h5>Leave empty to prevent saving.</h5>
</div>
<input class="btn" type="button" value="Start">
</div>
</form>
</section>
</body>
</html>
Simply add align-items:center to
.parent-line .line-right{
flex: 1;
display: flex;
}
and increase/decrease input text height/font size to match the center.
I have a small HTML file where I want the particle.js as a background but it just shows up on a certain portion of the screen please recommend some solution to it
#import url('https://fonts.googleapis.com/css2?family=Rowdies:wght#700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital#1&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
background:grey;
}
body .container-fluid .row .col-12 ,body .container-fluid .row .col-sm-1
{
left: 35%;
}
#wel
{
margin-left: 6%;
font-family: 'Rowdies', cursive;
}
h3,h6
{
font-family: 'Work Sans', sans-serif;
}
#submit-button
{
margin-left: 6%;
;
}
#particles-js
{
position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>strong password generator</title>
<br>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="./home.css">
</head>
<body>
<div id="particles-js"></div>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h1 id="wel">WELCOME!!!!</h1>
</div>
<div class="col-12">
<br>
<p>
<h3>GENERATE A STRONG PASSWORD</h3>
</p>
</div>
</div>
<form action="{% url 'password' %}" method="GET">
<div class="form-group row">
<label class="col-sm-1 col-form-label" for="select-number">
Length:
</label>
<div class="col-sm-3 col-12">
<input type="number" name="select-number" min="6" max="20" value="12" selected='selected' placeholder="Length">
</div>
<div class="col-12">
<span>
<label for="UPPER" class="col-form-label">
<h6> UPPER : </h6>
</label>
<input type="checkbox" name="UPPER">
</span>
<span>
<label for="specialcharacter" class="col-form-label">
<h6>SPECIAL CHARACTER : </h6>
</label>
<input TYPE="checkbox" name="specialcharacter">
</span>
<span>
<label for="number" class="col-form-label">
<h6>NUMBER : </h6>
</label>
<input type="checkbox" name="number">
</span>
<br><input type="submit" value="GENERATE PASSWORD" class="btn btn-primary btn-lg" id="submit-button">
</div>
</div>
</form>
</div>
<script src="./particles.js"></script>
<script src="./app.js"></script>
</body>
</html>
This is the HTML and CSS code that I use. I am using Django in the backend but I don't think it will be necessary for debugging this. So, I'm not including it here.
Add these styles to your particle ID,
The point is using z-index.
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
top: 0;
bottom: 0;
right: 0;
left: 0;
position: absolute;
z-index: 0;
overflow: hidden;
Use z-index and position: relative;
I have created a form that is aligned horizontally with the labels on top.
I had some difficulty aligning the = button, and I used a trick with   to align it. I couldn't find any better solution for this, is there something better to do?
I want to apply a border around the form and align it in the center of the page.
I have tried several things, like placing it inside a table, or using another div but with no success.
This is my code until now (I have not included the script for the calculations):
<!DOCTYPE html>
<html>
<head>
<title> Calculator</title>
<style>
input, label{
display:block;
}
label{
text-align:center;
margin-bottom:4px;
}
</style>
</head>
<body>
<h1 style="text-align:center">Calculator</h1>
<form name="CL">
<div style="float:left;margin-right:20px;">
<label for="N1">X</label>
<input type="text" name="N1" id="N1">
</div>
<div style="float:left;margin-right:20px;">
<label for "O">Operator</label>
<select type="text" name="O" id="O" style="width:50px">
<option value="0"> +</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
</select>
</div>
<div style="float:left;margin-right:20px;">
<label for="N2">Y</label>
<input type="text" name="N2" id="N2">
</div>
<div style="float:left;">
<label>  </label>
<input type="button" value="=" onclick="calc()">
</div>
<div style="float:left;">
<label for="R">Result</label>
<input type="text" name="R" id="R">
</div>
</div>
</form>
</body>
</html>
You can create a wrapper DIV around it and make that a flex container, using the following settings to achieve the centering both horizontally and vertically:
html,
body {
height: 100%;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
form {
padding: 10px;
border: 1px solid #ddd;
}
<!DOCTYPE html>
<html>
<head>
<title> Calculator</title>
<style>
input,
label {
display: block;
}
label {
text-align: center;
margin-bottom: 4px;
}
</style>
</head>
<body>
<div class="wrapper">
<h1 style="text-align:center">Calculator</h1>
<form name="CL">
<div style="float:left;margin-right:20px;">
<label for="N1">X</label>
<input type="text" name="N1" id="N1">
</div>
<div style="float:left;margin-right:20px;">
<label for "O">Operator</label>
<select type="text" name="O" id="O" style="width:50px">
<option value="0"> +</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
</select>
</div>
<div style="float:left;margin-right:20px;">
<label for="N2">Y</label>
<input type="text" name="N2" id="N2">
</div>
<div style="float:left;">
<label>  </label>
<input type="button" value="=" onclick="calc()">
</div>
<div style="float:left;">
<label for="R">Result</label>
<input type="text" name="R" id="R">
</div>
</form>
</div>
</body>
</html>
What you might do is give the form a width and use margin: 0 auto to align it in the middle and set overflow: auto;
For example:
input, label{
display:block;
}
label{
text-align:center;
margin-bottom:4px;
}
form {
width: 90%;
margin: 0 auto;
border: 1px solid #ccc;
overflow: auto;
padding: 5px;
}
form div {
float: left;
margin-right:20px;
}
<!DOCTYPE html>
<html>
<head>
<title> Calculator</title>
<style>
input,
label {
display: block;
}
label {
text-align: center;
margin-bottom: 4px;
}
form {
width: 90%;
margin: 0 auto;
border: 1px solid #ccc;
overflow: auto;
padding: 5px;
}
form div {
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<h1 style="text-align:center">Calculator</h1>
<form name="CL">
<div>
<label for="N1">X</label>
<input type="text" name="N1" id="N1">
</div>
<div>
<label for="O">Operator</label>
<select name="O" id="O" style="width:50px">
<option value="0"> +</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
</select>
</div>
<div>
<label for="N2">Y</label>
<input type="text" name="N2" id="N2">
</div>
<div>
<label>  </label>
<input type="button" value="=" onclick="calc()">
</div>
<div>
<label for="R">Result</label>
<input type="text" name="R" id="R">
</div>
</form>
</body>
</html>
I am trying to make an image on the side remain the same height as the calculator.
Where should either the css or html go within the structure? I would like to keep the aspect ratio as close to possible
Code: http://jsbin.com/gijitaluta/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"></head>
<body>
<div id="calculatorcontainer">
<div id="maincontainer">
<aside class="imageContainer">
<img src="">
</aside>
<form action="" method="post" id="theForm">
<fieldset >
<legend>Calculator</legend>
<h4>Use this form to calculate the order total</h4>
<div class="form-group">
<label for="quantity">Quantity</label>
<input class="form-control" id="quantity" type="number" value="1"/>
</div>
<div class="form-group">
<label for="ppu">Price Per Unit</label>
<input type="text" class="form-control" id="ppu" placeholder="1.00" required>
</div>
<div class="form-group">
<label for="tax">Tax Rate (%)</label>
<input type="text" class="form-control" id="tax" placeholder="0.0" required>
</div>
<div class="form-group">
<label for="discount">Discount (%)</label>
<input type="text" class="form-control" id="discount" placeholder="0.00" required>
</div>
<div class="form-group">
<label for="ttl">Total</label>
<input type="text" class="form-control" id="output" placeholder="0.00">
</div>
<div>
<button type="submit" class="btn btn-calculate" id="submit">Calculate</button>
</div>
</fieldset>
</form>
</div>
<footer class="footer">
<h3>Copyright CSUN</h3>
</footer>
</div>
</body>
</html>
This way uses a table. Doesn't require many changes. You'll need a version of the image with the gray edges removed and you'll have to play with padding and/or margins.
http://jsbin.com/xepiren/edit?html,css,output
td {
background-color:#fff;
}
form {
padding: 5%;
/*width: 50%;*/
font-family: 'Open Sans'
}
#theForm {
background-color: white;
}
legend {
color: red;
font-size: 1.3em;
}
#maincontainer {
margin: 5%;
}
fieldset {
}
img {
/*width:30%;*/
float: right;
height: 430px
}
body {
background-color: grey;
}
fieldset {
padding: 10%;
}
#calculatorcontainer {
margin: 10%;
border-style: solid;
border-style: groove;
}
h4 {
margin: 0px;
}
footer {
padding: 10px;
border-style: solid;
border-style: groove;
}
footer h3 {
color:red;
font-size:80%
}
input {
width: 90%
}
#submit {
margin:10px
}
#media (max-width: 479px) {
img {
width:30%;
float: right;
height: 230px
}
fieldset {
padding: 0%;
}
form {
font-size: 7px;
}
footer {
padding: 7px;
}
footer h3 {
color:red;
font-size:10%
}
}
#media (min-width: 1000px) {
img {
width:30%;
float: right;
height: 480px
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"></head>
<body>
<div id="calculatorcontainer">
<div id="maincontainer">
<table>
<tr>
<td>
<form action="" method="post" id="theForm">
<fieldset >
<legend>Calculator</legend>
<h4>Use this form to calculate the order total</h4>
<div class="form-group">
<label for="quantity">Quantity</label>
<input class="form-control" id="quantity" type="number" value="1"/>
</div>
<div class="form-group">
<label for="ppu">Price Per Unit</label>
<input type="text" class="form-control" id="ppu" placeholder="1.00" required>
</div>
<div class="form-group">
<label for="tax">Tax Rate (%)</label>
<input type="text" class="form-control" id="tax" placeholder="0.0" required>
</div>
<div class="form-group">
<label for="discount">Discount (%)</label>
<input type="text" class="form-control" id="discount" placeholder="0.00" required>
</div>
<div class="form-group">
<label for="ttl">Total</label>
<input type="text" class="form-control" id="output" placeholder="0.00">
</div>
<div>
<button type="submit" class="btn btn-calculate" id="submit">Calculate</button>
</div>
</fieldset>
</form>
</td>
<td>
<aside class="imageContainer">
<img src="https://image.ibb.co/iUhiUv/Screen_Shot_2017_08_03_at_12_12_16_PM.png">
</aside>
</td>
</tr>
</table>
</div><!-- End "maincontainer" -->
<footer class="footer">
<h3>Copyright CSUN</h3>
</footer>
</div>
</body>
</html>