Vous n'êtes pas identifié.

Annonce

#1 CSS lien sur image background du 20-10-2009 11:00:59

marc
c00lnaute occasionnel
Date d'inscription: 17-12-2008
Messages: 73
Site web

CSS lien sur image background

bonjour, je ne sais pas si cela existe car je n'ai trouve nul part l'information.

je viens de modifier le background de mon site par une couleur de fond (marron clair) et par l'ajout d'une image centrée corespondant à un biseau de couleur marron foncé. Voir exemple Swingbourse
voici ci desous le code utilisé

Code:

body {
font-family : Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0 ;
  padding: 0;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #a79287;
  background-image: url(http://www.swingbourse.com/imagesdusite/backgroundSB.png);
  background-repeat: no-repeat;
  background-position: top center ;
  height: 449px;

}

Ce que je cherche a faire, c'est de rendre actif le fond marron foncé, donc l'image, par un lien vers une page web de mon site. Je n'ai cependant pas trouvé la formule après plusieurs essais.

merci à vous de m'éclairer.

bonne journée

marc

Hors ligne

 

20-10-2009 11:00:59

Mister $$$


#2 Re CSS lien sur image background du 20-10-2009 13:21:06

c00lman
Administrateur
Date d'inscription: 16-08-2007
Messages: 2164
Site web

Re: CSS lien sur image background

Salut marc,

Essaye ceci :

Code:

body {
font-family : Arial, Helvetica, sans-serif;
font-size: 12px;margin: 0 ;
padding: 0;
margin-top: 10px;
margin-bottom: 10px;
background-color: #a79287;
}
a.fond{
display:block;
background-image: url(http://www.swingbourse.com/imagesdusite/backgroundSB.png);
background-repeat: no-repeat;
background-position: top center ;
height: 449px;
}

Ensuite tu fais un simple lien:

Code:

<a href="#" class="fond"></a>

Hors ligne

 

#3 Re CSS lien sur image background du 27-10-2009 08:35:07

marc
c00lnaute occasionnel
Date d'inscription: 17-12-2008
Messages: 73
Site web

Re: CSS lien sur image background

j'ai essayé mais ca ne marche pas. Merci de m'avoir aidé.
faut dire aussi que je suis une flèche lol en CSS

Hors ligne

 

#4 Re CSS lien sur image background du 27-10-2009 10:39:52

c00lman
Administrateur
Date d'inscription: 16-08-2007
Messages: 2164
Site web

Re: CSS lien sur image background

Avant de te donner cette réponse, j'ai également testé et je sais que ça fonctionne siffle .

Hors ligne

 

#5 Re CSS lien sur image background du 27-10-2009 18:01:24

marc
c00lnaute occasionnel
Date d'inscription: 17-12-2008
Messages: 73
Site web

Re: CSS lien sur image background

c'est que j'ai pas du copier correctement le code.
je referais ultérieurement un test.
merci encore.

Hors ligne

 

#6 Re CSS lien sur image background du 02-11-2009 18:32:02

Rorschach
c00lnaute discret
Lieu: Haute-Normandie
Date d'inscription: 20-09-2009
Messages: 49

Re: CSS lien sur image background

par contre moi je n'ai soit pas compris correctement la question de marc soit pas compris la réponse de c00lman...

Marc :

Ce que je cherche a faire, c'est de rendre actif le fond marron foncé, donc l'image, par un lien vers une page web de mon site

a ce qu'il me semble, tu veux que l'image de fond dans ta css soit cliquable et renvoi vers une page particulière de ton site, est-ce que j'ai bien compris ?

si c'est le cas il faut savoir que les css permettent de séparer le contenu et le contenant d'un site, généralement ce que l'on place dans la css est uniquement du contenant et non pas du contenu, donc le w3c n'a pas prévu que l'on puisse rendre cliquable une image de fond ce qui est logique puisque ce n'est que de la décoration et que cela ne serai pas "bon" en terme d'accessibilité, un lien peux être cliquable mais pas un fond de site

ps. A noter que ton site est propre a voir mais coté code il y manque pas mal de chose pour le rendre meilleur, ajouter un doctype, éviter les tableaux quand il ne sont pas nécessaires, optimiser le nombre de requête http il y en a quand même 78 sans cache et 77 cache plein, certaines images pourrait être moins lourde regarde smush.it pour voir où tu peux gagner quelques kilo octet


Hors ligne

 

#7 Re CSS lien sur image background du 02-11-2009 19:59:09

c00lman
Administrateur
Date d'inscription: 16-08-2007
Messages: 2164
Site web

Re: CSS lien sur image background

Rorschach a écrit:

..
a ce qu'il me semble, tu veux que l'image de fond dans ta css soit cliquable et renvoi vers une page particulière de ton site, est-ce que j'ai bien compris ?

Tu as bien comprit icon_mrgreen.
C'est pour cela que je lui est proposé le code un peut plus haut, permettant théoriquement, de rendre son arrière plan cliquable puisque celui-ci est affiché via un simple lien.

Il me dit que ça ne fonctionne pas ... si tu as mieux à proposer, n'hésite pas smile.

Hors ligne

 

#8 Re CSS lien sur image background du 03-11-2009 04:24:02

Rorschach
c00lnaute discret
Lieu: Haute-Normandie
Date d'inscription: 20-09-2009
Messages: 49

Re: CSS lien sur image background

mais il ne peux pas mettre tout son site dans le lien, à la limite une solution possible serai d'avoir un <a> avec son fond dedans et qui occuperai toute la page (en display:block avec une hauteur minimum), puis un div séparé positionné par dessus avec une position absolue pour contenir le site et là on devrai pouvoir obtenir un résultat valide mais au niveau de l'accessibilité et de la logique de structure je crois que cela serai un peu bancal o_O

donc niveau structure on aurai en théorie
<body>
<a href="" id="fond" alt="">texte a du lien a cacher</a>
<div id="lesite">
..
.. ici le site
..
</div>
</body>

et le div #lesite serai en position:absolute; avec par exemple top:10px; et centrer dans la page et donc par dessus le <a>


Hors ligne

 

#9 Re CSS lien sur image background du 03-11-2009 10:57:11

c00lman
Administrateur
Date d'inscription: 16-08-2007
Messages: 2164
Site web

Re: CSS lien sur image background

Tu veux dire un truc dans ce genre la ?:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr-fr">
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type" />
  <title>teste</title>
  <style>
body {
font-family : Arial, Helvetica, sans-serif;
font-size: 12px;margin: 0 ;
padding: 0;
margin-top: 10px;
margin-bottom: 10px;
background-color: #a79287;
}
a.fond{
display:block;
background-image: url(http://www.swingbourse.com/imagesdusite/backgroundSB.png);
background-repeat: no-repeat;
background-position: top center ;
height: 449px;
}
.conteneur{
position:absolute;
margin-left: 10%;
margin-right: 10%;
width: 80%;
top:50px;
}
  </style>
</head>
<body>
<a href="#" class="fond"> </a>
<div class="conteneur">Ici le contenu total du site
plac&eacute; dans ce div.</div>
</body>
</html>

Hors ligne

 

#10 Re CSS lien sur image background du 03-11-2009 16:36:36

Rorschach
c00lnaute discret
Lieu: Haute-Normandie
Date d'inscription: 20-09-2009
Messages: 49

Re: CSS lien sur image background

oui à peu pres je pense à cela :
(ne pas faire attention au code php j'ai repris ma maquette de base pour allez plus vite et j'ai pas nettoyer)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo $lang; ?>" xml:lang="<?php echo $lang; ?>">

<head>
    <link rel="shortcut icon" href="<?php echo $basesite; ?>images/favicon.ico" />
    <link rel="icon" type="image/x-icon" href="<?php echo $basesite; ?>images/favicon.ico" />
    <link rel="icon" type="image/png" href="<?php echo $basesite; ?>images/favicon.png" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title><?php echo $title; ?></title>
    <meta name="keywords" content="<?php echo $keyword; ?>" />
    <meta name="description" content="<?php echo $description; ?>" />
    <meta name="robots" content="index, follow, all" />
    <meta http-equiv="imagetoolbar" content="no" />
    <link rel="apple-touch-icon" href="<?php echo $basesite; ?>images/apple-touch-icon.png" />
    <link rel="stylesheet" type="text/css" href="<?php echo $basesite; ?>css/screen.css" media="screen" /> 
    <style>    
        body {
          font-family : Arial, Helvetica, sans-serif;
          font-size: 12px;
          margin: 0 ;
          padding: 0;
          background-color: #a79287;
          background-image: url(...blablabla/backgroundSB.png);
          background-repeat: no-repeat;
          background-position: top center ;
        }
        #conteneur {
            min-height: 449px;
            background-color:#f1eee8;
            position:absolute;
            top:10px;
            left:10%;
            width:80%;
        }
        #fond {
            display:block;
            height:600px;
            width:100%;
        }
    </style>

    <link rel="stylesheet" type="text/css" href="<?php echo $basesite; ?>css/handheld.css" media="handheld" />
    <link rel="stylesheet" type="text/css" href="<?php echo $basesite; ?>css/print.css" media="print" />
    <!--[if lte IE 6]><link type="text/css" rel="stylesheet" href="<?php echo $basesite; ?>css/ie6.css" media="all" /><![endif]-->
    <!--[if IE 7]><link type="text/css" rel="stylesheet" href="<?php echo $basesite; ?>css/ie7.css" media="all" /><![endif]-->
    
    <!-- Media Query pour les navigateurs qui les comprennent -->
    <!--[if !IE]>-->
    <link media="only screen and (max-device-width: 480px)" href="<?php echo $basesite; ?>css/handheld.css" type="text/css" rel="stylesheet" />
    <!--<![endif]-->

    <meta name="viewport" content="width=device-width, height=device-height" />
    <link rel="alternate" type="application/rss+xml" title="articles rss" href="rss.php" />
</head>
<body>
    <div id="conteneur">
        <h1>titre</h1>
        <p>texte</p>
    </div>
    <a id="fond" href="#" title=""></a>
</body>
</html>

le lien pour le fond est placé à la fin donc il ne gène pas la structure du site, l'attribut title est vide donc cela ne gène pas les lecteurs d'écran, tout le site est dans le #conteneur qui est en position absolue, je n'ai pas tester sur tout les navigateurs mais en théorie ça devrai passer plutôt bien.

^_^

Dernière modification par Rorschach (03-11-2009 23:46:57)


Hors ligne

 

#11 Re CSS lien sur image background du 03-11-2009 17:35:30

c00lman
Administrateur
Date d'inscription: 16-08-2007
Messages: 2164
Site web

Re: CSS lien sur image background

Oki wink, et en jouant sur la taille du "height" de "#fond", on peut rendre la totalité de l'arrière plan cliquable...
Du coup "min-height: 449px;" de "#conteneur" est d'aucune utilité si le "height" de #fond est égal ou supérieure à 449px ..non ??

Hors ligne

 

#12 Re CSS lien sur image background du 03-11-2009 17:50:02

Rorschach
c00lnaute discret
Lieu: Haute-Normandie
Date d'inscription: 20-09-2009
Messages: 49

Re: CSS lien sur image background

oui le min-height sur le #conteneur j'aurai du le retirer je l'avais mis pour y voir quelque chose vu que dans ma page de test le #conteneur ne contient presque rien :)


Hors ligne

 

#13 Re CSS lien sur image background du 03-11-2009 18:43:25

c00lman
Administrateur
Date d'inscription: 16-08-2007
Messages: 2164
Site web

Re: CSS lien sur image background

C'est cool, on en apprend tout les jours icon_mrgreen.
Reste plus qu'à voir si ça fonctionne chez marc 0_o !

Hors ligne

 

#14 Re CSS lien sur image background du 03-11-2009 19:18:32

marc
c00lnaute occasionnel
Date d'inscription: 17-12-2008
Messages: 73
Site web

Re: CSS lien sur image background

bonsoir
je vois que mon article a fait couler bcp d'encre.

pour répondre à Rorschach ce que je compte faire est de rendre actif (lien) uniquement l'image de fond du site qui se trouvera uniquement en index. Le reste du site sera tout simplement une couleur > background-color: fff
l'image de fond de la page index ne devrait pas faire plus de 600 px de haut et sera positionné en TOP. En fait on commence à trouver de plus en plus de sites qui utilisent les exterieur de site pour de l'espace publicitaire. Voici un exemple sur ce site, mais attention la pub n'y est pas toujours. Actuellement c'est une pub pour EDF entreprise et sur la droite du site vous y verrait une femme rendu "active" par le passage de la souris. >> http://www.boursorama.com/ Les personnes avec de grands écrans (21pouces et +) se rendront mieux compte de cet effet.

ps. A noter que ton site est propre a voir mais coté code il y manque pas mal de chose pour le rendre meilleur, ajouter un doctype, éviter les tableaux quand il ne sont pas nécessaires, optimiser le nombre de requête http il y en a quand même 78 sans cache et 77 cache plein, certaines images pourrait être moins lourde regarde smush.it pour voir où tu peux gagner quelques kilo octet

je sais que plein de choses ne vont pas . Collman m'en avait déjà parlé.
Je suis en train d'effectuer une refonte complète du site en passant par le CSS. Anciennement seul le CSS était utilisé pour le menu. Je devrait éditer la nouvelle version au 1er janvier 2010 si tout va bien.
d'ici là, ca me permettra d'effacer des lignes de code inutile et de gagner en bande passante si j'ai bien compris.

puisqu'on y est , j'ai deux questions:

sur certains scripts que l'on installe sur ses pages, il y a parfois un fichier CSS à mettre dans le FTP. A ce moment là, comment la page sait qu'elle fichier CSS faut-il lire? Est-ce le nom du fichier CSS qui se trouve dans l'url qui détermine le fichier CSS à lire ?(en gras)  >>> <link rel="stylesheet" type="text/css" href="style.css" />

Ensuite j'ai trouvé un menu tres sympa en CSS également.

Faut-il que je le mette sur toutes les pages ou je le met que sur une seule page en l'appelant sur les autres pages de mon site via un <? include('pagedusite.php'); ?>

merci pour les reponses.

PS comment optimiser le nombre de requête http, comment savoir si elle sont en cache ou pas
merci
a+

Hors ligne

 

#15 Re CSS lien sur image background du 03-11-2009 20:12:26

Rorschach
c00lnaute discret
Lieu: Haute-Normandie
Date d'inscription: 20-09-2009
Messages: 49

Re: CSS lien sur image background

l'image de fond de la page index ne devrait pas faire plus de 600 px de haut et sera positionné en TOP. En fait on commence à trouver de plus en plus de sites qui utilisent les exterieur de site pour de l'espace publicitaire.

la méthode que j'ai indiqué plus haut devrai faire l'affaire :) je ne connaissait pas encore cette méthode d'ajout de publicité en fond de navigateur mais c'est en effet intéressant dans certain cas

Anciennement seul le CSS était utilisé pour le menu. Je devrait éditer la nouvelle version au 1er janvier 2010 si tout va bien.
d'ici là, ca me permettra d'effacer des lignes de code inutile et de gagner en bande passante si j'ai bien compris.

en effet un code propre (html, css et php) permet souvent d'améliorer les performance d'un site, d'économiser la bande passante, améliorer le référencement naturel

sur certains scripts que l'on installe sur ses pages, il y a parfois un fichier CSS à mettre dans le FTP. A ce moment là, comment la page sait qu'elle fichier CSS faut-il lire? Est-ce le nom du fichier CSS qui se trouve dans l'url qui détermine le fichier CSS à lire ?

la page html est lu de haut en bas donc les liens vers les feuilles de style (css) sont lu dans l'ordre où elles sont écrite, ensuite les styles de chaque css s'ajoute ou se remplace donc une css que l'on va appeler en dernier va compléter les css précédente, cela dit si des styles ont les mêmes nom on peut avoir soit des conflits de style soit des remplacement de styles, je m'explique, imaginons que l'on ai une css avec dedans un style pour #global et que dans ce style #global on indique une couleur de texte noir, puis une seconde css est chargé, les styles de cette css s'ajoute à la première css mais cette seconde css à également un style #global mais avec une couleur de texte bleu , comme le second #global est le dernier chargé il remplace le premier

d'où l'intérêt de bien choisir les nom de ses styles et de veiller à ce que les style ne se gène pas les uns les autres

ensuite il y a également un point à noter, on peut définir des style pour des périphériques particulier par exemple on peut avoir :

Code:

    <link rel="stylesheet" type="text/css" href="http://www.monsite.com/css/base.css" media="all" /> 
    <link rel="stylesheet" type="text/css" href="http://www.monsite.com/css/screen.css" media="screen" /> 
    <link rel="stylesheet" type="text/css" href="http://www.monsite.com/css/accueil.css" media="screen" /> 
    <link rel="stylesheet" type="text/css" href="http://www.monsite.com/css/handheld.css" media="handheld" />
    <link rel="stylesheet" type="text/css" href="http://www.monsite.com/css/print.css" media="print" />

ici on a une css base.css avec un attribut media="all" donc elle est chargé par la page pour tout les affichages puis on a 2 css screen.css et accueil.css le media indiqué est "screen" donc elle seront lu par les navigateur que si le site est affiché sur un écran et elle seront lu dans l'ordre suivant screen.css puis accueil.css, par contre handheld.css à pour media "handheld" qui signifie que cette css sera chargé que si la page est affiché sur un téléphone mobile, enfin la css print.css à le media "print" donc c'est une css qui n'est lu que pour l'impression de la page, donc sur un écran de pc seront lu (dans cet ordre) les css : base.css, screen.css, accueil.css et pas les autres qui sont spécifique à un autre type de média :)

Faut-il que je le mette sur toutes les pages ou je le met que sur une seule page en l'appelant sur les autres pages de mon site via un <? include('pagedusite.php'); ?>

je ne sais pas à quoi ressemble le code du menu dont tu parle mais généralement on utilise un include php pour placer sur les pages un éléments qui va se trouver sur plusieurs page, cela simplifie la maintenance, les css du menu par contre seront plutôt ajouter à ta css de base par exemple pour limiter le nombre de fichier à charger

PS comment optimiser le nombre de requête http, comment savoir si elle sont en cache ou pas

il y a une excellente extension pour firebug qui se nomme "YSlow" et qui permet d'analyser les performances d'un site web Firebug est une extension pour Firefox donc le mieux est d'installer l'extension Firebug puis l'extension YSlow (c'est fait par Yahoo)

une fois cela fait tu pourra connaitre le nombre de requete lancé par ton site, le poid des pages etc.

pour diminuer le nombre de requête il n'y a pas de secret juste des méthodes à mettre en place, gérer mieux le cache (avec les info expire du .htaccess), diminuer le nombre de fichier à charger, quand tu as 3 css appelés sur toutes les pages du site il faut mieux les additionner en une seule css plus grosse mais tu gagne 2 requêtes en moins, en plus les css ça s'optimise assez bien, pareil pour les javascripts quand tu en à plusieurs toujours appelé on peut les regrouper, certain include sont parfois inutile, on peut également regrouper certaines images (voir les sprite css sur google) cela consiste à regrouper dans une même image tout les petits visuels comme les icônes des menu, les puces, etc, une seule image bien optimisée prend moins de requête qu'une 50aine d'image d'icônes

ensuite il y a tout un tas de petite chose à mettre en place comme la compression gzip ou deflate dans le .htaccess pour réduire le temps de chargement des fichiers texte (html, xhtml, js, css, json, xml), l'url rewriting pour améliorer la SEO etc.

si tout cela t'intéresse je te conseil de regarder ces vidéos :

les intellicore tech talk :
http://www.dailymotion.com/video/x5nu4v … -visi_tech

http://www.dailymotion.com/video/x5ezae … rt-du_tech

http://www.dailymotion.com/video/x6274e … n-sit_tech

les conférences de paris web :
http://www.dailymotion.com/parisweb

dont la conférence de deux personnes de yahoo qui parle de YSlow et de comment optimiser un site
http://www.dailymotion.com/video/x7op91 … rform_tech

PS du coté des extensions développeur pour firefox en plus de Firebug et Yslo il y a aussi Page Speed qui est bien à avoir

PS2 : ne pas faire attention au fautes ^_^'

Dernière modification par Rorschach (03-11-2009 20:40:39)


Hors ligne

 

#16 Re CSS lien sur image background du 03-11-2009 20:49:33

c00lman
Administrateur
Date d'inscription: 16-08-2007
Messages: 2164
Site web

Re: CSS lien sur image background

Rien à ajouter ... ça pour de la réponse ... c'est de la réponse applause, avec plein de "trucs" intéressant à côté en plus wink .
Je suis admiratif ^_^!

Hors ligne

 

#17 Re CSS lien sur image background du 03-11-2009 22:36:49

marc
c00lnaute occasionnel
Date d'inscription: 17-12-2008
Messages: 73
Site web

Re: CSS lien sur image background

ah oui, c'est franchement très complet. Je viens d'apprendre plein de nouvelle choses.
merci bcp Rorschach

en tout cas c'est ce que je pensais pour le menu en css. Je vais donc le mettre dans une feuille menu.php que je ferai venir à l'aide d'un include PHP .

Ensuite, si je comprend tjs bien, il vaut mieux avoir un CSS complet que 3 à 4 css dans son FTP. Avec un peu de patience on peu tjs différencier les doubles emplois par des class ou des id.

merci et bonne soirée.

à bientôt

marc

Hors ligne

 

#18 Re CSS lien sur image background du 03-11-2009 23:16:00

Rorschach
c00lnaute discret
Lieu: Haute-Normandie
Date d'inscription: 20-09-2009
Messages: 49

Re: CSS lien sur image background

oui une grosse css peut être plus intéressante que plusieurs petites mais attention, si tu as des styles qui sont uniquement utile sur une page tu peux quand même faire une css séparé, il faut en fait trouver le juste équilibre entre nombre de fichier et taille des fichiers, ce n'est pas toujours facile mais avec une bonne dose de réflexion et de logique on arrive à faire de bons choix

quand on fait un site web ce qu'il faut surtout retenir c'est de faire du travail propre et accessible, si tu parviens déjà à faire un html sans balise en trop, avec des balise bien choisi, que ta page est lisible avec une structure logique sans css tu as déjà une grosse partie de bon (pour le référencement c'est top), puis le php pour rendre le tout dynamique, ensuite les css ajoute la mise en page là tu rend le site beau, puis le javascript (ajax et autre) apporte les petits plus et à chaque étape toujours rester dans la logique d'un code simple et propre, ça aide ensuite pour la maintenance du site, ça aide pour l'optimisation du site, ça aide pour le référencement...

les conférences comme celle de Paris Web donnent beaucoup d'infos, il ne faut pas hésiter à les regarder, les vidéo de Paris Web 2009 devrai finir par arrivé avec des infos encore plus fraiche siffle

quand il y a un risque de conflit entre mes styles css et ceux importer par des script ou autre j'ajoute 2 ou 3 caractères devant mes styles et des .puce, .edito, .commentaire peut devenir .dzpuce, dzedito, .dzcommentaire


Hors ligne

 

Propulsé par PunBB
© Copyright 2007
Forum créer un site

Partenaires de « créer un site internet »