GRAPHISME

001. photoshop 002. imageready 003. photofiltre 004. traductions

HTML & PHP

001. html 002. php 003. css 004. javascript

AUTRE

001. forums 002. system 003. logiciels 004. divers

GOODIES

CODER UN I-FRAME

Bonjour/bonsoir les gens ! Oko m’a encore tiré par les fesses pour que je fasse ce £*#$% de tuto sur les frames XD. Bref. Voilà pour aujourd’hui :

On a besoin de :
Un layout en Div ( voir le tuto )
Notepad++

1.Ouvrez la page index.html de votre layout sur Notepad.
2.Sélectionnez le code pour le contenu, chez moi :

Et remplacez par :

Width : Largeur en pixel
Height : Hauteur en pixel
Target : Laissez main, j’n’arrive pas à expliquer mais laissez main XD.

Et en dessous du code du css, mettez :

Toutes les pages s’ouvriront donc dans la frame et pas dans une nouvelle fenêtre ( ouais ça sert à ça target ).

Voilà pour la frame c’est bon.

Ce que je n’aime pas dans les frames, c’est qu’on doit créer une nouvelle page pour ajouter des choses XD, imaginez un site de critique sur les mangas. 100 mangas= 100 pages.
Bref. Créez une nouvelle page sous Notepad++ toujours ( Fichier > Nouveau )
Et collez tout le code de votre layout dans la page SAUF le menu et à la place du code de frame, remettez le premier à savoir le code du contenu.

Pour que la frame soit transparente, remplacez la première balise "body" par :

<body style="background: none transparent"><textarea> 
 
ne supprimez pas le deuxième body ! ( celui qui ferme la balise body). 
 
Maintenant, il faut faire un css pour la frame, donc, vous changerez le nom du second fichier CSS pour ne pas confondre avec le premier. 
 
Ouvrez votre premier css. 
 
<textarea cols="40">
body { font-family: Verdana;
 margin: left;
 width: 800px;
 font-size: 9px;
 color: #9d979f;
 background-image: url("images/index_10.jpg");
 background-repeat: repeat-y;
 background-color: #ddbfd3;
 background-position: left;}

.contenu
{ position: absolute; top: 366px; margin-left: 3px; width: 386px;}

a:link {
       color: #cb61a6;
	   text-decoration:none;}
	   
 
    a:visited {
       color: #cb61a6;
	   text-decoration:none;}
	     
    a:hover {
       color: #885586;
	   text-decoration:none;}
	  
    a:active {
       color: #cb61a6;
	   text-decoration:none;}
	   
B {color : #a096cc;}

U{color : #97788b;}

I{color : #be9865;}

S{color : #5e566a;}

Vous supprimez :
   margin: left;
   width: 800px;
   background-image: url("images/index_10.jpg");
   background-repeat: repeat-y;  
   background-color: #ddbfd3
   background-position: left;
.contenu
{ position: absolute; top: 366px; margin-left: 3px; width: 386px;}

Il reste donc :
body { font-family: Verdana;
   font-size: 9px;
   color: #9d979f;
}