Image texte

bonjours j'aimerai mettre ses trois document cote a cote mais je sais pas comment faire .


voila le code que j'ai mis :

<div id="bloc1">
			<div class="bloc1">
			<img src="images/contenu-img-1.jpg" class="photo">
			<h3>Une dizaine de militaires armées</h3>
			
			<p class="paragraphe">il allait peut-être perdre Florence avant même de lui avoir avoué son amour.
			Il devait empêcher Prélude de continuer dans son délire.Mais comment pouvait-il 
			stopper ce parasite créè par lui quelques année auparavant ?</p>
			<img src="images/product-01.png" alt="product02">
		</div>

.paragraphe
{
	width: 400px;
	text-align: left;	
}
h3
{
	width: 200px;
	text-align: left;
	font-size: 25px;
}

et en meme temps si quelqu'un sais faire pour que le prenom et mail de ce formulaire soit a cote se serait parfait .

Salut,

Premiere solution, mettre la première image en float left et la seconde image en float right. mais il faudra mettre ta seconde image avant le texte. Ca implique aussi que si le texte est trop long il passera sous les images
https://jsfiddle.net/undless/jzfrtske/1/

Sinon faut rajouter un block autour du texte te utiliser flex par exemple :
https://jsfiddle.net/undless/jzfrtske/5/

Ce ne sont que 2 solutions parmis beaucoup.

Pour ton formulaire il nous faudrait le code mais comme ça à l'oeil tu peux mettre les input en display:inline-block; ca devrait le faire

_laurent a écrit :
Salut,

Premiere solution, mettre la première image en float left et la seconde image en float right. mais il faudra mettre ta seconde image avant le texte. Ca implique aussi que si le texte est trop long il passera sous les images
https://jsfiddle.net/undless/jzfrtske/1/

Sinon faut rajouter un block autour du texte te utiliser flex par exemple :
https://jsfiddle.net/undless/jzfrtske/5/

Ce ne sont que 2 solutions parmis beaucoup.

Pour ton formulaire il nous faudrait le code mais comme ça à l'oeil tu peux mettre les input en display:inline-block; ca devrait le faire

ca marche mais parcontre mon titre reste acote du texte et ne vas pas au dessu de celui-ci
Modifié par ExT4zY33 (11 Mar 2020 - 15:06)

voici mon code de formulaire

<form action="page.php" method="post">
			<legend>Demande d'information</legend>
			<label for="nom"></label>
			<textarea name="nom" rows="1" cols="70" placeholder="Nom" id="nom"></textarea><br />
			<label for="prenom"></label>
			<textarea name="prenom" rows="1" cols="30" placeholder="Prénom" id="prenom"></textarea><br />
			<label for="email"></label>
			<textarea name="email" rows="1" cols="30" placeholder="Email" id="email"></textarea><br />
			<label for="message"></label>
			<textarea name="message" rows="10" cols="70" id="message" placeholder="Mon Message ?"></textarea><br />
			<input class="envoyer" name="submit" type="submit" value="Envoyer" Envoyer/></button>
		</form>

label
{
	float: left;
	width: 150px;
	display: block;
}
textarea
{
	padding: 8px;
}

Modifié par ExT4zY33 (11 Mar 2020 - 15:25)

ExT4zY33 a écrit :

ca marche mais parcontre mon titre reste acote du texte et ne vas pas au dessu de celui-ci

Quelle solution ? Si c'est la 2eme j'ai bien dit qu'il fallait mettre un wrapper autour du titre et du texte (comme quand l'exemple)

Pour le formulaire pour nom, prenom et email utilise des input pas des textarea.
Tes labels sont vides ça sert a rien.
Pour les aligner entre eux il faut les entourer de wrapper :
https://jsfiddle.net/undless/9u3rdLx5/

Bonjour,

pour le code HTML des formulaires, de Bonnes Pratiques sont présentes dans le Guide de l'intégrateur de la DINUM, ici Étiquettes car si les tiennes sont correctement associées via les attributs for/id elles ne sont en revanche pas pertinentes puisque vides comme l'a fait remarquer _laurent et Regroupement de champs : un élément legend sans le fieldset parent ne sert à rien (l'inverse serait vrai également). Notes : 1/ s'il n'y a que ce formulaire dans la page, fieldset/legend n'est pas nécessaire car pas de confusion possible avec d'autres champs (tu pourrais remplacer par un titre avec le bon niveau de titre) 2/ tu peux immédiatement virer la bordure par défaut du fieldset, l'important c'est la présence dans le code HTML de legend quand il y a fieldset et inversement.

EDIT : si tu cherches les autres Fiches de ce guide, il y a un bouton Sommaire que je trouve tellement peu lisible que je préfère préciser qu'il existe…
Modifié par Felipe (12 Mar 2020 - 10:35)