[HTML/CSS] Fixer une image...

Fermé

lebogoss28104 Messages postés 103 Date d'inscription samedi 8 novembre 2008 Statut Membre Dernière intervention 8 septembre 2009 - 24 avril 2009 à 13:59
lebogoss28104 - 13 févr. 2016 à 20:46

Bonjour, je cherche depuis longtemps un moyen de fixer une image, une image qui ne bougerais pas lors du scroll. Vous connaissez ce code ? Si oui des explications serais les bien venu ( je ne suis que débutant ).

J'ai deux autress questions =D ... Comment puis-je adaptéer mon site à toutes les résolution et je cherche un autre code pour faire comme dans le site de la fnac : http://micro-informatique.fnac.com/a2637262/Ordinateur-de-bureau-Ordinateur-de-bureau-Apple-iMac-Intel-Core-2-Duo-2-66-GHz-20-TFT?Mn=-1&Ra=-5000&To=0&Nu=1&Fr=0 Cliquer sur l'image de l'imac vous vairez !

Pouvoir déplacer une image. Je ne mis connais absolument pas en flash et je ne veus pas mis consacrer, donc si vous ne connaissais pas d'autres moyens que du flash, pas grave ;-) ...

Merci à vous !

A voir également:

Image fixed css
Image iso - Guide
Acronis true image - Télécharger - Sauvegarde
Impossible de charger l'image haute résolution messenger - Forum Xiaomi
Supprimez les composantes rouge et verte de cette image. quel mot apparaît ? - Forum Word
Image iso windows 10 - Guide

55 réponses

Réponse 21 / 55

lebogoss28104 Messages postés 103 Date d'inscription samedi 8 novembre 2008 Statut Membre Dernière intervention 8 septembre 2009 19
27 avril 2009 à 14:47

Merci baucoup ! Je vais mis mettre mais pour l'instant il faud que je créer un menu, se serait une image sur l'aquelle je positionne d'otre image/lien ... Je dois commencer par où pour faire ca ? ( ensuite je reprendrais le PHP d'en l'ordre ;-) ... )

Réponse 22 / 55

empty Messages postés 837 Date d'inscription vendredi 25 juillet 2008 Statut Membre Dernière intervention 23 février 2016 176
27 avril 2009 à 17:13

J'ai pas très bien compris mais si c'est pour jouer sur les images et l'effet rollover faut le faire en CSS... (pour l'apparence), pour le PHP.

Je t'aurais bien donné le code mais il faut vraiment que tu lise vite fait le tuto parce que tu vas rien comprendre sinon :-s

il faut plus nommer tes fichiers .html ou .htm mais .php, c'est assez compliquer à expliquer... Mais si tu lis le TUTO tu apprendra vite et facilement... Maintenant tu peux faire ton site en HTML vite fait pour qu'il soit fait puis travailler sur la version PHP...

Réponse 23 / 55

empty Messages postés 837 Date d'inscription vendredi 25 juillet 2008 Statut Membre Dernière intervention 23 février 2016 176
27 avril 2009 à 17:14

Je vois sur ton site que :

Ce site est optimisé pour du 1440x900 !

Il faut toujours optimiser son site sur la résolution la plus utilisée 1024*768...

Réponse 24 / 55

lebogoss28104 Messages postés 103 Date d'inscription samedi 8 novembre 2008 Statut Membre Dernière intervention 8 septembre 2009 19
27 avril 2009 à 17:33

C'est se que je penssais faire mais un ami ma dit ( à la base il allait peut-etre faire avec moi le site ) que bientôt les personnes aurrons plus des ecran avec des resolutions 1440*900 ...

Et non je ne veus pas faire un menu rollover mais un menu avec un fond transparent fixé et qui aurait des icones ( qui sont les liens ) dessus ...

empty Messages postés 837 Date d'inscription vendredi 25 juillet 2008 Statut Membre Dernière intervention 23 février 2016 176
28 avril 2009 à 15:05

La résolution dont tu parle est une résolution d'écran 16/9 les écrans larges, et je doute que les gens achètent plus d'écrans large que d'écrans carré ^^ il faut pas anticiper autant en avance parce que même si ton ami disait vrai, de toute manière ça se passerai dans 5 ans (le temps de remplacer la résolution la plus utilisée...)

Il faut faire ton site par rapport aux "normes" actuel ^^

Maintenant si tu es sur que les utilisateurs vont avoir cette résolution... Mon écran est de cette résolution mais mes sites sont en soit adapté à toutes résolution (utilisation des % au lieu px en CSS) ou alors compatible 1024*768

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 25 / 55

lebogoss28104 Messages postés 103 Date d'inscription samedi 8 novembre 2008 Statut Membre Dernière intervention 8 septembre 2009 19
27 avril 2009 à 20:28

Comment je pourais centrer ma page en CSS ? J'ai tout essayer rien à faire !..

empty Messages postés 837 Date d'inscription vendredi 25 juillet 2008 Statut Membre Dernière intervention 23 février 2016 176
28 avril 2009 à 15:01

le div de ta page tu met comme style :

margin-left: auto;
margin-right: auto;

Réponse 26 / 55

lebogoss28104 Messages postés 103 Date d'inscription samedi 8 novembre 2008 Statut Membre Dernière intervention 8 septembre 2009 19
28 avril 2009 à 15:02

Merci, je vais essayer !

Réponse 27 / 55

lebogoss28104 Messages postés 103 Date d'inscription samedi 8 novembre 2008 Statut Membre Dernière intervention 8 septembre 2009 19
28 avril 2009 à 15:04

Non dsl sa ne marche pas ! =S

empty Messages postés 837 Date d'inscription vendredi 25 juillet 2008 Statut Membre Dernière intervention 23 février 2016 176
28 avril 2009 à 15:07

Si tu fais par exemple

#conteneur {
width: 800px;
margin-left: auto;
margin-right: auto;
}

<div id="conteneur">

Contenu texte, bannière etc...

</div>

et si ça va vraiment pas pour certains navigateur il faut mettre

body {
text-align: center;
}

mais bien définir l'alignement de tes textes à l'intérieur des div alors ou mettre un text-align: left; au div conteneur ;-)

Réponse 28 / 55

lebogoss28104 Messages postés 103 Date d'inscription samedi 8 novembre 2008 Statut Membre Dernière intervention 8 septembre 2009 19
28 avril 2009 à 15:10

Merci pour tes 2 derniere reponse ;-), je test ta derniere !

Réponse 29 / 55

lebogoss28104 Messages postés 103 Date d'inscription samedi 8 novembre 2008 Statut Membre Dernière intervention 8 septembre 2009 19
28 avril 2009 à 15:41

Sa ne marche toujours pas !! ='(
J'ai penssé que c'était psk j'utilais trop de "<div id=".....">" ... Pourtant quand je place avec des % tout mon contenu placé entre des div, cela marche bien. Mais après quand je fais les soltuions que tu m'a donnais, sa ne déplace que ma baniere !..

Réponse 30 / 55

empty Messages postés 837 Date d'inscription vendredi 25 juillet 2008 Statut Membre Dernière intervention 23 février 2016 176
29 avril 2009 à 08:45

Pourtant tous mes sites sont fait de cette manière et sont bien centré, comme CCM...

tu dois mettre un DIV conteneur qui contiendra tout tes autres DIV.

DIV {
width: 100%; /* Tous les autres DIV */
}

#conteneur {
width: 800px;
margin-left: auto;
margin-right: auto;
}

<div id="conteneur">
<div id="header">
<div id="menu">
<div id="contenu">
<div id="footer">
</div>
</div>
</div>
</div>
</div>

Réponse 31 / 55

lebogoss28104 Messages postés 103 Date d'inscription samedi 8 novembre 2008 Statut Membre Dernière intervention 8 septembre 2009 19
29 avril 2009 à 14:05

Rien à faire sa ne marche toujour pas ! -_-'

Tien mon index :

<html>
<head>
<title>
Accueil | Ebi28
</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="emplacement">
<div id="image1">
<a href="index.htm"><img src="baniere.png" border=no /></a>
</div>
<div id="fixed">
<div id="image2">
<img src="cadre.png" border=no />
</div>
<div id="text2">
<p>
<div id="titre1">
<center>
News
</center>
</div>
<br />Pas de news dsl ! =(
</p>
</div>
</div>
<div id="scroll">
<div id="text1">
<p>
<div id="titre">
<center>
Accueil
</center>
</div>
<br />
<br />
<br />
Bonjours à vous et bien venu sur mon nouveau blog !
<br />
<br />
Mon blog est en construction ! =P
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div align="right">
<cite>
Arnaud.
</cite>
</div>
</p>
</div>
</div>
<div id="accueil">
<a href="index.htm" title="Accueil">
<img src="accueil.png" border=no />
</a>
</div>
<div id="moi">
<a href="moi.htm" title="Qui suis-je ?">
<img src="moi.png" border=no />
</a>
</div>
<div id="production">
<a href="production.htm" title="Mes productions">
<img src="production.png" border=no />
</a>
</div>
<div id="admin">
<a href="admin.htm" title="Espace administrateur">
<img src="admin.png" border=no />
</a>
</div>
<div id="téléchargements">
<a href="téléchargements.htm" title="Téléchargements">
<img src="téléchargements.png" border=no />
</a>
</div>
<div id="contacter">
<a href="contacter.htm" title="Me contacter">
<img src="contacter.png" border=no />
</a>
</div>
</div>
</body>
</html>

Ma feuille css :

#ebi {
color: #ffffff;
position: absolute;
top: 205px;
left: 235px;
position: absolute;
}

#emplacement {
position: absolute;
top: 0.5%;
left: 2%;
}

#scroll {
overflow: scroll;
background-color: #818181;
color: #6a6a6a;
font-family: comic sans ms;
position: absolute;
top: 330px;
left: 256px;
width: 688px;
height: 343px;
border:#000000 1px solid;
}

body {
background-image: url("fond.png");
background-repeat: repeat-x;
background-attachment: fixed;
}

tr {
color: #000000;
}

td {
color: #000000;
}

table {
color: #000000;
}

a:link {
color: #ffffff;
}

a:visited {
color: #ffffff;
}

a:hover {
color: #ffffff;
}

a:active {
color: #ffffff;
}

#text1 {
position: absolute;
top: 2px;
left: 7px;
font-size: 17px;
text-align: justify;
font-family: Nyala;
color: #000000;
width: 660px;
height: 320px;
}

#text2 {
position: absolute;
top: 240px;
left: 26px;
font-size: 17px;
text-align: justify;
font-family: Nyala;
color: #ffffff;
width: 175px;
height: 20px;
}

hr {
color: #000000;
}

#titre {
font-weight: bold;
font-size: 32px;
}

#titre1 {
font-weight: bold;
font-size: 28px;
}

#image1 {
position: absolute;
top: 0px;
left: 0px;
}

#image2 {
position: absolute;
top: 210px;
left: 0px;
}

#accueil {
position: absolute;
top: 231px;
left: 325px;
}

#moi {
position: absolute;
top: 231px;
left: 410px;
}

#production {
position: absolute;
top: 231px;
left: 485px;
}

#admin {
position: absolute;
top: 231px;
left: 585px;
}

#téléchargements {
position: absolute;
top: 231px;
left: 705px;
}

#contacter {
position: absolute;
top: 231px;
left: 800px;
}

Merci pour ton aide !

Réponse 32 / 55

lebogoss28104 Messages postés 103 Date d'inscription samedi 8 novembre 2008 Statut Membre Dernière intervention 8 septembre 2009 19
29 avril 2009 à 16:21

Si dans environ une demi heure je ne donne pas de nouvelle avant le lundi prochain... C'est que je suis chez mes grand-parents ! Houra !.... ]-(

empty Messages postés 837 Date d'inscription vendredi 25 juillet 2008 Statut Membre Dernière intervention 23 février 2016 176
29 avril 2009 à 19:09

Je m'en doutai j'aurai du te prévenir de ce cas... Position absolute c'est très mauvais... Ca change d'un navigateur à l'autre à ne pas utiliser... C'est pour ça que tu sais pas centrer...

Réponse 33 / 55

lebogoss28104 Messages postés 103 Date d'inscription samedi 8 novembre 2008 Statut Membre Dernière intervention 8 septembre 2009 19
2 mai 2009 à 22:40

Alors comment je positionne mes images !? =-|

empty Messages postés 837 Date d'inscription vendredi 25 juillet 2008 Statut Membre Dernière intervention 23 février 2016 176
4 mai 2009 à 16:46

Dis moi comment tu veux les positionner :-) parce que avec position absolute ta mise en page changera de Firefox à Internet Explorer à Safari à Google Chrome ^^ Donc vaut mieux éviter... Si tu veux faire du positionnement en colonne par exemple utilise des float: left;

J'étais tombé sur un super tuto je crois que c'était sur https://www.alsacreations.com/ cherche un peu sur le site et dis moi si tu trouve quelque chose d'intéressant ;-)

Réponse 34 / 55

lebogoss28104 Messages postés 103 Date d'inscription samedi 8 novembre 2008 Statut Membre Dernière intervention 8 septembre 2009 19
4 mai 2009 à 19:12

Ok je regarde ta trouvaille, merci !

Réponse 35 / 55

empty Messages postés 837 Date d'inscription vendredi 25 juillet 2008 Statut Membre Dernière intervention 23 février 2016 176
4 mai 2009 à 22:12

En fait si tu veux un résumé, par exemple si tu veux 3 colonnes tu fais comme suis :

HTML
<div id="conteneur">
<div id="colonne_1"></div>
<div id="colonne_2"></div>
<div id="colonne_3"></div>
</div>

CSS
DIV#conteneur {
width: 80%;
min-width: 800px;
/* Si tu veux centrer tout ton site comme sur CCM */
margin-left: auto;
margin-right: auto;
/* Fin centrage */
}

DIV#colonne_1, DIV#colonne_2 {
float: left;
width: 33%;
}

DIV#colonne_3 {
width: 33%;
}

Explications
Le DIV#conteneur est le DIV qui contient tout ton squelette, on met un width: 80%; pour qu'il se redimensionne automatiquement lorsqu'on redimensionne la fenêtre...

A l'intérieur du DIV#conteneur nous avons 3 DIV#colonne_[1-3] (de 1 à 3 ^^ c'est juste pour illustré style REGEX, c'est pas une commande CSS...), nous appliquons float: left; aux 2 premiers DIV pour qu'il positionne le DIV suivant juste à côté de lui (si possible) à la place de le positionner en dessous.

Je leur ai défini un width: 33%; par rapport à leur conteneur qui en fait width: 80%;... (Pour eux le conteneur fait 100% donc en faisant 3*33 on tombe à 99% il faut de temps en temps jouer avec les pourcentages car lors du redimensionnement parfois les DIV vont se décaler il faudra peut-être mettre un width: 30%; si ça fonctionne pas avec width: 33%;...)

Donc tu auras quelque chose dans ce style,

Aperçu
Colonne 1 - Colonne 2 - Colonne 3

PS
Petit conseil pour t'amuser lors du positionnement met un border: 1px solid black; à tes DIV comme ça tu vois où ils se trouvent et en même temps mais un contenu du style <div id="colonne_1">Colonne 1</div>

Voilà dis moi si tu t'en sors :-)

Réponse 36 / 55

lebogoss28104 Messages postés 103 Date d'inscription samedi 8 novembre 2008 Statut Membre Dernière intervention 8 septembre 2009 19
16 mai 2009 à 16:16

Merci !

Réponse 37 / 55

lebogoss28104 Messages postés 103 Date d'inscription samedi 8 novembre 2008 Statut Membre Dernière intervention 8 septembre 2009 19
16 mai 2009 à 17:20

Désolé de te dire ca mais sa n'a toujours pas marché !! =S

Réponse 38 / 55

empty Messages postés 837 Date d'inscription vendredi 25 juillet 2008 Statut Membre Dernière intervention 23 février 2016 176
17 mai 2009 à 13:59

Tu as retiré tes position: absolute ? Car sans position absolute ça fonctionne à merveille...

Réponse 39 / 55

lebogoss28104
19 mai 2009 à 19:14

Oui mais bon j'ai trouvais pour un autre site un moyen radicale : <center>
Malheuresement sa ne marche pas sur le blog que je me créé ...

Réponse 40 / 55

empty Messages postés 837 Date d'inscription vendredi 25 juillet 2008 Statut Membre Dernière intervention 23 février 2016 176
20 mai 2009 à 08:36

En CSS l'équivalent est

body {
text-align: center;
}

Moi je t'ai donné précédemment la solution, j'ai essayé chez moi ça fonctionne sous tous les navigateurs...

Discussions similaires

faire une banniere d'images défilante

Mettre une image à gauche en css

Code HTML pour inserer une image de fond

image en arrière plan sur une page html

agrandir une image au passage de la souris

[CSS] Mettre un objet au premier plan