Essai blocdroit

Attention !!! Article en cours de modification...

C'est comme son titre l'indique, un essai, qui vous permet d'apercevoir, la possibilité d'ajout de bloc, voire colonne, si on insère d'autres objets.

Bloc de droite créé avec générateur.

 <P>&nbsp;</P>
<div><pre>
<!-- ***************** -->
<!-- CSS ID Bloc Droit -->
<!-- ----------------- -->
<STYLE type=text/css>  
<!--  
#blocdroit  
{  
position : absolute;  
top : 130px;  
right : 5px;  
width : 170px;  
border : 1px solid #000000;  
}    
.bloc_sansbord  
{  background : 
transparent;  
width : 170px;  
margin-top : 10px;  
margin-left : auto;  
margin-right : auto;  
margin-bottom : 10px;  
padding-top : 5px;  
padding-left : 3px;  
padding-right : 3px;  
padding-bottom : 5px;  
color : #FFFFFF;  
font-family : arial;  
font-size : 12pt;  
text-align : center;  
border : px solid #000000;  }  
 -->  
</STYLE>
<!-- -- Fin CSS blocdroit --- -->
</pre></div>
 
<div><pre>
<!-- ************************ -->
<!-- -- HTML du bloc droit -- -->
<!-- ------------------------ -->
<DIV id=blocdroit>
<!-- *********************** -->
<!-- -- HTML bloc exemple -- -->
<!-- ----------------------- -->
<DIV class=bloc_sansbord><A href="http://bricabrac.blog4ever.com/blog/index-490.html" target=_blank><IMG title="Internet, Informatique, Blog4ever" src="https://sd-1.archive-host.com/membres/images/183822970129391303/util_blogs/bricabracanim_bouton.gif" border=0></A>
</DIV>
<BR>
<DIV class=bloc_sansbord><A title="BRICABRAC - Tutoriel Colonne Plus - Création d'un bloc DIV pour insérer des menus ou objets." href="http://bricabrac.blog4ever.com/blog/lirarticle-490-907798.html" target=_blank>Tutoriel - Colonne Plus</A>
</DIV>
<!-- -- fin HTML bloc exemple -- -->
</DIV>
<!-- -- fin HTML bloc droit -- -->
</pre></div>
<P>&nbsp;</P>
          <!-- ----------------------- -->  
 
    
   
 
 Tutoriel - Colonne Plus 
  
    
 <!-- -- fin HTML bloc droit -- -->     
    
          
     Ci-dessous, la copie du  CSS de la partie "Menu" de DizTest, mais légèrement modifié. Vous remarquerez certainement le remplacement du "#" par un "." qui représente une Class à la place d'un ID, c'est à dire que plusieurs menus du blog pourront être gérés par ces règles, à l'inverse de l'ID qui doit être unique dans une page.       
Ce code n'est pas reconnu par le Diz Perso, il faut le placer dans la bordure gauche pour les versions payantes, ou éventuellement dans le CSS direct, à condition de ne plus vous servir de l'assistant.       
Pour les versions gratuites, si vous voulez continuer à vous servir de l'assistant, il faut insérer ce code dans l'article, seulement les articles contenant ce CSS pourront avoir le menu.      
      .menubis
{
color : #; 
width : 170px;
font-size : 10pt;
font-family : Comic sans MS;
float : left;
}
.menubis ul
{
list-style-type : none;
}
.menubis ul li
{
background : #EBEDAB;
width : 172px;
margin-top : -1px;
border-width : 1px;
border-style : solid;
border-color : #000000;
line-height : 25px;
}
.menubis ul li a
{
background : #EBEDAB;
background-image : url(https://static.blog4ever.com/2008/05/205392/artimage_205392_1212814_201004220914590.gif);background-position: 2% 0%;
background-repeat : no-repeat;
padding-left : 20px;
color : #003366;
width : 170px;
text-decoration : none;
font-size : 9pt;
font-family : Arial;
line-height : 25px;
}
.menubis ul li a:hover
{
background : #FFFFFF;
background-image : url(https://static.blog4ever.com/2008/05/205392/artimage_205392_1212815_201004220914847.gif);
background-position: 2% 0%;
background-repeat : no-repeat;
width : 150px;
color : #006699;
text-decoration : none;
display : block;
}
.menubis h2
{
background : #004000;
color : #EEF5FA;
width : 172px;
height : 25px;
margin-top : 20px;
font-size : 15px;
font-family : Verdana, Trebuchet MS, Arial;
border-width : 1px;
border-style : solid;
border-color : #000000;
text-align : center;
}  
    
          
     Vous avez un code différent de celui de DizTest, il faut copier les mêmes règles dans votre CSS et faire les modifications que j'ai indiquées.    
     Après avoir mis en place le CSS, il reste le code HTML, à mettre dans le bloc créé comme dans cet article. Pour placer ce menu, je crée un bloc interne avec la Class du style ".menubis".      
Comme ceci :       
<div class="menubis">      
ici insérer       
 - le titre du menu, géré par la règle .menubis h2      
 - la liste composant le nouveau menu gérée par les autres règles      
</div>    
          
     <div class="menubis"> <h2>Mes Génrateurs</h2>
<UL>
<LI><A href="http://www.archive-host.com/compteur.php?url=http://sd-1.archive-host.com/membres/up/183822970129391303/generateurs/genere_diz.htm" target=_blank>Diz Perso</A></LI>
<LI><A href="http://www.archive-host.com/compteur.php?url=http://sd-1.archive-host.com/membres/up/183822970129391303/generateurs/genere_listes.htm" target=_blank>Listes</A></LI>
<LI><A href="http://www.archive-host.com/compteur.php?url=http://sd-1.archive-host.com/membres/up/183822970129391303/generateurs/genere_lienTI.htm" target=_blank>Liens texte/image</A></LI>
<LI><A href="http://www.archive-host.com/compteur.php?url=http://sd-1.archive-host.com/membres/up/183822970129391303/generateurs/genere_textedefile.htm" target=_blank>Texte Défilant</A></LI>
<LI><A href="http://www.archive-host.com/compteur.php?url=http://sd-1.archive-host.com/membres/up/183822970129391303/generateurs/genere_titres.htm" target=_blank>CSS balises titres</A></LI>
</UL> </div>