0
J'ai un problème avec ma table quand j'ajoute css pour cela il ne sera pas aligné avec le reste de mon site web j'ai essayé de changer les valeurs individuelles pour la largeur mais semble encore frapper et manquer des conseils pour cela?J'ai du mal à obtenir le css pour que mon attribut <table> fonctionne correctement
Voici le code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> - Contact</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript">
function checkForm() {
var theName = document.getElementById('name').value;
var theEmail = document.getElementById('email').value;
var theMessage = document.getElementById('message');
var emailerr = document.getElementById('emailspan');
var nameerr = document.getElementById('namespan');
var messageerr = document.getElementById('messagespan');
var message;
var myregex = /\[email protected]\S+\.\S+/;
if(theName==""){
message = 'Name is required;';
document.form1.name.focus();
nameerr.innerHTML = message;
return false;
} else{
nameerr.innerHTML ="";
}
if(theEmail=="") {
message = 'Email is required;';
document.form1.email.focus();
emailerr.innerHTML = message;
return false;
} else if (!myregex.test(theEmail)){
emailerr.innerHTML = "Your email entry is invalid;";
document.form1.email.focus();
return false;
} else {
emailer.innerHTML ="";
}
if(theMessage.value=="" || theMessage.value ==null || theMessage.value.indexOf('\n') > 0) {
message = 'Please enter your message;';
document.form1.message.focus();
messageerr.innerHTML = message;
return false;
} else {
messageerr.innerHTML = "";
}
}
</script>
<style>
</style>
</head>
<body>
<header><img src="images/simple-logo.png" alt="logo"</img> </header>
<nav>
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="about.html" class="current">About</a></li>
<li><a href="contact.php" class="current">Contact</a></li>
<li><a href="gallery.html" class="current">Gallery</a></li>
<li><a href="resume.html" class="current">Resume</a></li>
</ul>
</nav>
<h1> Contact me!</h1>
<?php
if(isset($_POST['send_email'])){
// collect the form values
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
// set the email properties
$to = '[email protected]';
$subject = "Contact Form Submission";
$from = $email;
$headers = "From: $from";
// attempt to send the mail, catch errors if they occur
try {
mail($to, $subject, $message, $headers);
$msg = "<strong>Your mail was sent successfully!</strong>";
} catch(Exception $e) {
$msg = "An Exception was thrown: ".$e -> getMessage()."<br>";
}
}
?>
<table align="left">
<form name="form1" method="post" action="<?php $_SERVER['PHP_SELF']?>" onSubmit="return checkForm()">
<tr><th>Name:</th>
<td><input type="text" name="name" id="name" /><br><span style="color:red;" id="namespan"></span>
</td>
</tr>
<tr><th>Email:</th>
<td><input type="text" name="email" id="email" /><br><span style="color:red;" id="emailspan"></span>
</td>
</tr>
<tr><th>Message:</th>
<td><textarea name="message" id="message"></textarea><br><span style="color:red;" id="messagespan"></span>
</td>
</tr>
<tr><td></td><td><input type="submit" name="send_email" value="Send Email Message" /></td></tr>
</form>
</table>
<footer></footer>
</body>
</html>
Voici le css
@charset "UTF-8";
/* CSS Document */
body{
font-size:16px;
cursor:default;
font-family:Georgia, serif;
background-color:#000000;
color: white;
}
header {
border-radius: 5px;
text-align: center;
margin-top: 12px;
height: 71px;
}
nav {
border-radius: 5px;
height: 20px;
width: auto;
display: block;
text-align:center;
padding-right: 35px;
color: #ffffff;
font-weight:bold;
background-color:#8000aa;
padding-top: .05px;
padding-bottom: 20px;
margin-top: 12px;
margin-bottom: 12px;}
nav li {
display: inline;
float: center;
}
nav a {
display: block, inline;
width: 60px;
}
/*link styles*/
a:link {
text-decoration: none;
}
a:visited {
text-decoration: underline;
color: white;
}
a:hover {
text-decoration: underline;
color: blue;
}
a:active {
text-decoration: underline;
}
/* end link styles */
/* main content */
h1 {
border-radius: 5px;
width: auto;
margin: 0 auto;
text-align: center;
margin-bottom: 12px;
background-color: #8000aa;}
table {
border-radius: 5px;
width: 36px;
height: 150px;
margin: 0 auto;
text-align: center;
padding-top:12px;
padding-bottom:12px;
margin-bottom: 12px;
background-color: #8000aa;
}
p {
border-radius: 5px;
width: auto;
height: auto;
margin: 0 auto;
text-align: center;
padding-top:12px;
padding-bottom:12px;
margin-bottom: 12px;
background-color: #8000aa;}
p a {
font-weight: bold;
}
/* end main content*/
footer {
border-radius: 5px;
clear: both;
text-align: center;
padding-top:12px;
padding-bottom:12px;
margin-bottom: 12px;
font-weight:bold;
background-color:#8000aa;}
Je n'arrive pas à croire que j'ai regardé ça. Quand je le change cependant il est maintenant étrangement espacé des conseils? \ – Cro68
Vous devez essayer bien sûr quel pourcentage adaptera à vos besoins, ainsi vous devez jouer avec: largeur: 60%, largeur: 70% ou tout ce qui convient. – Franco