28173 sujets

CSS et mise en forme, CSS3

Pouvoir resizer ma page sans voir mes boutons partir partout ?

Bonjour,

J'ai une interface en trois zone, une bande en haut et les deux autres séparant verticalement l'espace d'en bas.
Le truc c'est que je n'arrive pas à faire en sorte que si je change la taille de ma fenêtre les boutons etant dans la bande reste bien dans la bande. En effet passé une certaines taille, les boutons se mettent les uns en dessous des autres et débordent joyeusement. L'idéal serait que ma bande s'agrandissent en hauteur pour que mes boutons restent dedans.

La seule solution que j'ai trouvé pour l'instant c'est de positionner mes zones en fixed, et les éléments à l'intérieur en absolute... Mais du coup ma page est figé quelque soit la résolution d'affichage (et en 800*600 on voit rien du tout du coup)

Quelqu'un voit comment faire un truc joli et maléable ?

Vincent.
Bonjour,

shibby a écrit :
Quelqu'un voit comment faire un truc joli et maléable ?

De plein de manières différentes.

Maintenant, pour trouver une solution qui corresponde à ton problème (c'est à dire faire un truc joli et malléable à partir de ton design et de la page réalisée), il faudrait nous en montrer un peu plus. Pour l'instant, tout ce qu'on sait c'est que tu as un bloc avec des éléments qui en sortent lorsqu'on redimensionne la fenêtre du navigateur. C'est un peu mince. Smiley cligne

Une page en ligne?
Modifié par Florent V. (27 Jul 2007 - 12:00)
Nan désolé pas de page en ligne, en fait je fais une interface web pour une application à l'irisa qui tourne uniquement en local.. donc pas d'accès à l'extérieur.

Si tu veux voici mon code xhtml, c'est fait via ocsigen (ça explique certains noms étranges), qui est un web serveur en Ocaml qui permet de se passer de l'utilisation de script et d'avoir des pages généré dynamiquement avec des fonctions Ocaml.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!-- Page generated by OCaml with Ocsigen.
See  http://www.ocsigen.org  and  http://caml.inria.fr  for informations -->

<html>
  <head>
    <style type="text/css">
.inline {display: inline}
.nodisplay {display: none}
</style>
    <title>Camelis</title>
    <link href="style.css" type="text/css" rel="stylesheet"/>
  </head>

  <body>
    <div id="zoneMenu">
      <form action="camelis1-4.html?featureToAdd=" enctype="multipart/form-data" method="post">
        <div class="nodisplay">
          <input type="hidden" name="__eliom_p__" value="376146"/>
        </div>
        <p id="initContext">
          <input type="submit" value="charger le context"/>
        </p>

      </form>
      <form action="camelis1-4.html?featureToAdd=" enctype="multipart/form-data" method="post">
        <div class="nodisplay">
          <input type="hidden" name="__eliom_p__" value="376149"/>
        </div>
        <p id="query">Query : 
          <input type="text" name="value" value="all"/>
          <input type="submit" value="Click"/>
        </p>

      </form>
      <form action="camelis1-4.html?featureToAdd=" enctype="multipart/form-data" method="post">
        <div class="nodisplay">
          <input type="hidden" name="__eliom_p__" value="376147"/>
        </div>
        <p id="backBouton">
          <input type="submit" value="back"/>
        </p>
      </form>

      <form action="camelis1-4.html?featureToAdd=" enctype="multipart/form-data" method="post">
        <div class="nodisplay">
          <input type="hidden" name="__eliom_p__" value="376148"/>
        </div>
        <p id="forwardBouton">
          <input type="submit" value="forward"/>
        </p>
      </form>
      <form action="camelis1-4.html?featureToAdd=" enctype="multipart/form-data" method="post">

        <div class="nodisplay">
          <input type="hidden" name="__eliom_p__" value="376152"/>
        </div>
        <p id="homeBouton">
          <input type="submit" value="home"/>
        </p>
      </form>
    </div>
  ....
      </form>
    </div>
  </body>
</html>



Et également mon css qui va avec : 
/*PAGE DE STYLE GÉNÉRAL DE L'INTERFACE, DÉFINIT LES ZONES, LE FOND...*/


body{
  font-size: 15px; 
  background-color:rgb(211,211,211);
}

/*ZONE MENU*/
#zoneMenu{ 
  position:fixed;
  height: 100px;
  width:1200px;
  border: solid;
  top:0px;
  left:0px;
}

#initContext{ 
  position: absolute;
  top: 0px;
  left:15px;
}

#backBouton{ 
  position: absolute;
  top: 30px;
  left: 310px;
}

#forwardBouton{ 
  position:absolute;
  top: 30px;
  left: 375px;
}

#query{ 
  position: absolute;
  top: 30px;
  left:15px;
}

#homeBouton{ 
  position: absolute;
  top: 0px;
  left: 223px;
}


Voilà et ce qui se passe c'est que lorsque je réduis la largeur de ma page, forwardBouton et backBouton sortait de la zone et descendait sur celle d'en bas. Avec le css et le code que je montre ici, ce n'est pas le cas, mais c'est bien trop figé pour être correct Smiley smile

Si tu veux d'autres infos n'hésite pas à demander.

Amicalement,
Vincent.
Salut,
il faut en fait savoir qu'il y a plein d'astuces pour faire ce que tu souhaite.
Tout d'abord, on va commencer par les div. Dans ton css, tu as donné une taille à ton body. Pour faire suivre les div qui font partie du body, plutôt que de mettre width:200px; pour définir ton div, tu peux mettre width:20%;.
Pour les polices c'est pareil. Plutôt que de mettre font-size : 12px;, tu peux mettre font-size : 1.2em ou font-size : 90%.
Pour le positionnement de n'importe quel objet c'est pareil. Tu peux déjà
essayer de mettre des trucs généraux (quand c'est possible) du genre: float : left;, float : right;, en oubliant pas les margin-left (valeur pouvant être négative!!!), margin-right, margin-top, margin-bottom, ainsi que les padding. Sans oublier bien entendu le positionnement manuel position : relative; qui permet le positionnement dans le référentiel du premier conteneur plutôt que dans le référentiel de la fenêtre (ce qui est donc beaucoup meilleur quand la taille de la fenêtre change).
Enfin (je ne pense pas vraiment avoir fait tout le tour hein!) concernant la malléabilité du body, je m'aperçois maintenant d'une bêtise que j'aurais pu dire hier dans lequel je disais que ça ne servait à rien de mettre :

body
{
width : 100%;
}

Je me sens ridicule maintenant, car je pense que ça permet de dire que le body prend un certain pourcentage de la largeur de la page...(enfin je pense il faudra que je me renseigne).

Voilà, je te souhaite bon courage parce que ce n'est pas toujours très facile ce boulot là.
Modifié par arnaultp (27 Jul 2007 - 12:15)
a écrit :
plutôt que de mettre width:200px; pour définir ton div, tu peux mettre width:20%;.


Bah en faites c'est là que j'aimerais en arriver, mais le soucis c'est que si je fais ça, quand je resize mes boutons sortent


a écrit :
positionnement manuel position : relative; qui permet le positionnement dans le référentiel du premier conteneur


C'est pas plutot le positionnement absolute ça ? le relative c'est juste pour bouger par rapport à la position initiale nan ?
Modifié par shibby (27 Jul 2007 - 12:20)
Sujet clos
Aller à