Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre régulier
    Profil pro
    Inscrit en
    mai 2003
    Messages
    395
    Détails du profil
    Informations personnelles :
    Âge : 37
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : mai 2003
    Messages : 395
    Points : 118
    Points
    118

    Par défaut Colonne "responsive" et une fixe

    Bonjour,

    un soucis tout bête que je ne parviens pas à résoudre pourtant il semble simple

    je souhaite avoir une colonne qui s'adapte à la largeur de l'écran et une colonne fixe à droite de 300px je fais le code suivant
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
     
    <style>
    .col1 {
    	background-color: #009;
    	margin-right: 300px;
    }
    .col2 {
    	background-color: #0F0;
    	width: 250px;
    	float: right;
    }
    </style>
     
    <div>
      <div class="col1">fff</div>
      <div class="col2">ffff</div>
    </div>
    mon problème est que la col2 n'est pas sur la même ligne que la col1

    merci d'avance
    bonne après midi
    Tout sur le cyclisme : Annuaire vélo - Magasin Vélo - Emploi Vélo

  2. #2
    Membre régulier
    Homme Profil pro
    Intégrateur Web
    Inscrit en
    juillet 2016
    Messages
    65
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 24
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Intégrateur Web

    Informations forums :
    Inscription : juillet 2016
    Messages : 65
    Points : 106
    Points
    106

    Par défaut

    Inverse ton col1 et col2 dans ton code html et enlève ton margin-right :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
     
    <style>
    .col1 {
    	background-color: #009;
    }
    .col2 {
    	background-color: #0F0;
    	width: 250px;
    	float: right;
    }
    </style>
     
    <div>
      <div class="col2">ffff</div>
      <div class="col1">fff</div>
    </div>

  3. #3
    Membre régulier
    Profil pro
    Inscrit en
    mai 2003
    Messages
    395
    Détails du profil
    Informations personnelles :
    Âge : 37
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : mai 2003
    Messages : 395
    Points : 118
    Points
    118

    Par défaut

    tout simplement....
    merci beaucoup
    Tout sur le cyclisme : Annuaire vélo - Magasin Vélo - Emploi Vélo

  4. #4
    Membre régulier
    Profil pro
    Inscrit en
    mai 2003
    Messages
    395
    Détails du profil
    Informations personnelles :
    Âge : 37
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : mai 2003
    Messages : 395
    Points : 118
    Points
    118

    Par défaut

    cela fonctionne en exemple simple mais plus complexe non
    Tout sur le cyclisme : Annuaire vélo - Magasin Vélo - Emploi Vélo

  5. #5
    Membre éclairé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    519
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 519
    Points : 705
    Points
    705

    Par défaut

    Il me semble que flex pourrait résoudre ce problème très simplement et sans l'utilisation de float et être responsive.

  6. #6
    Membre régulier
    Profil pro
    Inscrit en
    mai 2003
    Messages
    395
    Détails du profil
    Informations personnelles :
    Âge : 37
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : mai 2003
    Messages : 395
    Points : 118
    Points
    118

    Par défaut

    j'ai reinversé les colonnes mis un flex sur le div conteneur supprimer les float les colonnes sont ok sauf la largeur pourtant bien préciser 300px
    Tout sur le cyclisme : Annuaire vélo - Magasin Vélo - Emploi Vélo

  7. #7
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    13 590
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 13 590
    Points : 27 601
    Points
    27 601

    Par défaut

    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  8. #8
    Membre régulier
    Profil pro
    Inscrit en
    mai 2003
    Messages
    395
    Détails du profil
    Informations personnelles :
    Âge : 37
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : mai 2003
    Messages : 395
    Points : 118
    Points
    118

    Par défaut

    Tout sur le cyclisme : Annuaire vélo - Magasin Vélo - Emploi Vélo

  9. #9
    Membre éclairé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    519
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 519
    Points : 705
    Points
    705

    Par défaut

    Ben comme Jreaux62 le dit, personne n'est Irma la voyante!
    Sans un minimum de css et html, il est difficile d'aider!
    code, code code dec.

  10. #10
    Membre régulier
    Profil pro
    Inscrit en
    mai 2003
    Messages
    395
    Détails du profil
    Informations personnelles :
    Âge : 37
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : mai 2003
    Messages : 395
    Points : 118
    Points
    118

    Par défaut

    je comprend très bien mais pour le moment ce n'est pas visible sinon je vous aurais donner le lien c'est pour un forum vbulletin rajouter une colonne sur les messages afin d’afficher les articles du sites mais du coup je vais mettre cela en ligne plus tot pour avoir de l'aide...
    Tout sur le cyclisme : Annuaire vélo - Magasin Vélo - Emploi Vélo

  11. #11
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    13 590
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 13 590
    Points : 27 601
    Points
    27 601

    Par défaut

    Bonjour,

    ce n'est pourtant pas difficile de montrer un bout de code :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <div id="main">
      <div class="col1">col1</div>
      <div class="col2">col2</div>
    </div>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    #main {
     display:-webkit-flex; display:flex; 
    }
    #main > div.col1 {
     -webkit-flex:1 1 auto; flex:1 1 auto; 
      background:yellow;
    }
    #main > div.col2 {
     -webkit-flex:0 0 300px; flex:0 0 300px; 
      background:green;
    }
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  12. #12
    Membre régulier
    Profil pro
    Inscrit en
    mai 2003
    Messages
    395
    Détails du profil
    Informations personnelles :
    Âge : 37
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : mai 2003
    Messages : 395
    Points : 118
    Points
    118

    Par défaut

    je viens d'essayer sur ce forum vu que c'est un vbulletin aussi cela fonctionne

    j'ai donc un soucis avec mon template sur le miens du coup... si vous souhaitez vraiment le voir il faut vous rendre ici https://www.lelectronique.com/forum-electronique/ vous inscrire et me donner votre identifiant par MP afin que je vous mette le template en test j'ai vu que l'on pouvait le faire
    Tout sur le cyclisme : Annuaire vélo - Magasin Vélo - Emploi Vélo

  13. #13
    Membre régulier
    Profil pro
    Inscrit en
    mai 2003
    Messages
    395
    Détails du profil
    Informations personnelles :
    Âge : 37
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : mai 2003
    Messages : 395
    Points : 118
    Points
    118

    Par défaut

    je viens de mettre le théme sur le forum par défaut par exemple ici https://www.lelectronique.com/forum-...2721#post72721
    en bas de la discution un div test à mettre sur le cote droit

    bon fin de journée
    Tout sur le cyclisme : Annuaire vélo - Magasin Vélo - Emploi Vélo

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo