28172 sujets

CSS et mise en forme, CSS3

Superposition de blocs (dont l'un dépasse des côtés)

Bonsoir à tous,
J'essaye désespérément de positionner le bloc rouge (dédié au menu) de façon à ce qu'il dépasse à gauche et à droite, à part égale (qu'il soit centré quoi !), de la boite blanche arrondie. Cette boite blanche arrondie, avec effet ombrée, est une boite mise au dessus de la page du navigateur, pour rendre plus concret les textes à lire. J'avais facilement réussi à faire ça en html4 avec les tableaux, mais en html5 et css3, je n'y arrive pas du tout.
J'ai beau tout essayer, ce fichu bloc rouge refuse de glisser plus à gauche.
Je vous mets ci-dessous le code html de la page :

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<style type="text/css">
	
	/* fond de la page web */ 
	body {
		margin: 0px;
		padding: 20px;
		background: #F5F5F5;
	}

	/* boite arrondie où afficher le contenu de la page */ 
	#boitearrondie {
		width: 800px;
		padding-top: 5px;
		padding-right: 30px;
		padding-bottom: 5px;
		padding-left: 30px;
		margin-left: auto;
		margin-right: auto;
		background: #FFFFFF;
		border: 1px solid #800000;
		/* ombre de la boite */
		border-radius: 20px;
		box-shadow: 5px 10px 5px 1px Sienna;
		z-index: 1;
	}

	header {
		background: #999999;
	}
	
	/* boite de menu superposée sur la boite arrondie, qui doit dépasser à gauche et à droite de la boite arrondie */ 
	nav {
		width:900px;
		height:20px;
		background:red;
		top:60px;
		margin-left: auto;
		margin-right: auto;
		position: absolute;
		z-index: 2;
		opacity: 0.6;
	}

	
	footer {
		background: #F5F445;
	}
	
	</style>
	<title>Boite arrondie superposée sur le fond (balise body) de la page</title>
</head>
  
<body>

	<div id="boitearrondie"> <!-- boite arrondie où afficher le contenu de la page -->
		<header>
			<p>HEADER contenant notamment logo et navigation</p>
		<nav>NAV menu déroulant horizontal dans ce bloc rouge (dépassant légèrement à gauche et droite du bloc arrondi ombré)</nav>
		</header>
	
		<section>
			<p>&nbsp;</p>
			<h1>SECTION titre de la section (ou d'articles)</h1>
			<p>Du texte de section (ou d'article, à créer le cas échant).</p>
			<p>Du texte de section (ou d'article, à créer le cas échant).</p>
			<p>Du texte de section (ou d'article, à créer le cas échant).</p>
		</section>

		<footer>
			<p>FOOTER dans ce bloc jaune, avec les liens : à propos, mentions légales, etc.</p>
		</footer>
	</div>
		
</body>
</html>


Merci d'avance pour vos suggestions.

PS : les couleurs sont là pour mieux visualiser les blocs. Le code css est écrit dans la page web mais une fois que ce problème sera résolu, je pourrai lier le code à une page css. La prochaine difficulté sera de faire la même page avec le menu déroulant horizontal (le fichu bloc rouge) et du responsive design, mais je verrai plus tard Smiley smile
Bonjour,

Vous voulez donc que le nav sorte de son conteneur parent. Difficile de le faire proprement quand on veut faire un site responsive mais comme ce n'est pas le cas ici vous pouvez le faire en positionnement absolu, il faut auparavent mettre un position relative sur l'élement parent afin que l'élément enfant sache qu'il se positionne relativement à ce dernier (et non à l'ensemble de la page) :

	header {
		position: relative; /* une règle importante ajoutée ici */
		background: #999999;
	}
	
	/* boite de menu superposée sur la boite arrondie, qui doit dépasser à gauche et à droite de la boite arrondie */ 
	nav {
		width:900px;
		height:20px;
		background:red;
		top: 30px;
		left: -50px; /* un ajout ici pour corriger le centrage */
		/*margin-left: auto; j'ai court circuité cette règle car elle ne sert à rien en absolute */
		/*margin-right: auto; idem */
		position: absolute;
		z-index: 2;
		opacity: 0.6;
	}


Exemple en ligne : CodePen
Bonjour.

On peut aussi ne pas renseigner la largeur de nav (pas de valeur à width) et mettre right également à -50px...

Smiley smile
Sujet clos
Aller à