28172 sujets

CSS et mise en forme, CSS3

Positionnement (fixed) d'une balise div dans un design responsive

Bonjour,

Pour un projet web de design responsive j'ai besoin de fixé en haut de l'écran, un bandeau informatif tout en le gardant visible pendant le scrolling de la page.

Exemple:
body { 
		margin: 0; 
		width: 100%;
	}
	
	#header, #main, #footer { 
		max-width:978px; 
		margin:0 auto; 
		padding:8px; 
		display:block;
	}
	
	#header { 
		height:50px; 
		border-bottom:1px solid grey; 
	}
	
	.logo{ 
		float:left; 
		display:block; 
	}		
	
	#nav { 
		float:right; 
	}
	
	#nav ul li{ 
		display:inline; 
	}
	
	#note{ 
		background:red; 
		color:white; 
		width:100%; 
		padding:5px; 
		position:fixed; 
		top:0; 
		display:block; 
		text-align:center; 
	}
	
	@media screen and (max-width:768px){
		#note{ 
			position:fixed; bottom:0; 
		}
	}


<html>
<head></head>
<body>
<div id="note">
	<p>Information importante !</p>
</div>
<div id="header">
	<a class="logo" href="#" title="back to home" rel="home"><img src="http://..." alt="Logo" /></a>
	<div id="nav">
		<ul>
			<li>Link 1</li>
			<li>Link 2</li>
			<li>Link 3</li>
		</ul>
	</div>
</div>
<div id="main">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt</p>
</div>
</body>
</html>


Je rencontre deux problèmes:

1. Le header passe en dessous du bandeau, se qui à pour conséquence de masquer le texte contenu en début de page si je clique sur un lien ancre, par exemple.

J'ai compris que je dois indiquer au header une marge en haut, cependant le bandeau informatif n'aura pas de hauteur fixe puisque son contenue variera.

2. J'aimerais que le bandeau soit fixé en bas au lieu du haut quand la résolution de l'écran est en dessous de 768 pixels.

J'ai donc inversé le positionnement en CSS, mais cela ne fonctionne pas.

Le CSS n'étant pas mon fort et après avoir googlelisé en vain, je m'en remet à vos conseils;

Merci par avance pour votre aide, cordialement. Smiley cligne
Modifié par kitten13 (28 Jul 2012 - 15:31)
Salut,

kitten13 a écrit :
Le header passe en dessous du bandeau, se qui à pour conséquence de masquer le texte contenu en début de page si je clique sur un lien ancre, par exemple.

Si tu veux que le header passe au dessus il faut lui spécifié la propriété z-index en fournissant une valeur supérieur à celle de ton #note. Cependant pour que ça fonctionne il faut que l'élément soit préalablement positionné. En gros ça donnerait ceci :
#header, #main, #footer { 
max-width:978px; 
margin:0 auto; 
padding:8px; 
display:block;
[b]position: relative;
z-index: 10;[/b]
}

Ca devrait résoudre ton problème.

kitten13 a écrit :
J'aimerais que le bandeau soit fixé en bas au lieu du haut quand la résolution de l'écran est en dessous de 768 pixels.
Pour la média querie utilise plutôt cette syntaxe : 
@media (max-width: 768px){
...
}

A part ça si c'est destiné à être utilisé sur mobile je pense que le positionnement fixe n'est pas pris en compte par ceux-ci (à moins que ça ai changé ? à vérifier).

En espérant t'avoir aidé.
Bonjour,

Merci pour votre réponse.

Il y'a un problème avec votre solution, le contenue de la page (première ligne de texte) passe au-dessus du bandeau masquant ainsi celui-ci.

Pour les médias queries c'est noté et corrigé, merci
Sujet clos
Aller à