Tutoriel - Colonne complémentaire à droite
Bloc droit
Bloc droit
Suite de mon projet de modifications de BRIC A BRAC, maintenant que le conteneur est plus large. Toujours dans le but de mettre à la disposition des visiteurs divers objets ou liens, sans avoir besoin de faire défiler une page très longue. Je viens de créer une colonne à l'opposé de mon menu, je pense que d'autres bloggueurs seront intéressés par cette possibilité.
Astuce pour version Silver ou Gold...Malheureusement cette procédure nécessite l'utilisation des bordures, comme le "Bloc de bas de page" de mon article précédent [lien], pour que ce bloc soit sur toutes les pages. Egalement possible sous DizPerso ou un modèle graphique, dans le cas de cette colonne il faut placer le CSS et les blocs contenant les objets dans la bordure droite/gauche.
23 Mars 2009 - Générateurs de codes...Je viens de réaliser, un générateur pour le code CSS et HTML du "blocdroit" lien et un autre pour créer facilement les blocs internes, à placer dans la "Colonne Plus", dans lesquels vous aurez inséré le code des objets. lien
C'est un début, si vous apprécié ce système, faites le moi savoir, j'en ai d'autres à finaliser et à mettre en ligne.
C'est un début, si vous apprécié ce système, faites le moi savoir, j'en ai d'autres à finaliser et à mettre en ligne.
CSS - Régles de style de "Colonne de droite"
Ces règles de style servent d'une part à placer la colonne et de l'autre à paramétrer les blocs renfermant les objets, sachant qu'il est toujours possible de modifier dans les balises HTML des DIVs.
Code CSS de la colonne de droite ...
HTML - Placement dans la "Colonne de droite"
La colonne "blocdroit" sera composée de blocs ou DIVs pour chaque objet comme les modules du "Menu Gauche". Différentes formes d'objets pourront être mis en place dans cette colonne, des liens simples, des liens sous forme de liste déroulante ou défilante, calendrier, horloge, lien "Livre d'or", etc... seule la largeur sera un critère déterminant, les objets trop larges pourront être mis dans le "Pied de page".
Les régles de style permettront d'encadrer ou non les blocs en mettant dans la balise DIV la "class" soit .blocencadre ou .blocsanscadre. D'autres attributs pourront être ajoutés soit dans les régles ou dans les balises.
Code HTML des blocs de la colonne de droite...
<p align="center">
*** paragraphe centré et sans autres attributs ***
</p>
<div class="blocencadre" align="center">
*** bloc encadré ***
</div>
<div class="blocsanscadre" align="center">
*** bloc non encadré ***
</div>
Voir cette Démo 1 avec toutes les explications d'installation et le code CSS à modifier ou à ajouter.
Code HTML du Bloc Droit sur la démo 1...
<!-- ************************* -->
<!-- Création de du bloc droit -->
<!-- ------------------------- -->
<div id="blocdroit">
<center><H2>Bloc droit</H2></center>
<div class="menu" align="center"> <a href="http://sd-1.archive-host.com/membres/up/183822970129391303/Demos_sources/1_demo_cssblocdroit.txt" target="_blank">Code CSS</a></div>
<div class="menu" align="center"> <a href="http://bricabrac.blog4ever.com/blog/lirarticle-490-907798.html#demo1" target="_blank">Code HTML</a></div>
<div class="blocsanscadre" align="center">
<img src="http://sd-1.archive-host.com/membres/images/183822970129391303/util_blogs/bricabracanim_bouton.gif" />
</div>
<div class="blocsanscadre" align="center">
<A href="http://bricabrac.blog4ever.com/blog/index-490.html" target="_blank">
<IMG src="http://sd-1.archive-host.com/membres/images/183822970129391303/util_blogs/animbricbrac_logo.gif" title="Internet, Informatique, Blog4ever" border="0" /></a>
</div>
</div>
<!-- ******* fin bloc droit ******* -->
<!-- Création de du bloc droit -->
<!-- ------------------------- -->
<div id="blocdroit">
<center><H2>Bloc droit</H2></center>
<div class="menu" align="center"> <a href="http://sd-1.archive-host.com/membres/up/183822970129391303/Demos_sources/1_demo_cssblocdroit.txt" target="_blank">Code CSS</a></div>
<div class="menu" align="center"> <a href="http://bricabrac.blog4ever.com/blog/lirarticle-490-907798.html#demo1" target="_blank">Code HTML</a></div>
<div class="blocsanscadre" align="center">
<img src="http://sd-1.archive-host.com/membres/images/183822970129391303/util_blogs/bricabracanim_bouton.gif" />
</div>
<div class="blocsanscadre" align="center">
<A href="http://bricabrac.blog4ever.com/blog/index-490.html" target="_blank">
<IMG src="http://sd-1.archive-host.com/membres/images/183822970129391303/util_blogs/animbricbrac_logo.gif" title="Internet, Informatique, Blog4ever" border="0" /></a>
</div>
</div>
<!-- ******* fin bloc droit ******* -->
Voir cette Démo 2 avec toutes les explications d'installation et le code CSS à modifier ou à ajouter.
Code HTML du Bloc Droit sur la démo 2...
<!-- ************************* -->
<!-- Code HTML de la Demo 2 -->
<!-- ------------------------- -->
<div id="blocdroit">
<div id="menu1">
<h2>Menu 1</h2>
<ul>
<li><a href="http://sd-1.archive-host.com/membres/up/183822970129391303/Demos_sources/2_demo_cssblocdroit.txt" target="_blank" title="Ouvre le fichier contenant les modifications du CSS.">Code CSS</a></li>
<li><a href="http://bricabrac.blog4ever.com/blog/lirarticle-490-907798.html#demo2" target="_blank" title="Ouvre le fichier contenant les modifications du HTML.">Code HTML</a></li>
<li><a href="javascript:show(1)"><b> + Espace Article</b></a></li>
<div id="1" style="display: none;">
<ul>
<li><a href="http://diztest.blog4ever.com/blog/articles-205392-220096.html"> >> Partie "Contenu" </a></li>
<li><a href="http://diztest.blog4ever.com/blog/articles-205392-220098.html"> >> Partie "Contenu Titre"</a></li>
<li><a href="http://diztest.blog4ever.com/blog/articles-205392-220099.html"> >> Partie "Contenu Listes"</a></li>
<li><a href="http://diztest.blog4ever.com/blog/articles-205392-220100.html"> >> Partie "Contenu Liens"</a></li></ul>
</div>
<li><a href="javascript:show(2)"><b><img border="0" src="http://www.blog4ever.com/blogfichiers/205392/boximages/205392080617080726.gif" hspace="3" />Espace Article</b></a></li>
<div id="2" style="display: none; background:#CCFF66; width:200px; margin: 10px 5px 5px -40px; border:4px inset #FFCC00">
<ul style="margin-left:20px; list-style-image: url(http://www.blog4ever.com/blogfichiers/205392/boximages/205392080617081204.gif); list-style-type: circle;"><img border="0" src="http://www.blog4ever.com/blogfichiers/205392/boximages/205392080617080918.gif" hspace="3" />
<li><a href="http://diztest.blog4ever.com/blog/articles-205392-220096.html">Partie "Contenu" </a></li>
<li><a href="http://diztest.blog4ever.com/blog/articles-205392-220098.html">Partie "Contenu Titre"</a></li>
<li><a href="http://diztest.blog4ever.com/blog/articles-205392-220099.html">Partie "Contenu Listes"</a></li>
<li><a href="http://diztest.blog4ever.com/blog/articles-205392-220100.html">Partie "Contenu Liens"</a></li>
</ul>
</div>
<li><a href="http://bricabrac.blog4ever.com/blog/index-490.html" target="_blank" title="Ouvre BRICABRAC.">BRICABRAC</a></li>
</ul>
</div>
<div id="menu2">
<h2>Menu 2</h2>
<ul>
<li><a href="http://test.blog4ever.com/blog/forum-2.html" target="_blank" title="Ouvre le forum aide de Blog4ever.">Forum d'aide</a></li>
<li><a href="http://www.blog4ever.com/faq/index.php" target="_blank" title="Ouvre la FAQ Blog4ever.">Aide Blog4ever</a></li>
<li><a href="http://www.blog4ever.com/annuaire.php" target="_blank" title="Ouvre annuaire des blogs.">Annuaire des blogs</a></li>
</ul>
</div>
<div class="blocsanscadre" align="center">
<img src="http://sd-1.archive-host.com/membres/images/183822970129391303/util_blogs/bricabracanim_bouton.gif" />
</div>
<div class="blocsanscadre" align="center">
<A href="http://bricabrac.blog4ever.com/blog/index-490.html" target="_blank">
<IMG src="http://sd-1.archive-host.com/membres/images/183822970129391303/util_blogs/animbricbrac_logo.gif" title="Internet, Informatique, Blog4ever" border="0" /></a>
</div>
</div>
<!-- ******* fin bloc droit ******* -->
<!-- Code HTML de la Demo 2 -->
<!-- ------------------------- -->
<div id="blocdroit">
<div id="menu1">
<h2>Menu 1</h2>
<ul>
<li><a href="http://sd-1.archive-host.com/membres/up/183822970129391303/Demos_sources/2_demo_cssblocdroit.txt" target="_blank" title="Ouvre le fichier contenant les modifications du CSS.">Code CSS</a></li>
<li><a href="http://bricabrac.blog4ever.com/blog/lirarticle-490-907798.html#demo2" target="_blank" title="Ouvre le fichier contenant les modifications du HTML.">Code HTML</a></li>
<li><a href="javascript:show(1)"><b> + Espace Article</b></a></li>
<div id="1" style="display: none;">
<ul>
<li><a href="http://diztest.blog4ever.com/blog/articles-205392-220096.html"> >> Partie "Contenu" </a></li>
<li><a href="http://diztest.blog4ever.com/blog/articles-205392-220098.html"> >> Partie "Contenu Titre"</a></li>
<li><a href="http://diztest.blog4ever.com/blog/articles-205392-220099.html"> >> Partie "Contenu Listes"</a></li>
<li><a href="http://diztest.blog4ever.com/blog/articles-205392-220100.html"> >> Partie "Contenu Liens"</a></li></ul>
</div>
<li><a href="javascript:show(2)"><b><img border="0" src="http://www.blog4ever.com/blogfichiers/205392/boximages/205392080617080726.gif" hspace="3" />Espace Article</b></a></li>
<div id="2" style="display: none; background:#CCFF66; width:200px; margin: 10px 5px 5px -40px; border:4px inset #FFCC00">
<ul style="margin-left:20px; list-style-image: url(http://www.blog4ever.com/blogfichiers/205392/boximages/205392080617081204.gif); list-style-type: circle;"><img border="0" src="http://www.blog4ever.com/blogfichiers/205392/boximages/205392080617080918.gif" hspace="3" />
<li><a href="http://diztest.blog4ever.com/blog/articles-205392-220096.html">Partie "Contenu" </a></li>
<li><a href="http://diztest.blog4ever.com/blog/articles-205392-220098.html">Partie "Contenu Titre"</a></li>
<li><a href="http://diztest.blog4ever.com/blog/articles-205392-220099.html">Partie "Contenu Listes"</a></li>
<li><a href="http://diztest.blog4ever.com/blog/articles-205392-220100.html">Partie "Contenu Liens"</a></li>
</ul>
</div>
<li><a href="http://bricabrac.blog4ever.com/blog/index-490.html" target="_blank" title="Ouvre BRICABRAC.">BRICABRAC</a></li>
</ul>
</div>
<div id="menu2">
<h2>Menu 2</h2>
<ul>
<li><a href="http://test.blog4ever.com/blog/forum-2.html" target="_blank" title="Ouvre le forum aide de Blog4ever.">Forum d'aide</a></li>
<li><a href="http://www.blog4ever.com/faq/index.php" target="_blank" title="Ouvre la FAQ Blog4ever.">Aide Blog4ever</a></li>
<li><a href="http://www.blog4ever.com/annuaire.php" target="_blank" title="Ouvre annuaire des blogs.">Annuaire des blogs</a></li>
</ul>
</div>
<div class="blocsanscadre" align="center">
<img src="http://sd-1.archive-host.com/membres/images/183822970129391303/util_blogs/bricabracanim_bouton.gif" />
</div>
<div class="blocsanscadre" align="center">
<A href="http://bricabrac.blog4ever.com/blog/index-490.html" target="_blank">
<IMG src="http://sd-1.archive-host.com/membres/images/183822970129391303/util_blogs/animbricbrac_logo.gif" title="Internet, Informatique, Blog4ever" border="0" /></a>
</div>
</div>
<!-- ******* fin bloc droit ******* -->
Information...Cette procédure est totalement indépendante du système Blog4ever, donc en cas de problème son webmaster KingLouis ne pourra être tenu comme responsable, de même en ce qui me concerne, ma responsabilité n'est pas engagée. Par contre les utilisateurs de ce système pourront me contacter, je ferai toujours le maximun pour les aider. Depuis une quinzaine de jours je le teste sans problème et en tant qu'utilisateur je prouve que ça fonctionne.
