Ajouter une image en bas de page répéter horizontalement

Fermé
ReouvK Messages postés 3 Date d'inscription lundi 12 novembre 2012 Statut Membre Dernière intervention 12 novembre 2012 - 12 nov. 2012 à 13:01
inspiring Messages postés 1813 Date d'inscription vendredi 28 janvier 2011 Statut Membre Dernière intervention 31 décembre 2018 - 13 nov. 2012 à 10:33
Bonjour,

Je vous explique mon petit souci qui je pense est tous simple, mais impossible trouver une solution...

Je viens de créer un formulaire en html et je souhaiterai y ajouter une image en bas de page et la faire répéter horizontalement.

Je vous remercie d'avance pour aide.
A voir également:

4 réponses

inspiring Messages postés 1813 Date d'inscription vendredi 28 janvier 2011 Statut Membre Dernière intervention 31 décembre 2018 265
12 nov. 2012 à 15:04
en CSS

je ne vois pas trop comment est fait ton code et si l'image est dans le formulaire ou juste en bas de page html

pour exemple , dans une div (que tu place ou tu veux)

<div style="height: la hauteur de ton image en px; width: la largeur voulu en px ou %; background-image:url de ton image; background-repeat:repeat-x;"></div>

c'est le CSS pour l'effet voulu, dans la balise ou en feuille externe, a toi de retravailler ca

ou colle ton bout de code et précise l'endroit ou te veux cette effet, je verrai
1
ReouvK Messages postés 3 Date d'inscription lundi 12 novembre 2012 Statut Membre Dernière intervention 12 novembre 2012 1
12 nov. 2012 à 15:54
Tout d'abord merci de ta réponse "inspiring" !

Voici mon code HTML :

<!DOCTYPE html>

<html>

<head>

<title> Formulaire - Projet </title>

<link rel="stylesheet" href="style.css"/>

</head>

<body>

<h1> Inscrivez votre projet </h1>

<form method="post" action="valid.php">

<fieldset>

<legend>Vos Coordonnées</legend>

<table>

<tr>

<td>Numéro d'Etudiant *:</td>
<td> <select> </select></td>

</tr>

<tr>

<td>Nom *:</td>
<td><input type="text" name="nom_eleve"/></td>

</tr>

<tr>

<td>Prénom *:</td>
<td><input type="text"name="prenom_eleve"/></td>

</tr>

<tr>

<td>Age *:</td>
<td><input type="text" name="age_eleve"/></td>

</tr>

</table>

</fieldset>

<br>

<fieldset>

<legend>Classe & Type de Formation</legend>

<table>

<tr>

<td>Séléctionnez votre classe *:</td>
<td><input type="radio" name="id_eleve" value="1"/>SIO 1 DEV</td>
<td><input type="radio" name="id_eleve" value="2"/>SIO 1 RES</td>
<td><input type="radio" name="id_eleve" value="3"/>SIO 2 DEV</td>
<td><input type="radio" name="id_eleve" value="4"/>SIO 2 RES</td>

</tr>

<tr>

<td>Quel est votre statut ? *:</td>
<td><input type="radio" name="formation" value="1"/>Classique</td>
<td><input type="radio" name="formation" value="2"/>Alternance</td>

</tr>

</table>

</fieldset>

<br>

<fieldset>

<legend>Concernant votre projet :</legend>

<table>

<tr>

<td>Numéro de votre projet *:</td>
<td><input type="text" name="num_projet"/></td>

</tr>

<tr>

<td>Nom du Projet *:</td>
<td><input type="text" name="nom_projet"/></td>

</tr>

<tr>

<td>Decrivez votre projet *:</td>
<td><textarea cols="50" rows="10" name="projet"></textarea></td>

</tr>

</table>

</fieldset>

<br>

<input class="bouton" type="reset" value="Annuler" />
<input class="bouton" type="submit" value="Enregistrer" />

</form>
</body>

</html>

et je souhaiterai que l'image attérise en bas de page.

Merci d'avance
1
astuces72 Messages postés 7760 Date d'inscription vendredi 15 janvier 2010 Statut Membre Dernière intervention 29 octobre 2024 1 640
12 nov. 2012 à 16:20
slt

tu n'utilises pas de css, et c'est pourtant la solution à retenir.

en html tu ne peux pas répéter une image sans qu'elle soit en backgroud.
après il faut bidouiller avec du php et une boucle while($a < 10) mais c'est bien nase.

toutes la largeur de ton site cette image ?
1
inspiring Messages postés 1813 Date d'inscription vendredi 28 janvier 2011 Statut Membre Dernière intervention 31 décembre 2018 265
Modifié par inspiring le 13/11/2012 à 10:34
OK, merci pour le code

Je pars sur le principe que l'image est sous ton champ <form>

Le principe, une <div> avec un peu de CSS :

Directement dans le body: ...
</form>
<div style="background-image:url(chemin de ton image.jpg ou png); background-repeat:repeat-x; width:100%; height:la hauteur de ton image en px;"></div>

Avec CSS en <head> et div en <body> : <head>
...
<style type="text/css">
#basdepage {
background-image:url(tst.JPG);
background-repeat:repeat-x;
width:100%;
height:128px; }
</style>
</head>

<body>
...
</form>
<div id="basdepage"></div>
</body>

</html>


Voilà, maintenant tu as plusieurs possibilités :

tu peux placer cette <div> dans un conteneur ou en bas de page ou dans un tableau, celà ne change rien au code sauf pour la largeur qui ne prendra pas toute la page mais celle du conteneur

Si tu veux décaler un peu ce bandeau du bas de ton formulaire (là il est juste en dessous), tu ajoute margin-top:100px; au code css. J'ai mis 100px mais tu détermine la valeur que tu veux.

C'est du CSS, si tu veux ajouter un texte par dessus ce bandeau d'image, tu peux écrire dans la balise <div>


Si besoin dis moi s'il y à un probleme ou si tu veux une modification du code (je ne sais pas ce que tu souhaite au final ...)
1