IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
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

Mise en page CSS Discussion :

Alignement de 3 Div horizontalement


Sujet :

Positionnement en CSS

  1. #1
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Août 2015
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Août 2015
    Messages : 4
    Points : 4
    Points
    4
    Par défaut Alignement de 3 Div horizontalement
    Bonjour,

    Je me tourne vers vous après plusieurs lecture de sujet similaire.
    J'aimerais aligner 3 div de sorte à avoir un menu gauche de 150 px, un "corps" de page de 940 px, et un menu droite de 150 px.

    Je vous link mon code HTML :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div id="sticker">
      <div class="actu"> <img src="bla" alt="" />
        <p align="justify">Ceci est actu dans le menu gauche</p> <a href="#">En savoir plus</a> </div>
    </div>
    <section>
      <p> Ceci est le corps du document
        <p>
    </section>
    <div id="menudroite">
      <div class="actudroite">
        <p> Ceci est une actu, dans le menu de droite </div>


    CSS :
    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
    section
    {
        margin-left:210px;
        width:940px;
        float:left;
    }
     
     
    #sticker
    {
        float: left;
        width: 150px;
        position: relative;	
    }
     
     
    #menudroite {
    	margin-left:1150px;
    	width:150px;
    }
     
    .actu {
    	text-align:center;
    	position:absolute;
    }
     
    .actudroite {
    	text-align:center;
    }
    Mon problème avec ce code, c'est que je n'arrive à définir de largeur pour le menu gauche ou le menu droite. Elles sont fixés de base à 200px plus ou moins ...
    Pour pallier ce problème, j'ai utilisé un margin-left sur le menu droite faisant en sorte qu'il s'affiche à 150 px. Mais pour le menu gauche je n'arrive pas à le mettre à 150 px ...
    Petite précision sur ce code, j'ai mis en place un code javascript permettant de fixer le menu gauche (id="sticker") au scroll. Mais je ne pense pas que ça vienne de ça, étant donné que la seul chose que le code fait, c'est passé le menu gauche en position:absolue.

    Voilà j'aimerais pas trop bidouiller le margin-left pour résoudre ce problème, mais plutôt de comprendre d'où vient le problème

    En vous remerciant,
    Dévonn

  2. #2
    Membre actif
    Avatar de friendofweb
    Homme Profil pro
    Amateur en informatique
    Inscrit en
    Mai 2015
    Messages
    153
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Amateur en informatique
    Secteur : Santé

    Informations forums :
    Inscription : Mai 2015
    Messages : 153
    Points : 244
    Points
    244
    Par défaut
    Bonjour, juste pour info, ton code html ne semble pas complet, pas sûr que ce soit la source de ton souci, mais qui sait ? Tu as dans section, un paragraphe dont la balise n'est pas fermée, ton menu de droite, n'a pas de balise fermante et ton dernier paragraphe non plus...

    Sinon, ton post semble être le même sujet qu'ici : http://www.developpez.net/forums/d15...s/aligner-div/ en espérant que ça puisse t'aider. Les réponses de nos "gourous" m'intéressent (elles vont venir)

    Il y a aussi cet outil qui peut t'aider pour visualiser et communiquer des codes : http://codepen.io/pen/ ou l'équivalent ici : https://jsfiddle.net/

    Pour l'instant, quand je test ton code, ça donne ceci : http://codepen.io/anon/pen/gaYqzr (j'ai mis une bordure vous visualiser..)
    D'après ce que je vois sur le net 1 pixel vaut environ 0.03 cm. Ce qui veut dire qu'on devrait avoir 4,5 cm pour la div sticker et sur mon écran, elle fait 7,6 cm (varie en fonction de la taille de l'écran ?) => oui => explications
    N'oubliez pas la documentation... - Initiation à HTML5 - Tutos CSS

  3. #3
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Août 2015
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Août 2015
    Messages : 4
    Points : 4
    Points
    4
    Par défaut
    Salut,


    J'ai testé les deux liens (codepen et jdsfiddle), et c'est vrai que dessus mon code marche. J'arrive bien à redimensionner le menu de gauche avec le width à 150px.
    Seulement après je copie colle mon code sur ma page HTML, je l'ouvre avec safari, et ça repasse à 200 px ... J'y comprend plus rien :/


    Sinon, j'étais déjà tomber sur ce sujet en cherchant un peu à "aligner des divs", mais ça ne m'a pas debloquer.

    En tout cas merci pour ta réponse, je connaissais pas les deux liens que tu m'as envoyé.
    Mais du coup je comprend pas pourquoi ce code marche sur ces sites, et quand je reviens sur mon mac, ça ne fonctionne pas...

    À bientôt

  4. #4
    Membre actif
    Avatar de friendofweb
    Homme Profil pro
    Amateur en informatique
    Inscrit en
    Mai 2015
    Messages
    153
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Amateur en informatique
    Secteur : Santé

    Informations forums :
    Inscription : Mai 2015
    Messages : 153
    Points : 244
    Points
    244
    Par défaut
    Bonjour, pour qu'on avance, je propose que tu donnes un code (complet), corrigé (oublie de balises fermantes). Je pourrais alors tester ton code sur ma machine via Safari et te dire s'il y a une différence avec le lien codepen.

    Salutations,
    N'oubliez pas la documentation... - Initiation à HTML5 - Tutos CSS

  5. #5
    Membre confirmé
    Avatar de Jacques Beauregard
    Homme Profil pro
    Développeur Java
    Inscrit en
    Mai 2015
    Messages
    231
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : Conseil

    Informations forums :
    Inscription : Mai 2015
    Messages : 231
    Points : 595
    Points
    595
    Par défaut
    Bonjour Devonn,

    Lien JSFiddle : https://jsfiddle.net/ahz747ey/27/

    J'ai rajouté un conteneur de 940 px +300 px = 1240 px ( les largeurs que tu souhaites avoir)
    J'ai supprimé ton margin de 1140 px ( ??)
    Et je rejoins Friendofweb : il manquait des fermetures de balises HTML.
    Cordialement.
    Il ne faut jamais prendre les gens pour des cons, mais il ne faut pas oublier qu'ils le sont...

    Le guide du débutant pour apprendre à programmer en Java - N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

Discussions similaires

  1. Alignement de 3 div horizontales avec 2 div en largeur 100%
    Par doomxl dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 19/12/2010, 01h08
  2. Alignement bloc de div horizontalement
    Par Alex59126 dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 26/02/2009, 02h06
  3. Aligner 1 image et 2 blocs div horizontalement
    Par Steph4fun dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 25/11/2008, 15h46
  4. Aligner des div horizontalement
    Par abir84 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 13/12/2007, 16h02

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