[HTML/CSS] Fixer une image...

lebogoss28104 Messages postés 103 Date d'inscription   Statut Membre Dernière intervention   -  
 lebogoss28104 -
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 !

55 réponses

Précédent
Réponse 21 / 55
lebogoss28104 Messages postés 103 Date d'inscription   Statut Membre Dernière intervention   19
 
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 ;-) ... )
0
Réponse 22 / 55
empty Messages postés 838 Date d'inscription   Statut Membre Dernière intervention   176
 
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...
0
Réponse 23 / 55
empty Messages postés 838 Date d'inscription   Statut Membre Dernière intervention   176
 
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...
0
Réponse 24 / 55
lebogoss28104 Messages postés 103 Date d'inscription   Statut Membre Dernière intervention   19
 
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 ...
0
empty Messages postés 838 Date d'inscription   Statut Membre Dernière intervention   176
 
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
0

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   Statut Membre Dernière intervention   19
 
Comment je pourais centrer ma page en CSS ? J'ai tout essayer rien à faire !..
0
empty Messages postés 838 Date d'inscription   Statut Membre Dernière intervention   176
 
le div de ta page tu met comme style :

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

0
Réponse 26 / 55
lebogoss28104 Messages postés 103 Date d'inscription   Statut Membre Dernière intervention   19
 
Merci, je vais essayer !
0
Réponse 27 / 55
lebogoss28104 Messages postés 103 Date d'inscription   Statut Membre Dernière intervention   19
 
Non dsl sa ne marche pas ! =S
0
empty Messages postés 838 Date d'inscription   Statut Membre Dernière intervention   176
 
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 ;-)
0
Réponse 28 / 55
lebogoss28104 Messages postés 103 Date d'inscription   Statut Membre Dernière intervention   19
 
Merci pour tes 2 derniere reponse ;-), je test ta derniere !
0
Réponse 29 / 55
lebogoss28104 Messages postés 103 Date d'inscription   Statut Membre Dernière intervention   19
 
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 !..
0
Réponse 30 / 55
empty Messages postés 838 Date d'inscription   Statut Membre Dernière intervention   176
 
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>
0
Réponse 31 / 55
lebogoss28104 Messages postés 103 Date d'inscription   Statut Membre Dernière intervention   19
 
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 !
0
Réponse 32 / 55
lebogoss28104 Messages postés 103 Date d'inscription   Statut Membre Dernière intervention   19
 
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 !.... ]-(
0
empty Messages postés 838 Date d'inscription   Statut Membre Dernière intervention   176
 
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...
0
Réponse 33 / 55
lebogoss28104 Messages postés 103 Date d'inscription   Statut Membre Dernière intervention   19
 
Alors comment je positionne mes images !? =-|
0
empty Messages postés 838 Date d'inscription   Statut Membre Dernière intervention   176
 
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 ;-)
0
Réponse 34 / 55
lebogoss28104 Messages postés 103 Date d'inscription   Statut Membre Dernière intervention   19
 
Ok je regarde ta trouvaille, merci !
0
Réponse 35 / 55
empty Messages postés 838 Date d'inscription   Statut Membre Dernière intervention   176
 
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 :-)
0
Réponse 36 / 55
lebogoss28104 Messages postés 103 Date d'inscription   Statut Membre Dernière intervention   19
 
Merci !
0
Réponse 37 / 55
lebogoss28104 Messages postés 103 Date d'inscription   Statut Membre Dernière intervention   19
 
Désolé de te dire ca mais sa n'a toujours pas marché !! =S
0
Réponse 38 / 55
empty Messages postés 838 Date d'inscription   Statut Membre Dernière intervention   176
 
Tu as retiré tes position: absolute ? Car sans position absolute ça fonctionne à merveille...
0
Réponse 39 / 55
lebogoss28104
 
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éé ...
0
Réponse 40 / 55
empty Messages postés 838 Date d'inscription   Statut Membre Dernière intervention   176
 
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...
0

Discussions similaires

Modifier la taille d'un <br /> en CSS/HTML
1000trad -
HeeBoo -

7 réponses
faire une banniere d'images défilante
Stéphane Clément -
chaef -

21 réponses
photoshop: exporter psd en html/css
Utilisateur anonyme -
malikalalmas -

20 réponses
[html/css]retour à la ligne dans un div
Derbie88 -
Dalida -

9 réponses
steam validation rejected
yona007 -
Ryousuke59 -

26 réponses
trait horizontal avec du css
tipi75 -
alainpre -

9 réponses