Bonjour à tous,
J'ai un petit problème de mise en page, je vais essayer d'être le plus clair possible.
J'ai une page html qui contient mon contener avec une image de fond.
Dans ce contener j'ai une image qui se situe sur la gauche et à droite je souhaite avoir un formulaire avec lui aussi une image de fond mais qui s'agrandi en fonction de la hauteur de mon formulaire.
Donc pour faire j'ai divisé mon image de fond de mon formulaire en 3 parties: tête, milieu, pied.
Le souci c'est que je n'arrive pas a mettre mes 3 images en dessous de mon formulaire. Ces images se mettent automatiquement en bas du formulaire. Alors que je voudrais que ca se superpose. J'ai essayer différentes methodes : z index, float, ....
Mais je ne trouve pas pourquoi, si queslqu'un à la solution à mon problème...
Voici le code html:
Et ma css :
Ca doit être une erreur évidente mais je viens de me lancer dans le html sans l'aide de dreamweaver et j'avoue que ca se complique un peu.
Merci à tous
J'ai un petit problème de mise en page, je vais essayer d'être le plus clair possible.
J'ai une page html qui contient mon contener avec une image de fond.
Dans ce contener j'ai une image qui se situe sur la gauche et à droite je souhaite avoir un formulaire avec lui aussi une image de fond mais qui s'agrandi en fonction de la hauteur de mon formulaire.
Donc pour faire j'ai divisé mon image de fond de mon formulaire en 3 parties: tête, milieu, pied.
Le souci c'est que je n'arrive pas a mettre mes 3 images en dessous de mon formulaire. Ces images se mettent automatiquement en bas du formulaire. Alors que je voudrais que ca se superpose. J'ai essayer différentes methodes : z index, float, ....
Mais je ne trouve pas pourquoi, si queslqu'un à la solution à mon problème...
Voici le code html:
<div id="contenerp3tel">
<ul>
<li><a href="#" class="textebold">Téléphone</a></li>
<li><a href="page3module1.html" class="textebold">Module 1</a></li>
<li><a href="#" class="textebold">Module 2</a></li>
</ul>
<div id="retour"><p><a href="index.html">Retour</a></p></div>
<div id="textehaut"><table width="600" border="0" cellpadding="3px">
<tr>
<td width="78"><img src="images/page3/icone.jpg" width="78" height="64" alt=""/></td>
<td><p class="textebold">Configuration les touches d’extensions</p>
<p class="textebleu">Configurez les boutons d’extension pour votre téléphone</p></td>
</tr>
</table></div>
<div id="imgtelephonep3"><img src="images/page3/6961.png"/></div>
<div id="formrightp3tel">
<form id="form1" name="form1" method="post" action="">
<table width="100" border="0">
<tr>
<td class="textebleuregular">1</td>
<td><input name="textfield" type="text" id="textfield" size="15" disabled="disabled"/></td>
<td><input name="textfield2" type="text" id="textfield2" size="15" disabled="disabled"/></td>
<td><input type="radio" name="radio" id="radio" value="radio" disabled="disabled"/></td>
<td><input type="radio" name="radio2" id="radio2" value="radio2" disabled="disabled"/></td>
</tr>
<tr>
<td class="textebleuregular">2</td>
<td><input name="textfield3" type="text" id="textfield3" size="15" disabled="disabled"/></td>
<td><input name="textfield4" type="text" id="textfield4" size="15" disabled="disabled"/></td>
<td><input type="radio" name="radio3" id="radio3" value="radio3" disabled="disabled"/></td>
<td><input type="radio" name="radio4" id="radio4" value="radio4" disabled="disabled"/></td>
</tr>
<tr>
<td class="textebleuregular">3</td>
<td><input name="textfield5" type="text" id="textfield5" size="15" disabled="disabled"/></td>
<td><input name="textfield6" type="text" id="textfield6" size="15" disabled="disabled"/></td>
<td><input type="radio" name="radio5" id="radio5" value="radio5" disabled="disabled"/></td>
<td><input type="radio" name="radio6" id="radio6" value="radio6" disabled="disabled"/></td>
</tr>
<tr>
<td class="textebleuregular">4</td>
<td><input name="textfield7" type="text" id="textfield7" size="15" /></td>
<td><input name="textfield8" type="text" id="textfield8" size="15" /></td>
<td><input type="radio" name="radio17" id="radio7" value="radio17" /></td>
<td><input type="radio" name="radio17" id="radio8" value="radio17" /></td>
</tr>
<tr>
<td class="textebleuregular">5</td>
<td><input name="textfield9" type="text" id="textfield9" size="15" /></td>
<td><input name="textfield10" type="text" id="textfield10" size="15" /></td>
<td><input type="radio" name="radio18" id="radio9" value="radio18" /></td>
<td><input type="radio" name="radio18" id="radio10" value="radio18" /></td>
</tr>
<tr>
<td class="textebleuregular">6</td>
<td><input name="textfield11" type="text" id="textfield11" size="15" /></td>
<td><input name="textfield12" type="text" id="textfield12" size="15" /></td>
<td><input type="radio" name="radio19" id="radio11" value="radio19" /></td>
<td><input type="radio" name="radio19" id="radio12" value="radio19" /></td>
</tr>
<tr>
<td class="textebleuregular">7</td>
<td><input name="textfield13" type="text" id="textfield13" size="15" /></td>
<td><input name="textfield14" type="text" id="textfield14" size="15" /></td>
<td><input type="radio" name="radio20" id="radio13" value="radio20" /></td>
<td><input type="radio" name="radio20" id="radio14" value="radio20" /></td>
</tr>
<tr>
<td class="textebleuregular">8</td>
<td><input name="textfield25" type="text" id="textfield15" size="15" /></td>
<td><input name="textfield15" type="text" id="textfield16" size="15" /></td>
<td><input type="radio" name="radio21" id="radio15" value="radio21" /></td>
<td><input type="radio" name="radio21" id="radio16" value="radio21" /></td>
</tr>
<tr>
<td class="textebleuregular">9</td>
<td><input name="textfield26" type="text" id="textfield17" size="15" /></td>
<td><input name="textfield16" type="text" id="textfield18" size="15" /></td>
<td><input type="radio" name="radio22" id="radio17" value="radio22" /></td>
<td><input type="radio" name="radio22" id="radio18" value="radio22" /></td>
</tr>
<tr>
<td class="textebleuregular">10</td>
<td><input name="textfield27" type="text" id="textfield19" size="15" /></td>
<td><input name="textfield17" type="text" id="textfield20" size="15" /></td>
<td><input type="radio" name="radio23" id="radio19" value="radio23" /></td>
<td><input type="radio" name="radio23" id="radio20" value="radio23" /></td>
</tr>
<tr>
<td class="textebleuregular">11</td>
<td><input name="textfield28" type="text" id="textfield21" size="15" /></td>
<td><input name="textfield18" type="text" id="textfield22" size="15" /></td>
<td><input type="radio" name="radio24" id="radio21" value="radio24" /></td>
<td><input type="radio" name="radio24" id="radio22" value="radio24" /></td>
</tr>
<tr>
<td class="textebleuregular">12</td>
<td><input name="textfield29" type="text" id="textfield23" size="15" /></td>
<td><input name="textfield19" type="text" id="textfield24" size="15" /></td>
<td><input type="radio" name="radio25" id="radio23" value="radio25" /></td>
<td><input type="radio" name="radio25" id="radio24" value="radio25" /></td>
</tr>
</table>
<br />
<br />
</form>
<div id="formtete"><img src="images/page3/formtete.png"/></div>
<div id="formmilieu"><img src="images/page3/formmilieu.png"/></div>
<div id="formpied"><img src="images/page3/formpied.png"/></div>
</div>
<div id="modifierp3"><input type="button" value="Modifier" />
</div>
</div>
Et ma css :
#contenerp3tel{background:url("images/page3/image2.jpg") no-repeat;
height:646px;}
ul {
list-style-type: none;
margin: 0;
padding: 0 0 0 17px;
}
li {
float:left; /*pour IE*/
margin: 13px 0 0 0px;
}
ul li a {
display:block;
float:left;
width:117px;
height:30px;
line-height:24px;
background:url(images/boutons/btn.png) repeat-x;
color:#003366;
text-decoration:none;
text-align:center;
}
ul li a:hover {
background:url(images/boutons/btnrellover.png) repeat-x;
}
#formrightp3tel{float: right;
height: 380px;
padding: 79px 36px 0 0;
position: relative;
z-index: 2;}
#modifierp3{float: left;
padding: 30px 0 0 360px;}
#imgtelephonep3{clear: both;
float: left;
padding: 35px 0 0 35px;
width: 380px;}
#formtete{
float: right;
height: 100px;
padding: 30px 40px 0 0;
position: absolute;
z-index: 1;}
Ca doit être une erreur évidente mais je viens de me lancer dans le html sans l'aide de dreamweaver et j'avoue que ca se complique un peu.
Merci à tous