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.

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

HTML

Vue hybride

Discussions similaires

Partager

Partager