Quel type de programmation pour créé un site

calatador -

Bonjour,

quel type de programmation pour créé un site qui se base sur de 2 image au centre

exemple

http://tunistwestival.com/

ou le deux image sont
http://tunistwestival.com/img/page_background.png
http://tunistwestival.com/img/body_background.jpg

Afficher la suite

1 réponse

Sixtinestudio

Quelle est la question ?

Avec quoi a été fait ce site ?
XHTML et CSS pour l'affichage
PHP pour envoyer le formulaire sur un bdd je suppose.

calatador Auteur
merci pour votre repense
mais peut tu me montre comment je peut faire la partie d'affichage?

0

Réagir

Sixtinestudio

Le 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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>Tunis Twestival </title>
	<link type="text/css" rel="stylesheet" href="css/style.css" media="all" />
	<script type="text/javascript">

	  var _gaq = _gaq || [];
	  _gaq.push(['_setAccount', 'UA-21930038-1']);
	  _gaq.push(['_trackPageview']);

	  (function() {
		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	  })();

	</script>
	</head>
<body>
	<div id="page">

		<div id="main">
			<div id="leftCol">
				<form action="" method="post" id="inscriptionForm" onsubmit="return veriForm(this)">
					<div class="line">
						<input type="text" class="field" name="name" id="name" />
						<label class="label" for="name">Nom</label>
					</div>
					<div class="line">

						<input type="text" class="field" name="aftername" id="aftername" />
						<label class="label" for="after-name">Prénom</label>
					</div>
					<div class="line">
						<div class="field">
							<input type="radio" name="gender" id="Mr" value="Mr" />
							<label for="Mr">Mr</label>
							
							<input type="radio" name="gender" id="Mlle" value="Mlle" />

							<label for="Mlle">Mlle</label>
							
							<input type="radio" name="gender" id="Mme" value="Mme" />
							<label for="Mme">Mme</label>
						</div>
						<label class="label" class="label">Civilité</label>
					</div>
					<div class="line">

						<input type="text" class="field" name="email" id="email" />
						<label class="label" for="email">E-mail</label>
					</div>
					<div class="line">
						<input type="text" class="field" name="mobile" id="mobile" />
						<label class="label" for="mobile">Mobile</label>
					</div>
					<span class="caption">Tous les champs sont obligatoires</span>

					<input type="submit" class="submit noTxt" value="Inscription" />
					<script type="text/javascript">
						function veriForm(form){
							var $gender = "";
							var mobileRegex = new RegExp(/^(99|98|97|96|95|94|93|55|50|40|20|21|22|23|24|25|26|27)[0-9]{6}/gi);
							var mailRegex = new RegExp('^[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*@[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*[\.]{1}[a-z]{2,6}$', 'i');
							for( i = 0; i < form.gender.length; i++ ){
								if( form.gender[i].checked == true )
									$gender = form.gender[i].value;
							}
							
							if(form.name.value == ""){
								alert("Veuillez indiquer votre nom")
								return false;
							}
							
							if(form.aftername.value == ""){
								alert("Veuillez indiquer votre prénom")
								return false;
							}
							
							if($gender == ""){
								alert("Veuillez indiquer votre civilité")
								return false;
							}
							
							if(!mailRegex.test(form.email.value)){
								alert("Veuillez indiquer une adresse E-mail correcte")
								return false;
							}
							
							if(!mobileRegex.test(form.mobile.value)){
								alert("Veuillez indiquer un numéro mobile correcte")
								return false;
							}
							return true;
						}
					</script>
				</form>
			</div>
			<div id="rightCol">
				<p><b>Twestival se déroule dans plus de 200 villes au Monde simultanément. C'est un rassemblement d'internautes, soutenant une cause locale ou globale.</b></p>
				<p>Twestival est la plus grande initiative globale de collecte de fonds réalisée à travers les  média sociaux. Depuis 2009, les bénévoles ont amassé près de 1,2 million de dollars pour 137 organismes sans but lucratif. Tous les événements  locaux sont organisés à 100% par des bénévoles et 100% des ventes de billets ainsi que des dons vont directement aux projets.<br />Cette année et pour la première fois en Tunisie les fond seront reversés a l'association Les chomeurs de Rayhana</p>

				<p>
					<b>
						<span>JEUDI 24 MARS 2011de 20H à Minuit à l'acropolium de carthage</span><br />billet 10 DT<br />dons: 30, 50 et 100 DT
					</b>
				</p>
				<div class="sponsors">
					<span class="label">Les sponsors :</span>
					<div class="picKeeper">

						<img src="img/partners.gif" alt="Code - Syauctura - Tunisie Telecom - Hexabyte" />
					</div>
				</div>
				<div class="miniLink"><a href="https://www.facebook.com/tunistwestival" target="_blank">Facebook</a> | <a href="https://twitter.com/tunistwestival" target="_blank">Twitter</a></div>
			</div>
		</div>
	</div>

</body>
</html>

le css :

*{
	padding:0;
	margin:0;
	border:none;
	outline:0;
	list-style:none;
}
.noTxt{
	text-align:left !important;
	font-size:0 !important;
	line-height:0 !important;
	text-indent:-9999px !important;
	overflow:hidden !important;
}
body{
	font-size:12px;
	color:#858585;
	font-family:Arial, Helvetica, sans-serif;
	background:#528dab url(../img/body_background.jpg) top center no-repeat;
}
#page{
	width:100%;
	overflow:hidden;
	background:url(../img/page_background.png) center top no-repeat;
}
#main{
	width:876px;
	margin:0 auto;
	padding:360px 81px 20px;
	overflow:hidden;
}
#leftCol{
	position:relative;
	float:left;
	width:365px;
	height:400px;
	padding-top:30px;
}
#leftCol .line{
	clear:both;
	padding:8px 0;
	overflow:hidden;
}
#leftCol .line .label{
	float:right;
	line-height:30px;
	padding-right:15px;
	color:#858585;
	font-size:14px;
	font-weight:bold;
}
#leftCol .line .field{
	float:right;
	height:30px;
	width:243px;
	font-size:14px;
	color:#666665;
	overflow:hidden;
}
#leftCol .line input.field{
	width:233px;
	padding:0 5px;
	font-size:12px;
	color:#858585;
	background:url(../img/input_background.gif) right bottom no-repeat;
}
#leftCol .line .field label{
	cursor:pointer;
	line-height:30px;
	margin:0 20px 0 5px;
}
#leftCol .caption{
	display:block;
	width:243px;
	float:right;
	padding-left:5px;
	color:#858585;
	font-size:11px;
}
#leftCol .submit{
	position:absolute;
	bottom:27px;
	right:55px;
	display:block;
	height:90px;
	width:230px;
	cursor:pointer;
	background:none;
}
#rightCol{
	position:relative;
	float:left;
	width:460px;
	height:400px;
	overflow:hidden;
	padding-left:25px;
}
#rightCol .sponsors{
	height:40px;
	padding-top:20px;
	overflow:hidden;
}
#rightCol .sponsors .label{
	float:left;
	line-height:40px;
	padding-right:10px;
	color:#5d9fc1;
	font-size:12px;
	font-weight:bold;
}
#rightCol .sponsors .picKeeper{
	float:left;
	height:40px;
	line-height:40px;
	overflow:hidden;
}
#rightCol .miniLink{
	position:absolute;
	bottom:0px;
	right:0;
	color:#FFF;
	font-size:12px;
	line-height:39px;
}
#rightCol .miniLink a{
	color:#FFF;
	padding:0 5px;
	text-decoration:none;
}
#rightCol .miniLink a:hover{
	text-decoration:underline;
}
#rightCol p{
	display:block;
	font-size:14px;
	color:#858585;
	padding:7px 0;
	overflow:hidden;
	text-align:justify;
}
#rightCol p b{
	color:#686868;
}
#rightCol p a{
	color:#ea4353;
	text-decoration:underline;
}
#rightCol p span{
	color:#5d9fc1;
}

Quel type de programmation pour créé un site

1 réponse

Discussions similaires

Newsletters