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="//bricabrac.blog4ever.com/blog/index-490.html" target=_blank><IMG title="Internet, Informatique, Blog4ever" src="//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="//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>

   
   
<!-- ----------------------- -->

 



   
<!-- -- 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(//diztest.blog4ever.com/blog/url_artimage-205392-1212814-0.html);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(//diztest.blog4ever.com/blog/url_artimage-205392-1212815-0.html);

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="//www.archive-host.com/compteur.php?url=//sd-1.archive-host.com/membres/up/183822970129391303/generateurs/genere_diz.htm" target=_blank>Diz Perso</A></LI>
<LI><A href="//www.archive-host.com/compteur.php?url=//sd-1.archive-host.com/membres/up/183822970129391303/generateurs/genere_listes.htm" target=_blank>Listes</A></LI>
<LI><A href="//www.archive-host.com/compteur.php?url=//sd-1.archive-host.com/membres/up/183822970129391303/generateurs/genere_lienTI.htm" target=_blank>Liens texte/image</A></LI>
<LI><A href="//www.archive-host.com/compteur.php?url=//sd-1.archive-host.com/membres/up/183822970129391303/generateurs/genere_textedefile.htm" target=_blank>Texte Défilant</A></LI>
<LI><A href="//www.archive-host.com/compteur.php?url=//sd-1.archive-host.com/membres/up/183822970129391303/generateurs/genere_titres.htm" target=_blank>CSS balises titres</A></LI>
</UL> </div>
   
   

    

       
 


24/03/2009
0 Poster un commentaire

Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 42 autres membres


Rechercher sur Diztest ? :

Recommander ce blog | Contact | Signaler un contenu | RSS | Espace de gestion

retour Accueil Page precedente Bas de page Plein ecran - Retour alt+F4 Haut de page Page suivante Envoyer un mail a PapyClic le webmaster de Test-DizPerso