18034 sujets

Questions générales et questions de débutants

Retour à la ligne

Bonjour,

je souhaite faire un retour à la ligne automatique pour un div.. je n'y arrive pas, généralement, le texte est caché ..

Code HTML :


	<div id="images">
		    
		<div id="texte-intro">
		 Bienvenue a tout le monde, <br>
		 Aujourd'hui 2 Avril 2015 est un grand jour car ma petite entreprise est enfin fonctionnelle..
		 
		</div>
		
		<div class="image"><img src="images/artistique/artistique-01.jpg"/> </div>
		<div class="image"><img src="images/artistique/artistique-02.jpg"/> </div>
		    
		    
		</div>


Voici le code CSS qui pourrait nous intéresser :


#texte-intro{
    

    font-family: tahoma;
    color: black;
    font-size: small;
    padding: 2%;
    text-align: center;
    background-color: white;
    display: inline-block;
 word-wrap: break-word; 
    vertical-align: middle;
    width: 400px;
    
    
}


.image {
   background-color: white;
   display: inline-block;
   width: auto;
    vertical-align: middle;

 
}


#images {
   height: 420px;
  
   overflow: auto;
   position: absolute;
   width:auto;
   margin: auto;
   white-space: nowrap;
   background-color: white;
   top: 20px;
     right: 1%;
     bottom: 0;
     left: 20%;
   
    
     
}




Merci beaucoup, belle soirée à tous ..
Je souhaiterai que lorsque mon texte arrive en bout de div il se rabatte à la ligne automatiquement, ici j'ai l'impression qu'il agrandit le div en fonction tant que je ne met pas <br> alors que je lui avait donné une largeur de 400px, il se retrouve alors caché par les images situées sur la droite ..

Ci joint une capture écran ,

upload/56946-Capturedan.png
On aperçoit dans #images {
...
...
white-space: nowrap;
}

qui a pour objectif d'empêcher le retour à la ligne,
à virer, donc, et tout devrait rentrer dans l'ordre.
Ah zut, mais si je retire celui-ci, mes images se retrouve comme sur un tumblr, en colonne et non plus en ligne … sur une seule ligne.

Donc en le retirant du div images, je vais le recréer dans un nouveau div avec les memes fonctionnalités que div images mais sans le space nowrap..

Merci, je vous tiens au courant des avancées dans la journée ..
Apres quelques manipulations, j'en reviens au problème suivant : 


#journal{
   height: 420px;
  
   overflow: auto;
   position: absolute;
   width:auto;
   margin: auto;
   white-space: nowrap;
   background-color: white;
   top: 20px;
     right: 1%;
     bottom: 0;
     left: 20%;
    
    
}

#image-journal{
    
   background-color: white;
   display: inline-block;
   width: auto;
    vertical-align: middle;
     white-space: nowrap;

 
    
}

#texte-journal{
   background-color: white;
   display: inline-block;
   width: auto;
    vertical-align: middle;
    width: 400px;
    padding: 10px black;
   white-space: !important;

}





    
	   <div id="journal">
	       <div id="image-journal">  <img src="images/artistique/artistique-14.jpg"/>   </div>
	       <div id="texte-journal" > <p>blablablablablablablablablablablablablablablablablablablablablablablablabla</p></div> 
		 <div id="image-journal">  <img src="images/artistique/artistique-14.jpg"/>   </div>
		   
	       
	   </div>



En gros ma question serait plutôt : comment faire pour annuler mon white-space nowrap dans mon div texte-journal et le forcé à faire retour à la ligne étant donné qu'il dépend lui même du div journal avec white-space nowrap.. ?

Merci beaucoup et belle soirée à tous !
Hello,

en ajoutant white-space:normal; dans #texte-journa{},
mais bien sûr il faut changer le texte de test en ajoutant des espaces par ci par là !
par exemple "blablabla blablablabla blablablabla blablablablablab lablablabl ablablabl ablabla"

Sinon, quel est l'objectif en fait ? que cherchez-vous à faire ?
3 colonnes, avec une image de chaque côté, et un texte qui coule au milieu ?
je ne comprends pas très bien le but.
Sujet clos
Aller à