Bonsoir,
Je rencontre un problème avec la mise en page de mon site.
J'aimerais inclure un sondage dans la partie grise en bas à droite. (titre, questions...).
J'aimerais que ce cadre reste de largeur fixe car lorsque le texte est trop long la mise en page est complètement déréglée. Le div "sondage" passe en dessous des div particulier et professionnel et s'élargit en fonction du contenu.
L'ajout de sondage étant dynamique, la taille des questions et des réponses peut varier.
Je pensais utiliser un tableau avec une largeur maximum mais sans succès.
Est-il possible de l'implémenter en utilisant les listes?
Ou est-ce ma mise en forme qui doit être revue?
Est-ce qu'un autre type de positionnement réglerait le problème?
Le sondage est mon dernier module a implémenté.Le code php est terminé, il ne me reste plus que la mise en page
.
Vous pouvez consulter le site à cette adresse
http://renard.chenapan.free.fr/probleme/index.php?page=accueil
Merci d'avance pour les réponses.
Je rajoute le code CSS commenté :
Modifié par SirPsycho (18 Nov 2006 - 02:28)
Je rencontre un problème avec la mise en page de mon site.
J'aimerais inclure un sondage dans la partie grise en bas à droite. (titre, questions...).
J'aimerais que ce cadre reste de largeur fixe car lorsque le texte est trop long la mise en page est complètement déréglée. Le div "sondage" passe en dessous des div particulier et professionnel et s'élargit en fonction du contenu.
L'ajout de sondage étant dynamique, la taille des questions et des réponses peut varier.
Je pensais utiliser un tableau avec une largeur maximum mais sans succès.
Est-il possible de l'implémenter en utilisant les listes?
Ou est-ce ma mise en forme qui doit être revue?
Est-ce qu'un autre type de positionnement réglerait le problème?
Le sondage est mon dernier module a implémenté.Le code php est terminé, il ne me reste plus que la mise en page
.Vous pouvez consulter le site à cette adresse
http://renard.chenapan.free.fr/probleme/index.php?page=accueil
Merci d'avance pour les réponses.
Je rajoute le code CSS commenté :
/* CSS Document */
body
{
padding: 0 ;
margin:5px;
text-align: left ;
font-family: Arial, Hevlvetica, sans-serif;
background: #ffffff ;
}
div#conteneur
{
position:relative;
width: 775px ;
margin: 0 auto ;
text-align: left ;
background: #ffffff ;
z-index:0;
}
div#header
{
position:relative;
width: 775px;
height: 149px;
border: 1px solid #aaa;
z-index:1;
background:#fff;
}
div#slogan_cheque
{
/* on place le bloc gauche à gauche en position absolue */
position:relative;
margin-left:159px;
margin-top: -398px;
width:616px;
height:70px;
border: 1px solid #aaa;
z-index:4;
background:0f0;
}
div#menu
{
position:relative;
margin-top:-1px;
width: 159px;
height: 396px;
border: 1px solid #aaa;
background: #fff;
z-index:3;
}
div#contenu
{
position:relative;
margin-top:-1px;
margin-left:159px;
width: 616px;
border: 1px solid #aaa;
background: #fff;
z-index:5;
height: 325px;
}
html>body #contenu {
height: auto;
min-height: 325px;
}
div#pied_page
{
height: 15px;
background: #fff;
z-index:8;
font-family: Arial, Hevlvetica, sans-serif;
font-size: 11px;
text-align:center;
}
img {
display: block;
}
div#particulier
{
position:relative;
width: 234px;
height: 275px;
border-top:0;
border-right:1px solid #aaa;
border-left:0;
border-bottom:1px solid #aaa;
float:left;
margin-bottom:0px;
}
div#professionnel
{
position:relative;
width: 234px;
height: 275px;
float:left;
border-top:0;
border-right:1px solid #aaa;
border-left:0;
border-bottom:1px solid #aaa;
margin-bottom:0px;
}
div#telephone
{
position:relative;
float:left;
width: 146px;
height: 90px;
background:0f0;
border: 0 ;
margin-bottom:0px;
}
div#sondage
{
position:relative;
float:right;
width: 146px;
height: 235px;/*240ok*/
background: #aaa ;
margin-bottom:0px;
}
.part
{
margin-bottom:0px;
}
.logo {
float: right; /* alignement du logo à droite */
margin-right: 5px; /* placement du logo dans son conteneur, head1 */
margin-top:15px;
}
.banniere {
float: left; /* alignement du logo à droite */
margin-right: 0px; /* placement du logo dans son conteneur, head1 */
margin-top:0px;
border-right: 1px solid #aaa;
}
.slogan {
float: left; /* alignement du logo à droite */
}
.cheque {
float: right; /* alignement du logo à droite */
}
ul#menu
{
margin: 0 ; /* O car on ne veut pas de marge entre le menu et le conteneur*/
padding: 0 ;
border-right: 1px solid #aaa ;
border-left:0;
list-style-type: none ; /*on enlève la puce car elle est déjà présente sur l'image*/
}
ul#menu li
{
height: 25px ; /*taille de l'image qui sert de menu*/
background: url(./images/accueil/menu_bg.png) repeat-x 0 0 ; /* on affiche que la moitié d el'image pour le roll over*/
}
ul#menu li a
{
width: 159px ;
line-height: 25px ;
display: block ;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #ccc;
text-align: left;
padding-left: 18px;
width: 100%;
text-decoration: none;
}/* C'est sur les liens que le gros du travail est effectué, largeur, hauteur de ligne, taille de police, graisse de police, espacement des lettres, couleur, bordure et decoration du texte. Nous pouvons dimensionner les a grâce à la propriété display: block ; */
/*
a.menu#active_menu {
color:#fff;
font-weight: bold;
}
a.mainlevel#active_menu:hover {
color: #fff;
}*/
ul#menu li a:hover
{
background: url(./images/accueil/menu_bg.png) repeat-x 0 -25px ;
color: #fff;
}/* Et pour finir on décale l'image de fond au passage de la souris pour laisser aparaître l'état survolé de l'image, voir le tutoriel sur les roll over pour plus de détails */
ul#titre
{
margin: 0 ; /* O car on ne veut pas de marge entre le menu et le conteneur*/
padding: 0 ;
border-right: 1px solid #aaa ;
border-left:0;
list-style-type: none ; /*on enlève la puce car elle est déjà présente sur l'image*/
}
ul#titre li
{
height: 21px ; /*taille de l'image qui sert de menu*/
text-align: center ;
background: url(./images/accueil/titre_bg.png) repeat-x 0 0 ; /* on affiche que la moitié d el'image pour le roll over*/
color: #666666;
text-align: left;
padding-left: 3px;
height: 21px;
line-height: 21px;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
}
table#menu
{
text-align:left;
font-size: 11px;
}
table#menu td a
{
font-family: Arial, Hevlvetica, sans-serif;
font-weight: bold;
color: #1165AA;
text-decoration: none;
}
.label
{
text-align:left;
}
.textinput
{
width:90px;
}
ul#formulaire
{
margin: 0 ; /* O car on ne veut pas de marge entre le menu et le conteneur*/
padding: 0 ;
border-right: 1px solid #aaa ;
border-left:0;
list-style-type: none ; /*on enlève la puce car elle est déjà présente sur l'image*/
}
ul#formulaire li
{
padding:0;
height: 5px ; /*taille de l'image qui sert de menu*/
text-align: center ;
}
.button
{
color: #1165AA;
font-family: Arial, Hevlvetica, sans-serif;
font-size: 11px;
font-weight: bold;
border: 3px double #cccccc;
width: auto;
background: url(./images/accueil/button_bg.png) repeat-x;
padding: 0 0 0 5px;
line-height: 18px !important;
line-height: 16px;
height: 26px !important;
height: 24px;
margin: 0 0 4px 20px;
}
h1#qsn
{
color: #094D96;
font-size: 15px;
font-weight: bold;
margin:2px 0px 10px 1em;
}
h2#qsn
{
color: #094D96;
font-size: 11px;
font-weight: bold;
margin: 0 0 0 1em;
padding-top: 1px;
padding-bottom: 1px; }
p#contact_accueil
{
margin-top: 2em;
text-align:center;
font-family: Arial, Hevlvetica, sans-serif;
}
p#inscrivez
{
margin-top:0.5em;
text-align:center;
font-family: Arial, Hevlvetica, sans-serif;
font-size: 11px;
}
p#normal
{
margin: 0 0 2px;
padding: 4px;
font-family: Arial, Hevlvetica, sans-serif;
font-size: 11px;
color: #333333;
}
ul#classique
{
margin: 0; /* O car on ne veut pas de marge entre le menu et le conteneur*/
list-style-type: none ; /*on enlève la puce car elle est déjà présente sur l'image*/
font-family: Arial, Hevlvetica, sans-serif;
font-size: 11px;
color: #333333;
padding: 0 0 0 0;
}
ul#classique li
{
margin: 2px 0 0 2px; /* O car on ne veut pas de marge entre le menu et le conteneur*/
list-style-type: none ; /*on enlève la puce car elle est déjà présente sur l'image*/
padding: 0 0 0 0;
}
.ministre
{
float:left;
margin-left:3px;
margin-right:10px;
margin-bottom:3px;
}
.logo_cesu
{
float:left;
margin-left:3px;
margin-right:10px;
margin-bottom:40px;
margin-top:40px;
}
.coiffeur
{
float:left;
margin-left:3px;
margin-right:10px;
margin-bottom:3px;
}
h1#cesu
{
color: #094D96;
font-size: 15px;
font-weight: bold;
margin:15px 0px 15px 1em;
}
h2#cesu
{
color: #333333;
font-size: 15px;
font-weight: bold;
margin: 0;
padding-top: 1px;
padding-bottom: 1px; }
p#cesu
{
margin: 0 0 2px;
padding: 4px;
font-family: Arial, Hevlvetica, sans-serif;
font-size: 13px;
color: #333333;
}
.spacer {
clear: both;
}
/*formulaire d'inscription*/
#inscription {
border: none;
margin: 0;
padding: 0;
width: 50em; /*** Largeur du formulaire ***/
}
#corpform { /*** Mise en fome du corp du formulaire (bordure, couleur du fond...) ***/
margin: 0 0 1em 0;
padding:0;
font-family: Arial, Hevlvetica, sans-serif;
font-weight: bold;
color: #1165AA;
font-size:11px;
}
#corpform fieldset { /*** Mise en forme des cadres ***/
margin: 1em;
font-style: normal;
padding: 1em 1em 1em 1em;
border: 1px solid #1165AA;
}
#corpform fieldset#inscription label { /*** Mise en forme des intitulés de champs ***/
float: left; /*** Très important, ne pas suprimer ! ***/
width: 40%; /*** Les intitulés prennent 1/3 de la largeur totale du formulaire... ***/
text-align: left; /*** ... et ils sont alignés à droite... ***/
margin: 0;
padding: 0 .5em 0 0;
line-height: 1.8; /*** ... et centrés verticalement. ***/
}
#corpform p { /*** Mise en forme des lignes du formulaire ***/
padding: 0;
margin: 0 0 1px 0;
}
#corpform legend { /*** Mise en forme des titres des cadres ***/
font-weight: bold;
color: #1165AA;
background: transparent;
}
#corpform span { /*** Mise en forme des titres des cadres ***/
font-weight: bold;
color: #1165AA;
background: transparent;
padding-left:3px;
}
.button1
{
color: #1165AA;
font-family: Arial, Hevlvetica, sans-serif;
font-size: 11px;
font-weight: bold;
border: 3px double #cccccc;
width: auto;
background: url(./images/accueil/button_bg.png) repeat-x;
padding: 2px 5px;
line-height: 18px !important;
line-height: 16px;
height: 26px !important;
height: 24px;
margin: 15px 0 0 200px;
}
#corpform p.erreur { /*** Mise en forme des intitulés de champs ***/
padding: 1em .5em 0 0;
line-height: 1.8; /*** ... et centrés verticalement. ***/
color:red;
}
#corpform em { /*** Mise en forme des intitulés de champs ***/
display:block;
padding: 1em 0 1em 0;
line-height: 1.8; /*** ... et centrés verticalement. ***/
color:red;
}
#corpform a.aide { /*** Mise en forme des bulles d'aide ***/
display:inline;
text-decoration: none;
}
#corpform a.aide { /*** Mise en forme des bulles d'aide ***/
text-decoration: none;
}
#corpform a.aide img { /*** Mise en forme de l'image des bulles d'aide ***/
margin: 0;
padding: 0;
border: 0;
}
#corpform a.aide:hover { /*** Le curseur de la souris change d'aspect quand il passe au-dessus d'une bulle d'aide ***/
cursor: help;
}
p#menu
{
text-align:center;
color: #1165AA;
font-family: Arial, Hevlvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}
p#confirmation
{
text-align:center;
color: #1165AA;
font-family: Arial, Hevlvetica, sans-serif;
font-size: 15px;
font-weight: bold;
margin-bottom:1em;
}
.retour
{
color: #1165AA;
font-family: Arial, Hevlvetica, sans-serif;
font-size: 11px;
font-weight: bold;
border: 3px double #cccccc;
width: auto;
background: url(./images/accueil/button_bg.png) repeat-x;
padding: 0 0 0 5px;
line-height: 18px !important;
line-height: 16px;
height: 26px !important;
height: 24px;
text-decoration:none;
}
p#erreur
{
text-align:center;
color: #f00;
font-family: Arial, Hevlvetica, sans-serif;
font-size: 15px;
font-weight: bold;
}
p#bouton_validation
{
text-align:center;
}
.button10
{
color: #1165AA;
font-family: Arial, Hevlvetica, sans-serif;
font-size: 11px;
font-weight: bold;
border: 3px double #cccccc;
width: auto;
background: url(./images/accueil/button_bg.png) repeat-x;
padding: 2px 5px;
line-height: 18px !important;
line-height: 16px;
height: 26px !important;
height: 24px;
margin: 15px;
}
img#contact {
display: inline;
}
p#contact
{
color: #1165AA;
font-family: Arial, Hevlvetica, sans-serif;
font-size: 11px;
margin : 0;
}
div#contact
{
float:left;
height:2.5em;
}
span#contact
{
margin : 0 0 0 2em;
}
/* ///////////////////// ANNONCES.PHP //////////////////////////*/
table#annonce {
background-color: #F5F5F5;
border: 1px dashed #CCCCCC;
margin: 0 0.5em 2em 0.5em;
width: 96%;
font-family: Arial, Hevlvetica, sans-serif;
font-size: 11px;
}
table#annonce td.puce {
border-bottom: dashed #0A4092 1px;
width: 3%;
margin :0;
padding :0;
align:left;
color: #f00;
}
table#annonce td.titre_annonce {
border-bottom: dashed #0A4092 1px;
vertical-align: middle;
font-weight: bold;
color: #990000;
text-align: left;
text-indent: 15px;
width: 77%;
text-transform: uppercase;
}
table#annonce td.date {
border-bottom: dashed #0A4092 1px;
width: 20%;
color: #000;
}
table#annonce td.texte_annonce {
font-size:13px;
color: #000;
border-bottom: dashed #0A4092 1px;
}
table#annonce td.telephone {
font-weight: bold;
color: #000;
}
table#annonce td.email {
color: #f00;
}
img#annonce {
border: 0;
}
/* ///////////////////////////////////////////////////////////////*/
Modifié par SirPsycho (18 Nov 2006 - 02:28)