Discussion :

[Taz_8626]

voila je suis en train de faire un petit journal et je voudrais faire des mises en pages en intégrant des images dans le texte et que se dernier s'adapte avec celle-ci et que la première lettre de l'article soit sur 3 lignes .

Est ce que quelqu'un sait comment faire ?

Merci d'avance

[titoumimi]

il va falloir jouer avec les div et la propriété float...
On va supposer que tu détecter ta première lettre via un script quelconque, et que tu la sépare de ton texte :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
div.first_letter {
	background-color:#CCFF99;
	float:left;
	font-size:300%;
	}
div.reste_texte {
	background-color:#00CCFF;
	}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<div class="first_letter">
	<!-- la première lettre de ton texte -->
</div>
<div class="reste_texte">
	<!-- plein de texte ici -->
</div>

Pour le faire avec des images, le principe reste le même, juste il va falloir ajuster la taille de tes images.

[Taz_8626]

merci sympa mais il y a un hic car je ne sépare pas la première lettre du reste du texte alors comment faire ?

[blueice]

Suffit de jouer sur la distance qui sépare la lettre du texte...
A essayer, je n'ai pas testé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
div.first_letter { 
   background-color:#CCFF99; 
   float:left; 
   font-size:300%;
padding-left:10px;
   }

[Taz_8626]

voila ce que je voudrais faire

[franculo_caoulene]

Taz_8626 nous ne sommes pas là pour faire ton boulot et nous ne sommes pas un support technique. Ton temps de réponse entre chaque message montre que tu ne réfléchis pas et que tu attends juste les réponses du forum.
Il serait temps de faire des recherches et en dernier recours poser tes questions ici.
http://club.developpez.com/aidenouveaux/

[Taz_8626]

Pour faire une lettrine il existe déjà une methode en fait dans le css, il faut mettre ça et ça fonctionne

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
 
p {
	color: Black;
	background-color: White;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 12pt;
	text-align: justify;
}
p:first-letter {
	color: Black;
	background-color: White;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 400%;
	float: left;
}

[Taz_8626]

comment faire pour mettre une seconde image en bas à droite car elle n'arrive pas à s'intégrer à l'intéreur du texte

[blueice]

Franculo a dit quelque chose me semble t-il !

nous ne sommes pas là pour faire ton boulot et nous ne sommes pas un support technique

Il serait temps de faire des recherches et en dernier recours poser tes questions ici.

Et je suis d'accord avec lui.

Si tu as un problème précis et que tu ne trouves pas de solution, tu viens poster après avoir cherché de ton côté ET tu es prié de poster ton code qui pose problème, NOUS ne sommes pas là pour te donner le code tout mâcher.

[Taz_8626]

Voila ce que j'ai réussi à faire

Mon dessin que j'ai au dessus j'ai réussi à faire la mise en page de mon article mais je voudrais ajouter une deuxième photo en bas soit à gauche soit à droite peu importe le pb c'est qu'elle ne s'intègre pas dans le texte comme la première image voila le code de mes images

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
 
img.imgleft {
	float: left;
	border-right: 4px solid White;
	border-bottom: 4px solid White;
	border-top: 4px solid White;
	border-left: 4px solid White;
}
img.imgright {
	float: right;
	border-left: 4px solid White;
	border-bottom: 4px solid White;
	border-top: 4px solid transparent;
	border-right: 4px solid transparent;
}

[franculo_caoulene]

T'as pas un lien à nous donner qu'on teste?

[Taz_8626]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
  <div class="test">';
  if(!empty($_POST['image1']))
    echo '<img src="'.$_POST['image1'].'" class="imgright" alt="image" />';
 
  $article = str_replace("\n","<br />",$_POST['article']);
  echo '<p>'.$article.'</p>';
  if(!empty($_POST['image2']))
    echo '<img src="'.$_POST['image2'].'" class="imgright" alt="image" /> 
  </div>

voici mon code de ma page

et voici ce que je voudrais faire


mais j'arrive pas à mettre la seconde image dans le texte

[Taz_8626]

personne pour m'aider car j'arrive pas à intégrer l'image dans le texte qui se trouve en bas