J'essaie de créer un site qui utilise une technologie similaire à celle de la superposition de sites Google Analytics, mais qui encadrera mon propre site. Je peux décider plus tard de changer le type de superposition (ou l'éliminer complètement), donc l'utilisation de la superposition au lieu de modifier directement les pages source est la seule option que je considère. Pour l'instant, je suis également en train de tester une barre statique positionnée en haut (comme Google Analytics l'utilise aussi), qui utilisera un iframe ci-dessous pour servir la page source.Création d'une superposition de site "Google Analytics"
Voici le code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<title>Test Overlay</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin: 0;
padding: 40px 0 0 0;
overflow: hidden;
font: 83%/1.4 Arial, Helvetica, Sans-Serif;
}
#bar {
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100%;
min-width: 900px;
height: 30px;
padding: 5px 0;
line-height: 1;
background: #333;
color: #fff;
text-size: 1.2em;
}
#bar a {
padding: 0 5px;
color: #fff;
}
#frame {
width: 100%;
height: 100%;
z-index: 10;
}
#overlay_example
{
position: absolute;
left: 275px;
top: 275px;
font-size: 14px;
}
</style>
</head>
<body>
<div id="content">
<div id="bar">
<a href="http://mytestsite.com" title="overlay example">Test Site</a>
</div>
<div>
<iframe scrolling="auto" id="frame" src="http://www.google.com/search?hl=en&q=CSS+iframe+overlay" frameborder="0" ></iframe>
</div>
<div id="overlay_example">* Overlay Data *</div>
</div>
</body>
</html>
Cependant, le principal problème que j'ai est que sur mon site Web cible (Google recherche dans ce cas de test), lorsque les pages défilent plus que la zone d'écran visible, comme Je défile vers le bas, le texte de superposition reste statique en place. Est-il possible de changer le CSS pour que le texte de superposition reste à côté de ce que je veux qu'il recouvre sur le site cible? Dans le cas des résultats de recherche Google par exemple, si je devais superposer du texte à côté du logo Google, le texte de superposition resterait toujours à côté du logo Google, de sorte que lorsque je faisais défiler assez loin le logo n'était plus visible , le texte de superposition n'était plus visible. Cela fonctionne exactement comme Google Analytics en ce sens que je veux que le texte en superposition s'ancre directement dans le texte qu'il recouvre.
S'il vous plaît laissez-moi savoir si je peux répondre à des questions sur la façon dont je voudrais que cela fonctionne.
Merci!