28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Col. fluide à gauche, puis à droite dans la même page

j'essaye d'avoir une page qui occupe 100% de la largeur du navigateur ;
j'ai réussi à obtenir (presque) ce que je veux avec des tableaux (cf infra) mais ne réussi pas à obtenir le même effet avec des div...
2 colonnes dont colonne fixe à droite dans la partie 1 et 2
puis 2 colonnes dont colonne de largeur fixe à gauche dans la partie 3
puis 1 seule colonne dans la partie 4

merci par avance de votre aide (j'en suis à 1 WE dessus !!!)
Olivier

*******************

<html>
  <head>
    <title></title>
    <meta content="">
  </head>
  <body>
     <table width="100%">
      <tbody>
      <tr>
       <td width="auto" >1 image </td>
       <td width="365px">Rechercher dans : 
        <ul  style="list-style-type : none; padding-left : 0px">
         <li><INPUT type="checkbox" checked name="code">Code  </li>
         <li><INPUT type="checkbox" checked name="titre">Titre  </li>
         <li><INPUT type="checkbox" checked name="notes">Notes  </li>
        </ul></td>
     </tr>
      <tr>
        <td width="auto" ><input type="text" style="height : 40; min-width : 30px; vertical-align : middle; width : 100%;" name="mon_input" value="texte à rechercher"/> </td>
        <td width="365px">boutons de navigation (images) dont la somme des largeurs fait 364 px...</td>
     </tr>
     </tbody>
   </table>
   <table width="100%">
      <tbody>
      <tr>
       <td width="300px">insertion d'un objet de taille fixe (hauteur et largeur)
         <br><br> OU une liste...
       </td>
       <td width="auto">texte avec des listes dont on ne sait pas le nb : de 1 à ...
        <ul style="padding-left: 0px">
         <li>  </li>
         <li>  </li>
         <li>  </li>
         <li>  </li>
         <li>  </li>
         <li>  </li>
        </ul>
       </td>
     </tr>
     </tbody>
   </table>

   <table width="100%">
      <tbody>
      <tr>
        <td width="auto"  valign="middle" align="center">Footer</td>
     </tr>
     </tbody>
   </table>

</body>
</html>

Modifié par sapajou (22 Oct 2009 - 21:32)
Salut,

j'ai édité ton message puisque tu n'utilisais pas les balises CODE de mise en forme au bon endroit.

Déjà la première chose à faire est de rajouter un doctype.

Ensuite il faut bien prendre le temps d'apprendre le positionnement CSS. Il existe de nombreux tutos sur Alsa dont l'un des points d'entrée est le guide de survie du positionnement.

Tu peux également jeter un œil aux gabarits pour te faciliter les choses.

Bonne continuation. Smiley smile
Je te remercie de prendre part à ma réflexion...

... néanmoins, ayant précisé que j'ai passé un WE dessus, il va sans dire (sauf à spécifier un degré de bétise élevée) que j'avais bossé AVANT le guide du positionnement : c'est bien parce que je ne réussi pas que je fais appel au forum :

En conséquence, ta réponse ne m'apporte rien pour résoudre mon problème

(ps le doctype n'est pas nécessaire pour une application qui wrappe un navigateur....)
Aie .. trop melanger les valeur fixe et les pourcentage c'est pas facile...
Tu peux bidouiller pour avoir approximativment un résultat correct avec une colonne fixe.. voir 2..
Mais le plsu simple serait de mettre toutes tes colonnes en fluides.

ca te simplifierait la vie je crois...

regarde ma reponse ici ca ressemble un peu à ton problème
Sinon une idée qui me viens comme ca à tester; il ya peu être moyen
Tu gere une partie du site dans le flux en 100% et tu prevois un padding à sur les colonne faisant les bord gauche et droite.
Et pardessus le flux en absolute ta colonne de gauche fixe et ta colonne de droite fixe.
Evidement dans certaien resolution ca va bugger; mais tu peux essayer de gérer pour que cela fonctionne dans la pluspart des cas.
MERCI, voila une réponse positive même si le début m'a fait un peu peur...
.... mais en plus tu as une idée (à vérifier) et tu en fais profiter tt le monde, ça c'est du forum sans être sorti de la cuisine à Jupiter !

Vais creuser ce WE mais actuellement je suis parti sur de la gestion de tableau puisque ça marche à 90% actuellement (améliorable)

MERCI alsa (pas cuisine) http://forum.alsacreations.com/smilies/biggol.gif

*** et en plus, cette grosse buse ne sait même pas marquer quand il estime que son post est résolu, vais le banner vite fait, ce nerd!!!
Pour marqué en Résolu, suffi simplement d'édité ton premier poste, puis ensuite tu modifie ton titre. Et puis tu envoi! Smiley cligne
sapajou a écrit :
j'essaye d'avoir une page qui occupe 100% de la largeur du navigateur

Tu places un DIV comme enfant de BODY, et paf, magie: il prend tout seul 100% de la largeur.
Ya vraiment pas besoin de se prendre la tête. Smiley smile

sapajou a écrit :
2 colonnes dont colonne fixe à droite dans la partie 1 et 2

puis 2 colonnes dont colonne de largeur fixe à gauche dans la partie 3
puis 1 seule colonne dans la partie 4
OK. Tu as essayé de coder test «parties» comme des DIV avec un peu de code pour gérer le dépassement des flottants, et dedans le nombre de DIV nécessaires positionnés avec un peu de float?

<div id="top1" class="part">
  <div class="right">...</div>
  <div class="left">...</div>
</div><!--#top1-->
<div id="top2" class="part">
  <div class="right">...</div>
  <div class="left">...</div>
</div><!--#top2-->
<div id="middle" class="part">
  <div class="left">...</div>
  <div class="right">...</div>
</div><!--#middle-->
<div id="bottom" class="part">
  ...
</div><!--#bottom-->


Vu ta demande, cette structure HTML devrait être un bon point de départ.
sapajou a écrit :
(ps le doctype n'est pas nécessaire pour une application qui wrappe un navigateur....)

Je n'ai aucune idée de ce que tu appelles «une application qui wrappe un navigateur» (tu veux dire que tu crées une application desktop qui embarque un moteur de rendu tel que Gecko, Webkit ou Trident?... je doute que ça soit ça), mais si, un doctype est toujours nécessaire.

Du moins si tu veux utiliser du positionnement CSS, limiter les différences de rendu entre les navigateurs, profiter des fonctionnalités les plus avancées des navigateurs (pas disponibles en mode Quirks le plus souvent), etc.

Après si tu sais très exactement ce que tu fais, que tu es expert en HTML et CSS, et que tu n'utilises pas de Doctype pour une raison bien particulière, pourquoi pas. Mais si tu n'es pas encore expert, fais confiance à ceux qui le sont: utilise toujours un Doctype.

(Tu peux faire une recherche sur les doctypes et le mode Quirks si ces notions ne sont pas connues.)
En fait, j'ai du texte format" en html avec des balises li> et <br> et autres dans une base de données.
Pour afficher ce texte dans une appli desktop, plutôt que de nettoyer le texte avec des fonction style STUFF, j'ai insérer un objet OLE (vi, je sais, c'est pour OuinOuin) webBrowser puis je génère à la volée (en mémoire) une page en rajoutant juste avant le texte "<html><title></title>:<body>" puis mon champ de base de données puis le texte "</body></html>" et j'appelle cette page par la fonction navigate (ou navigate2) du composent We'bBrowser

J'essaye juste avec du CSS de mettre en page un affichage dans une appli. Je vais essayer ton truc mais ça fonctionne avec des tableaux, c'est juste moins moderne...

Merci et ne prenez pas la mouche si JE ne sais pas tout (ça viendra) Smiley cligne
Sujet clos
Aller à