28173 sujets

CSS et mise en forme, CSS3

[Résolu] Positionner un div au dessus d'un input text

Bonjour,
j'ai besoin d'insérer un div au dessus d'un input type=text.
En fait j'ai un grand div, et je souhaite faire apparaitre une croix en haut à droite du div si la souris est dans ce grand div, et même un fond derrière l'image si la souris est sur cette croix. Comme dans ce screenshot:

http://img160.imageshack.us/img160/8268/cssgq6.gif

J'ai réussi à me débrouiller sous Opera (du bricolage) avec des marges négatives, mais sous FF ma solution ne fonctionne pas du tout.

Quelqu'un peut-il m'indiquer la marche à suivre pour coder ça proprement car je n'avais comme idée que les marges négatives, et ça ne semble pas être une solution très viable.

Merci à tous Smiley smile
Modifié par TheKind (30 Dec 2006 - 13:37)
Oui:

Html:
<div id="job_87" class="job">
<div class="job_div_h2"><span><input type="text" onkeypress="job_modified('28')" name="job_name_87" value="Nouveau job"></input></span></div>
<div style="margin: -22px 1px 10px 0px; text-align: right;"><span class="job_delete_button" onclick="delete_job('87', '28')">
<img src="img/delete2.gif" width="9" height="9" alt="Supprimer ce job" title="Supprimer ce job" /></span></div>
<div class="job_div_h3"><span>hjtuwW46</span></div>
<div class="job_div_h4"><span><img src="img/moins.gif" width="9" height="9" alt="moins" style="cursor: hand;" onclick="edit_coeff('87','28', false)" />  <span id="job_coeff_87">0</span>  <img src="img/plus.gif" width="9" height="9" alt="Plus" style="cursor: hand;" onclick="edit_coeff('87','28', true)" /></span></div>
<div class="job_div_h1"><span id="value_job_87">0 %</span></div>
<div class="barre_slider_1">
<div class="barre_slider_2">
<div id="slider_avancement_87" class="barre_slider_3">
<img id="slider_track_87" src="img/barre_bouton.gif" width="12" height="12" alt="" />
</div>
</div> 
</div>


CSS:
.project .job
{
	background-color: #ebebeb;
	margin: 2px 2px;
	width: 135px;
	height: 85px;
	border: 1px solid #c5c5c5;
	float: left;
	overflow: hidden;
	text-align: center;
	cursor: move;
}

.project .job .job_div_h3
{
	height: 12px;
	overflow: hidden;
	margin-top: -2px;
}

.project .job .job_div_h3 span
{
	padding: 0px;
	margin: 0px;
	font-size: 10px;
	height: 12px;
	overflow: hidden;
	font-family: Arial;
	width: auto;
}

.project .job .job_div_h2
{
	height: 23px;
	overflow: hidden;
}

.project .job .job_div_h2 input
{
	background-color: #ebebeb; 
	color: #000000; 
	border: 0; 
	width: 100%; 
	height: 23px; 
	text-align: center; 
	font-size: 20px; 
	font-family: Arial; 
	font-weight: bolder; 
	padding: 0px;
}

.project .job .job_div_h1
{
	height: 23px;
	overflow: hidden;
	padding: 0px 0px 1px 0px;
	margin-top: -1px;
}

.project .job .job_div_h1 span
{
	padding: 0px;
	margin: 0px;
	font-size: 23px;
	height: 23px;
	overflow: hidden;
	font-family: Arial;
	width: auto;
}

.project .job .job_div_h4
{
	height: 12px;
	overflow: hidden;
	margin-top: 3px;
}

.project .job .job_div_h4 span
{
	padding: 0px;
	margin: 0px;
	font-size: 11px;
	font-weight: normal;
	height: 12px;
	overflow: hidden;
	font-family: Arial;
	width: auto;
}

.barre_slider_1
{
	width: 121px;
	height: 12px;
	background-image: url(img/barre_milieu.gif);
	background-repeat: repeat-x;
	background-position: center center;
	padding: 0px;
	margin: 0px 7px;
}

.barre_slider_2
{
	width: 121px;
	background-image: url(img/barre_gauche.gif);
	background-repeat: no-repeat;
    background-position: 0px 4px;
    padding: 0px;
    margin: 0px;
}

.barre_slider_3
{
	width: 121px;
	background-image: url(img/barre_droite.gif);
	background-repeat: no-repeat;
    background-position: 118px 4px;
    padding: 0px;
    margin: 0px;
    text-align:left;
    cursor: default;
}


Je sais c'est pas le plus bô code qu'on ait vu Smiley biggol
Bonjour,

Pas sur d'avoir tout compris mais ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
			
<head> 
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TEST</title>
			
<style>
*{margin:0; padding: 0;}

#conteneur{
width: 300px;
height: 200px;
margin: auto;
border: 1px solid blue;
}

.contenant{
position: relative;
width: 104px;
margin-top: 20px;
border: 1px solid green;
}

input{
width: 100px;
}

.fausse_image{
width:10px;
height: 10px;
position: absolute;
background: red;
right: 0px;
top: 0;
} 
</style>

</head>


	<body>
<div id="conteneur" 
<p>
	<label>Input text<br />
	<div class="contenant"><input type="text"  value="test" name="test" />
	<div class="fausse_image"><div>
	</div>
	</label>
</p>	
</div>
	</body>
</html>
Merci ça marche impec !!
Je n'avais pas pensé au position: absolute;

PS: Dans mon CSS il manquait ce qui nous intéressait Smiley langue 

.job:hover .job_delete_button
{
	visibility: visible;
}

.job_delete_button
{
	padding: 0px 1px 0px 1px;
	cursor: hand;
	visibility: hidden;
}

.job_delete_button:hover
{
	background-image: url(img/back2.png);
	background-repeat: no-repeat;
}


Mais la nouvelle soluce est impecable!
Modifié par TheKind (30 Dec 2006 - 13:44)
Sujet clos
Aller à