28220 sujets

CSS et mise en forme, CSS3

Petit problème d'image

Bonjour,

Je voudrais mettre une image en haut à gauche de mon site web, sous un menu...
Ce menu est un <div>, le corps de la page en est un autre.
Je souhaitais mettre une image en haut à gauche, mais je n'y arrive pas...
Pitié, aidez-moi !!!

Voici mon code :

body {position: absolute; background-position:0%0%;
background-image:url(CIR.jpg); background-repeat:no-repeat;
background: white; margin: 0; padding: 0;}

div#links {position: absolute; top: 103px; left: 0; width: 166px;
height: 700px; font: 16px Verdana, sans-serif;}

div#content {position: absolute; top: 26px; left: 167px; right: 25px;
   color: darkblue; background: white; 
   font: 13px Verdana, sans-serif; padding: 10px; 
   border: solid 5px #444;}


PS : l'image que je veut mettre fait pile 103px par 166px, donc elle devrait se mettre juste au dessus de ma class "link", nan ?
Modifié par Jacouille (16 Aug 2005 - 14:44)
Quand tu écris 
background: white;
ça "écrase" en quelque sorte tout ce que tu as pu spécifié pour le background.

Soit tu écris :

background-image:url(CIR.jpg);
background-repeat:no-repeat;
background-color: white;


Soit :

background: white url(CIR.jpg) no-repeat;


Voilà, j'espère ne pas avoir dit de bêtise, n'étant pas un expert Smiley cligne
Bonjour et bienvenue.
L'ordre dans la feuille de style n'a pas vraîment d'importance, hors mis pour toi et la clarté de lecture.
Ce qu'il nous faudrait en supplément c'est le placement de tes div dans le code html.
A+
Merci à vous deux.
Désolé Niarkal, mais ça ne marche pas... (enfin, j'ai pas l'impression...)
Voici donc un exemple de code :

<body>
<div id="links">
   <?php include("side.htm");?>
</div>
<div id="content">
<h1>Présentation</h1>
<h2><p class="soustitre">Présentation du centre</p></h2>
blablabla


Voici ce que side.htm contient :

	<a href="Home.php">Home<span>c'est la page d'acceuil</span></a>
   	<a href="Code.php">Code en 5 jours<span>Vous n'y croyez pas ? Venez visiter cette page</span></a>
   	<a href="Formules.php">Formules<span>Les différentes formules d'enseignement proposées</span></a>
   	<a href="Inscription.php">Inscription<span>Formulaire d'inscription en ligne</span></a>
   	<a href="Compte.php">Compte<span>Votre compte (s'il a été ouvert !</span></a>

Merci de vos réponses !!!
Ce que Niarkal à écrit devrait fonctionner tout aussi bien, en tout cas c'est plus clair.
Bon, résumons nous : Tu mets ton image en arrière plan du body et tu veux que ta première div se situe plus bas ( de la valeur de la hauteur de l'image ). Si tu ne veux rien à coté ou sur l'image, essaie avec un padding-top pour le body de la hauteur d'image.
Pour reprendre le style en raccourcis de Niarkal:
body { padding: 103px 0 0 0;}

ps: La position absolute de tes divs est elle réellement nécéssaire ? Dans bien des cas, la position par défaut ( static ) est suffisante.
Merci Aureance
En fait, je testais tout ça avec Firefox... L'affichage ne marche toujours pas, mais quand je passe sur IE, pas de problème, l'image est bien là... - Smiley decu
Moi pas très bien comprendre...

PS : désolé pour mon temps de réponse, je donnais un cours d'allemand Smiley smile
Bonjour.
Mettons tous les atouts de notre coté…
Je n'avais pas vu que tu indiquais la position en % et je ne crois pas que ça marche ce truc ! Je ne vois pas l'intéret de mettre le body en position absolue. Les noms d'images sont mieux en minuscules pour le web. certains disent qu'il n'est pas utile de mettre les guillemets pour l'url de l'image, moi j'en met et ne m'en porte pas plus mal ( ne pas confondre avec l'apostrophe ).
body {position: absolute; background-position:0%0%;
background-image:url(CIR.jpg); background-repeat:no-repeat;
background: white; margin: 0; padding: 0;}

/* Ceci serai meilleur */

body {
background: white url("cir.jpg") no-repeat;
margin: 0; padding: 0;
}
Maintenant si tu as besoin de donner à ton image une position autre que celle par défaut ( collée en haut à gauche ) tu peux noter deux indications, en commençant par horizontal (x) puis vertical (y)

body {
background: white url("cir.jpg") [b]10px 103px[/b] no-repeat;
margin: 0; padding: 0;
}
Dans cet exemple, l'image serait placée à 10px du coté gauche et à 103px du sommet.
Merci
J'ai effectivement changé mon code pur le tien, mais j'ai toujours un problème : l'image s'affiche merveilleusement sur IE, mais pas sur Firefox... Smiley biggol
C'est assez embêtant... Smiley fache
Et je ne vois pas du tout pourquoi Firefox m'empêche de le voir...
Salut.
Pourrais-tu prendre ton fichier image, le glisser/déposer sur la fenêtre du navigateur FireFox et me dire quel est le message ? S'il y a marqué "ne peut être affiché car comporte des erreurs…" Il se peut, alors, que tu aies un jpg en CMJN au lieu de RVB.

Je sais, c'est con, mais c'est tellement classique.
Par contre si, dans ces conditions, FF affiche l'image, je ne comprends plus.
Avant, c'est ça que ça me disait, mais maintenant, j'ai réussi à chnager mon image, et il ne me donne plus de message d'erreur.
Et l'image, elle s'affiche.................PAS !!!
Si elle porte le même nom, s'assurer que le cache du/des navigateur/s est bien vidé. Pour en être certain, modifier le nom de l'image et son appel dans le code. Toujours pas ?
Bon, elle ne s'affiche pas et il n'y a pas de message d'erreur...
Je te propose de m'envoyer l'image par eMail pour que je la voie sous Photoshop, C'est trop bizarre ce truc. Ce problème d'affichage chez toi, est-il identique avec d'autres images ?
Je veux bien t'envoyer l'image par email, mais je ne connais pas ton mail ... Il n'est pas consultable sur ton compte ...
En fait, j'ai bidouillé l'image sur Photoshop justement, tenté aussi sur Gimp (j'utilise Linux très très très régulièrement...) et, sur Photoshop, j'ai enregistré l'image pour le web...
Je ne peux pas mettre mon image ci-dessous, elle fait 237 Ko...
Jacouille a écrit :
…elle fait 237 Ko...
Ah oui quand même ? C'est sûr que là si t'as pas l'adsl tu la verras jamais ton image de fond, personne n'attendra 5mn que ton fond veuille bien s'afficher… Je me souviens d'une vieille recommandation qui disait "pas plus de 30ko de données (images incluses) par page" Smiley cligne
Pour m'envoyer un eMail, il suffit de cliquer sur un des trois boutons en bas de mes posts ( celui avec une petite enveloppe ou il est écrit email Smiley cligne ). Si ton image est très lourde, tu devrais pouvoir l'ouvrir quand même chez toi en interne. Mais je pense comme zzzazzz, 230ko en ligne, c'est quand même 200ko de trop, d'autant qu'il y aura sans doute d'autres images ? Avec ma connection à 26k, je me précipite dans les préférences pour désactiver le chargement des images… si je tiens à lire ces pages malgré tout, mais en général sur ce genre de site "pachyderme", je zappe.
Il se trouve que malheureseùent, il n'y a pas de lien mail en bas de tes posts... juste un lien aim...
Cette image est mon image de fond, qui est la seule image de tout le site...
Sujet clos
Aller à