Verwijzing wordt niet zichtbaar

Door Bernhard G op 30-08-2015 11:09 gewijzigd op 02-09-2015 23:00

6.235 views

Beste,

Ik heb een los CSS bestand en HTML bestand. Echter word de opmaak van het CSS bestand deels niet zichtbaar. De achtergrondkleur veranderd wel (body) er is dus wel een verbinding. Kan iemand aangeven wat ik mis doe?

Alvast bedankt.

Ik heb in een HTML bestand de volgende code:


	</head>
<link rel="stylesheet" href="contactform.css" type="text/css" />
<body> 


<div id="formWrap">
<div id="form"></div>
	<div class="row"> 
	<div class="label"> naam </div>
	<div class="input"> 
	<input type="text" id="fullname" class="detail" name="fullname" value="" />
	<div class="context">tekst dat hier staat</div>
	</div> 
	</div>
	</div>

De code uit het CSS:


body{
		background:#E9E9E9;

#formWrap {
		width:720px;
		margin-top:30px;
		margin-left:30px; 
		background:#FFF; 
		border:1px solid #F1F1F1;
		-moz-border-radius:20px;
		-moz-box-shadow:2px 2px 5px #999;
		-webkit-border-radius:20px;
		-webkit-box-shadow:2px 2px 5px #999;
		padding:16px 10px 40px; 
		
		}

Ariën

30-08-2015 11:22

je body is niet afgesloten in je CSS.

Yvo Lionheart

30-08-2015 16:48 gewijzigd op 02-09-2015 23:00

Inderdaad, wat - Aar - al aangeeft. Zorg er ten alle tijden voor dat je sluit wat je hebt geopend. Dit geldt in principe vrijwel overal.

body{
background:#E9E9E9;
}

#formWrap {
width:720px;
margin-top:30px;
margin-left:30px; 
background:#FFF; 
border:1px solid #F1F1F1;
-moz-border-radius:20px;
-moz-box-shadow:2px 2px 5px #999;
-webkit-border-radius:20px;
-webkit-box-shadow:2px 2px 5px #999;
padding:16px 10px 40px; 
}

Eddy E

30-08-2015 21:24

Je hebt ook geen </body> en </html>.
Maar het kan zijn dat die later komen.

Daarbij hoort een <link> in de <head> te staan. En dat is soms wel zo handig.
Wil je je HTML eerst af hebben en dus sneller je pagina renderen, gooi je <link> dan echt helemaal aan het eind. Dus na </body>, maar wel voor </html>.

Bernhard G

30-08-2015 21:28

Super bedankt. Ik kan weer verder!

[size=xsmall]Toevoeging op 31/08/2015 12:14:46:[/size]

Ik ben een formulier los aan het maken (dus nog niet in mijn website) wanneer ik tevreden ben zal ik deze aan mijn webpagina toevoegen. Vandaar dat ik hem zo minimalistische opbouw.

Ik hoor graag feedback als deze gedachte niet slim is ;-)

Bernhard G

01-09-2015 18:51 gewijzigd op 02-09-2015 23:00

Er gaat nog iets mis.

De tekst van de e-mail adres en opmerkingen vallen niet in het grote witte vlak. Iemand enig idee wat er mis gaat?

CCS


body{
		background:#E9E9E9;
		}

#formWrap {
		width:720px;
		margin-top:30px;
		margin-left:30px; 
		background:#FFF; 
		border:1px solid #F1F1F1;
		-moz-border-radius:20px;
		-moz-box-shadow:2px 2px 5px #999;
		-webkit-border-radius:20px;
		-webkit-box-shadow:2px 2px 5px #999;
		padding:16px 10px 40px; 
}
		
#formWrap .form {
	border-top:1px solid #EEE;
	width:720px; 
}
	
#form .row {
	border-bottom:1px dotted #EEE;
	display:block;
	line-height:36px
	overflow:auto; 
	padding:24px 0px;
	width:100%;
	}
	
#form .row .label {
	font-size: 16px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	width: 180px;
	text-align: right; 
	float: left;
	padding-right: 10px;
	margin-right: 10px;
	}
	
#form .row .input {
	float: left; 
	margin-right: 10px;
	width: auto;
	}
	
.detail {
	width:260px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	padding: 7px 8px;
	margin: 0;
	}
	
.mess {
	width: 450px;
	max-width: 450px;
	height: 280px;
	overflow: auto; 
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	padding: 7px 8px;
	line-height: les;
	margin:0;
}
	
#form .row .content{
	color: #999;
	font-size: 11px;
	font-style: italic;
	line-height: 14px;
	font-family: Arial, Helvetica, sans-serif;
	width: 200px;
	float: left;
		
	}
#form #submit{
	font-family: Arial, Helvetica, sans-serif;
	margin-top: 25px;
	margin-left: 200px;
	color: #000;
	font-size: 16px;
	text-shadow: 1px 1px 1px #999;
	padding: 10px;
	}

HTML


<link rel="stylesheet" href="contactform.css" type="text/css" />
<body> 


<div id="formWrap">
<div id="form"></div>
	<div class="row"> 
	<div class="label"> naam </div>
	<div class="input"> 
	<input type="text" id="fullname" class="detail" name="fullname" value="" />
	<div class="context">tekst dat hier staat</div>
	</div> 
	</div>
	</div>
	
	<div class="row"> 
	<div class="label"> E-mailadres </div>
	<div class="input"> 
	<input type="text" id="e-mail" class="detail" name="email" value="" />
	<div class="context">tekst over je e-mail</div>
	</div> 
	</div>
	</div>
	
	<div class="row"> 
	<div class="label"> opmerkingen </div>
	<div class="input"> 
	<textarea id= "comment" name="comment" class="mess"></textarea>
	</div> 
	</div>
	</div>

	<div class="submit"> 
	<input type= "submit" id="submit" name="submit" value="send message"
	</div>

</div> 
</body> 

</html>

DavY -

01-09-2015 19:05 gewijzigd op 01-09-2015 19:07


<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Mijn Titel</title>
<link rel="stylesheet" href="contactform.css" type="text/css" />
</head>
<body>
<div id="formWrap">
<div id="form"></div>
<div class="row">
<div class="label"> naam </div>
<div class="input">
<input type="text" id="fullname" class="detail" name="fullname" value="" />
<div class="context">tekst dat hier staat</div>
</div>
</div>

<div class="row">
<div class="label"> E-mailadres </div>
<div class="input">
<input type="text" id="e-mail" class="detail" name="email" value="" />
<div class="context">tekst over je e-mail</div>
</div>
</div>

<div class="row">
<div class="label"> opmerkingen </div>
<div class="input">
<textarea id= "comment" name="comment" class="mess"></textarea>
</div>
</div>

<div class="submit">
<input type= "submit" id="submit" name="submit" value="send message" />
</div>
</div>
</body>
</html>

Je hebt 3 </div>'s voor elk veld, waarvan er maar 2 div's zijn. Sluit trouwens je input's wel goed af + Geef een Doctype op + charset.

Bernhard G

01-09-2015 19:16

Bedankt!

Wat bedoel je precies met: Sluit trouwens je input's wel goed af + Geef een Doctype op + charset?

Tnx

DavY -

01-09-2015 19:17 gewijzigd op 01-09-2015 19:21

Je had je input open staan:


<input type= "submit" id="submit" name="submit" value="send message"

Dat moest dus zo:


<input type= "submit" id="submit" name="submit" value="send message" />

Doctype:


<!DOCTYPE html>

Zie: http://www.handleidinghtml.nl/html/elementen/doctype.html

Charset:


<meta charset="utf-8">

Zie: https://nl.wikibooks.org/wiki/HTML/Character_sets

Eigenlijk is het teveel van het goede met al die div's en zou het netter zijn om het zo te schrijven: http://www.w3schools.com/tags/tag_fieldset.asp en http://www.w3schools.com/tags/tag_label.asp, maar ik neem aan dat je een beginner ben.

Bernhard G

02-09-2015 22:52 gewijzigd op 02-09-2015 23:02

Bedankt voor jullie reactie.

Ik heb nog een vraag.

Ik zou graag een optie met een datum keuze (agenda) en een tijdstip willen invoeren.

Enig idee hoe ik dit invoer?

oh en mijn redirect naar index.html werkt niet. Iemand een idee hoe dit kan?

Momenteel zien de codes er zo uit:

PHP


<?php

// Set email variables
$email_to = '[email protected]';
$email_subject = 'Verrassing aanvraag';

// Set required fields
$required_fields = array('fullname','email','cellphone');

// set error messages
$error_messages = array(
	'fullname' => 'Vul je naam in.',
	'email' => 'Vul je e-mailadres in.',
	'cellphone' => 'Vul je telefoonnummer in.'
	
);

// Set form status
$form_complete = FALSE;

// configure validation array
$validation = array();

// check form submittal
if(!empty($_POST)) {
	// Sanitise POST array
	foreach($_POST as $key => $value) $_POST[$key] = remove_email_injection(trim($value));
	
	// Loop into required fields and make sure they match our needs
	foreach($required_fields as $field) {		
		// the field has been submitted?
		if(!array_key_exists($field, $_POST)) array_push($validation, $field);
		
		// check there is information in the field?
		if($_POST[$field] == '') array_push($validation, $field);
		
		// validate the email address supplied
		if($field == 'email') if(!validate_email_address($_POST[$field])) array_push($validation, $field);
	}
	
	// basic validation result
	if(count($validation) == 0) {
		// Prepare our content string
		$email_content = 'New Website Comment: ' . "\n\n";
		
		// simple email content
		foreach($_POST as $key => $value) {
			if($key != 'submit') $email_content .= $key . ': ' . $value . "\n";
		}
		
		// if validation passed ok then send the email
		mail($email_to, $email_subject, $email_content);
		
		// Update form switch
		$form_complete = TRUE;
	}
}

function validate_email_address($email = FALSE) {
	return (preg_match('/^[^@\s]+@([-a-z0-9]+\.)+[a-z]{2,}$/i', $email))? TRUE : FALSE;
}

function remove_email_injection($field = FALSE) {
   return (str_ireplace(array("\r", "\n", "%0a", "%0d", "Content-Type:", "bcc:","to:","cc:"), '', $field));
}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>



	<title>Contact Form</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	
	<link href="contactform.css" rel="stylesheet" type="text/css" />
	
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>
	<script type="text/javascript" src="validation.js"></script>
	
	<script type="text/javascript">
		var nameError = '<?php echo $error_messages['fullname']; ?>';
		var emailError = '<?php echo $error_messages['email']; ?>';
		var cellphoneError = '<?php echo $error_messages['sellphone']; ?>';
	</script>

</head>

<body> 


<div id="formWrap">
<div id="form">
</div>

<form action="contact.php" method="post" id="comments_form">
<?php if($form_complete === FALSE): ?>
	<div class="row"> 
	<div class="label"> Voor en achternaam </div>
	<div class="input"> 
	<input type="text" id="fullname" class="detail" name="fullname" value="<?php echo isset($_POST['fullname'])? $_POST['fullname'] : ''; ?>" /><?php if(in_array('fullname', $validation)): ?><span class="error"><?php echo $error_messages['fullname']; ?></span><?php endif; ?>
	<div class="context"></div>
	</div> 
	</div>
	
	
	<div class="row"> 
	<div class="label"> E-mailadres </div>
	<div class="input"> 
	<input type="text" id="e-mail" class="detail" name="email" value="<?php echo isset($_POST['email'])? $_POST['email'] : ''; ?>" /><?php if(in_array('email', $validation)): ?><span class="error"><?php echo $error_messages['email']; ?></span><?php endif; ?>
	<div class="context"></div>
	</div> 
	</div>
	
	<div class="row"> 
	<div class="label"> Telefoonnummer </div>
	<div class="input"> 
	<input type="number" id="cellphone" class="detail" name="cellphone" value="<?php echo isset($_POST['cellphone'])? $_POST['cellphone'] : ''; ?>" /><?php if(in_array('cellphone', $validation)): ?><span class="error"><?php echo $error_messages['cellphone']; ?></span><?php endif; ?>
	<div class="context"></div>
	</div> 
	</div>
	
	<div class="row"> 
	<div class="label"> Opmerkingen </div>
	<div class="input"> 
	<textarea id= "comment" name="comment" class="mess"><?php echo isset($_POST['comment'])? $_POST['comment'] : ''; ?></textarea><?php if(in_array('comment', $validation)): ?><span class="error"><?php echo $error_messages['comment']; ?></span><?php endif; ?>
	</div> 
	</div>
	

	<div class="submit"> 
	<input type= "submit" id="submit" name="submit" value="send message" />
	</div>
	</form> 
<?php else: ?>
<p>Thank you for your Message!</p>

<script type="text-javascript">
setTimeout('ourRedirect()',5000)
function ourRedirect() {
	location.href='index.html'
	}
</script>

<?php endif; ?>

</div> 
</body> 

</html>

CSS


body{
		background:#E9E9E9;
		}

#formWrap {
		width:720px;
		margin-top:30px;
		margin-left:30px; 
		background:#FFF; 
		border:1px solid #F1F1F1;
		-moz-border-radius:20px;
		-moz-box-shadow:2px 2px 5px #999;
		-webkit-border-radius:20px;
		-webkit-box-shadow:2px 2px 5px #999;
		padding:16px 10px 40px; 
}
		
#formWrap .form {
	border-top:1px solid #EEE;
	width:720px; 
}
	
#form .row {
	border-bottom:1px dotted #EEE;
	display:block;
	line-height:36px
	overflow:auto; 
	padding:24px 0px;
	width:100%;
	}
	
#form .row .label {
	font-size: 16px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	width: 180px;
	text-align: right; 
	float: left;
	padding-right: 10px;
	margin-right: 10px;
	}
	
#form .row .input {
	float: left; 
	margin-right: 10px;
	width: auto;
	}
	
.detail {
	width:260px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	padding: 7px 8px;
	margin: 0;
	display: block;
	
	}
	
.mess {
	width: 450px;
	max-width: 450px;
	height: 280px;
	overflow: auto; 
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	padding: 7px 8px;
	line-height: les;
	margin:0;
	display: block;
}
	
#form .row .content{
	color: #999;
	font-size: 11px;
	font-style: italic;
	line-height: 14px;
	font-family: Arial, Helvetica, sans-serif;
	width: 200px;
	float: left;
		
	}
#form #submit{
	font-family: Arial, Helvetica, sans-serif;
	margin-top: 25px;
	margin-left: 200px;
	color: #000;
	font-size: 16px;
	text-shadow: 1px 1px 1px #999;
	padding: 10px;
	}

span.error{
	color: #000;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px
	padding: 25px;
}

Ariën

02-09-2015 23:08

Waarom wil je een pagina met een 'het is gelukt'-melding doorsturen? Laat hem liever zelf bevestigen dat hij het gezien heeft.

Verder zou ik de settimout zou doen: window.setTimeout("location=('index.html');",5000);

Verder kan je in je formulier een datum en tijdveld invoegen, waarbij je eventueel gebruik kan maken van de datepicker uit jQueryUI. Vergeet uiteraard niet te valideren.

Reageren

Inloggen om te reageren