Position:fixed

Version imprimable

09/06/2013, 16h32
juju77

1 pièce(s) jointe(s)

Position:fixed

Bonjour à tous alors voilà je suis débutant css, et actuellement j'ai un petit probleme avec un de mes élements de ma page, je vous montre un screen :

http://www.developpez.net/forums/att...1&d=1370788151

Donc voilà j'ai un bouton qui me permet de rajouter des champs texte à la suite des autres et j'aurais aimé que mon étoile ne descende pas elle aussi et que les champs texte viennent se superposer au-dessus.

J'ai mis la position à fixed mais ca ne fonctionne pas...si quelqu'un peut m'éclairer merci :p
09/06/2013, 16h41
rodolphebrd

Bonjour,

vous pouvez envoyer votre code ou une page en ligne...

Bonjour oui voilà un bout du code,

Html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<div class="gauche"><fieldset>
		<legend>Nom :</legend> <input name=nomFilm type="text">
		<legend>Année :</legend> <input name=dateFilm type="date">
		<legend>Pays :</legend> <input name=PaysFilm type="text">
		<legend>Liens :</legend>
		<input class="ajoutLienButton" type="button" name="ajoutLien" value="Ajouter un lien" onclick="AjoutLien();">
		<div id="liens">
		<input type="text" name="lien1" size="50" /><br />
		</div>
		<div id="logoEtoile" ><img src="./logoEtoile.png"/></div>
</fieldset></div>
 
<script type="text/javascript">
        num_lien = 2;
        
        function AjoutLien(i){
        function display(value) {
                if(typeof value != 'undefined') {
        num_lien = value;
                }
        }
        document.getElementById('liens').innerHTML += '<input type="text" name="lien'+num_lien+'" size="50" /><br />';
        num_lien++;
        }
 
</script>

css :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
#logoEtoile{
position:fixed;
}
form div.gauche {
	width: 40%;
	margin: 0 0 1em 0px;
	float: left;
	display: inline-block; /* évite le Doubled Float-Margin Bug d'IE6 */
}
form div.gauche p {
	margin: .5em 0;
}
form div.gauche span.label {
	display: block;
	margin-bottom: .2em;
}
form div.gauche label {
	font-weight: bold;
	cursor: pointer;
}
form div.gauche span.controle {
	display: block;
}

en espérant que ca suffise ^^

09/06/2013, 17h37
rodolphebrd
Je pense qu'avec la position absolute vous pouvez obtenir un résultat en ajoutant ce bout de code:
Code:

1 2 3 4 5 6 7 8 #logoEtoile { position: absolute; z-index:-1; bottom: -20px; /* à définir au choix avec un left: ;*/ } .gauche { position: relative; }
UN peu de lecture utile:
http://css.developpez.com/faq/?page=...ement_absolute
09/06/2013, 17h56
juju77

C'est parfait c'est ce qu'il me fallait ca marche :p Merci et merci pour la lecture jvais regarder ca :)

je ferme le sujet