Quel type de programmation pour créé un site

calatador Messages postés 15 Statut Membre -  
Sixtinestudio Messages postés 87 Statut Membre -
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
A voir également:

1 réponse

Réponse 1 / 1
Sixtinestudio Messages postés 87 Statut Membre 47
 
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.
0
calatador Messages postés 15 Statut Membre
 
merci pour votre repense
mais peut tu me montre comment je peut faire la partie d'affichage?
0
Sixtinestudio Messages postés 87 Statut Membre 47
 
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;
}
0