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
    Homme Profil pro
    pas grand chose
    Inscrit en
    septembre 2018
    Messages
    131
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Loir et Cher (Centre)

    Informations professionnelles :
    Activité : pas grand chose
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : septembre 2018
    Messages : 131
    Points : 73
    Points
    73

    Par défaut Comment effectuer cette mise en page sur 2 colonnes ?

    Bonjour

    Une image vaut mieux qu un long discours alors...
    Nom : fy01.png
Affichages : 24
Taille : 222,5 Ko

    Mon pb est le suivant : je voudrais reproduire le bandeau avec à gauche Service et à droite l'image de deux jeunes femmes.

    Faire 2 colonnes avec texte à gauche et image à droit, ça c est ok. Mon pb est de parvenir à aligner le texte de la colonne de gauche avec les limites tracées en rouge.

    Merci de votre aide .

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

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

    Informations forums :
    Inscription : août 2008
    Messages : 14 835
    Points : 30 136
    Points
    30 136

    Par défaut

    Bonjour,

    padding-left ?

    Sans le moindre code, on ne peut rien dire de plus.
    "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

  3. #3
    Membre régulier
    Homme Profil pro
    pas grand chose
    Inscrit en
    septembre 2018
    Messages
    131
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Loir et Cher (Centre)

    Informations professionnelles :
    Activité : pas grand chose
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : septembre 2018
    Messages : 131
    Points : 73
    Points
    73

    Par défaut

    Ah si javais le code....

    Mais à bien y reflechir j ai trouvé une structure qui devrait fonctionner.
    Pour une largeur de contenu de 1200 px et une fenêtre de 1900 px par exemple

    une div sur la largeur totale en overflow:hidden de la couleur de fond.
    dans cette div, deux divs à 50% de large dont celle de droite contient l image
    dans la div de gauche, une div en float right de max-width:600 px.

    Le pb est que je ne peux pas tester je suis en pose dej.

  4. #4
    Membre extrêmement actif Avatar de Sodium
    Femme Profil pro
    Développeuse web
    Inscrit en
    avril 2014
    Messages
    1 616
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeuse web

    Informations forums :
    Inscription : avril 2014
    Messages : 1 616
    Points : 1 979
    Points
    1 979

    Par défaut

    En partant du principe que ta hauteur est fixe :

    Code HTML : 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
    18
    19
    20
    <div class="banner-wrapper">
     
        <div class="banner-background left-background"></div>
        <div class="banner-background right-background"></div>
     
        <div class="content-wrapper">
     
             <div class="text">
     
                   <h1>Services</h1>
     
                   <p>Lorem ipsum</p>
     
                   <!-- etc -->
     
             </div>
     
        </div>
     
    </div>

    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
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    .banner-wrapper {
        position: relative;
    }
     
    .banner-background {
         position: absolute;
         top: 0;
         bottom: 0;
    }
     
    .left-background {
        left: 0;
        right: 50%; 
        background-color: // ta couleur
    }
     
    .right-background {
        right: 0;
        left: 50%;
        background-image: // ton image
        background-size: cover;
    }
     
    .content-wrapper {
        max-width: 980px // largeur maximum de ton contenu
        position: relative;
        margin: 0 auto;
    }
     
    .text {
        padding: 100px 0 30px 0 //à adapter selon le besoin
        width: 50%;
        position: relative;
    }

  5. #5
    Membre régulier
    Homme Profil pro
    pas grand chose
    Inscrit en
    septembre 2018
    Messages
    131
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Loir et Cher (Centre)

    Informations professionnelles :
    Activité : pas grand chose
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : septembre 2018
    Messages : 131
    Points : 73
    Points
    73

    Par défaut

    Merci, c est parfait, c est très exactement ce que je cherchais à faire.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. comment faire la mise en page de l impression directe sur un port com
    Par kameleon80 dans le forum API, COM et SDKs
    Réponses: 5
    Dernier message: 19/04/2013, 09h06
  2. mise en page sur deux colonnes
    Par romanticide dans le forum Mise en forme
    Réponses: 1
    Dernier message: 30/10/2008, 09h17
  3. comment enlever "une mise en page" sur excel ?
    Par benj91 dans le forum Excel
    Réponses: 4
    Dernier message: 12/09/2008, 18h04
  4. [C#][ MSI] Comment effectuer une mise à jour d'application ?
    Par th3r1ddl3r dans le forum Windows Forms
    Réponses: 6
    Dernier message: 15/12/2005, 10h09
  5. Comment effectuer la mise a jour d'un programme ?
    Par Velociraptor dans le forum Langage
    Réponses: 2
    Dernier message: 22/09/2005, 21h29

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