Mettre une image à Gauche et à droite sans déformer le formulaire du centre

**Darbon** · 06/10/2006, 11h06

Bonjour,

je vous explique en image je pense que ce seras plus simple :

je veux arriver à ca seulement (j'edite avec bloc-note) j'ai pas Dream ni rien et dans le bloc note je sais pas quel code mettre pour mettre l'image de droite et celle de gauche sur les flancs de la page...sans que ca me fasse des sauts de ligne dans le formulaire

merci par avance

**trotters213** · 06/10/2006, 11h13

Utilise Scite pour la coloration syntaxique, il est vraiment monstrueux, gratuit, indentation, auto-complétion, il supporte quasiment tous les types de fichiers, bref il est terrible.
Sinon pour ton problème utilise des div dans ton HTML

Code :

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

1
2
3
<div id="droite">...</div>
<div id="gauche">...</div>
<div id="mileu">...</div>

et dans ton CSS tu mets

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#gauche {
float:left;
width:25%;
}
 
#droite{
float:left;
width:25%;
}
 
#milieu{
float:left;
width:50%;
}

PS : sympa les dreadnought

**Darbon** · 06/10/2006, 11h20

j'ai pas fait appel à des feuilles de style..je prefere un code moche qui marche en un seul fichier ^^

donc dans le body j'ai mis ca :

<p align="center"><img src="logo.png" width="740" height="235" border="0"></p>

ca me met un saut de ligne dans mon formulaire

sans appel de style t'a une solution stp ?

**Tdeny** · 06/10/2006, 11h35

C'est bien ça mais tu as une petite erreur là, celle du milieu doit justement être au milieu, pas à la fin.
Tu peux mettre ça en style sans feuille de style.

Code :

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

1
2
3
4
<div style="float:left;width:25%;"><img src="image de gauche"></div>
<div style="float:left;width:50%;"><img src="image d'en haut..."><form>formulaire</form>
</div>
<div style="float:left;width:25%;"><img src="image de droite"></div>

Ton image du haut doit être comprise dans la div du mileu si tes images de droite et gauche font toute la hauteur.

**Tdeny** · 06/10/2006, 11h41

D'ailleurs Darbon, on est pas obligé de créer un 2ème fichier pour enregistrer les styles séparément.
Ça se met dans la head.

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
17
18
19
20
 
<head>
.....
<style type="text/css">
#gauche {
float:left;
width:25%;
}
 
#droite{
float:left;
width:25%;
}
 
#milieu{
float:left;
width:50%;
}
</style>
</head>

**Darbon** · 06/10/2006, 12h08

Ca :

Code :

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

1
2
3
4
<div style="float:left;width:25%;"><img src="mail.gif"></div>
<h1 align="center"><font color="#FF0000" size="6">Formulaire D'Admission</font></h1>
<p align="center"><font color="#000000" size="4">Adresse E-mail :<br>
<small><input type="text" name="Adresse E-Mail" size="20"></small></p>

= Ca :

J'ai essayé :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<div style="float:left;width:25%;"><img src="cadenas.gif"></div>
<div style="float:left;width:50%;"><img src="logo.png">
</div>
<div style="float:left;width:25%;"><img src="mail.gif"></div>
<br/>
<br/>
<br/>
<br/>
<h1 align="center"><font color="#FF0000" size="6">Formulaire D'Admission</font></h1>
<p align="center"><font color="#000000" size="4">Adresse E-mail :<br>
<small><input type="text" name="Adresse E-Mail" size="20"></small></p>

ca le remet pas au centre je comprends pas pourquoi il ets partit à droite sous l'image alors que la Div est bien fermé

Merci encore

**trotters213** · 06/10/2006, 12h09

excuse moi pour le milieu, j'ai pas percuté que je l'avais mis en dernier

Pour répondre à Darbon

j'ai pas fait appel à des feuilles de style..je prefere un code moche qui marche en un seul fichier ^^

Franchement ça n'a rien à voir avec le fait que se soit beau ou pas, c'est simplement que le jour où tu va devoir faire des MàJ, ou alors si un jour ton site prend de l'ampleur tu vas galérer comme un chien pour rien alors que t'aurais pu prévoir le coup.
De plus si tu veux un site standard (donc qui ne passe pas QUE sous IE) c'est un bon départ de séparer la forme du contenu

**trotters213** · 06/10/2006, 12h13

Non, tu t'y prends mal : tu as un écran divisé en 3 donc u mets tes bloc dans la partie que tu veux (donc celle du centre) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<div style="float:left;width:25%;"><img src="cadenas.gif"></div>
<div style="float:left;width:50%;"><img src="logo.png">
<h1 align="center"><font color="#FF0000" size="6">Formulaire D'Admission</font></h1>
	<p align="center">
		<font color="#000000" size="4">Adresse E-mail : </font>
		<small>
			<input type="text" name="Adresse E-Mail" size="20">
		</small>
	</p>
</div>
<div style="float:left;width:25%;"><img src="mail.gif"></div>

PS : pense à fermer les balises que tu ouvres.

**Darbon** · 06/10/2006, 12h51

Merci tout est parfait une derniere chose comment mettre le lien des identifiant perdu sous l'image de gauche ? je l'ai mis dans le code...mais rien à faire

voila le code :

Code :

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

1
2
3
 
<A HREF="#" onClick="window.open('mdp.html','Pertes Des Identifiants','toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0, width=550, height=400, left=500,top=400');return(false)">Identifiants Perdu ?!</A>
<!-- FIN DU SCRIPT -->

Merci encore

**trotters213** · 06/10/2006, 14h00

lol t'as pas tout compris apparement sur les divs

Tiens tu devrais lire ce petit cours sur les div et CSS.
Pour mettre quelque chose sous l'image de gauche tu fais comme pour ton formule au centre, tu le mets dans le div de gauche :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<div style="float:left;width:25%;"><a href="#" onclick="window.open('mdp.html','Pertes Des Identifiants','toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0, width=550, height=400, left=500,top=400');return(false)">Identifiants Perdu ?!</a><img src="cadenas.gif"></div>
<div style="float:left;width:50%;"><img src="logo.png">
<h1 align="center"><font color="#FF0000" size="6">Formulaire D'Admission</font></h1>
	<p align="center">
		<font color="#000000" size="4">Adresse E-mail : </font>
		<small>
			<input type="text" name="Adresse E-Mail" size="20">
		</small>
	</p>
</div>
<div style="float:left;width:25%;"><img src="mail.gif"></div>

PS : n'utilises jamais de majuscules pour les balises et leurs attributs. Et vraiment, tu devrais utiliser des feuilles de styles

**Darbon** · 06/10/2006, 14h37

Cette page c'est la version finale, elle restera comme ceci durant les 20 prochaines années

et comme je l'ai dit je sais pas faire feuilles de styles....j'suis qu'un novice

Pour le lein...je viens de le mettre dans la Div et à présent j'ai ça

Merci

**trotters213** · 06/10/2006, 14h49

Envoyé par Darbon

et comme je l'ai dit je sais pas faire feuilles de styles....j'suis qu'un novice

c'est comme tout, ça s'apprend

C'est bon là ou c'est pas bon? C'est le résultat que tu voulais ou pas?
Si oui, pense à cliquer sur

tout en bas sinon qu'est-ce qu'il y a comme nouveau pb?

**Darbon** · 06/10/2006, 14h51

les liens sont pas parfaitement sous l'image

J'suis chiant ?

Et pour centrer Le Tout Verticalement

Merci

**trotters213** · 06/10/2006, 15h10

Envoyé par Darbon

J'suis chiant ?

Pas plus que la moyenne

Envoyé par Darbon

Et pour centrer Le Tout Verticalement

Par contre il faut se donner la peine de chercher sur le net un peu :

n'a jamais tuer personne, promis

Tu peux nous donner le lien vers ta page ça sera plus simple ?

**Darbon** · 06/10/2006, 15h18

Oui mais je sais pas si ca convient à la charte du forum

http://board-ftp.com/index.html

**trotters213** · 06/10/2006, 16h03

mets des marges à tes images et tu devrais rapetir tes images parce que je suis en résolution 1280*1024 et encore tes images se chevauchent

**Darbon** · 06/10/2006, 17h23

image redimensionné

Merci

et pour les marges sous bloc_note++ le code c'est quoi stp ?

**trotters213** · 07/10/2006, 09h14

Envoyé par trotters213

Par contre il faut se donner la peine de chercher sur le net un peu :

n'a jamais tuer personne, promis

Une seconde sur google

**Bisûnûrs** · 07/10/2006, 09h31

Oulah, les petites résolutions sont lésées avec une telle image.

Et encore, j'suis en 1024x780, ce qu'ont la majeur partie des internautes.

trotters213 il parle de lui à la 3e personne. Rouloulouu.

Edit :

<modechieur>
Tu as de très belles images n'empêche, elles sont de toi ?

Si non, as-tu les droits de reprodution ?
</modechieur>