IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Frame, Iframe et Absolute sont dans un bateau


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Janvier 2005
    Messages
    152
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Janvier 2005
    Messages : 152
    Par défaut Frame, Iframe et Absolute sont dans un bateau
    Bonjour à tous,


    Oui j'ai utilisé le mot interdit... Fraaaaame. Je suis comme la majorité des dev anti frame et anti <table> (sauf quand je dois effectivement afficher un tableau) mais là je suis confronté à un besoin qui à mon avis peu être solutionné par l'utilisation des frames.


    Dans l'idéal, voila ce que je voudrais. J'aimerais avoir une sorte de barre de tache dans le bas de mon site qui ne soit pas systématiquement rechargée. bon jusqu'ici une frame peut très bien faire l'affaire. Mais, j'aimerais que cette barre soit invisible. De plus, j'aimerai y mettre un pti player mp3 discret draggable que l'utilisateur peut déplacer n'importe ou sur la page princpale et bien entendu, s'il rafraichi la page, le player doit rester à la même place et le son non interrompu. Je précise également que cette barre de tache serait une option non obligatoire pour l'utilisateur.

    Pour ce faire, mon idée est de faire une frame de 0px et d'y mettre des div positionnés en absolute (top:-50px; par exemple). Donc positionner un div dans une frame sur une autre frame. Mais j'ai cru comprendre que c'était pas possible.

    Donc voila je suis bloqué


    J'ai pour le moment 4 possiblités :

    1. 2 Frames mais on sait pas positioner un div de la frame1 sur la frame2
    2. Une page contenant 1 iframe : la page contient la barre de tache et l'iframe contient le contenu principal : mais peut on placer un div audessus d'une iframe ?
    3. 2 Frames avec la frame barre de tache de 0px qui ajoute du contenu via du javascript à la frame principale. (cross scripting)
    4. pop-up mais bon je perd la notion de barre de tache


    Un avis ? Une idée ?


    Merci,

    Vodnok,

  2. #2
    Membre confirmé
    Profil pro
    Inscrit en
    Janvier 2005
    Messages
    152
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Janvier 2005
    Messages : 152
    Par défaut
    2. Une page contenant 1 iframe : la page contient la barre de tache et l'iframe contient le contenu principal : mais peut on placer un div audessus d'une iframe ?
    Apparemment, je viens de faire un test, et je suis parvenu à placer un DIV audessus d'une IFRAME. Mais bon c'est pas très joli je trouve. Je vais gratter un peu plus

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Janvier 2005
    Messages
    152
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Janvier 2005
    Messages : 152
    Par défaut
    Bon j'ai un peu raffiner, finalement l'ifram est pas mal du tout mais j'aimerais avoir votre avis sur les pour et contre de la solution que voici:


    L'idée est donc d'avoir une page HTML contenant la barre de tache (un div) et une iframe qui occupe 100% de la page.

    Cette iframe contient mon site

    Je peux ensuite positionner la barre de tache audessus de l'iframe donnant l'illusion de


    (Je précise c'est du made in notepad, j'ai pas de soft de dev web sur ce pc)

    Page princpale :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    <html>
    	<body style="padding: 0px; margin: 0px;  border: 0px #000000 solid; overflow:hidden;">
    		<div style="border: 1px #000000 solid; position:absolute; z-index:1; width:100%; height:40px; top: 150px; left:0px; background-color:#FFFFFF;">BOUGE</div>
    		<IFRAME src="U:\test2.html" style="width:100%; height:100%; margin:0px; position:absolute; left:0px;" scrolling="auto" frameborder="0" > </IFRAME>
    	</body>
    </html>

    Page contenu 2

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
     
    <html>
    	<body>
    		<h2>PAGE 2</h2>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    		<div>"éjkj"éjlk"jréjrjérlkéjljrj"éjlkjrlkj"érljl</div>
    	</body>
    </html>

    Page contenu 3

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    <html>
    	<body>
    		<h2>PAGE 3</h2>
    		<a href="U:\test2.html">Page 2</a>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    		<div>mais heuuuu</div>
    	</body>
    </html>

    Ca semble fonctionner seulement j'ai maintenant un autre problème


    La barre d'adresse... quand je passe d'une page à une autre, la barre d'adresse ne change pas ce qui est logique.

    Comment peut-on modifier le contenu de la barre d'adresse ?

    Grrrr j'aime pas les frames

Discussions similaires

  1. EJB3 Webservice et Jboss sont dans un bateau
    Par jimboo dans le forum Java EE
    Réponses: 0
    Dernier message: 15/12/2011, 17h41
  2. BIND DHCPd DDNS RNDC sont dans un bateau!
    Par ArKam dans le forum Administration système
    Réponses: 1
    Dernier message: 05/01/2011, 17h32
  3. Réponses: 0
    Dernier message: 12/03/2010, 15h45
  4. sh, papa jar et bebe jar sont dans un bateau
    Par decksroy dans le forum Langage
    Réponses: 2
    Dernier message: 19/09/2007, 10h56
  5. Delphi 7.1, MySQL et dbEXpress sont dans un bateau...
    Par jl_s dans le forum Bases de données
    Réponses: 3
    Dernier message: 30/01/2006, 00h36

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo