28172 sujets

CSS et mise en forme, CSS3

Header fixe avec contenu en Frame

Bonjour à tous,
j'espère que vous allez bien et que vous allez pouvoir me conseiller un peu.

Je viens de créer un petit site d'actualité pour les geeks : Daily Geek Show

J'aime beaucoup le header "flottant" de Google qu'ils exploitent dans Google Translate ou Google Images : exemple ici

J'ai tenté d'inventer un header similaire pour mon site, afin de pouvoir envoyer mes visiteurs sur d'autres sites mais leur permettre de revenir aussitôt du coté de chez moi (l'idée serait surtout d'utiliser ce système quand je cite des sources ou des contenus externes à mon site via Twitter ou Facebook). Le problème, c'est que je ne parviens pas au résultat escompté.

Actuellement, j'ai mon logo DGS qui me permet de revenir sur le site, mais j'aimerai vraiment ajouter un lien "Retirer la bannière" pour que mes visiteurs puissent vraiment profiter du site dans son lien direct. Comment dois je procéder pour réussir à avoir une présentation et une fonctionnalité similaire à celle de Google ?

Voici ma page telle que je l'ai construite actuellement :
http://dailygeekshow.com/lien.php?url=http://alsacreations.com/

Et voici le code que j'ai réalisé pour celle ci :

<?php
if(isset($_GET['url']) && !empty($_GET['url'] )){
	$url = $_GET['url'];
}
else exit;
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Daily Geek Show</title>
		<style type="text/css" media="screen">
	
		</style>
	</head>
		<frameset rows="80,*" border="1">
			<frame src="header/header.html" name="header" noresize scrolling=no>
			<frame src="<?php echo $url ?>" name="main">		
		</frameset>
</html>


Comme vous le voyez, j'appelle la page header.html qui contient le logo Daily Geek Show. Je pourrais installer un lien direct <a href="">Retirer la bannière</a> mais ce n'est pas possible car mon <?php echo $url ?> n'est plus utilisable en l'ajoutant à une page html appelée... Je manque de connaissance sur le sujet cela dit

Merci beaucoup pour votre aide ! J'espère que nous pourrons trouver des solutions Smiley confused
Modifié par Sikander84 (03 Jan 2011 - 14:36)
Salut,

Et avec une simple iframe + un bloc css ?

<?php
if(isset($_GET['url']) && !empty($_GET['url'] )){
 $url = $_GET['url'];
}
else exit;
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Daily Geek Show</title>
		<style type="text/css" media="screen">
.cadre_haut {
height:160px; 
background-color:#FFF;
border-bottom: 1px solid #000;
}
		</style>
	</head>

<div class="cadre_haut">
<!--Ta bannière et autre -->
</div>
<iframe name="teste" src="<?php echo $url;?>" scrolling="yes" frameborder="no" width="100%" height="100%"></iframe>

</html>
Merci beaucoup pour cette première réponse !

Malheureusement, cette solution créé une double scrollbar. Le champ de la bannière apparait bien, mais désormais l'iframe ne prends plus les bords du navigateur, il créait un cadre (du coup, il ne prends plus non plus la largeur du navigateur et ne peut plus être déformé correctement).
Réponse bête mais réponse quand même Smiley sweatdrop ...pourquoi tu ne reprends pas tout simplement le code source de l'exemple que tu as cité ?
En y regardant de plus près, c'est juste une iframe que GG utilise :
<iframe scrolling=auto id=rf src="****" frameborder=0 allowtransparency=true style="width:100%;height:100%"></iframe>

un poil de javascript:
var a = document.getElementById('rf');a && a.contentWindow && a.contentWindow.focus();

et 2 tableaux + css.
Je suis plus un bidouilleur qu'autre chose, j'ai peur de ne pas avoir assez de compétence (rien que me citer du javascript m'a suffit pour me terroriser un instant devant mon écran Smiley lol Smiley biggrin )

Mais tu as raison, je vais essayer de travailler sur le code source de Google pour le réutiliser directement, avec de la persévérance je devrais réussir... Merci beaucoup Tryan !
T'inquiète, je me considère également comme un bidouilleur et je me suis juste amusé à faire un simple copier/coller du code source de GG pour me rendre compte que ça fonctionnait. Faut juste supprimer ce qui t'est inutile et faire gaffe à la disposition des tableaux et du css associé pour ne pas te retrouver avec un truc horrible Smiley cligne . Ensuite tu remplace l'url de l'iframe par ton $url.
Sujet clos
Aller à