28172 sujets

CSS et mise en forme, CSS3

Aide sur div / css

bonjour,

quelqu'un peut m'aider a construire avec les div une cadre avec des éléments de dans, comme sur ce images , mais qui il donne le même résultat dans trois principale navigateur, IE, Mozilla, Chrome .
(la taille est réel sur image )


http://crist.al/divForm.png 


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
#cadre {
	background-color: #FF0000;
	margin: 0px;
	padding: 0px;
	height: 260px;
	width: 490px;
	border: 1px solid 000;
	position: relative;
}
#Element_1 {
	width: 160px;
	height: 28px;
	margin: 5px 0px 40px  5px; /* top right bottom left */
	padding: 0px 5px 0px  5px; /* top right bottom left */
	position: relative;
	border: 1px solid 000;
	background-color: #FFF;
}
#Element_2 {
	width: 80px;
	height: 28px;
	margin: 5px 0px 40px  0px; /* top right bottom left */
	padding: 0px 5px 0px  5px; /* top right bottom left */
	position: relative;
	border: 1px solid 000;
	background-color: #FFF;
}
#Element_3 {
	width: 80px;
	height: 28px;
	margin: 5px 0px 40px  0px; /* top right bottom left */
	padding: 0px 5px 0px  5px; /* top right bottom left */
	position: relative;
	border: 1px solid 000;
	background-color: #FFF;
}
#Element_4 {
	width: 80px;
	height: 28px;
	margin: 5px 0px 40px  0px; /* top right bottom left */
	padding: 0px 5px 0px  5px; /* top right bottom left */
	position: relative;
	border: 1px solid 000;
	background-color: #FFF;
}
#Element_5 {
	width: 80px;
	height: 28px;
	margin: 5px 0px 40px  0px; /* top right bottom left */
	padding: 0px 5px 0px  5px; /* top right bottom left */
	position: relative;
	border: 1px solid 000;
	background-color: #FFF;
}
#Element_6 {
	width: 240px;
	height: 24px;
	margin: 0px 0px 20px  5px; /* top right bottom left */
	padding: 0px 5px 0px  5px; /* top right bottom left */
	position: relative;
	border: 1px solid 000;
	background-color: #FFF;
}
#Element_7 {
	width: 100px;
	height: 24px;
	margin: 0px 0px 20px  0px; /* top right bottom left */
	padding: 0px 5px 0px  5px; /* top right bottom left */
	position: relative;
	border: 1px solid 000;
	background-color: #FFF;
}
#Element_8 {
	width: 140px;
	height: 24px;
	margin: 0px 5px 20px  0px; /* top right bottom left */
	padding: 0px 5px 0px  5px; /* top right bottom left */
	position: relative;
	border: 1px solid 000;
	background-color: #FFF;
}
#Element_9 {
	width: 100px;
	height: 24px;
	margin: 0px 0px 20px  5px; /* top right bottom left */
	padding: 0px 5px 0px  5px; /* top right bottom left */
	position: relative;
	border: 1px solid 000;
	background-color: #FFF;
}
#Element_10 {
	width: 140px;
	height: 24px;
	margin: 0px 0px 20px  0px; /* top right bottom left */
	padding: 0px 5px 0px  5px; /* top right bottom left */
	position: relative;
	border: 1px solid 000;
	background-color: #FFF;
}
#Element_11 {
	width: 100px;
	height: 24px;
	margin: 0px 0px 20px  0px; /* top right bottom left */
	padding: 0px 5px 0px  5px; /* top right bottom left */
	position: relative;
	border: 1px solid 000;
	background-color: #FFF;
}
#Element_12 {
	width: 140px;
	height: 24px;
	margin: 0px 5px 20px  0px; /* top right bottom left */
	padding: 0px 5px 0px  5px; /* top right bottom left */
	position: relative;
	border: 1px solid 000;
	background-color: #FFF;
}
#Element_13 {
	width: 100px;
	height: 24px;
	margin: 0px 0px 20px  5px; /* top right bottom left */
	padding: 0px 5px 0px  5px; /* top right bottom left */
	position: relative;
	border: 1px solid 000;
	background-color: #FFF;
}
#Element_14 {
	width: 140px;
	height: 24px;
	margin: 0px 0px 20px  0px; /* top right bottom left */
	padding: 0px 5px 0px  5px; /* top right bottom left */
	position: relative;
	border: 1px solid 000;
	background-color: #FFF;
}
#Element_15 {
	width: 100px;
	height: 24px;
	margin: 0px 0px 20px  0px; /* top right bottom left */
	padding: 0px 5px 0px  5px; /* top right bottom left */
	position: relative;
	border: 1px solid 000;
	background-color: #FFF;
}
#Element_16 {
	width: 140px;
	height: 24px;
	margin: 0px 5px 20px  0px; /* top right bottom left */
	padding: 0px 5px 0px  5px; /* top right bottom left */
	position: relative;
	border: 1px solid 000;
	background-color: #FFF;
}
#Element_17 {
	width: 100px;
	height: 24px;
	margin: 0px 0px 0px  5px; /* top right bottom left */
	padding: 0px 5px 0px  5px; /* top right bottom left */
	position: relative;
	border: 1px solid 000;
	background-color: #FFF;
}
#Element_18 {
	width: 100px;
	height: 24px;
	margin: 0px 0px 0px  0px; /* top right bottom left */
	padding: 0px 5px 0px  5px; /* top right bottom left */
	position: relative;
	border: 1px solid 000;
	background-color: #FFF;
}
#Element_19 {
	width: 100px;
	height: 24px;
	margin: 0px 35px 0px  0px; /* top right bottom left */
	padding: 0px 5px 0px  5px; /* top right bottom left */
	position: relative;
	border: 1px solid 000;
	background-color: #FFF;
}
#Element_20 {
	width: 140px;
	height: 24px;
	margin: 0px 5px 0px  0px; /* top right bottom left */
	padding: 0px 5px 0px  0px; /* top right bottom left */
	position: relative;
	border: 1px solid 000;
	background-color: #FFF;
}
-->
</style>
</head>

<body>
<div class="cadre" id="cadre">
  <div class="Element_1" id="Element_1">&nbsp;</div>
  <div class="Element_2" id="Element_2">&nbsp;</div>
  <div class="Element_3" id="Element_3">&nbsp;</div>
  <div class="Element_4" id="Element_4">&nbsp;</div>
  <div class="Element_5" id="Element_5">&nbsp;</div>
  <div class="Element_6" id="Element_6">&nbsp;</div>
  <div class="Element_7" id="Element_7">&nbsp;</div>
  <div class="Element_8" id="Element_8">&nbsp;</div>
  <div class="Element_9" id="Element_9">&nbsp;</div>
  <div class="Element_10" id="Element_10">&nbsp;</div>
  <div class="Element_11" id="Element_11">&nbsp;</div>
  <div class="Element_12" id="Element_12">&nbsp;</div>
  <div class="Element_13" id="Element_13">&nbsp;</div>
  <div class="Element_14" id="Element_14">&nbsp;</div>
  <div class="Element_15" id="Element_15">&nbsp;</div>
  <div class="Element_16" id="Element_16">&nbsp;</div>
  <div class="Element_17" id="Element_17">&nbsp;</div>
  <div class="Element_18" id="Element_18">&nbsp;</div>
  <div class="Element_19" id="Element_19">&nbsp;</div>
  <div class="Element_20" id="Element_20">&nbsp;</div>
</div>
</body>
</html>


merci en avance
Modifié par Rey (22 Dec 2010 - 15:28)
Bonjour,

Le but d'Alsacréations n'est pas de faire le travail à la place des autres, mais de les aider à le faire eux même.

Montre nous tes essais et explique nous où tu bloc, là nous pourrons t'aider.

Dans l'immédiat, je ne peux que te diriger vers les tutos du site.
Sujet clos
Aller à