I am trying to edit a form I have used many times but now I need to add checkboxes for options and I cannot for the life of me get them to align correctly or figure out where the formatting needs to be changed. I am not an expert at PHP, HTML, or CSS I was just tasked with this being in IT so I am learning as I am going. You guys have always came to my rescue on previous projects too and I am about a days worth deep into it with no changes. Made the checkboxes red in the CSS just so I could make sure a change I made to them went.
Basically want the checkboxes to look like this:
Project needs: [] Photography [] Videography [] Resize
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Marketing and Communications Request</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="marketing_style.css" />
</head>
<body>
<center>
<br /><br /><img src="logo.jpg" width="350px" height"100px"><br /><br />
<H1>Marketing and Communications Request</H1>
</center>
<div id="page-wrap">
<div id="contact-area">
<br />
<br />
<form method="post" action="marketing_contactengine.php">
<label for="Name">Name:</label>
<input type="text" name="Name" id="Name" />
<label for="Email">Email:</label>
<input type="text" name="Email" id="Email" />
<label for="Phone">Phone:</label>
<input type="text" name="Phone" id="Phone" />
<label for="Dept">Department:</label>
<input type="text" name="Dept" id="Dept" />
<label for="Dir">Department Director:</label>
<input type="text" name="Dir" id="Dir" />
<label for="COID">COID/Account Code (GL Code):</label>
<input type="text" name="COID" id="COID" />
<br><br>
<br><br>
<h2><u>EVENT INFORMATION</u></h2>
<label for="EventName">Event Name:</label>
<input type="text" name="EventName" id="EventName" />
<label for="EventDateTime">Event Date & Time:</label>
<input type="text" name="EventDateTime" id="EventDateTime" placeholder="01/01/2021 08:00:00" />
<label for="EventLocation">Event Location:</label>
<input type="text" name="EventLocation" id="EventLocation" />
<label for="Desc">Brief description of the event:</label><br />
<textarea name="Desc" rows="2" cols="10" id="Desc"></textarea>
<br><br>
<br><br>
<h2><u>PROJECT INFORMATION</u></h2>
<label for="ProjectName">Project Name:</label>
<input type="text" name="ProjectName" id="ProjectName" />
<label for="Materials">Materials due date:</label>
<input type="text" name="Materials" id="Materials" />
<br />
</div>
<div id="checkboxes" class="checkboxes">
<label id="ProjectNeeds" for="ProjectNeeds" class="checkboxes">Project needs (check all that apply):</label>
<label class="checkboxes" for="Photography"><input type="checkbox" id="Photography" /> <span>Photography</span></label>
<label class="checkboxes" for="Videography"><input type="checkbox" id="Videography" /> <span>Videography</span></label>
<label class="checkboxes" for="Resize"><input type="checkbox" id="Resize" /> <span>Resize</span></label>
</div>
</div>
</div>
<div id="bottom" style="position: relative;">
<div style="position: absolute;">
Submission of this form is required for all requests to the marketing and communications team.
</div>
</body>
</html>
CSS:
body {
font-size: 62.5%;
font-family: Helvetica, sans-serif;
}
p {
font-size: 1.3em;
margin-bottom: 15px;
}
#page-wrap {
background: white;
padding: 20px 50px 20px 50px;
min-height: 500px;
height: auto !important;
height: 500px;
width: 700px;
}
#contact-area {
width: 660px;
margin-top: 25px;
}
#contact-area input, #contact-area textarea {
padding: 10px;
width: 471px;
font-family: Helvetica, sans-serif;
font-size: 1.4em;
margin: 0px 0px 10px 0px;
/* border: 2px solid #ccc; */
}
/* #contact-area textarea { */
/* height: 90px; */
/* } */
#contact-area textarea:focus, #contact-area input:focus {
border: 2px solid #900;
}
#contact-area input.submit-button {
width: 100px;
float: right;
}
label {
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
padding-top: 10px;
font-size: 1.4em;
font-weight: bold;
}
#bottom {
font-family: Helvetica, sans-serif;
font-size: 1.4em;
margin: 0px 0px 0px 100px;
width: 900px;
padding-top: 75px;
padding-bottom: 75px;
text-align: left;
}
#checkboxes {
color: red;
}
Aucun commentaire:
Enregistrer un commentaire