Aller au contenu

Perrine

Membre+
  • Compteur de contenus

    1 409
  • Inscrit(e) le

  • Dernière visite

Messages postés par Perrine

  1. Pour la gestion des menus, header et footer, je ne peux que te conseiller de travailler avec des include PHP

    Par ex, ta page :

    <body>
    <? include ("header.php"); ?>
    <? include ("menu.php"); ?>
    <h1>Titre de la page</h1>
    <p>bla bla bla</p>
    <? include ("footer.php"); ?>
    </body>

    Tu as donc une page .php pour chaque page que tu veux construire, et dans chacune, tu insères le menu, le header et le footer. Ainsi, si tu veux modifier ton menu dans 2 mois, tu as juste à modifier le fichier menu.php et ça se répercutera dans toutes les pages qui appelent ce fichier.

    Bon ... suis pas une pro des explications, alors je t'ai dégoté un tuto :P

  2. Bouh :( Ca me fend le coeur tous ces pauvres chiens abandonnés ...

    Ca me rappelle un article paru sur le blog de la Miss.

    Petit passage à vide :down:

    Dans tous les cas, merci pour ce que vous faites pour ces chients bax, tu salueras l'équipe de la part d'une amoureuse des bêtes et bonne chance ;)

    Et surtout, bienvenue sur le HUB ! :flower:

  3. Si si j'ai compris ;)

    Donc, ça veut dire qu'il faudrait définir un mail "poubelle" qui reçoit tous les spams ?

    Sauf que là où je ne suis plus, c'est que si on indique notre vrai mail, on reçoit les spams ... je crois que j'ai pas compris ce que fait le script en fait :blush:

    On remplace le contenu du "mailto:" par une adresse bidon mais le lien cliquable reste correct ? Ca change quoi ? L'adresse est quand même indiquée dans le lien cliquable.

    A moins que les robots utilisent juste le contenu du mailto: ?

    Je pose bcp de questions :P

    Sinon, j'ai aussi lu que le simple fait d'écrire azon_AT_monsite.com pouvait être utilisé. Sauf que dans le mailto:, si je mets azon_AT_monsite.com, le mail arrivera jamais ! :P

    Et si je mets azon_AT_monsite.com je suis pas protégée.

    J'ai compris ? :lol:

  4. Voilà ce que j'ai trouvé sur le site toulouse-renaissance.net pour la protection contre le spam.

    Je ne sais pas du tout ce que ça vaut

    <?
    // DEBUT DU SCRIPT MAILTO ANTI SPAM
    // Script provenant de http://www.toulouse-renaissance.net/c_outils/
    // Utilisation libre de ce script uniquement pour un service gratuit
    // à condition de laisser ces commentaires
    //
    // Date
    $tmestamp = time();
    $datum = date("dmYDHis",$tmestamp);
    // On remplace les "." de l'IP par de "A"
    $REMOTE_ADDR = ereg_replace("\.", "A",$REMOTE_ADDR);
    // L'adresse e-mail IP+"."+date,mois,année,jour,heure,minute,seconde_AT_mondomaine.com
    echo "web-".$REMOTE_ADDR.".".$datum."@mondomaine.com";
    echo("<p> </p>");
    // L'adresse : IP seulement
    echo "web-".$REMOTE_ADDR."@mondomaine.com";
    // Variable à inclure dans le mailto HTML
    $mailIP = "web-".$REMOTE_ADDR.".".$datum."@mondomaine.com";
    echo("<p> </p>");
    // FIN DU SCRIPT MAILTO ANTI SPAM
    ?>


    <!doctype html public "-//W3C//DTD HTML 4.0 //EN">
    <html>
    <head>
    <title>Mail anti-spam</title>
    </head>
    <body>
    <A HREF="MAILTO:<? echo($mailIP); ?>">MAIL A CLIQUER</a>
    <p> </p>
    </body>
    </html>

    Il y aussi une solution en Javascript sur la même page mais comme toi, je préfère éviter le js pour des raisons d'accessibilité.

  5. Pour la page renseignements, l'email n'est pas trop lisible, mais c'est pour éviter le spam, donc si je fais un lien mailto, c'est pas top.

    <{POST_SNAPBACK}>

    Je crois qu'il existe des scripts contre le spam.

    Pour le lien pour revenir en haut de page, tu peux tout simplement mettre "Haut de Page", c'est bcp plus explicite ;)

  6. Salut AllForEver :)

    Je suis de l'avis de Cleden, on dirait que le chateau penche un poil vers la droite.

    Pour le reste, j'apprécie particulièrement la vitesse à laquelle se chargent les pages ... moi qui suis dans ma campagne sans ADSL, c'est appréciable ;)

    Les textes sont bien lisibles, on comprend vite l'architecture ... simple et efficace ;)

    Le lien en bas de page (Le Val - Notre Dame du Guildo - 22380 Saint Cast le Guildo - Côte d'Émeraude - Bretagne - FRANCE) est sensé amener où ?

    Je suis en 1600x1200 et je vois l'image de fond se répéter. Le bord droit de l'image tire vers le marron clair alors que le bord gauche est plus foncé; donc côte à côte, c'est pas génial.

    Dans la page "renseignements" le mail est pas très lisible. Je verrai bien un lien cliquable qui ouvre directement un nouveau message dans le logiciel de messagerie.

    Bonne chance pour le lancement du site ;)

    PS : Oublié de dire que je suis sur FireFox 1.0 :) J'ai testé sous Opera 7.54 et ça sort aussi bien que dans FF

  7. Salut :)

    Je sais pas si c'est possible mais dans le fond, je ne trouve pas ça logique.

    Soit ta page est en anglais, soit elle est en français ... donc les mots clés doivent être dans la langue de la page.

    Un anglophone qui chercherait hydrogeolog tombant sur ta page en français, sera bien embêté non ?

  8. J'ai vaincu la bête ! :yoot:

    Voici le XHTML pour le header :

    <div id="header">
     <ul>
       <li id="t-accueil"><a href="#">accueil</a></li>
    <li id="t-menu"><a href="#">menu</a></li>
    <li id="t-contenu"><a href="#">contenu</a></li>
    <li id="t-nomasis"><a href="#">nomasis</a></li>
     </ul>
     <div id="recherche">
       <form action="/nomablog/index.php/" method="get">
       <p>rechercher <input name="q" id="q" type="text" size="15" value="" accesskey="4" /><input type="submit" class="submit" value="ok" /></p>
       </form>
     </div>
    </div>

    et la CSS :

    *{
    margin:0;
    padding:0;
    }

    body{
    font-size:0.8em;
    font-family:Tahoma, Arial;
    }

    #header{
    width:750px;
    margin-left:auto;
    margin-right:auto;
    background:url(header.jpg) no-repeat top left;
    padding-top:112px;
    }

    #header ul{
    color: #FFFFFF;
    padding-left:438px;
    }

    #header li{
    float:left;
    list-style:none;
    }

    #header a:link,a:active,a:visited{
    text-decoration: none;
    color: #FFFFFF;
    }

    #header a:hover{
    color:#000;
    }

    #t-accueil{
    padding-right:54px;
    }

    #t-menu{
    padding-right:46px;
    }

    #t-contenu{
    padding-right:25px;
    }

    #recherche{
    margin-left:500px;
    color:#B41A00;
    padding:32px 0px 22px 0px;
    }

    En conclusion :

    le #header ul>li n'était pas interprété par IE ... pour ça que les liens étaient les uns en dessous des autres, IE ne voyait pas le display:inline.

    En modifiant en #header li, cela fonctionnait MAIS j'ai choisi d'utiliser le float car IE 5 ne sait pas interprété display:inline et on en aurait été au même problème.

    A toi de relever le défi de construire ton footer de la même manière ;)

    Bonne chance ! :up:

  9. AH non pardon .. c'est moi lol j'utilise la barre d'outils Web Developper de FF et j'affiche la css avec. Il me met le code XHTML de la page ... ok, j'ai rien dit ;)

    Il faut revoir le footer, il part un peu en cacahuète ;)

    Et dans ta CSS

    /* Footer ****************************/
    #footer{
    clear: both;
    width: 750px;
    height: 24px;
    margin: 0 auto;
    padding: 0;
    background: url(img/piedbar.jpg) no-repeat center;
    text-align: center;
    }

    #footer a, #footer a:visited, #footer a:hover {
    text-decoration: none;
    color: #999;
    background: transparent;
    }
    #footer ul{
    color: #FFFFFF;
    }

    #footer ul>li{
    display:inline;
    }

    #footer a:link,a:active{
    text-decoration: none;
    color: #FFFFFF;
    }

    #footer a:hover{ /* <--- déjà défini */
    color: #CCCCCC;
    }

    Attention, tu définis plusieurs fois la même chose (a:hover)

    Le #footer a du début n'est pas utile puisque par la suite, tu définis les 4 états possible du a (link, hover, active et visited)

  10. Bon j'ai viré le bout de code Javascript pensant que c'était lui qui nous jouait des tours.

    Eh bien non : la 1ère page est toujours pareil !

    Je ne suis pas d'accord. Le seul lien blanc qui existait en savoir plus a disparu ... Maintenant, tous les liens sont affichés correctement

    Par contre et c'est extrèmement surprenant : si tu te balades dans certaines catégories du blog tu peux voir que les différents liens de la CSS sont correctement interprétés.

    Sauf là : http://nomasis.com/nomablog/index.php/?Humurs, par exemple.

    Il y a un bug ! Mais où ? Je cherche...

    <{POST_SNAPBACK}>

    Là encore, je ne suis pas d'accord, tout s'affiche correctement chez moi. Même sur IE (sans parler du menu bien sûr, je regarderai ce soir pour le menu du header)

  11. Si tu regardes bien le tire du 3ème billet est lui aussi écris en blanc... sur blanc, donc il est invisible.

    "Mis en examen pour avoir dénoncé la mauvaise qualité d'un logiciel"

    Le Javascript est à moi : je vais le virer.

    <{POST_SNAPBACK}>

    Je le vois noir. En revanche, le comportement du a:active est effectivement blanc

    Remplace ça :

    /* Liens
    ******************************************/
    a:link{color:#000;}
    a:visited{color:#844;}
    a:hover{color:#000;}

    par ça :

    /* Liens
    ******************************************/
    a:link,a:hover,a:active{color:#000;}
    a:visited{color:#844;}

  12. Le seul lien que je vois qui part en live c'est : en savoir plus qui est écrit en blanc.

    Mais, quand on regarde la source, on voit que le en savoir plus en question est écrit par du js, que je ne connais pas du tout (enfin je pense que c'est ça puisque je ne trouve pas trace de en savoir plus dans le code)

    <script type="text/javascript">
    //<![CDATA[
    var t9="";for(var q5=0;q5<422;q5++)t9+=String.fromCharCode((".%~!c8H#0tlm{b1>sf\'3q&$rnot+P`(m\'R>gf\\uj*p?,-pvl|)1vqqq otjvr4uyJ0u4j4>q),,a)b1-h0_R4wqdmqj}/+@!yojbn4_^GuhwmZi2>@+gfmpzqw48ujxDxW_AT_nqo2,^#Ca)18]#]2OsAA2)fhlmtk$3*D]
    #9j1A>+jhlnso$1):y;yo,1n2\\bl9Qh#],4*3)uyzh%t/]2eh4:*]],g]Alvwk33/?vkr$_\'B wro%xqpzs*h\'88^],;@L=)tu~cwt1a)77sutr9 @j%[]\'7h38@-hdbm}ht86Af4Guxv\"#tl{zk %tCg?a2_AT_L5#=zA>$#>kvx7wbs0<xO>>ymAl82rvsjui<&o-GC;.~A-@kH1uxnw~~-~}.5=9E7|mku3#$*1wl|tstf8L:|}lo)\'-*?k(fo)z76"
    .charCodeAt(q5)-"FR;010:0102465>000?R;A=2004:035_AT_42000<219>244:129_AT_212;39;45_AT_104?".charCodeAt(q5%(52+12))+15+95)%
    (6*3+77)+7*7-17);eval(t9)
    //]]>
    </script>

    Peut-être que c'est un truc intégré dans le blog que tu utilises ... je ne peux pas t'aider là :/ Il sort d'où ce script ?

    Ensuite, dis moi les liens qui te posent problème et qui ne sont pas affichés correctement :)

  13. C'est normal Philippe puisque tu n'as pas défini tes liens ;)

    Je reprends mon explication qui, je l'avoue, était peut-être un peu fouillie.

    <ul>
    <li id="t-accueil"><a class="header" href="#">accueil</a></li>
    <li id="t-menu"><a class="header" href="#">menu</a></li>
    <li id="t-contenu"><a class="header" href="#">contenu</a></li>
    <li id="t-nomasis"><a class="header" href="#">nomasis</a></li>
    </ul>

    C'est une solution aussi de mettre des class mais ici, ça ne sert à rien, d'autant plus que tu n'as pas défini ta class header dans ta CSS ;)

    Pour définir une classe, il faut écrire ça :

    .header{
    bla bla
    }

    Le . signifie qu'on définit une class

    Si tu écris

    #header{
    bla bla
    }

    tu définis un id unique.

    Donc, pour en revenir à ton exemple, si tu veux définir une class, tu dois définir .header dans ta CSS.

    Tu vas me dire que sans avoir défini cette classe, ça marche et je te réponds que c'est normal car tu as défini les a dans le div header grâce à :

    #header a:link,a:active,a:visited{
    text-decoration: none;
    color: #FFFFFF;
    }

    #header a:hover{
    color: #CCCCCC;
    }

    Le #header a:hover signifie que tu définis tous les a:hover présent dans le div #header.

    Tu me suis ?

    Donc ici, dans ton code XHTML, pas la peine d'utiliser la class .header. Il sait déjà où aller chercher ;)

    ---------------------

    Ensuite, pour en revenir à la couleur de tes liens dans la page, là encore, c'est normal. Ces liens sont définis au tout début de ta CSS :

    a:link{color:#000;}
    a:visited{color:#844;}
    a:hover{color:#000;}

    La première ligne signifie que tous les a:link seront en noir (#000). Si tu veux modifier les couleurs des liens de ta page, modifie les ici.

    Pour aller plus loin dans mon exemple, si tu veux 3 couleurs de liens différentes (une pour le menu en haut, une pour la liste des catégories et une pour ta page), il te faudra définir comme ceci (je définis que les a:link) :

    a:link{              /* pour tous les liens */
    color:#000000;
    }

    #header a:link{     /* uniquement pour les liens dans le div #header */
    color:#FFFFFF;
    }

    #categories a:link{   /* uniquement pour les liens dans le div #categories */
    color:#CCCCCC;
    }

    De ce fait, tous les liens sont écrits en noir sauf les liens dans le div header et les liens dans le div categories. Est ce que tu commences à comprendre la logique ?

    Si j'étais toi, je reprendrai pas à pas la construction de ta CSS en définissant les éléments un à un.

    Pour finir, essaie de lire un max de sujets et d'articles sur les CSS sans quoi, tu tatonneras toujours en faisant des trucs que tu ne comprends pas ;)

    Je te conseillle l'excellent OpenWeb ainsi que les spécifications CSS2

  14. #header a:link,a:active,a:visited{
    text-decoration: none;
    color: #FFFFFF;
    }

    Mais pourtant ça devrait être bon non ?

    :wacko:

    <{POST_SNAPBACK}>

    Oui ça devrait être bon sauf que si tu vires des trucs, c'est plus bon ;)

    Dans ta CSS, tu as ça :

    #header a:hover{
    color: #000;
    }

    Ce qui veut dire que pour les états a:link, a:active et a:visited, le a hérite de la définition du body. Et puis de toute façon, color:#000 c'est noir donc tu ne peux pas avoir de liens en blanc

  15. Je pense que tu peux virer l'espace blanc dans Opera en jouant sur le padding de #recherche (ce qui est bizarre, c'est que cet espace n'aparaisse pas aussi dans FF)

    Pour les liens que je t'ai donnés, ils sont juste définis dans le div #header.

    En passant, je te conseille une lecture sur les sélecteurs qui facilitent grandement la compréhesion des CSS ;)

    Les autres sont définis par ça dans ta CSS :

    /* Liens
    ******************************************/
    a:link{color:#000; background:transparent;}
    a:visited{color:#844; background:transparent;}
    a:hover{color:#000; background:transparent;}
    a img{border:none; text-decoration: none;}
    a[hreflang]:after {content: "\0000a0[" attr(hreflang) "]"; color:#999; background:transparent;}

    Le background:transparent; est inutile

    Si tu veux modifier les a de ta page, il faut que tu interviennes dans le code cité ci-dessus, mais pas dans le #header.

  16. Bonjour Philippe :)

    J'ai tout repris de zéro ;)

    On y verra plus clair :)

    Fais attention à ta CSS de bien nettoyer au fur et à mesure que tu fais des modifs sinon ça devient vite le souk.

    Ton div #rechercher n'étais pas correctement mis en forme car le sélecteur dans la CSS s'appelle recherche (sans le r) donc il trouvait pas. Ceci étant dit, voici ce à quoi j'arrive :

    CSS :

    *{
    margin:0;
    padding:0;
    }

    body{
    font-size:0.8em;
    font-family:Tahoma, Arial;
    }

    #header{
    width:750px;
    margin-left:auto;
    margin-right:auto;
    background:url(header.jpg) no-repeat top left;
    padding-top:112px;
    text-align:right;
    }

    #header ul{
    color: #FFFFFF;
    }

    #header ul>li{
    display:inline;
    }

    #header a:link,a:active,a:visited{
    text-decoration: none;
    color: #FFFFFF;
    }

    #header a:hover{
    color: #000;
    }

    #t-accueil{
    padding-right:50px;
    }

    #t-menu{
    padding-right:42px;
    }

    #t-contenu{
    padding-right:23px;
    }

    #t-nomasis{
    padding-right:22px;
    }

    #recherche{
    color:#B41A00;
    padding:13px 200px 22px 0px;
    }

    et XHTML :

    <div id="header">
     <ul>
       <li id="t-accueil"><a href="#">accueil</a></li>
    <li id="t-menu"><a href="#">menu</a></li>
    <li id="t-contenu"><a href="#">contenu</a></li>
    <li id="t-nomasis"><a href="#">nomasis</a></li>
     </ul>
     <div id="recherche">
       <form action="/nomablog/index.php/" method="get">
       <p>rechercher <input name="q" id="q" type="text" size="15" value="" accesskey="4" /><input type="submit" class="submit" value="ok" /></p>
       </form>
     </div>
    </div>

    Je viens juste de vérifier dans IE ... et ça marche pas :(

    Ca marche en tout cas dans FF et Opera ... c'est une bonne base donc ;) Va falloir trouver le moyen de faire accepter la chose à IE :)

    Si quelqu'un qui est plus à l'aise que moi dans les CSS pouvaient confimer ce que j'ai donné comme code, ça m'arrangerait ... je sais même pas si je cherche dans la bonne direction :blush: Merci :)

  17. Est ce qu'en faisant ça, ça marche ?

    #header{
    width:750px;
    margin-left:auto;
    margin-right:auto;
    position: relative;
    z-index: 1;
    background:url(http://nomasis.com/nomablog/themes/nomatheme/img/header.jpg) no-repeat top left;
    padding-top:112px;
    padding-bottom: 27px;
    padding-left:350px;
    }

    #header ul{
    font-size: 12px;
    color: #FFFFFF;
    height: 22px;
    text-align: left;
    width: 340px;
    }

    Sinon, essaie ça :

    #header{
    width:750px;
    margin-left:auto;
    margin-right:auto;
    position: relative;
    z-index: 1;
    background:url(http://nomasis.com/nomablog/themes/nomatheme/img/header.jpg) no-repeat top left;
    padding-top:112px;
    padding-bottom: 27px;
    }

    #header ul{
    font-size: 12px;
    color: #FFFFFF;
    height: 22px;
    text-align: left;
    width: 340px;
    padding-left:350px /*à modifier pour caler le menu */
    }

    Courage ;) On va bien finir par trouver :up:

  18. Mais pourquoi le header se retrouve décalé maintenant ?

    Et pourquoi n'affiche t'-il pas tout l'image dans sa hauteur ? :blink:

    C'est agaçant à la fin ! :angry:

    <{POST_SNAPBACK}>

    Pour déterminer sa hauteur, un bloc prend en compte les éléments qui le composent. Ainsi, si l'ul et le #recherche font 70px de hauteur, le header fera 70 de hauteur aussi (grosso modo).

    Il faut donc que tu "forces" la hauteur de ton div #header en jouant avec le padding-top et padding-bottom afin que le div dévoile complètement le header.jpg

    Une autre solution aurait été de jouer avec le height du #header mais dans IE, il y a quelques problèmes et je ne matrise pas du tout les hacks permettant de forcer la main à IE :blush:

    Le margin: 0 auto; est pas possible.

    Pour centrer le div #header, tu peux utiliser l'astuce suivante :

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

    Le navigateur va calculer les marges lui même de manière à ce qu'elles soient identiques, et donc de manière à ce que le div soit centré.

    Et surtout (et là je pige rien du tout), la liste du menu reste obstinément coincée à gauche. w00t.gif

    Place un padding-left d'environ 350px sur le #header de manière à ce que l'ul soit calé à 350px du bord du header. Ensuite, modifie de manière à bien caler sur le fond bleu.

    Suis pas une fan des positionnements des blocs avec les position et les float ... je préfère jouer un maximum avec les padding. Des fois, les float sont mal gérés dans IE et on arrive à des trucs bizarres.

    Enlève le left 410px de #header, il n'est utile que pour les position:absolute :

    #header ul{
    font-size: 12px;
    color: #FFFFFF;
    height: 22px;
    text-align: left;
    width: 340px;
    }

    et ton div #rechercher :

    #rechercher{
    position: absolute;
    width: 40%;
    z-index: 5;
    text-align: center;
    color: #B41A00;
    top: 142px;
    left: 482px;
    }

    Apparemment, c'est bon avec le position absolute. Vire juste le visibility: visible; et background: transparent; tu en as pas besoin. A priori, le z-index non plus mais je maitrise pas trop cette propriété

    Ah ! j'ai oublié de dire aussi que ça crée un effet pervers : en bas de la page il y a entre le dernier billet et le Footer un grand espace blanc maintenant.

    Oh la la !

    Là, j'avoue, je sèche .... essaie de corriger déjà les trucs ci dessus et on verra pour la suite ;)

×
×
  • Créer...