Menu et contenu séparés lors de la navigation

Question

nicky14

8 Jun 2012 à 18:10

Bonjour,

je ne sais pas trop comment expliquer ce que je veux faire. Regardez plutôt ce site :
http://www.brunosenna.com.br/en/.

Le menu tout en haut semble complétement en dehors du contenu, qui lui bouge avec la barre de défilement, et il est bien le seul élément de la page à bouger. Le menu reste statique et le contenu défile sans lui monter dessus, en disparaissant juste en dessous.
J'aimerais le même effet, mais je ne vois pas du tout comment y faire ? J'ai lu des trucs sur des frames et iframes, mais j'en suis absolument pas sûr et je ne sais pas les utiliser.
J'ai regardé le code source du site mais j'ai du mal à m'y retrouver...

Comment réaliser cet effet simplement ? Merci.

audrasjb

8 Jun 2012 à 18:19

Salut,

Nullement besoin de frame ou d'iframe. Il suffit d'avoir une image de fond statique (avec la propriété CSS background-position) et d'utiliser un positionnement fixe pour l'entête (avec position: fixed) Smiley cligne

Edit :

Nicky14 a écrit :
J'ai regardé le code source du site mais j'ai du mal à m'y retrouver…

pour étudier et faire des essais de modification du code HTML/CSS/JS sur un site, je te conseille d'utiliser un plugin comme Firebug sur Firefox ou autre fonctionnalité similaire de ton navigateur favori (parfois native, parfois pas).
Modifié par audrasjb (08 Jun 2012 - 18:23)

nicky14

8 Jun 2012 à 21:14

Merci de l'info, ca semblait marcher, jusqu'à ce que je tombe sur un os. Mon menu est bien fixé en haut, mais le conteneur, même s'il est le seul à bouger avec la barre de défilement, passe derrière lui comme s'il était le premier élément de la page, alors que je voudrais qu'il n'aille pas plus haut que le dessous du menu.

Comment y faire ? Un margin-top dessus ne fait rien...

<body>
<div id="menu">
	<table cellspacing="10px">
    	<tr>
        	<td><a href="#"><img id="img_menu" src="menu_1" alt="menu_1" /></a></td>
            <td><a href="#"><img id="img_menu" src="menu_2.png" alt="menu_2" /></a></td>
            <td><a href="#"><img id="img_menu" src="menu_3" alt="menu_3" /></a></td>
            <td><a href="#"><img id="img_menu" src="menu_4" alt="menu_4" /></a></td>
            <td><a href="#"><img id="img_menu" src="menu_5" alt="menu_5" /></a></td>
            <td><a href="#"><img id="img_menu" src="menu_6" alt="menu_6" /></a></td>
            <td><a href="#"><img id="img_menu" src="menu_7" alt="menu_7" /></a></td>
        </tr>
    </table> 
</div>
<div id="conteneur"></div>
</body>

body {
		margin: 0;
		padding: 0;
		background:url(test.jpg) repeat fixed center top #000000;
		}
		
	#menu {
		background:none;
		border:none;
		margin-top:10px;
		position:fixed;
		}
	
	table {
		background:none;
		border:none;
		position:fixed;
		left:50%;
		margin-left:-570px;
		}
	
	td {
		border:none;
		}
	
	#img_menu {
		width:150px;
		}
		
	#conteneur {
		width:1200px;
		height:1500px;
		margin:auto;
		border:solid 1px black;
		background: #3399CC;
		}

Modifié par nicky14 (08 Jun 2012 - 21:16)

nicky14

9 Jun 2012 à 12:38

Ca doit bien être faisable quand même, non ? J'ai changé quelques trucs mais globalement, ca reste le même problème.

Ce qu'il me faut, c'est un contenu qui stoppe juste en dessous du menu avec la barre de défilement. On peut donner cette illusion en le faisant passer derrière le menu, mais pour cela, il faut un fond au menu, et je n'en veux pas, ce qui fait que l'on voit le contenu défiler derrière.
Comment dans ce cas-là bloquer assurément le contenu dans sa remontée, avant le menu ?

Par ailleurs, lorsque je teste mon affichage sur une basse résolution, à cause de la position fixed au menu, ma page (et donc le menu) est coupée sur les côtés, tout n'apparait pas et n'est pas accessible...
Sur le site que j'ai donné plus haut, j'ai remarqué que ca faisait pareil. Comment empêcher ca afin que malgré la position:fixed du menu, pour réaliser ce que je veux par rapport au contenu, que tout soit lisible ?

Merci de votre aide, toujours bienvenue.

<body>
	<table cellspacing="10px">
    	<tr>
        	<td><a href="#"><img id="img_menu" src="menu_1" alt="menu_1" /></a></td>
            <td><a href="#"><img id="img_menu" src="menu_2.png" alt="menu_2" /></a></td>
            <td><a href="#"><img id="img_menu" src="menu_3" alt="menu_3" /></a></td>
            <td><a href="#"><img id="img_menu" src="menu_4" alt="menu_4" /></a></td>
            <td><a href="#"><img id="img_menu" src="menu_5" alt="menu_5" /></a></td>
            <td><a href="#"><img id="img_menu" src="menu_6" alt="menu_6" /></a></td>
            <td><a href="#"><img id="img_menu" src="menu_7" alt="menu_7" /></a></td>
        </tr>
    </table> 
<div id="conteneur"><div id="diapo"></div></div>
</body>

body {
		margin: 0;
		padding: 0;
		background:url(test.jpg) repeat fixed center top #000000;
		}
	
	table {
		background: #99FF00;
		border:solid 1px red;
		left:50%;
		margin-left:-570px;
		position:fixed;
		margin-top:-200px;
		}
	
	td {
		border:solid 1px black;
		}
	
	#img_menu {
		width:150px;
		}
		
	#conteneur {
		width:1000px;
		height:1500px;
		border:solid 1px black;
		margin:auto;
		background:none;
		margin-top:200px;
		}
	
	#diapo {
		width:800px;
		height:700px;
		border:solid 1px black;
		margin:auto;
		background:none;
		}

Modifié par nicky14 (09 Jun 2012 - 12:45)

nicky14

11 Jun 2012 à 00:44

Ce n'est pas faute de chercher, comme d'hab, mais personne n'a une petite idée ?

J'ai essayé d'améliorer le code de mon dernier message, et j'y suis arrivé, en casant une image aux dimensions "cadrées", qui colle avec mon fond, dans ma table/menu pour cacher le contenu qui défile derrière avec la barre de navigation.
Seulement, le problème est toujours le même, en basse résolution, genre 800x600, mon menu est rogné sur les bords et il n'est pas possible de naviguer dessus à l'horizontal du fait de sa position fixe. Je pourrais baisser sa taille, mais je ne le veux pas trop pour qu'en grande résolution, ca ne le pénalise pas.
N'y-a-t-il aucun autre moyen qu'une baisse de taille du menu fixe pour qu'il soit visible en basse résolution ?

<body>
	<table cellspacing="10px">
    	<tr>
        	<td><a href="#"><img id="img_menu" src="menu_1" alt="menu_1" /></a></td>
            <td><a href="#"><img id="img_menu" src="menu_2.png" alt="menu_2" /></a></td>
            <td><a href="#"><img id="img_menu" src="menu_3" alt="menu_3" /></a></td>
            <td><a href="#"><img id="img_menu" src="menu_4" alt="menu_4" /></a></td>
            <td><a href="#"><img id="img_menu" src="menu_5" alt="menu_5" /></a></td>
            <td><a href="#"><img id="img_menu" src="menu_6" alt="menu_6" /></a></td>
            <td><a href="#"><img id="img_menu" src="menu_7" alt="menu_7" /></a></td>
        </tr>
    </table> 
<div id="conteneur"><div id="diapo"></div></div>
</body>

body {
		margin: 0;
		padding: 0;
		background:url(test.jpg) repeat fixed center top #000000;
		}
	
	table {
		background: url(entete.jpg) fixed center top;
		border:none;
		left:50%;
		margin-left:-570px;
		position:fixed;
		margin-top:-200px;
		}
	
	td {
		border:none;
		}
	
	#img_menu {
		width:150px;
		}
		
	#conteneur {
		width:1000px;
		height:1500px;
		border:solid 1px black;
		margin:auto;
		background:none;
		margin-top:200px;
		}
	
	#diapo {
		width:800px;
		height:700px;
		border:solid 1px black;
		margin:auto;
		background:none;
		}

Modifié par nicky14 (11 Jun 2012 - 00:46)

Sujet clos

CSS et mise en forme, CSS3

Menu et contenu séparés lors de la navigation