Mise en page article

Version imprimable

10/04/2006, 08h41
Taz_8626

Mise en page article

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
10/04/2006, 09h10
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:

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:

1 2 3 4 5 6 7 <div class="first_letter">  </div> <div class="reste_texte">  </div>
:wink:

Pour le faire avec des images, le principe reste le même, juste il va falloir ajuster la taille de tes images.
10/04/2006, 09h34
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 ?
10/04/2006, 09h38
blueice
Suffit de jouer sur la distance qui sépare la lettre du texte...
A essayer, je n'ai pas testé
Code:

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

voila ce que je voudrais faire

http://arc0.chez-alice.fr/Images/article.gif
10/04/2006, 09h45
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/

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

Code:

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;
}

10/04/2006, 11h37
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
10/04/2006, 11h50
blueice

:evil: Franculo a dit quelque chose me semble t-il !

Citation:

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

Citation:

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. :evil:

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:

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; }

10/04/2006, 15h58
franculo_caoulene

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

Code:

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
http://arc0.chez-alice.fr/Images/articlebis.gif

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

11/04/2006, 10h01
Taz_8626

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