Est-ce qu'on peut toujours se passer des frame au profit du CSS

gifusien Messages postés 1 Date d'inscription   Statut Membre Dernière intervention   -  
dugenou Messages postés 6087 Date d'inscription   Statut Contributeur Dernière intervention   -
Bonjour,

Je souhaitais faire un site sous forme de frame dans lequel il y aurait un menu dans la fenêtre de droite et l'espace qui reçoit le contenu des liens du menu dans la fenêtre de gauche.

Il s'agit d'un site dans lequel je propose des vidéos originales que je mets sur Youtube. La fenêtre "menu" de droite est donc constituée des liens vers les vidéos et en cliquant sur chaque lien, les explications de la vidéo concernée apparaissent dans la fenêtre de gauche.
Le nombre de vidéos va bien sûr augmenter et donc, le contenu de la fenêtre "menu" est appelé à varier constamment.

Sous forme de frame, cela ne pose pas de problème apparent, mais je lis un peu partout que les frames sont un peu obsolètes et que le CSS est beaucoup plus facile à gérer. J'ai donc essayé de me mettre au CSS. Ça commence à rentrer un peu, mais je ne vois toujours pas comment on peut éviter les frames avec ce que je souhaite faire.

Pour le moment, le site en est à l'état suivant (en construction) :
http://gillesetgillou.com/cadre.html

Est-ce que quelqu'un aurait des conseils sur la meilleure manière de gérer un tel site ? et est-ce qu'il y a un moyen de se passer de frame dans ce cas là ?

En vous remerciant,

A voir également:

3 réponses

astuces72 Messages postés 7769 Date d'inscription   Statut Membre Dernière intervention   1 641
 
hello

j'utilise du jquery, un script récupéré sur le net, mais je ne sais plus ou, désolé pour l'auteur !

va voir cette page:
http://reliefmicro.fr/test/sansframe/pagesansframe.html
c'est exactement ce qu'il te faut

En gros tu as ta page avec ce code:
<html> 
<head> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){    
$("a").click(function(){ 
page=($(this).attr("href")); 
$.ajax({  
url: page, 
cache: false,  
success:function(html){ 
afficher(html);      
}, 
error:function(XMLHttpRequest, textStatus, errorThrows){ 
} 
}); 
return false;  
}); 
});function afficher(donnees){  
$("#contenu").empty();  
$("#contenu").append(donnees);  
} 
</script> 
</head> 
<body> 

<div id="menu"> 
<a href="page1.html">page1.html</a> 
<a href="page2.html">page2.html</a> 
</div> 
<div id="contenu"></div> 
</body> 
</html> 


et tes autres pages avec uniquement les vidéos, j'ai pris des vidéo youtube pour l'exemple. Donc une page1.html avec ceci dedans:
<iframe width="560" height="315" src="https://www.youtube.com/embed/WcfKfbkz2TM" frameborder="0" allowfullscreen></iframe>

et la page 2:

<iframe width="560" height="315" src="https://www.youtube.com/embed/9lhlhEGE0cM" frameborder="0" allowfullscreen></iframe>

En gros le contenu on s'en fout, tu y mets ce que tu veux, donc tes vidéos :)

tu ajoutes tes liens à la suite, comme ça:
<a href="page2.html">page2.html</a>
<a href="page3.html">page3.html</a>
<a href="page4.html">page4.html</a>
...........

et il te faut aussi le script jquery que tu places sur ton espace ftp:
http://reliefmicro.fr/test/sansframe/jquery.js
clic droit et enregistrer le fichier sous, c'est la version 1.9
0
Gifusien
 
Merci Astuce72,

Je vais voir un peu ce que tu me donnes, mais j'ai le sentiment que ça ne correspond pas tout à fait à ce que j'ai en tête.
D'une part, je risque d'arriver à un grand nombre de vidéos dans quelque temps, c'est pour ça que dans la page que j'ai déjà faite, j'ai mis les liens dans un menu défilant avec une partie cachée.
D'autre part, s'agissant de vidéos pour l'apprentissage d'une langue, je voudrais pouvoir inclure les différentes explications liées à la vidéo...

Au moment où j'en suis, je crois comprendre qu'il me faudrait une page par lien, c'est-à-dire qu'à chaque fois que j'ajoute un nouveau lien vers une nouvelle vidéo, je devrai ajouter ce lien sur toutes les pages existantes... Me trompe-je ?
Avec les frames, on n'a qu'à ajouter le nouveau lien dans la fenêtre menu et c'est tout...

En tout cas, encore merci et je vais essayer de me remettre à potasser tout ça... ça risque de prendre du temps...
0
dugenou Messages postés 6087 Date d'inscription   Statut Contributeur Dernière intervention   1 452
 
Bonjour,

Bien sûr que tu peux reproduire cette présentation en CSS, voir ce site :

https://www.alsacreations.com/

Il y a toutes les explications.
0
Gifusien
 
Merci Dugenou,

Merci, mais c'est un pavé de alsacreation !
Ça promet de longues soirées à potasser....
Je l'ai survolé, mais j'ai du mal à trouver ce que je veux...
0
dugenou Messages postés 6087 Date d'inscription   Statut Contributeur Dernière intervention   1 452
 
Je n'ai pas le temps de t'expliquer, je dois partir, mais il faut créer un fichier, par exemple menu.php et dans ton fichier css donner la position de ce fichier.

#menu  {  
background: #FFFFFF;    /* Couleur du fond du menu */  
float:left;  
width:135px;            /* Largeur maxi du menu */  
}  


Dans ta page index.php tu fais un include vers ce fichier :

<div class="arrondi" id="menu">  
<?php  
include("menu.php");  
?>  
</div>  
0
astuces72 Messages postés 7769 Date d'inscription   Statut Membre Dernière intervention   1 641
 
oui tu te trompes, tu n'ajoutes le lien qu'a la suite comme je le note:
tu ajoutes tes liens à la suite, comme ça:
<a href="page2.html">page2.html</a>
<a href="page3.html">page3.html</a>
<a href="page4.html">page4.html</a>

et tu crées bien des pages par vidéo ?
Il va bien falloir de toute façon, tu ne va pas mettre que la vidéo sans explication sur cette page ?

il te faudrait peut être une base de données avec un Id, le lien de la vidéo et l'explication de cette vidéo, ensuite les liens se créer automatique dans ta page d'accueil via la BDD et les pages se chargeront dynamiquement.

le plus simple ensuite est de créer une page administration, avec gestion de ta base.
0