Se connecter avec
S'enregistrer | Connectez-vous

Pseudo frame à fond transparent

Dernière réponse : dans Programmation

Bonjour, je cherche à faire une frame flottante, en haut de ma page, et transparente, dans laquelle je ne mettrais qu'un player pour l'ambiance du site.

Pour le moment j'ai mis une frame noire, mais ça fais moche, et en plus le design du site devrais être personnalisable par chaque membre, et vu que les couleurs sont variés, je pense que la barre du player sans fond pourrais être plus esthétique.

si vous avez des idées, voici le site :
http://hk-t.ogspy.net/

Autres pages sur : pseudo frame fond transparent

Lassé par la pub ? Créez un compte
Expert Programmation

Bonjour,
pour le bien etre de tes visiteur qui ne veule pas forcement ecouter la musique du site, il vaut mieux laisser le choix au visiteur de pouvoir ou non mettre de la musique.

Sinon la solution de sleepless2101, quelque peu bricolo, devrait tout de meme faire ce dont tu as besoin.

Bonne continuation, @+

en fait, j'ai déjà une frame dont le taille me convient, ce que je cherche c'est juste qu'elle soit transparente, et que le site défile sous le frame (pour une question de design)

j'aimerais vous trouver un site d'exemple, mais là j'en ai pas qui me viennent.

DivX_666: je ne sais pas si on parle bien de la même chose, mais lui cherche à faire un fonc transparent, pas à cacher la div du lecteur..
hazertyck: je ne sais pas si ce que tu veux est faisable avec une frame, mais les frames c'est dépassé; ce que je te conseille (et teste le pour voir au moins!) c'est de faire la div comme je te l'ai déjà dit, de prendre un gif transparent genre celui-là: http://www.map.meteoswiss.ch/map-img/blank.gif , et de le mettre en background de la div. pour un meilleur effet je prendrais un png grisé transparent, genre celui-là: http://lacrimos.nhost.org/bkg3.png

edit: le css que je t'ai donné n'est pas bon, il faut mettre position: fixed;
un exemple:
<html>
<head>
<style type="text/css">
body {
color: #FF0000;
}
#player {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 25px;
padding-top: 5px;
background: url('http://lacrimos.nhost.org/bkg3.png');
}
</style>
</head>
<body>
<div id="player">
<center>
<object type="application/x-shockwave-flash" data="http://www.alsacreations.fr/mediaflash/dewplayer-mini.s..." height="20" width="160"></object>
</center>
</div>
<div id="content">
aa<br>aa<br>aa<br>aa<br>aa<br>
bb<br>bb<br>bb<br>bb<br>bb<br>
aa<br>aa<br>aa<br>aa<br>aa<br>
bb<br>bb<br>bb<br>bb<br>bb<br>
aa<br>aa<br>aa<br>aa<br>aa<br>
bb<br>bb<br>bb<br>bb<br>bb<br>
aa<br>aa<br>aa<br>aa<br>aa<br>
bb<br>bb<br>bb<br>bb<br>bb<br>
</div>
</body>
</html>

Question design, c'est exactement ça que je voulais !

maintenant petit soucis (oui je suis chiant) : comme ce n'est pas une frame (c'est pour cela que je voulais utiliser les frames) quand tu prend un lien, tu quite la page, et donc la musique est coupée ... sur un site contenant un forum ça va vite devenir gonflant ^^

do you understand my problem ?

of course i do!

on va utiliser jQuery avec le plugin history
télécharges jQuery ici: http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.j...
télécharges histoty ici: http://nix.lv/history/jquery.history.js

mets ce code dans ta page:
<script type="text/javascript" src="jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="jquery.history.js"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
var $ = {};
// PageLoad function
// This function is called when:
// 1. after calling $.historyInit();
// 2. after calling $.historyLoad();
// 3. after pushing "Go Back" button of a browser
function pageload(hash) {
// hash doesn't contain the first # character.
if(hash) {
// restore ajax loaded state
$j("#content").load(hash); // #content désigne la div où va s'afficher ton contenu
} else {
// start page
$j("#content").empty();
}
}

$j(document).ready(function(){
// Initialize history plugin.
// The callback is called at once by present location.hash.
$j.history.init(pageload);

// set onlick event for buttons
$j("a[@rel='history']").click(function(){
//
var hash = this.href;
hash = hash.replace(/^.*#/, '');
// moves to a new page.
// pageload is called at once.
$j.history.load(hash);
return false;
});
});
</script>

puis modifie tes liens de cette façon:
si tu as <a href="ma_page.html">lien</a>, tu auras <a href="#ma_page.html" rel="history">lien</a>

ça devrait marcher ;) 
si tu as des questions, n'hésite pas

je test ça dans une ou deux heures, je te dirais, je t'avoue que tout ce que j'ai vu avant je métrisait, mais là, je vais faire ce que tu me dis bêtement parce que je n'ai pas le niveau ^^

Par contre de ce qui est de modifier les liens, heu, il n'y as pas de problème si mon site est en php ? (genre les includes, je met pas le # si ? )

non non, pas les include, juste les liens hypertexte; en fait on va avoir une page fixe composée de 21 div: celle du lecteur et celle du contenu. pour éviter que la lecture coupe à chaque chargement de page, on garde la page et on change juste le contenu de la div content, avec jQuery; history sert à activer le bouton précédent/suivant du navigateur, car aussi non ça ne marche pas (et oui, on ne change pas de page, donc aucune raison que le bouton précédent/suivant marche!).
mais attention quand tu fais tout ça: ce que tu vas charger ne doit pas être une page complète, mais juste le contenu de la div.. tu pourrais vite te retrouver avec plusieurs lecteurs sur ta page, et autres..
bon, en fait, la solution la plus simple est de revenir aux frames.. solution que je ne t'avais pas dite car les frames c'est has-been!
tu fais ça:
<html>
<head>
<style type="text/css">
body {
color: #FF0000;
}
#player {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 25px;
padding-top: 5px;
background: url('http://lacrimos.nhost.org/bkg3.png');
}
</style>
</head>
<body>
<div id="player">
<center>
<object type="application/x-shockwave-flash" data="http://www.alsacreations.fr/mediaflash/dewplayer-mini.s..." height="20" width="160"></object>
</center>
</div>
<iframe width="100%" height="100%" src="ma_page.html"></iframe>
</body>
</html>
et fais bien attention de ne pas remettre ton player dans ma_page.html
je suis désolé pour toutes ces pistes plus ou moins foireuses.. la solution jQuery qui est plus dans l'air du temps est lourde à mettre en place, celle des frames est mal vue, et bientôt plus valide aux normes w3c, mais marche.. grosse bidouille ou non conformité au w3c, à toi de choisir! si il y a d'autres solutions, je ne vois pas..

Je vais tester les deux, et je vais voir ...
au pire je bidouillerais encore plus :
une frame en gris opaque, avec en dessous la div en transparrence (la première que tu m'as fillé) mais cette fois-ci le png je le met en opacitée normale, et c'est le fichier lui même que je vais faire dégrader, comme ça l'estétique y seras et dans la barre en haut je peu par exemple mettre mon menu avec des menu déroulant (à la nasa.gov ^^ )

écoute je bidouille tout ça (je m'en sent capable) et je post le résultat ou mes soucis dès que je peu !
merci encore à toi et à tous ceux qui ont tenté de m'aider, je vous tiend au jus !

ben comme je n'arrivais pas à faire ce que je voulais, je me suis dit que c'est ce qui irais le mieux ... faut juste que je vire le padding dela frame ou que je l'agrandisse, et que je trouve si possible une alternative à l'iframe du site (parce que ça fait 2 scrolls ... c'est chiant) J'aimerais faire une include, mais je ne sait pas trop cmment faire, j'ai mis ça :

<?php
include "/site/index.php";
?>

mais sans succès ... page blanche. (si je trouve la solution à ce problème promis je serais satisfait et je ne vous ennui plus ^^
Lassé par la pub ? Créez un compte

Créer un nouveau sujet

Tom's guide dans le monde