Code CSS

Résolu/Fermé
Signaler
-
 flo -
Bonjour,

Je voudrai savoir s'il il est possible de rendre une image de fonds (l'image MOI ici) cliquable et avec une bulle d'aide au passage de la souris.

Je n'arrive pas à l'intégrer dans mon code CSS dans ma balise HTML <body>

voici mon code: <body style="background-color:#fffff;margin-top:0px; background-image: url(moi.jpg); background-repeat: no-repeat;background-position: top right;background-attachment:fixed;">

Merci par avance,

Flo

9 réponses

Messages postés
1191
Date d'inscription
vendredi 27 mars 2009
Statut
Membre
Dernière intervention
8 avril 2017
189
Bonjour,

Tu n'utilises pas une feuille de style (CSS) mais le style directement dans ton code html. Si je dis pas de bêtises ça doit être un truc de ce genre-là :

<body style="background-color:#fff; background-image:url(moi.jpg) no-repeat top right fixed;">

Il faut que ton url soit correcte.

@+
Merci de ta réponse, en effet je préfère tout mettre dans le HTML...du moins tant que je suis débutant.

En fait je connais le code en HTML pour faire image un lien avec la bulle:
exemple: <a href="http://www.siteduzero.com"><img src="images/hawai.jpg" alt="Photo de Hawaii" title="Clique pour voyager !" /></a>

Mais je voudrai mettre ce code (ci-dessus) directement dans ma balise body pour qu'il s'applique à mon image de fond MOI...

Je ne connais pas le code CSS pour et je ne sais pas si c'est possible..

Merci
Messages postés
1191
Date d'inscription
vendredi 27 mars 2009
Statut
Membre
Dernière intervention
8 avril 2017
189
Ah oui excuse j'avais oublié le début de ta question.

Il doit y avoir plusieurs manière de le faire.

La plus simple, mais la moins accessible, ça doit être un truc de ce genre :

<body style="background:#fff url(moi.jpg) no-repeat top right fixed; cursor:pointer;" onclick = "window.location='le lien vers lequel tu veux que ça pointe;">
Merci,

Malheureusement rien de bouge. Étrange.

Pourtant le code est bien intégré.

De plus je pense que cela rendra l'ensemble du fond cliquable et non juste l'image..

Flo
Messages postés
1191
Date d'inscription
vendredi 27 mars 2009
Statut
Membre
Dernière intervention
8 avril 2017
189
J'ai testé, ça fonctionne. En revanche oui ça rendra l'ensemble du fond cliquable, je pensais que ton image était assez grande pour prendre le fond entier (remarque on aurait du mettre un center dans ce cas-là).

En fait ce que tu veux c'est avoir ton image en haut à droite de ta page, fixe, et qu'elle soit cliquable. Pourquoi la mettre dans le style de ton body ? Tu devrais plutôt la placer dans le body (pas le style du body) en absolu, non ? (si je comprends bien)
Oui en effet! ;)

Merci beaucoup.

Remarque judicieuse je te l'accorde mais le problème et que je désir cette image à droite de ma bannière (petite image) et donc si je la met avec ce code cela décale la bannière et tout mon site d'ailleurs..Aurais -tu une solution pour cela? C'est à cause de ce problème que je suis parti vers l'idée du fond..

<div align="center">

<table cellpadding="0" cellspacing="0" align="center">
<tr>
<a href="first.html"><img src="flo1.png" alt="Photo de PS" align="center" border="0" height ="100" width="970" /></a>
<a href="http://www.siteduzero.com"><img src="moi.png" alt="Photo de Hawaii" title="Clique pour voyager !" /></a>
</tr>
.
.
.
Messages postés
1191
Date d'inscription
vendredi 27 mars 2009
Statut
Membre
Dernière intervention
8 avril 2017
189
Est-ce que tu as un lien à nous donner pour qu'on voit ta page ?
Tu veux qqchose comme ça ? http://www.supportduweb.com/...
Je n'ai aucune idée comment tu le transmettre.

J'avance à petit pas depuis peu dans ce monde là..

Oui je souhaite obtenir un truc comme l'élément 3 en image en background et cliquable vers un autre site.

Mais jusqu'à présent même le code qui tu m'as fournie ne fonctionne pas..

<body style="background-color:#fffff;margin-top:0px; background-image: url(moi.jpg); background-repeat:no-repeat; background-position:top right; background-attachment:fixed; cursor:pointer;" onclick = "window.location='http://www.google.com;">

je pédale un peu dans le vent là !:)
Messages postés
1191
Date d'inscription
vendredi 27 mars 2009
Statut
Membre
Dernière intervention
8 avril 2017
189
Tu travailles en local ? Ton site n'est pas encore en ligne ?

Il faut que tu places ton image en fait.

Ca peut donner quelque chose de ce genre-là :

<body>
<div style="position:fixed;top:5px;right:5px;">
<a href="ton lien" title="cliquez ici"><img src="moi.jpg" alt="moi" /></a>
</div>

<div>
ton contenu
</div>
</body>
Excellent!

Merci beaucoup je vois que cela fonctionne bien!

Oui je le crée en local. C'est une bonne méthode?

J'avais oublié de lier ma feuille CSS au HTML de plus ..donc quelques soucis de liaison !

Je me demande, beaucoup de personne utilise la alise <div>. A quoi sert-elle exactement?

Je fais juste des tableaux pour l'instant...

Sinon j'ai une autre question si tu as le temps. Ma bannière est une image classique réaliser sous photoshop mais je souhaite y intégrer des éléments comme une champ de recherche, onglet cliquable ou à menu déroulant..enfin plein de chose mais je ne sais pas encore comment faire..

Encore merci.
Flo
Messages postés
1191
Date d'inscription
vendredi 27 mars 2009
Statut
Membre
Dernière intervention
8 avril 2017
189
Il n'y a pas de problèmes à créer en local, surtout que tu fais un site statique pour l'instant.

Personnellement je le fais toujours en ligne car j'ai la flemme d'installer Wamp ou EasyPHP, et configurer les bases de données etc.. C'est surtout de la flemme, mais en contrepartie c'est un peu plus lent.

Concernant la balise DIV. Les TABLE étaient utilisés auparavant pour faire de la mise en page, il est pourtant préférable de les utiliser pour lister des données. Maintenant les sites lient des CSS pour la mise en page, et utilisent du positionnement. Cette méthode passe par le respect de la sémantique. Par exemple les balises de titres se nomment <h1>, <h2>, etc... Les paragraphes, <p>. Les listes ordonnées <ol>, non ordonnées <ul>, etc... Les DIV sont des éléments de type block, plus génériques mais très utiles.

Justement, concernant ta bannière, le principe sera de positionner ton champ de recherche sur la bannière. Au passage, vu ce que tu veux faire, il va falloir que tu apprennes le web dynamique bientôt.

Je te conseille chaudement de suivre ce cours, sinon tu vas galérer : https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3
Dans tous les cas merci d'avoir répondu à mon premier problème.

Si tu as le temps je serai ravi d'avoir des précisions sur les questions de mon dernier message.

En attendant je met le sujet en résolu !

Flo
Encore merci!

Pour le site du zéro je le suit page par page mais je le trouve très limité...
Ou peut-être vais-je trop vite? je suis page 2 du CSS seulement et je pense que c'est du bidouillage sur du texte plus que de l'architecture site web. Par exemple je veux apprendre à intégrer du JAVA du PHP sur mon site mon je n'en vois pas encore l'ombre dans le tuto que je suis. Patience peut-être?

Concernant la balise DIV je suis un peu perdu..au moins une table divisent simplement la page et après il me suffit créer à volonté ligne et colonne par architecturer le tout non? alors que DIV bas....ou la placer, comment la positionner, que puis-je faire dedans? enfin je tâtonne doucement.
par onglet j'entends les icône cliquable accueil, régles... :)
Messages postés
1191
Date d'inscription
vendredi 27 mars 2009
Statut
Membre
Dernière intervention
8 avril 2017
189
Et ben ces icônes sont positionnées sur le header. En l'occurrence j'utilise la propriété "float". Le header est inclus dans un div, le bandeau d'icônes est inclus dans un autre div, positionné lui.

Tu utilises des outils pour développement web ? Par exp sous Firefox j'en utilise 5 ou 6 qui permettent de débugger un peu tout.
Des outils? ... non aucun...
Notepad ++ et Gchrome...

il y a plus simple? :)
Messages postés
1191
Date d'inscription
vendredi 27 mars 2009
Statut
Membre
Dernière intervention
8 avril 2017
189
Ben ça ne te fera pas le code, mais ça permet de débugger. Firefox est très outillé pour ça. Je te mets la liste de ce que j'utilise, après il faut vraiment que tu prennes le temps de poser les bases avant de passer à qqchose de plus élaboré. Ce sont des extensions Firefox :

FireFTP : client FTP lorsqu'on travaille en ligne (pour l'instant tu n'en as pas besoin)
Firebug : plonge littéralement dans la page
Web developper : bourré d'outils pour développeur
HTML validator : renseigne l'état de validation de la page
PageSpeed : outil google d'optimisation
Yslow : outil Yahoo d'optimisation
OK!

merci beaucoup je vais suivre ton conseil alors!
Formation avant tout:! :)
Héhé je vois.

alors je vais y aller doucement mais c'est vraiment intéressant alors suivre à la lettre des tuto c'est lourd et souvent ils sont très succins... A voir

Le problème c'est que les réponse ne sont apportées que partiellement, par exemple, là j'ai créer une bande de fond qui se répète au fur et à mesure que je mets du contenue...rien de grand..en dessous je cal un bande dite fin de page avec au milieu un lien. Au début le lien était bien au centre de cette dernière bande(image) mais plus maintenant. Et je ne trouve nul part dans le tuto une explication d'intégration du CSS dans la balise type : style="text-aligne=center;" pour remettre le lien au centre...

je te donne le code écrit:

<td background="bonbas.png" align="center" border="0" height ="100px" width="970px" >
<p style="a:hover:text-decoration:underline ; color: green;>
<a href="http://www.sogoodnature.com">Sogood-Nature</a>
</p>
</td>

Si par hasard tu aurai un BdD avec toutes les fonctions CSS/HTML écrite répertorié et expliquer rapidement sous forme de tableau je suis preneur!
un peu comme cette page( http://www.siteduzero.com/tutoriel-3-13661-liste-des-balises-xhtml.html) mais en beaucoup plus complet!

Merci encore :)
:)

impatient..j'ai lut en diagonal !

Alors mon site je dois le bazarder si j'ai tous fait avec 2 tableaux?... :(
Messages postés
1191
Date d'inscription
vendredi 27 mars 2009
Statut
Membre
Dernière intervention
8 avril 2017
189
Pas tout. Vire tout ce qui est <table>, <tr>, <td> (et leurs balises fermantes), et place ce que tu avais mis en contenu, dans une structure sous forme de <div>, que tu lies à de la CSS.
je vais essayé merci!

dernier question après je te laisse tranquille :) je voudrai pas abuser .

je vois comment faire mais pour les balise type:
=><table cellpadding="0" cellspacing="0" align="center">
Le CSS prend le relai?
=><td background="bonbande.png" Align="center">
Qui me permet d'avoir une page "infini"..je met pareil dans la balise DIV?
=> ou encore : <td background="bonbas.png" align="center" border="0" height ="100px" width="970px" >.... ....

lié à de la CSS des balise DIV c'est comme tu as fait 5 commentaire plus haut?
Messages postés
1191
Date d'inscription
vendredi 27 mars 2009
Statut
Membre
Dernière intervention
8 avril 2017
189
Tu perds du temps je pense. Reprends le tuto du SdZ de zéro, tu verras qu'en 1 heure ou 2 tu sauras répondre toi-même à ces questions. ;)