fixer des images mais très débutante!

kokroko · Message par **kokroko** » 22 mai 2007, 18:33

Bonjour,
Je fais un site sur Nvu, j'aimerai fixer des images pour qu'elle reste à l'écran même quand on descend sur la page.
J'ai lu les différents messages déjà postés sur le site mais je ne connais rien en langage html, donc je n'ai pas pu trouver de solution...
Je vous copie la "version" source de ma page. J'aimerai que ce qui apparait à l'écran (les dessins et les écritures) restent toujours à l'écran à gauche.
[/code]

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>npendant</title>

</head>
<body style="background-color: rgb(181, 135, 45); color: rgb(0, 0, 0);" alink="#ee0000" link="#0000ee" vlink="#551a8b">
<br>

<br>

<img style="position: absolute; height: 288px; width: 62px; top: 280px; z-index: 1; left: 141px; right: auto;" alt="flecheverticale" title="flecheverticale" src="flecheverticale.jpg"><br>

<br>

&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; <br>

<br>

<br>

<div style="position: absolute; top: 84px; left: 29px; right: auto;"><small><span style="font-family: Bobcat;"><span style="color: rgb(255, 210, 21);">ETHIOPIAN
CROSSES</span></span></small><br>
</div>

&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <br>

<br>

<br>

<br>

<br>

<br>

<br>

&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <br>

<br>

<br>

<br>

<br>

<br>

<div style="position: absolute; top: 116px; left: 29px; right: auto;"><small><span style="font-family: Bobcat;"><span style="color: rgb(255, 210, 21);">EARINGS-BANGLES</span></span></small><br>
</div>

<br>

<div style="position: absolute; top: 228px; left: 54px; right: auto;"><small><span style="font-family: Bobcat;"><span style="color: rgb(255, 210, 21);">MENU</span></span></small><br>
</div>

<br>

<div style="position: absolute; top: 287px; left: 26px;"><small><span style="font-family: Bobcat;"><span style="color: rgb(255, 210, 21);">ABOUT
THE ARTIST</span></span></small><br>
</div>

<div style="position: absolute; top: 257px; left: 46px;"><small><span style="font-family: Bobcat;"><span style="color: rgb(255, 210, 21);">CONTACT</span></span></small><br>
</div>

<div style="position: absolute; top: 50px; left: 29px; right: auto; width: 106px;"><small><span style="color: rgb(255, 210, 21);"><span style="font-family: Bobcat;">ADINKRA
SYMBOLS</span></span></small><br>
</div>

<img style="width: 58px; height: 269px; position: absolute; top: 15px; left: 146px; right: auto;" alt="flecheverticale" title="flecheverticale" src="flecheverticale.jpg">
</body></html>[/b]

Comme j'ai essayé différents trucs des messages, il y a peut être des codes qui sont restés mais qui sont inutiles...
Si vou spouvez m'aider, ça serait super!!!
J'ai vraiment besoin de savoir comment faire!
Merci!

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; CHWIE_FR70; SV1; FunWebProducts; .NET CLR 1.1.4322)

kokroko · Message par **kokroko** » 23 mai 2007, 14:39

Voilà, j'ai trouvé un code à appliquer sur un forum. j'arrive à avoir mon menu fixe à gauche mais à droite, dans le contenu, quand je mets une image et que je la dissocie du texte pour pouvoir la placer où je veux, après, elle reste fixe comme le menu et je ne peux plus descendre sur la partie contenu pour pouvoir mettre d'autres images.
Voilà le code trouvé :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<title>Deux zones avec scroll en CSS</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<style type="text/css">
/* CSS issu des tutoriels css.alsacreations.com */
html, body {
height: 100%;
width: 100%;
overflow: auto;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#contenu {
height: 100%;
margin-left: 200px;
overflow: auto;
background-color:#9999CC;
}
#menu {
position: absolute;
left:0;
background-color: #99CCCC;
width: 200px;
height: 100%;
}
</style>
</head>

<body>

<div id="menu">ici le Menu<br /> <a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">(voir tous les modèles)</a>


</div>

<div id="contenu">
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />

	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />

	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />

	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />

	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />

	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />

	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />

	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />

	contenu<br />
	contenu<br />
	contenu<br />
</div>

</body>
</html>

Merci de m'aider!!
Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; CHWIE_FR70; SV1; FunWebProducts; .NET CLR 1.1.4322)

Message par **chinon37** » 23 mai 2007, 14:59

Pourquoi dissocier l'image du texte?
Si l'image est en position "absolue", elle sort du flux pour se positionner à un emplacement donné indépendamment de tout autre contenu de la page.
Il vaut mieux insérer l'image en mettant le curseur à l'endroit où tu souhaites voir celle-ci, mais dans le flux du texte, sans positionnement particulier.

kokroko · Message par **kokroko** » 23 mai 2007, 15:21

Merci pour la réponse.
en fait, si je ne dissocie pas, je n'arrive pas à placer les images comme je veux.Je dois mettre plusieurs images sur une même "ligne" mais elles n'ont pas forcément le même format, du coup, j'en mets une, ça me décale tout et ce n'est pas esthétique.C'est pour ça qu'en dissociant, je peux les mettre exactement où je veux. Mais avec le code du menu fixe, ça me fixe les images du contenu aussi...
Et sans dissocier, j'ai remarqué aussi qu'une fois la page publiée, ça me décale les images un peu n'importe où.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; CHWIE_FR70; SV1; FunWebProducts; .NET CLR 1.1.4322)

kokroko · Message par **kokroko** » 24 mai 2007, 20:12

Voici le lien de la page que j'essaie de faire.
L'image à droite est censée descendre avec l'ascenseur mais ce n'est pas le cas.Elle reste fixe comme le menu de gauche.
Merci de votre aide!
http://afridink.nuxit.net/test.htm

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; CHWIE_FR70; SV1; FunWebProducts; .NET CLR 1.1.4322)

Message par **Ymai** » 24 mai 2007, 23:41

kokroko a écrit : Mais avec le code du menu fixe, ça me fixe les images du contenu aussi...

L'image étant en position "absolute", il est donc normal qu'elle soit aussi fixe que le menu.

Et sans dissocier, j'ai remarqué aussi qu'une fois la page publiée, ça me décale les images un peu n'importe où.

???
Encore un comportement erratique d'Internet Explorer?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; CHWIE_FR70; SV1; FunWebProducts; .NET CLR 1.1.4322)

Perso, je préconiserais d'abandonner l'idée de vouloir utiliser les positions "absolute".
Il est tout à fait possible de mettre plusieurs images qui n'ont pas la même taille sur la même ligne (même si l'effet esthétique n'est pas forcément heureux).
Au moins en mettant chaque image dans un conteneur de taille fixée.
<div style="float: left; width:xxxx; height:yyyyy"><img src="image1.jpg" ....></div>
<div style="float: left; width:xxxx; height:yyyyy"><img src="image2.jpg" ....></div>

Encore mieux dans une feuille de style.

kokroko · Message par **kokroko** » 25 mai 2007, 12:39

Merci pour la réponse, je vais essayer de voir ce que ça donne avec le code. Et aussi de voir comment on se sert des feuilles de style.
Je vous tiens au courant.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; CHWIE_FR70; SV1; FunWebProducts; .NET CLR 1.1.4322; MSN 6.1; MSNbMSFT; MSNmfr-fr; MSNc00; MSNc00)

Geckozone

fixer des images mais très débutante!

fixer des images mais très débutante!

bon, presque trouvé!

Qui est en ligne ?