28173 sujets

CSS et mise en forme, CSS3

Bonjour,
J'ai un souci avec le code ci-dessous, mes listes déroulantes (composants et contenu) ne sont pas actives sour Firefox.. J'ai retourné mon code dans tous les sens sans succès.

Auriez-vous une idée du problème.

Voici le code un peu long, désolé.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
  <link rel="stylesheet" href="http://localhost:81/splash5/backoffice/templates/bo_style.css" type="text/css">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="4">
<div id="layout_container">

  <div id="layout_centre"><h1>Gestion de la page d'accueil</h1><script type="text/javascript">
//Vide le contenu de la liste passée en paramètre
function choix_liste(namebox) {
  document.getElementById(namebox).value = 'blank';
}

</script>
<style type="text/css">
#sty_layoutcontainer {
  width:630px;
  height:auto;
  margin:10px;
  background-color:#ffffff;
  border:1px solid #FF0000;
}

.boite_edito {
  width: 615px;
  height:100px;
  margin:2px;
  padding:4px;
  border:1px solid #808000;
}

.sty_boiteliste {
  float:left;
  width: 300px;
  height:80px;
  margin:2px;
  padding:4px;
  border:1px solid #808000;
}

.sty_titreboite {
  height: 20px;
  width:100%;
  background-color:#f1f1f1;
  border-left: 10px solid;
  border-bottom: 1px solid;
}

.sty_boitearticle {
  float:left;
  width: 31%;
  height:120px;
  margin:2px;
  padding:4px;
  border:1px solid #808000;
  color:#808000;
}
</style>

  <p></p>
<div id="sty_layoutcontainer">
<form name="form_content" method="post" action="action.php?ctxid=bo_home_content&action=home_content_update">
    <p><b>Gestion de l'édito</b><br/><br/>
    - Si l'article ne contient pas de corps de texte seule l'image est affichée<br/>
     - Si l'article contient un corps de texte celui-ci est affiché et l'image est cadrée en haut à gauche</p>
    <div class="boite_edito">

      <p>Sélectionnez l'EDITO</p>
      <p>
        <select id="por_home_id_edito" name="por_home_id_edito" class="frm_input"  style='width:200px'>
          <option value="blank"></option>
          <optgroup label="Les Actualités ">
            <option value="173">Votre site gratuit pendant 1 mois</option>
          	<option value="267">Changement de prestataire et migration du serveur</option>
          	<option value="119">Votre site internet citoyen cléf en main</option>
          </optgroup>
          <optgroup label="A propos">
            <option value="116">Clause de Confidentialité</option>
          	<option value="115">Outils pour naviguer sur le site</option>
          	<option value="148">Accessibilité du site aux personnes handicapées</option>
          </optgroup>
          <optgroup label="Solutions">
            <option value="125">Un site internet professionnel</option>
            <option value="153">Un outils de communication riche en fonctions</option>
          </optgroup>
        </select></p>
      <p>Afficher le titre de l'édito : 
      <select id="por_home_aff_edito" name="por_home_aff_edito" class="frm_input" style='width:150px' >
        <option value="blank"></option>
				<option value="O" selected>Oui</option>
				<option value="N">Non</option>
		  </select></p>
    </div>

    <p><b>Gestion des composants</b></p>
      <p>Les règles de gestion sont spécifiques à chaque composant.</p>
      <p>Les éléments affichés dépendent du composant, il peut s'agir de liste, de formulaires...</p>
      <div class="sty_boiteliste">
        <span class="sty_titreboite">Composant 1</span><br/>
        <p>Sélectionnez le composant :<br/>
        <select id="home_box_cmp1" name="home_box_cmp1" class="frm_input"  style='width:px'>
          <option value="blank"></option>
				  <option value="17" selected>Home Actualite</option>
				  <option value="18">Recherche Guide du citoyen</option>
				  <option value="19">Rechercher une commune</option>
				  <option value="52">Lettre d'information</option>
		    </select></p>
      </div>
      <div class="sty_boiteliste">
        <span class="sty_titreboite">Composant 2</span><br/>
        <p>Sélectionnez le composant :<br/>
        <select id="home_box_cmp2" name="home_box_cmp2" class="frm_input"  style='width:px'>
          <option value="blank"></option>
          <option value="17">Home Actualite</option>
          <option value="18">Recherche Guide du citoyen</option>
          <option value="19">Rechercher une commune</option>
          <option value="52">Lettre d'information</option>
        </select></p>
    </div>

    <p><b>Gestion des boites de contenus</b></p>
      <p>- si vous sélectionnez un contenu, celui-ci reste affiché tant que vous ne faite pas de changement.<br/>
      - si vous choisissez une rubrique, le dernier contenu publié dans celle-ci sera affiché automatiquement.</p>
      <p>Les éléments affichés sont : le nom de la rubrique en titre de boite, le titre du contenu, l'image (facultatif) et le résumé.</p>
      <div class="sty_boitearticle">
        <span class="sty_titreboite">Contenu 1</span><br/>

        <p><b>Sélectionnez un contenu</b><br/>
        <select id="home_box_content1" name="home_box_content1" class="frm_input" onchange="javascript:choix_liste('home_box_rub1');" style='width:150px'>
          <option value="blank"></option>
          <optgroup label="Les Actualités ">
            <option value="173">Votre site gratuit pendant 1 mois</option>
          	<option value="267">Changement de prestataire et migration du serveur</option>
          	<option value="119">Votre site internet citoyen cléf en main</option>
          </optgroup>
          <optgroup label="A propos">
            <option value="116">Clause de Confidentialité</option>
          	<option value="115">Outils pour naviguer sur le site</option>
          	<option value="148">Accessibilité du site aux personnes handicapées</option>
          </optgroup>
          <optgroup label="Solutions">
            <option value="125">Un site internet professionnel</option>
            <option value="153">Un outils de communication riche en fonctions</option>
          </optgroup>
    		</select>
    	</p>
      </div>
      <div class="sty_boitearticle">
        <span class="sty_titreboite">Contenu 2</span><br/>
        <p><b>Sélectionnez un contenu</b><br/>
        <select id="home_box_content2" name="home_box_content2" class="frm_input" onchange="javascript:choix_liste('home_box_rub2');" style='width:150px'>
          <option value="blank"></option>
          <optgroup label="Les Actualités ">
            <option value="173">Votre site gratuit pendant 1 mois</option>
          	<option value="267">Changement de prestataire et migration du serveur</option>
          	<option value="119">Votre site internet citoyen cléf en main</option>
          </optgroup>
          <optgroup label="A propos">
            <option value="116">Clause de Confidentialité</option>
          	<option value="115">Outils pour naviguer sur le site</option>
          	<option value="148">Accessibilité du site aux personnes handicapées</option>
          </optgroup>
          <optgroup label="Solutions">
            <option value="125">Un site internet professionnel</option>
            <option value="153">Un outils de communication riche en fonctions</option>
          </optgroup>
		    </select></p>
      </div>
      <div class="sty_boitearticle">

        <span class="sty_titreboite">Contenu 3</span><br/>
        <p><b>Sélectionnez un contenu</b><br/>
        <select id="home_box_content3" name="home_box_content3" class="frm_input" onchange="javascript:choix_liste('home_box_rub3');" style='width:150px'>
          <option value="blank"></option>
          <optgroup label="Les Actualités ">
            <option value="173">Votre site gratuit pendant 1 mois</option>
          	<option value="267">Changement de prestataire et migration du serveur</option>
          	<option value="119">Votre site internet citoyen cléf en main</option>
          </optgroup>
          <optgroup label="A propos">
            <option value="116">Clause de Confidentialité</option>
          	<option value="115">Outils pour naviguer sur le site</option>
          	<option value="148">Accessibilité du site aux personnes handicapées</option>
          </optgroup>
          <optgroup label="Solutions">
            <option value="125">Un site internet professionnel</option>
            <option value="153">Un outils de communication riche en fonctions</option>
          </optgroup>
        </select></p>
        <p><b>ou une Rubrique</b><br/>
        <select id="home_box_rub3" name="home_box_rub3" class="frm_input" onchange="javascript:choix_liste('home_box_content3');" style='width:px'>
          <option value="blank"></option>
				  <option value="24">Les Actualités </option>
				  <option value="93">L'association</option>
				  <option value="215">Démonstration des composants</option>
				  <option value="220">Les nouveautés</option>
				  <option value="222">Les éditos</option>
		    </select></p>
      </div>
  <p>

    &nbsp;<br/>
        <input type="button" class="input_button" name="Enregistrer" value="Enregistrer" onclick="javascript:form_content.submit()" />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="button" name="annuler" value="Annuler" onclick="javascript:clic_btn_annuler();" class="input_button" />
  </p>
</form></div>
</div>
</div>
</body>
</html>


Merci à tous pour l'aide.
Stéfen
Modifié par stefen (28 Jun 2007 - 11:27)
Modérateur
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici tes codes HTML et CSS.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Modifié par koala64 (28 Jun 2007 - 11:01)
Désolé, c'est vrai que j'ai posté un peu vite mon message, je viens de le corriger. Toutes mes excuses.
Stéfen
Bonjour,
J'ai identifié d'ou provenait le problème, c'est la feuille de style principale qui pose probème... Mais maintenant il faut que j'investisse maintenant le point bloquant exactement. Et la ca va pas être simple...
Je peux poster ma feuille de style si tu veux te pencher dessus...
Merci encore pour l'aide.
Stéfen