Astuce : Les menus de PêUR légèrement remaniés

a.boutonIE,{
    color:#000;
    width:90px;
    height:18px;
    display:block;
    background:#c33;
    border:1px solid #000;
    margin-right:1px;
    text-align:center;
    float:left;
    text-decoration:none;
    font-family: verdana;
    font-size:10px;
    line-height:18px;
    overflow:hidden;
}
a.boutonIE:active {
    color:#fff;
    background:#000;
    overflow:visible;
}
a.boutonIE:active table {
    display:block;
    background:#eee;
    border-collapse:collapse;
}

Et dans le HTML on garde le code normal :
<div class="menuIE"><a class="boutonIE" href="#nogo">Blogs
<table>
    <tbody>
        <tr>
            <td><a class="SousMenu" href="#nogo">P&ecirc;UR</a> <a class="SousMenu" href="#nogo">Zo&eacute;lie</a> <a class="SousMenu" href="#nogo">BilboWorld</a> </td>
        </tr>
    </tbody>
</table>
</a><a class="boutonIE" href="#nogo">Aides
<table>
    <tbody>
        <tr>
            <td><a class="SousMenu" href="#nogo">Francisek</a> <a class="SousMenu" href="#nogo">La FAQ</a> <a class="SousMenu" href="#nogo">Self HTML</a> </td>
        </tr>
    </tbody>
</table>
</a></div>

Explication :
contrairement au menu initial, le sous-menu ne s'affiche uniquement si vous cliquez sur le menu, et il rest affiché tant que vous ne cliquez pas sur le menu suivant ou si vous cliquez hors du menu...

C'est grâce au a.boutonIE:active et au a.boutonIE:active table que le sous-menu s'affiche si on clique sur le menu...

C'est tout simple

Cette balise peut également être ajouté au css --> explication prochainement  dans une prochaine mise à jour

Lorsque vous créez un lien, Il vous suffit de mettre dans le target un nom (personnalisé) pareil à tous les liens que vous voulez ouvrire dans la même fenêtre.

Exemple, ces 2 liens s'ouvrent dans la même fenêtre :

<a href="http://......" target="_lienforum"> texte du lien </a>

Tous les liens ayant le target="_lienforum" s'ouvriron dans la même fenêtre :

Testez :

<a href="http://la.faq.over-blog.com" target="_lienforum">La FAQ</a>

<a href="http://epca.over-blog.com" target="_lienforum">Mon blog</a>

donne :

La FAQ Mon blog

Voilà les 2 liens s'ouvrent dans la même fenêtre sans avoir à en ouvrire une 2ème
 

Astuce : un 3ème module texte libre accessible aux confiances (vous devez mâitrisez le css et le html pour cette technique)

Bon, voici un petit truc pour rajouter un ou plusieurs modules dans une colonne...

Attention : Cette technique est relativement compliquée de demande de connaitre le css et le html...
(le fil original : http://forum.over-blog.com/0-forum-blog-2-1049417.html )

Bon, voici un petit truc pour rajouter un ou plusieurs modules dans une colonne...

Bon premièrement vous devez créer une nouvelle id dans le css : voici ce que vous devrez créer

#boxMB

jusque la c'est pas compliqué...maintenant vous devez avoir une longeur de colonne assez grande pour pouvoir placer votre module...donc dans #top {height: XXXpx;} vous devez avoir une valeur assez grande dans le height...

Dans l'entête ou un text libre par exemple mettez : (attention ce code n'est compatible uniquement pour les configuration dès 200)

<div class=box id=boxMB><div class="divTitreArticle"><h2>Le titre de votre module ici</h2></div>

 <div class="contenuArticle">Ici le contenu du module</div></div>

Ensuite vous devez placer le #boxMB en position absolute ce qui donne :

#boxMB {position:absolute; top:XXXpx;}

Changez la valeur du top: XXXpx; pour que votre nouveau module apparaisse en dessous du dernier module, sinon il apparaitra par dessus les autres...(note:vous devrez peut-être rajouter left:XXXpx; ou right:XXXpx; mais je vous laisserai tester )

Voilà comment mettre un 3ème module text libre...cependant vous ne pourrez pas mettre ce module entre les autres....il devra automatiquement être placé en dernière position

Cette technique est relativement compliquée et il vous faudra apporter certaines petite modifications à l'id du css, par exemple ajouter une largeure ou ajouter une marge, mais avec un peu de débrouillardise on y arrive sans trop suer...
 

Astuce: une liste déroulant simple sans form ni javascript

Le résultat le voila :

[EDIT] sa s'affiche pas alors cliquez ici pour voir le résultat http://epca-test.over-blog.com/article-2177857.html

Comment faire sa ?

il suffit de créer une id dans le css (les id sont ce qui commence par le "#" dans le css) et de lui mettre un overflow:auto; et une hauteur juste suffisante pour afficher la première ligne...voici le code....

<style type="text/css">#deroule {width:100px; height:13px; border:black 1px solid; overflow:auto;}</style>

<div id="deroule"><a href="http://peutetreunereponse.over-blog.com">PEUR</a><br /><a href="http://la.faq.over-blog.com">La FAQ</a><br><a href=http://epca.over-blog.com>Master-Blog</a></div>

Code à insérer dans le CSS (ou dans le mode source entre <style> et </style> ) :

#deroule {width:100px; height:13px; border:black 1px solid; overflow:auto;}

Code à insérer dans le mode source :

<div id="deroule"><a href="http://peutetreunereponse.over-blog.com">PEUR</a><br /><a href="http://la.faq.over-blog.com">La FAQ</a><br><a href=http://epca.over-blog.com>Master-Blog</a></div>


Le petit + :

mettez position:absolute; dans le css et jouez avec les valeurs left et top pour mettre votre petit menu déroulant ou vous le voulez