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 texte avec image


Sujet :

Positionnement en CSS

  1. #1
    Membre du Club
    Homme Profil pro
    Lycéen
    Inscrit en
    Novembre 2011
    Messages
    64
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Finistère (Bretagne)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Novembre 2011
    Messages : 64
    Points : 42
    Points
    42
    Par défaut Alignement texte avec image
    Bonjour à tous,

    Grâce à différent tuto j'ai compris (enfin) comment aligner du texte à droite de l'image.

    Connaissez-vous une astuce pour que tout le texte ne s'aligne pas. En effet j'aimerai qu'à partir du titre "les 7 principes" , le texte soit en dessous de l'image ....



    MErci d'avance

    Ludovic

  2. #2
    Rédacteur

    Avatar de Torgar
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 334
    Points : 8 040
    Points
    8 040
    Par défaut
    Tout dépend de comment tu as construit ta page.

    Montre nous ton code.
    Je ne suis pas schizophrène, nous sommes unanime !!!

    ► Pensez à la balise code et au CODE HTML GENERE !!!!
    ► Au si c'est le cas et au à ceux qui vous ont aidé.
    Vous souhaitez participer aux rubriques CSS et (X)HTML ? Contactez-nous !

    Créer des colonnes de même hauteur en CSS
    Glossaire CSS
    Les bordures en CSS3
    Les transitions en CSS3

  3. #3
    Membre du Club
    Homme Profil pro
    Lycéen
    Inscrit en
    Novembre 2011
    Messages
    64
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Finistère (Bretagne)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Novembre 2011
    Messages : 64
    Points : 42
    Points
    42
    Par défaut
    Voici l'extrait de 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
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <div id="contenu"> 
    	<h3>L'Unité locale</h3><br />
     
    	 <p class="flotte">
     <img src="images/delegation.png" alt="Image de notre nouvelle unité locale" />
    </p>
     
    <p>
    Implantée dans le centre ville de Brest, 49 rue Barbès, l'unité locale est très active.
    Forte de son engagement dans Brest et Brest métropole océane, l'unité locale met en place différentes actions sur l'ensemble de l'année.
    Prévenir, aider, former, en respectant les 7 principes de la Croix-Rouge française sont nos maîtres mots.
    Grâce à la centaine de bénévoles qui oeuvrent chaque année, nous pouvons poursuivre dans notre engagement, car "nous ne tolérons aucune souffrance". <br />
    </p>
     
     
    <h3>Les 7 principes</h3><br />
    <p><b>Humanité :</b> Nous agissons au quotidien pour préserver ou rétablir la dignité de tout être humain.<br />
    <b>Impartialité :</b> Nous ne jugeons pas et ne faisons aucune distinction. <br />
    <b>Neutralité :</b> Nous ne prenons pas part aux hostilités ni aux controverses.<br />
    <b>Indépendance :</b> Notre mouvement est indépendant. <br />
    <b>Volontariat :</b> Nous sommes tous engagés volontaire. <br />
    <b>Unité :</b> Il n'existe qu'une seule Croix-Rouge en France.  <br />
    <b>Universalité :</b> Le Mouvement international de la Croix-Rouge et du Croissant-Rouge, au sein duquel toutes les sociétés ont des droits égaux et le devoir de s'entraider, est universel. </p><br />
    <p> Pour plus d'informations sur les 7 principes fondamentaux consultez le site national en cliquant <a href="http://croix-rouge.fr" target="_blank">ICI </a>.
     
     
    </div>

    Et mon css :

    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
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    /* Différents bloc de la page */ 
    body {
    	margin:1% 10% 1% 10%;
    	border-width:1px;
    	border-style:solid;
    	border-color:#939A99;
     
    	}
     
    img a:link , a:visited, a:hover , a:active {border : none;
    }
    a { text-decoration:none; }
    a img{border: none;
    }
    img {
    vertical-align:middle;}
     
    div {
    	text-align:left;
    	}
     
    div#bandeau {
    	width:100%;
    	height:auto;
    		}
    div#barremenu {
    	width:100%;
    	height:auto;
    		}
    div#menu {
    	float:right;
    	width:20%;
    	height:auto;
    	border-width:1px;
    	border-style:solid;
    	border-color:#939A99;
    	}
    div#contenu {
    	float:left;
    	width:79%;
    	height:auto;
    	}
    div#pied_page {
    	clear:both;
    	width:100%;
    	height:30px;
    		}
    .image {
    	border:0px;
    	}
    .flotte {
    float:left;
    margin: 0 6px 6px 0;
    }

  4. #4
    Membre actif
    Homme Profil pro
    Développeur Full Stack
    Inscrit en
    Mai 2010
    Messages
    159
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 56
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur Full Stack

    Informations forums :
    Inscription : Mai 2010
    Messages : 159
    Points : 220
    Points
    220
    Par défaut
    Tu peux mettre une autre div dans ton id contenu qui se termine sous ton h3 les 7 principes et tu créés une autre div qui prend le reste :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    <div id="centenu">
      <div class ="premier">
        <p class="float">
         <img.... />
        <h3>Les 7 principes</h3>
       </div>
      <div class="second">
      <p>le reste du texte</p>
     </div>
     
    </div>

Discussions similaires

  1. [HTML 5] Aligner texte et image
    Par djibril dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 07/03/2012, 16h52
  2. Filtrer un texte avec image dans une listView perso avec un ArrayAdapter
    Par vivelapsp dans le forum Composants graphiques
    Réponses: 1
    Dernier message: 18/07/2011, 09h50
  3. Alignement texte avec Tkinter
    Par zarash dans le forum Tkinter
    Réponses: 1
    Dernier message: 17/08/2009, 17h14
  4. alignement input avec image
    Par Shabata dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 24/02/2005, 09h45
  5. boîte de dialogue avec image de fond + texte
    Par Eugénie dans le forum MFC
    Réponses: 13
    Dernier message: 31/08/2004, 13h32

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