Code CSS
Résolu/Fermé
A voir également:
- Code CSS
- Code asci - Guide
- Code puk bloqué - Guide
- Code telephone oublié - Guide
- Code blocks free - Télécharger - Langages
- Code windows 10 - Guide
9 réponses
Bertrand40
Messages postés
1193
Date d'inscription
vendredi 27 mars 2009
Statut
Membre
Dernière intervention
27 février 2023
192
1 avril 2011 à 11:49
1 avril 2011 à 11:49
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.
@+
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
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
Bertrand40
Messages postés
1193
Date d'inscription
vendredi 27 mars 2009
Statut
Membre
Dernière intervention
27 février 2023
192
1 avril 2011 à 12:06
1 avril 2011 à 12:06
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;">
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
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
Bertrand40
Messages postés
1193
Date d'inscription
vendredi 27 mars 2009
Statut
Membre
Dernière intervention
27 février 2023
192
1 avril 2011 à 12:23
1 avril 2011 à 12:23
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)
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>
.
.
.
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>
.
.
.
Bertrand40
Messages postés
1193
Date d'inscription
vendredi 27 mars 2009
Statut
Membre
Dernière intervention
27 février 2023
192
1 avril 2011 à 12:38
1 avril 2011 à 12:38
Est-ce que tu as un lien à nous donner pour qu'on voit ta page ?
Tu veux qqchose comme ça ? http://www.supportduweb.com/...
Tu veux qqchose comme ça ? http://www.supportduweb.com/...
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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à !:)
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à !:)
Bertrand40
Messages postés
1193
Date d'inscription
vendredi 27 mars 2009
Statut
Membre
Dernière intervention
27 février 2023
192
1 avril 2011 à 12:56
1 avril 2011 à 12:56
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>
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
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
Bertrand40
Messages postés
1193
Date d'inscription
vendredi 27 mars 2009
Statut
Membre
Dernière intervention
27 février 2023
192
1 avril 2011 à 13:21
1 avril 2011 à 13:21
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
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
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.
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.
Bertrand40
Messages postés
1193
Date d'inscription
vendredi 27 mars 2009
Statut
Membre
Dernière intervention
27 février 2023
192
1 avril 2011 à 13:31
1 avril 2011 à 13:31
Justement tu es perdu parce que tu n'as pas posé les bases. Je ne sais pas si le grand tuto du SdZ est une référence, toujours est-il que j'ai commencé là-dessus il y a quelques années. Ils posent bien les choses, que je me souvienne. Il traine parfois en longueur, c'est vrai qu'on aimerait apprendre plus vite.
Concernant Javascript (pas Java, c'est différent) et PHP, sache que ça vient après, pour faire du dynamique, et que ce sont 2 langages réputés bien plus compliqués que xHTML / CSS.
Concernant Javascript (pas Java, c'est différent) et PHP, sache que ça vient après, pour faire du dynamique, et que ce sont 2 langages réputés bien plus compliqués que xHTML / CSS.
Bertrand40
Messages postés
1193
Date d'inscription
vendredi 27 mars 2009
Statut
Membre
Dernière intervention
27 février 2023
192
1 avril 2011 à 13:32
1 avril 2011 à 13:32
PS : de rien, avec plaisir et heureux de m'en être sorti sur le coup lol
Bertrand40
Messages postés
1193
Date d'inscription
vendredi 27 mars 2009
Statut
Membre
Dernière intervention
27 février 2023
192
1 avril 2011 à 13:38
1 avril 2011 à 13:38
Je te mets un exemple de mon site (auto-pub ^^), concernant les <div> et l'utilisation des <table> : http://www.pronostics-formule1.fr/actu-site.php
Les seuls tableaux que tu vois sur cette page, ce sont ceux de la colonne de droite, qui listent les podiums.
"dernière news" est en h1
"2011 : Nouvelle saison, nouveau site !" est en h2
"Newsletter n°5, par Bertrand le 22/03/2011" est en h3
le contenu de la newsletter en dans une div
Dans le header, au passage, j'ai positionné des icones de lien. Tu pourras positionner ton champ de recherche de la même manière.
Les seuls tableaux que tu vois sur cette page, ce sont ceux de la colonne de droite, qui listent les podiums.
"dernière news" est en h1
"2011 : Nouvelle saison, nouveau site !" est en h2
"Newsletter n°5, par Bertrand le 22/03/2011" est en h3
le contenu de la newsletter en dans une div
Dans le header, au passage, j'ai positionné des icones de lien. Tu pourras positionner ton champ de recherche de la même manière.
Bertrand40
Messages postés
1193
Date d'inscription
vendredi 27 mars 2009
Statut
Membre
Dernière intervention
27 février 2023
192
1 avril 2011 à 13:39
1 avril 2011 à 13:39
PS : mon site n'est pas hyper rigoureux sémantiquement et au niveau de l'accessibilité, je te le présente pas en exemple
Merci pour l'exemple.
Oui je vois un peu mieux, mais des question subsiste tjs comme commet ce fait -il que part exemple tes "onglets" dans un DIV arrive pil poil ou tu le feu? c'est surement dans la feuille CSS j'imagine non?
<div id="content">
<div id="columnMenu">
<div id="mainMenu">
Tout cela à l'air si simple et pourtant je ne sais pas comment savoir ou les positionner....
Donc selon toi je ne devrai pas abusé des Table!
Oui je vois un peu mieux, mais des question subsiste tjs comme commet ce fait -il que part exemple tes "onglets" dans un DIV arrive pil poil ou tu le feu? c'est surement dans la feuille CSS j'imagine non?
<div id="content">
<div id="columnMenu">
<div id="mainMenu">
Tout cela à l'air si simple et pourtant je ne sais pas comment savoir ou les positionner....
Donc selon toi je ne devrai pas abusé des Table!
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 :)
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 :)
Bertrand40
Messages postés
1193
Date d'inscription
vendredi 27 mars 2009
Statut
Membre
Dernière intervention
27 février 2023
192
1 avril 2011 à 13:49
1 avril 2011 à 13:49
D'abord je te conseille de vraiment débuter la CSS. Il faut que tu lies ton html à ta css, sans user si possible de la balise style. Sinon la css n'a pas d'utilité.
Concernant le problème avec ton lien, je suis prêt à parier que c'est dû au fait que tu déclares une propriété css pour les liens (a). Cette propriété se répercute donc sur tous les liens de ta page si tu ne précises pas où appliquer ta css.
Ton footer par exemple, devrait être comme ça (attention, la css peut changer en fonction de ce que tu as avant le footer) :
html
<div id="footer">
<a href="https://www.sogoodsante.com/redirectsgn">Sogood-Nature</a>
</div>
css
#footer {
background-image:url('bonbas.png') no-repeat center;
}
#footer a {
text-align:center;
}
#footer a:hover {
text-decoration:underline;
color:green;
}
Concernant le problème avec ton lien, je suis prêt à parier que c'est dû au fait que tu déclares une propriété css pour les liens (a). Cette propriété se répercute donc sur tous les liens de ta page si tu ne précises pas où appliquer ta css.
Ton footer par exemple, devrait être comme ça (attention, la css peut changer en fonction de ce que tu as avant le footer) :
html
<div id="footer">
<a href="https://www.sogoodsante.com/redirectsgn">Sogood-Nature</a>
</div>
css
#footer {
background-image:url('bonbas.png') no-repeat center;
}
#footer a {
text-align:center;
}
#footer a:hover {
text-decoration:underline;
color:green;
}
Très fort c'est bien ça!! ...
Comme quoi !
Et voilà tu re-soulève le point toujours autant incompréhensible...
Je m'explique, Que tu as vue mon footer est dans une balise TD qui fait partie d'un tableau que prend le corps de ma page( contenue) et aussi la head etc etc etc...sous-subdivision imbriqué...
Et la tu met en <div id="footer" ... ... etc etc
Mais la question est: comment la machine sait ou elle doit le placer, la balise div est dans un TD du tableau ou se balade sans attache particulière dans le HTML. Si elle se balade, pourquoi alors l'image devrai apparaître au bonne endroit!?
Comme quoi !
Et voilà tu re-soulève le point toujours autant incompréhensible...
Je m'explique, Que tu as vue mon footer est dans une balise TD qui fait partie d'un tableau que prend le corps de ma page( contenue) et aussi la head etc etc etc...sous-subdivision imbriqué...
Et la tu met en <div id="footer" ... ... etc etc
Mais la question est: comment la machine sait ou elle doit le placer, la balise div est dans un TD du tableau ou se balade sans attache particulière dans le HTML. Si elle se balade, pourquoi alors l'image devrai apparaître au bonne endroit!?
ça fonctionne mais alors je sais pas comment... le dernier com' reste d'actualité. J'ai mis la balise DIV dans le TD en gardant le code pour mettre l'image dans la balise TD :
<tr>
<td background="bonbas.png" align="center" border="0" height ="100px" width="970px" >
<div id="footer">
<a href="http://www.sogoodnature.com">Sogood-Nature</a>
</div>
</td>
</tr>
L'image est charger via le HTML alors, pas via le CSS. si j'enlève le code pour mettre l'image de la balise TD alors ..plus d'image !
<tr>
<td background="bonbas.png" align="center" border="0" height ="100px" width="970px" >
<div id="footer">
<a href="http://www.sogoodnature.com">Sogood-Nature</a>
</div>
</td>
</tr>
L'image est charger via le HTML alors, pas via le CSS. si j'enlève le code pour mettre l'image de la balise TD alors ..plus d'image !
Bertrand40
Messages postés
1193
Date d'inscription
vendredi 27 mars 2009
Statut
Membre
Dernière intervention
27 février 2023
192
1 avril 2011 à 14:06
1 avril 2011 à 14:06
Un conseil : reprends tout ton site de zéro, en oubliant les tableaux. Les tableaux sont utiles au listing de données tabulaires. Dans mon exemple je sous-entendais que tu n'avais pas de tableau. Commence par une base du genre :
<div id="header">
<div id="contenu">
<div id="footer">
Et lie-les à de la CSS.
Je pense que tu n'as pas du tout suivi le tuto du SdZ ;)
<div id="header">
<div id="contenu">
<div id="footer">
Et lie-les à de la CSS.
Je pense que tu n'as pas du tout suivi le tuto du SdZ ;)
