Des cadres aux bords arrondis pour les a: hover (Créer un compte)

  • Statut : non résolu
10 sujets de 1 à 10 (sur un total de 10)
  • Auteur
    Messages
  • #456873
    Nick Carraway
    Membre
    Initié WordPress
    22 contributions

    Bonjour,

    Ma configuration WP actuelle
    – Version de WordPress : WordPress 2.3.2
    – Thème utilisé : Mandigo
    – Plugins en place :
    – Nom de l’hebergeur : Nuxit
    – Adresse du site :

    Problème(s) rencontré(s) :

    Bonjour,

    Plutôt que d’avoir mes liens en header simplement soulignés comme actuellement, je voudrais qu’apparaisse en surbrillance un rectangle aux bords arrondis. Comme le CSS ne gère pas les bordures arrondies, j’ai vu sur un site qu’il fallait en fait créer des images (8 en tout) qui recréaient un rectangle aux bords arrondis.

    Voici le morceau de code à inscrire :

    #principal {
    background-image:url(‘patterns/area_left.gif’);
    background-repeat: repeat-y;
    background-color : #transparent;
    }
    #principal2 {
    background-image:url(‘patterns/area_right.gif’);
    background-repeat: repeat-y;
    background-position: right;
    }

    #haut {
    height:20px;
    background-image:url(‘patterns/area_top.gif’);

    }

    #haut img {
    vertical-align:top; /* for ie5*/
    }

    #coingh {
    width:6px;
    height:7px;
    background-image:url(‘patterns/area_top_left.gif’);
    float: left;

    }
    #coindh {
    width:6px;
    height:8px;
    background-image:url(‘patterns/area_top_right.gif’);
    float: right;

    }
    #contenu {
    padding: 10 5px 10 5px;

    }

    #contenu p {
    margin: 0px;

    }

    #bas {
    height:20px;
    background-image:url(‘patterns/area_bottom.gif’);
    }
    #coingb {
    width:6px;
    height:8px;
    background-image:url(‘patterns/area_bottom_left.gif’);
    float: left;
    }
    #coindb {
    width:6px;
    height:7px;
    background-image:url(‘patterns/area_bottom_right.gif’);
    float:right;
    }

    Ma question était : où dois-je insérer ce morceau de code ? Dans mon style.css, je n’ai rien se rapportant à mon header de navigation hormi les deux lignes suivantes, que j’ai ajoutées récemment :

    #navmenu ul {margin: 0; padding: 0;
    list-style-type: none; list-style-image: none; }
    #navmenu li {display: inline; }

    Y a-t-il d’autres choses à modifier ?

    #620113
    lepski98
    Membre
    Chevalier WordPress
    193 contributions

    franchement si tu veux gérer les bords arrondis, plutot que de te prendre la tête en CSS (et je sais de quoi je parle…. lol….)

    utilise jquery… facile à mettre en place, léger et puissant….

    http://www.methvin.com/jquery/jq-corner-demo.html

    #620114
    Nick Carraway
    Membre
    Initié WordPress
    22 contributions

    Merci de ta réponse 😉

    Apparemment, je dois inclure ce petit bout de code :

    $(this).corner();

    Mais où dois-je le mettre ? Par ailleurs, je ne suis pas sûr d’avoir bien compris comment l’installer. J’ai dl le script (d’ailleurs, j’avais déjà un JQuery installé par défaut sur mon thème), uploadé, mais ensuite, rien. Y’a-t-il d’autres modifs à faire où suffit-il de l’uploader ?

    #620115
    lepski98
    Membre
    Chevalier WordPress
    193 contributions

    ben tu mets le fichier jquery.js et jquery.corner.js dans un dossier JS

    tu ajoutes dans ton head de page HTML les liens et tu saisis la petite ligne, en donnant le nom de ton div qui a l’arrondi dans mon cas classe monjoliblock

    …
    
    
    
    <!-- Jquery plug-ins -->
    
    $(document).ready(function(){
    	$(« div.monjoliblock »).corner() 
    });

    $(document).ready(function(){
    $(« div.modules-website-blockmarron »).corner()
    });

    #620116
    Nick Carraway
    Membre
    Initié WordPress
    22 contributions

    Merci !

    J’ai donc, dans l’ordre :
    1) Copié le fichier jquery.corner.js, et uploadé.
    2) Ajouté le morceau de code que tu m’as donné en modifiant ce qu’il fallait modifier (le div et l’effet). Pour trouver le nom du div, j’ai enregistré ma page html sur l’ordi, modifié le code source pour que la page renvoie au style.css, de sorte à ce que, en l’ouvrant avec Dreamweaver, il me suffise de cliquer sur un élément pour être renvoyé à la ligne de code adéquate (en l’occurrence : page_item)
    3) Profité pour supprimer le fichier jquery.js, qui me semble être une ancienne version par rapport au 1-2.2.

    Malgré tout cela, ça ne marche pas. Je me dis qu’il faut maintenant modifier le style du cadre arrondi, mais j’avoue être perdu. :-(

    #620117
    lepski98
    Membre
    Chevalier WordPress
    193 contributions

    Tu as bien un dossier JS avec dedans le jquery.js et le fichier jquery.corner.js ?

    index.php
    header.php
    /JS
    —jquery.js
    —jquery.corner.js

    tu appelles dans ton header le jquery comme ceci ?

    <script type="text/javascript" src="/js/jquery.js »>

    maintenant prenons exemple d’un bloc

    voici mon code xhtml

    <div class="blockmarron">
    		
    		Integer consectetuer dolor id massa hendrerit ultrices.
    		Phasellus vitae nisl. Morbi condimentum, metus non fringilla hendrerit, orci nulla ullamcorper elit, nec vulputate tellus nisl vel enim.
    		Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti.
    		Duis nonummy accumsan orci. Nulla mi mi, facilisis a, bibendum vitae, blandit et, nisi. In hac habitasse platea dictumst.
    		Aliquam at risus et lacus scelerisque iaculis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent id nisl.
    		Ut dignissim ultricies lectus.
    		Etiam sed sapien ac purus sollicitudin pellentesque.
    		Nulla aliquam pede faucibus nibh. Phasellus augue tellus, iaculis quis, fermentum vitae, congue vitae, tortor.
    	
    </div>

    le css

    .blockmarron { float:left; display:block; width:auto; margin-top:10px; margin-bottom:10px; padding:15px; background: #b7a479;}

    et le javascript placé dans le header.php

    <!-- Jquery plug-ins -->
    
    $(document).ready(function(){
    	$(« div.blockmarron »).corner() 
    });

    voilà comme cela ton blon bloc marron aura des arrondi

    #620118
    Nick Carraway
    Membre
    Initié WordPress
    22 contributions

    J’ai bien suivi ce que tu as dit… les choses s’améliorent !
    Les blocs sont bien là, par contre ils n’ont pas les coins arrondis : c’est un rectangle parfait. J’ai copié ceci dans mon header :

    $(document).ready(function(){
    $(« div.page_item »).corner(« round 4px »)
    });

    Dans mon css :

    .page_item { float:right; display:block; width:auto; margin-top:0px; margin-bottom:0px; padding:5px; background: #FF9900;}

    Par contre, je voulais que les coins arrondis n’apparaissent que sur le a: hover ; là, ils sont automatiquement présents.

    Par ailleurs, depuis que j’ai fait les dernières modif, mes page item ne sont pas classées dans le même ordre, surtout le Home, qui est tout à droite !

    #620119
    lepski98
    Membre
    Chevalier WordPress
    193 contributions

    je pense que ton chemein pour trouver le jquery corner n’est pas bon !

    il devrait etre comme cela

    et il est comme cela

    faut que mette ça

    <script type="text/javascript" src="/js/jquery.corner.js »>

    de plus ton arrondi tu l’appelles sur ton div.page_item essaye de l’appeler sur li.page_item, je sais pas si cela fonctionne sur un a ou a:hover….. je vais voir

    #620120
    Nick Carraway
    Membre
    Initié WordPress
    22 contributions

    Tout est rentré dans l’ordre ! Merci !
    A présent, les cadres sont bien arrondis !!

    Par contre, effectivement, reste le problème des a:hover.

    Peut-on également changer la couleur du fond et la rendre transparent ? Dans mon css, j’ai mis une couleur de background, mais c’est la couleur du cadre. Comment changer les petits morceaux blancs qui apparaissent une fois les coins arrondis ?

    Pour le classement des page_item, ce serait pas un pb de balises

    • ?
    #620121
    lepski98
    Membre
    Chevalier WordPress
    193 contributions

    En jouant sur les css, faut que tu fasses des tests…. peut etre ajouter un div dans le li….

10 sujets de 1 à 10 (sur un total de 10)
  • Vous devez être connecté pour répondre à ce sujet.