Champ de texte en position:absolute en CCS..? [Résolu/Fermé]

Signaler
-
 Nexusland -
Bonjour à tous. Un problème se pose à moi. J'essaie de faire une page d'accueil simple, avec une image JPG en fond d'écran, sans répétition, et je veux y insérer un champ de texte mais à une place précise pour que ça "colle" avec l'image en fond d'écran. Je pense que c'est possible avec le CCS mais malgré mes recherches ( et un apprentissage qui me prend des nuits: j'ai commencé il y moins d'une semaine ), je n'y parviens pas. Le mieux et le plus simple serait que j'intègre le CCS dans le code html, je sais qu'il existe un code du genre 'position:absolute' avec les valeurs en pixels en partant du coin supérieur gauche de la page, mais je ne sais pas. A tout hasard, voilà le code de ma page ci-dessous. Si quelqu'un peut m'aider. En plus, j'ai trop envie de comprendre tout ça. Merci d'avance.

*****************************************************

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
body {
background-image: url(fond2.jpg);
background-repeat: no-repeat;
}
-->
</style></head>

<body>
<input name="nom" type="text" id="nom" value="Ce n'est pas ma place !" size="30" />
</body>
</html>

*******************************************************************

Certes, vous n'aurez pas l'image puisqu'elle est sur mon PC. C'est un immeuble et je veux mettre ces champs de texte dans un coin des fenêtres, au pixel près... (exigeant, en plus !)
Encore merci.
Excellente année à tous..

Nexusland

6 réponses

Réponse 1 / 6
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
 904
salut,

donc il faut que ton image soit callé par rapport au même côté que ton '<input>'.

en suite il faut définir {display:absolute;} pour le '<input>'.

enfin il faut appliquer {position:relative} au container de référence et au container intermédiaires. là il suffit de l'appliquer à '<body>'. enfin j'espère, lol !

et pour caller le zinzin, tu le fais au pixel près et par rapport à n'importe quel bord ('top:Xpx' ou 'bottom:Xpx', 'right:Xpx' ou 'left:Xpx').

essaie, et dis nous ce que ça donne.
Réponse 2 / 6

Merci pour cette réponse rapide. Mais comme je le disais, ça fait environ une semaine que j'essaie d'apprendre le CSS (et le html !) et j'ai du mal.. Je suis déjà content d'avoir réussi à faire cette page. Cela dit, mon image est définie en fond d'écran, donc je ne sais pas comment faire pour la positionner. Ensuite, il me faudrait un exemple pour que je puisse analyser et comprendre la chose. J'ai déjà du mal.
En attendant, encore merci pour ta réponse, je vais essayer d'aller voir en ce sens en attendant un exemple de code.
Bonne soirée.
(je crois bien je ne suis pas près de me coucher, ce soir...)

Nexusland
Réponse 3 / 6
Messages postés
5122
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
22 novembre 2020
 2 739
Bonjour à vous,

N'oublie pas les bons conseils de Dalida (avec plutôt {position:absolute;} ;-) et joue avec le code de ce petit exemple (déplace le carré rose).

En remarquant le traitement des margin, tu pourras peut-être l'adapter à tes input.
J'ai appliqué la “position:relative;” et des dimensions au <form>, mais il serait préférable que tu le fasses à une <div> dans laquelle serait placé le <form>.

--
Réponse 4 / 6

Bonjour et surtout MERCI A TOUS !!

Non seulement j'ai appris à le faire, mais en plus ÇA MARCHE !!!

Excellente année à vous et à bientôt j'espère...

7 jours et 7 nuits passées dessus... C'est la fin de mon cauchemar, mais je pense que d'autres m'attendent.

Au plaisir de vous relire, et MERCI encore.

Nexusland.
Réponse 5 / 6
Messages postés
5122
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
22 novembre 2020
 2 739
Résolu, on peut considérer que c'est résolu alors ?

--
Réponse 6 / 6

Oui, c'est résolu, j'ai cliqué sur le lien pour le signaler en plus de mes remerciements..

Nexusland
Posez votre question