28172 sujets

CSS et mise en forme, CSS3

Header et Menu toujours visibles

Bonjour à tous,

je débute totalement et je suis en train d'essayer de créer un site sur une colonne centrale.

J'aimerais que le header ainsi que le menu soit toujours visible, car je prévois un défilement horizontale avec scroll pour une galerie d'image.

Malheureusement je ne m'en sors pas avec le positionnement des différentes div, qui ont tendance à se passer dessus/dessous.

Voici mon CSS sans les infos de position: ainsi les éléments s'affichent correctement mais ne sont pas "fixes".

Merci de votre aide

#container
{
	margin: 0 auto;
	width: 600px;
	background:#fff;
}

#img-container
{
	
	
}

#header
{
	background:#fff;
	padding: 20px;
	position: fixed
	float: left;
}

#header h1 { margin: 0; }
body {
    font-size: 15px;
    font-family: 'Lato', sans-serif; arial ;
	color:#4D4D4D;
    background: #fff;  

}

#content
{
	clear: left;
	padding: 20px;
}

#content h2
{
	color:#00bce0;
	font-size: 160%;
	margin: 0 0 .5em;
}

#footer
{
	background:#EBEBEB;
	text-align: right;
	padding: 20px;
	height: 1%;
	margin-bottom: 20px;
}

.menu{
	border:none;
	border:0px;
	margin:0px;
	padding:0px;
	font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	
	}
.menu ul{
	background:#333333;
	height:35px;
	list-style:none;
	margin:0;
	padding:0;
	}
	.menu li{
		float:left;
		padding:0px;
		}
	.menu li a{
		background:#333333 url("images/seperator.gif") bottom right no-repeat;
		color:#cccccc;
		display:block;
		font-weight:normal;
		line-height:35px;
		margin:0px;
		padding:0px 25px;
		text-align:center;
		text-decoration:none;
		}
		.menu li a:hover, .menu ul li:hover a{
			background: #00bce0 url("images/hover.gif") bottom center no-repeat;
			color:#FFFFFF;
			text-decoration:none;
			}
	.menu li ul{
		background:#333333;
		display:none;
		height:auto;
		padding:0px;
		margin:0px;
		border:0px;
		position:absolute;
		width:225px;
		z-index:200;
		/*top:1em;
		/*left:0;*/
		}
	.menu li:hover ul{
		display:block;
		
		}
	.menu li li {
		background:url('images/sub_sep.gif') bottom left no-repeat;
		display:block;
		float:none;
		margin:0px;
		padding:0px;
		width:225px;
		}
	.menu li:hover li a{
		background:none;
		
		}
	.menu li ul a{
		display:block;
		height:35px;
		font-size:12px;
		font-style:normal;
		margin:0px;
		padding:0px 10px 0px 15px;
		text-align:left;
		}
		.menu li ul a:hover, .menu li ul li:hover a{
			background:#00bce0 url('images/hover_sub.gif') center left no-repeat;
			border:0px;
			color:#ffffff;
			text-decoration:none;
			}
	.menu p{
		clear:left;
		}
Bonjour,

Il n'est pas possible de mélanger positionnement fixe et flottant (sur le même élément).

Tu ferais mieux de laisser le header et le menu bouger, histoire de t'habituer au positionnement flottant avant de te lancer dans le positionnement fixe.
Hello,

Tu peux utiliser le positionnement fixe pour ton en-tête et ton menu, mais ce type de positionnement est à manier avec précautions, surtout si ton as un contenu important dans cet en-tête ou dans le menu. Quelques caractéristiques du positionnement fixe, à prendre en compte:

1. Un élément en position:fixed, tout comme un élément positionné en absolu, ne repoussera pas les autres éléments dans la page. Il faut donc placer les autres éléments en fonction, utiliser du padding sur des conteneurs, ce genre de choses.

2. Si la zone de visualisation du navigateur (viewport) est plus petite que l'élément en position:fixed, tout ce qui dépasse sera complètement inaccessible. On réservera donc le positionnement fixe à des éléments prenant peu de place, et ayant peu de contenu (un menu avec 5 entrées, ça peut aller... mais un menu avec 15 entrées, non).

Une remarque: de manière générale les menus et en-têtes fixe à l'écran ça m'embête, ça prend de la place plus disponible pour le contenu même quand on le fait défiler, c'est assez pénible. Mais tout dépend de ce que tu veux faire exactement.
Sujet clos
Aller à