26297 sujets

CSS et mise en forme, CSS3

Bonjour,

Je m'explique, j'ai crée un menu caché responsive. Seulement quand il s'ouvre mes liens qui sont en dessous se mettent sur le bloc de la navigation, je vous montre :

upload/1528550414-69591-site.jpg

Comme vous pouvez le voir le "lastest post" et "latest photo" passent par dessus comme si le background de la navigation était transparent alors que pas du tout...

Je vous laisse mon css :


body
{
	background-color: white;
	font-family: courier new, Arial, sans-serif;
	color: black;
	margin: auto;
	width: 100%;
	height: 100%;
}
#bloc_page
{
	max-width: 1200px;
	margin: auto;
}
a
{
	text-decoration: none;
}
a:visited
{
	text-decoration: none;
	color: black;
}
@media all and (max-width: 1200px)
{
	nav
	{
		padding: 2px;
		float:right;
		text-align: left;
	}
	nav ul
	{
		text-align: center;
		padding: 0px;
		margin: auto;
	}
	nav li
	{
		margin-left: 1px;
	}	
	nav a 
	{
		font-size: 1.4em;
	}	
	nav li a
	{
		margin: auto;
	}
	a#menu-icon
	{
		display: inline-block;
		width: 40px;
		height: 40px;
		margin: 0.5em;
	}
	#iconresponsive
	{
		width: 40px;
		height: 40px;
	}
	nav ul, nav:active ul 
	{ 
		display: none;
		position: absolute;
		padding: 20px;
		background: #fff;
		border: 5px solid #444;
		right: 20px;
		top: 60px;
		width: 50%;
		border-radius: 4px 0 4px 4px;
	}
	nav li 
	{
		text-align: center;
		width: 100%;
		padding: 10px 0;
		margin: 0;
	}
	nav:hover ul 
	{
		display: block;
	}
	header
	{
		display: block;
		margin: auto;
		width: 100%;
		left: 0;
	}
	#logo
	{
		display: none;
	}
	#titre_principal
	{
		width: auto;
		margin: auto;
		padding: 0.8em;
		margin-left: 0.2em;
	}
	#titre_principal h1
	{
		text-align: center;
		width: 100%;
		margin: auto;
	}
	#credits
	{ 
		font-size: 0.7em;
	}
}
Il faudrait voir ta page HTML mais a priori "lastest post" et "latest photo" sont écrits après la balise <nav>. C'est comme si on empilait des calques.
Pour ne pas bousculer l'ordre de la page HTML, on utilise z-index pour forcer un élément <div>, <ul>,... à rester au dessus des autres
Dans ton CSS, une règle comme ceci devrait régler le problème :
nav ul {
  z-index: 99;
}

Augmente la valeur de z-index si besoin
https://developer.mozilla.org/fr/docs/Web/CSS/z-index
Bonjour,

Merci mais en testant z-index ça ne fonctionne pas Smiley confus Smiley confus . D'ailleurs le reste du bloc où sont "latest post" et "latest photo" est lui bien invisible... Il n'y a que les lien dans la balise <a> qui sont par dessus...

Je vous laisse mon html :


<!DOCTYPE html>
<html>
	<head>
		<meta charset ="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
		<link rel="stylesheet" href="CSS/Style.css"/>
		<link rel="stylesheet" href="CSS/StyleAccueil.css"/>
		<link rel="icon" href="http://mydeardiary.fr/Monblabla/wp-content/uploads/2018/05/cropped-logo2-2-32x32.png" sizes="32x32">
		<link rel="icon" href="http://mydeardiary.fr/Monblabla/wp-content/uploads/2018/05/cropped-logo2-2-192x192.png" sizes="192x192">
		<link rel="apple-touch-icon-precomposed" href="http://mydeardiary.fr/Monblabla/wp-content/uploads/2018/05/cropped-logo2-2-180x180.png">
		<meta name="msapplication-TileImage" content="http://mydeardiary.fr/Monblabla/wp-content/uploads/2018/05/cropped-logo2-2-270x270.png">
			
			<!--[if lt IE 9]>
				<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
			<![endif]-->
			<!--[if lte IE 7]>
			<link rel="stylesheet" href="CSS/style_ie.css"/>
			<![endif]-->
		<title> My dear diary </title>
	</head>
	
	<body>
		<div id="bloc_page">
			
			<header>
					<div id="titre_principal">
						<a href="index.html">
						<img src="Images/logo2.png" alt="Logo my dear diary" id="logo"/>
						<h1>My Dear Diary</h1></a>
					</div>
				<nav>
				<a href="#" id="menu-icon"><img src="Images/menuicon.png" alt="menu icon" id="iconresponsive"/></a>
					<ul>
						<li><a href="index.html">Accueil</a></li>
						<li><a href="Monblabla/index.php">Mon blabla</a></li>
						<li><a href="Galerie.html">Galerie</a></li>
						<li><a href="Apropos.html">A propos</a></li>
						<li><a href="Contact.html">Contact</a></li>
					</ul>
				</nav>
			</header>
			
			<div id="dernier_article">
				<div id="description_article">
					<a href="http://mydeardiary.fr/Monblabla/index.php/2018/06/06/les-champions/"> Latest Post </a>
				</div>
			</div>
			
			<div id="derniere_photo">
				<div id="description_photo">
					<a href="http://mydeardiary.fr/Galerie.html"> Latest Photo </a>
				</div>
			</div>
			
		<footer>
			<div id="réseaux_sociaux">
				<figure>
					<a href="https://www.instagram.com/camille_pix.elle/">
						<img src="Images/instagramlogo.png" alt="Logo_instagram" id="Logoinstagram" title="Instagram"/>
					</a>
					<a href="/index.html">
						<img src="Images/logo2.png" alt="Logo_site" id="Logosite" title="My dear diary"/>
					</a>
					<a href="https://www.facebook.com/My-Dear-Diary-2042164082706992/">
						<img src="Images/facebooklogo.png" alt="Logo_fb" id="Logofb" title="Facebook"/>
					</a>
				</figure>
			</div>
				<div id="credits">
					<p> Conception et droits : Camille G. </p>
				</div>
		</footer>
		
		</div>		
	</body>
</html>

Modifié par Cadi09 (09 Jun 2018 - 15:53)
Résolu avec z-index mais sur le header en fait !! Merci beaucoup !!