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 texte et d'image


Sujet :

Positionnement en CSS

  1. #1
    Membre éclairé
    Homme Profil pro
    sans
    Inscrit en
    Mai 2007
    Messages
    485
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : sans

    Informations forums :
    Inscription : Mai 2007
    Messages : 485
    Par défaut Alignement de texte et d'image
    Bonjour,

    Tentant de faire un site en Responsive web design, je n'arrive pas à effectuer un alignement vertical et horizontal malgré de multiples lectures.
    Mon HTML est :
    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
    <!DOCTYPE html>
    <html>
    <head>
        <title>RWD</title>
        <meta name = "viewport" content="width=device-width"/>
        <link rel = "stylesheet" href = "RDW.css">
    </head>
     
    <body>
     
    <div class ="container">
    	<div class ="block haut_gauche"> haut gauche </div>
    	<div class ="block haut_centre"> <img src="Images/chien.jpg"></div>
    	<div class ="block bas"> Mon texte </div>
    </div>
     
     
    </body>
    </html>
    tandis que le CSS est :
    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
    body
    	{
    		background:pink ;
    		font-size:100%;
    	}
     
    .container{width:1366px; margin:0 auto;}
    .block{float:left;}
    .block:after{clear:left;}
     
     
    .haut_gauche
    	{
    		background:blue;
    		height:100px;
    		width:200px;	/* largeur zone de texte */
    		line-height:normal; /* on rétablit le line-height */
    		text-align:left; /* ... et l'alignement du texte */
    	}
    .haut_centre{background:grey;height:100px;width:1166px;}
    .bas{background:white;height:300px;width:1366px;}
     
     
    img.centre
    	{
    		vertical-align: 100%;
    	}
    Je précise que je souhaite aligner "haut gauche" dans le rectangle bleu en haut à gauche et l'image "chien.jpg" dans son rectangle gris.

    Merci d'avance de m'éclairer.

  2. #2
    Membre éclairé
    Homme Profil pro
    sans
    Inscrit en
    Mai 2007
    Messages
    485
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : sans

    Informations forums :
    Inscription : Mai 2007
    Messages : 485
    Par défaut
    Je me réponds à moi-même, venant de trouver pour le texte. il suffit d'ajouter :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    div.bloc
    	{
    		width:100px; /* largeur du bloc */
    		padding:10px; /* aération interne du bloc */
    		/*border:1px solid #fff;		*/
    		vertical-align:middle;
    		display:inline-block;
    		line-height:1.2; /* on rétablit le line-height */
    		text-align:left; /* ... et l'alignement du texte */
    	}
    dans le CSS et d'appliquer le bloc au texte.
    Reste le problème de l'image.

  3. #3
    Invité
    Invité(e)
    Par défaut
    Bonjour Denis,

    La solution la plus simple est souvent la meilleure.

    Donc, dès que le code devient trop complexe, c'est souvent qu'une autre solution, plus simple, existe.

    En l'occurrence, voir
    • display:table; display:table-cell;
    • OU display:flex;


    N.B. tu parles de "responsive", or ton code comporte des largeurs de blocs en pixels : width:1366px; ...
    Ce n'est pas très cohérent.
    A la rigueur :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    width:100%;
    max-width:1366px;

  4. #4
    Invité
    Invité(e)
    Par défaut
    Voilà une solution HTML5 épurée :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <header id="entete">
      <div class="haut_gauche">
        haut gauche
      </div>
      <div class="haut_centre">
        <img src="Images/chien.jpg" alt="" />
      </div>
    </header>
    <main id="maintexte">
      <div class="bas">
        Mon texte
      </div>
    </main>
    Code css : 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
    body {
      background: pink;
      font-size: 100%;
    }
     
    #entete,
    #maintexte {
      width: 100%;
      max-width: 1366px;
      margin: 0 auto;
      display: table;
    }
     
    #entete > div { /* .haut_gauche et .haut_centre */
      display: table-cell;
      text-align: center;  /* alignement horizontal */
      vertical-align: middle;  /* alignement vertical */
      height: 100px;
    }
     
    .haut_gauche {
      width: 20%;
      background: blue;
    }
     
    .haut_centre {
      width: 80%;
      background: grey;
    }
     
    .bas {
      background: white;
      min-height: 300px;
    }
    Remarque :
    • Quand tu dois cibler un élément et un seul, il est préférable d'utiliser un id (#xxxxx)
    • plutôt qu'une class (.xxxxx) qui est utilisée pour plusieurs éléments ayant les même propriétés.
    Dernière modification par Invité ; 02/03/2016 à 15h49.

  5. #5
    Membre éclairé
    Homme Profil pro
    sans
    Inscrit en
    Mai 2007
    Messages
    485
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : sans

    Informations forums :
    Inscription : Mai 2007
    Messages : 485
    Par défaut
    Bonjour jreaux62 et merci pour ton code et tes conseils avisés.

    Effectivement, je parle de "responsive" avec un code qui comporte des largeurs de blocs en pixels. Je compte déplacer seulement quelques éléments dans le cas où le device détecté est un smartphone. Ce terme est il inadapté ?

    Quand tu dois cibler un élément et un seul, il est préférable d'utiliser un id (#xxxxx)
    plutôt qu'une class (.xxxxx) qui est utilisée pour plusieurs éléments ayant les mêmes propriétés.
    Techniquement, si on utilise class, ça marche quand même donc quel est l'intérêt d'utiliser id ?

  6. #6

  7. #7
    Membre éclairé
    Homme Profil pro
    sans
    Inscrit en
    Mai 2007
    Messages
    485
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : sans

    Informations forums :
    Inscription : Mai 2007
    Messages : 485
    Par défaut
    Merci jreaux62

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

Discussions similaires

  1. Aligner du texte à côté d'images
    Par aertys dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 16/09/2015, 23h38
  2. Aligner un texte et une image
    Par novice100 dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 29/10/2010, 12h20
  3. Alignement vertical texte et image à côté
    Par anouka dans le forum Mise en forme
    Réponses: 5
    Dernier message: 17/07/2007, 09h46
  4. Aligner un texte en middle à droite d'une image
    Par Ryan Sheckler dans le forum Balisage (X)HTML et validation W3C
    Réponses: 8
    Dernier message: 28/05/2007, 20h14
  5. Aligner un texte en bas-gauche et Centrer une image
    Par kurkaine dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 24/03/2007, 12h06

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