faire une sorte de frame

**Yepazix** · 24/01/2014, 01h53

Bonjour,

J'ai une page en PHP et donc il y a des choses et en particulier du texte qui s'affiche de manière dynamique.
Parfois c'est aussi des images, enfin bref différents trucs !

Je voudrais faire en HTML ou en PHP ou en je ne sais pas quoi une sorte de cadre invisible qui ferait que les infos s'affichent dedans mais sans déborder et sans se réorganiser mais qu'elles existent tout de même de manière cachées.

Bon comme ce n'est pas clair voici une petite illustration.

Imaginons que la Page originale soit comme ceci.

Je voudrais pouvoir définir une zone invisible illustrée ici par ce cadre noir (mais je précise bien que je ne veux pas de cadre, je veux que ce soit invisible).

Pour au final que la page ressemble à ceci

Est ce que c'est possible ?

Merci

**Muchos** · 24/01/2014, 08h39

J'ai peut-être une idée. Ça se passe en CSS, et ça utilise les propriétés OVERFLOW et WHITE-SPACE.
Il n'y a pas de masque: c'est le conteneur lui-même qui laisse déborder et cache ce qui déborde.

Ex:

Code html :

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
<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
<head>
  <meta charset="UTF-8" />
  <title>overflow + white-space</title>
  <style type="text/css">
div {
  width: 6em;
  height: 6em;
  background: red;
 
  /* Supprimer tab, enter + sauts de ligne automatiques */
  white-space: nowrap;
 
  /* Masquer les dépassements de boite */
  overflow: hidden;
}
 
/* On passe sur la boite: elle apparait! */
div:hover {
  width: auto;
  height: auto;
}
  </style>
</head>
<body>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.</p>
  <p>Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.</p>
  <p>Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue.</p>
  <p>Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.</p>
</div>
</body>
</html>

**Yepazix** · 25/01/2014, 01h30

C'est exactement ce que je voulais faire sauf une chose.
Quand on passe dessus je voudrais que tout se masque et que ça s'affiche CLIQUEZ à la place et que si on click ça aille sur une page.

Je pense que ça doit être possible avec OVER mais je ne sais pas trop comment ? Ca doit se faire dans le CSS aussi ?
Et par contre pour le click là...
En tous cas merci pour ton aide

**Muchos** · 25/01/2014, 07h51

Merci de votre remerciement

Il faudrait sans doute mieux penser en termes de fonctionnalité que de rendu. Si :

vous souhaitez un lien vers une page;
ce lien a l'apparence d'un petit morceau de la page;
il y a un message en hover;

je vous propose une boîte-lien, avec en fond l'image de la page.

Code html :

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
<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
<head>
  <meta charset="UTF-8" />
  <title>Boite-lien avec effet hover/focus</title>
  <style type="text/css">
.thumb {
  display: block;
  border: medium solid blue;
  width: 6em;
  height: 6em;
  background: url(http://www.developpez.net/template/images/logo.png);
}
.thumb a {
  display: block;
  width: inherit;
  height: inherit;
 
  /* Centrer le texte */
  line-height: 6em;
  text-align: center;
 
  color: transparent;
  background: transparent;
}
 
.thumb a:hover,
.thumb a:focus {
  color: black;
  background: rgba(250, 250, 250, 0.8);
  /* En cas de non-support de la transparence,
  le navigateur devrait passer tout en blanc. */
}
  </style>
</head>
<body>
<span class="thumb">
  <a href="#">DVP.com</a>
</span>
</body>
</html>

NOTE: J'aurais préféré A > SPAN plutôt que SPAN > A, mais le focus n'aurait pas fonctionné.

faire une sorte de frame

Vue hybride

Discussions similaires

Partager

Partager