Sujet Précédent Sujet Suivant

Problème avec mon Sidebar HTML CSS

Résolu/Fermé
jojolebarge Messages postés 20 Date d'inscription mercredi 20 mai 2015 Statut Membre Dernière intervention 30 novembre 2016 - 31 oct. 2016 à 15:08
jojolebarge Messages postés 20 Date d'inscription mercredi 20 mai 2015 Statut Membre Dernière intervention 30 novembre 2016 - 3 nov. 2016 à 11:04
Bonjour, j'ai fait une sidebar en HTML CSS comme header mais lorsque je l'inclu dans les autres pages le texte se met dessus. j'ai tous essayer et je ne trouve pas de solutions
merci d'avance pour votre aide.

voici ci-joint mon code 


<doctype html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="./css/header.css">
	<script src="https://use.fontawesome.com/698969780e.js"></script>	

</head>


<body>

	<div class="menu">

		<ul>
			<li><a href="#" rel="nofollow noopener noreferrer" target="_blank"><span class="fa fa-home"></span>Home</a></li> 
			<li><a href="#" rel="nofollow noopener noreferrer" target="_blank"><span class="fa fa-home"></span>Users</a>
				<ul>
					<li><a href="#" rel="nofollow noopener noreferrer" target="_blank"><span class="fa fa-plus"></span>ADD</a></li>
					<li><a href="#" rel="nofollow noopener noreferrer" target="_blank">Edit</a></li>
					<li><a href="#" rel="nofollow noopener noreferrer" target="_blank">Delete</a></li>

				</ul>
			</li>
			<li><a href="#" rel="nofollow noopener noreferrer" target="_blank"><span class="fa fa-edit"></span>Web Design</a></li>
			<li><a href="#" rel="nofollow noopener noreferrer" target="_blank"><span class="fa fa-home"></span>Contact</a></li>
		</ul>

		<div id="sidebar-btn">
			<span></span>
			<span></span>
			<span></span>
		</div>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script>
		$(document).ready(function(){
			$('#sidebar-btn').click(function() {
				$('.menu').toggleClass('visible');
			});
		});
	</script>
</body>

</html>  



.body{
	padding: 0;
	margin: 0;


}
.menu{ 
	background-color: #34495E;
	width: 200px;
	height: 100%;
	display: block;
	position: absolute;
	left: -210px;
	top: 0px;
	transition: left 0.3s linear;
}

.menu.visible{
	left: 0px;
	transition: left 0.3s linear;
}

#sidebar-btn{
	display: inline-block;
	vertical-align: middle;
	width: 35px;
	height: 15px;
	cursor: pointer;
	margin: 20px;
	position: absolute;
	top:0px;
	right:-70px;
}

#sidebar-btn span{
	height: 1px;
	background: #111;
	margin-bottom: 5px;
	display: block;


}

.menu ul{
	list-style: none;
	margin: 0;
	padding: 0;

}

.menu ul li{

	padding: 15px;
	position: relative;
	width: 170px;
	vertical-align: middle;
	background-color: #34495E;
	cursor: pointer;
	border-top: 1px solid #BDC3C7;
	border-right: 5px solid #F1C40F;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.menu ul ul{
	transition: all 0.3s;
	opacity: 0;
	position: absolute;
	border-left: 5px solid #F1C40F;
	visibility: hidden;
	left: 100%;
	top: -2%;

}

.menu ul li:hover > ul {
	opacity: 1;
	visibility: visible;
	
}

.menu ul li a{
	color: #fff;
	text-decoration: none;
}

span {
	margin-right: 15px;

}

.menu ul li:hover{
	background-color: #2ECC71
}

3 réponses

Réponse 1 / 3
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
31 oct. 2016 à 16:51
Salut,

L'exemple avec le texte passant au-dessus du menu pourrait nous aider à mieux comprendre le problème.

Je suppose que ce problème vient du fait que le texte est également positionné en "absolute". Dans ce cas tu peux essayer de le corriger en ajoutant un z-index sur ton menu.
Exemple : https://jsfiddle.net/wkdm21gz/

Bonne journée,
0
jojolebarge Messages postés 20 Date d'inscription mercredi 20 mai 2015 Statut Membre Dernière intervention 30 novembre 2016
31 oct. 2016 à 17:13
Bonjour, et merci de ta réponse j'ai essayer le z-index mais ma sidebar écrasé toujours mon texte , or je souhaiterait que mon texte se déplace lorsque j'ouvre mon sidebar,

j'imagine qu'il faut avoir recourt à du css mais je ne sais pas quel element utiliser pour déplacer mon bloc lorsque je déploie la sidebar.


merci d'avance
0
jojolebarge Messages postés 20 Date d'inscription mercredi 20 mai 2015 Statut Membre Dernière intervention 30 novembre 2016
1 nov. 2016 à 15:55
up
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
2 nov. 2016 à 09:04
Peut-on voir un exemple de ton code html/css avec la sidebar et le texte ?
0
jojolebarge Messages postés 20 Date d'inscription mercredi 20 mai 2015 Statut Membre Dernière intervention 30 novembre 2016 > Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022
2 nov. 2016 à 10:32
Bonjour, oui je vous joint ça:
merci d'avance

voici le code de ma page index 

<?php

include 'include/header.php';

?>

<!DOCTYPE html>
<html>
<head>
<!--<link rel="stylesheet" type="text/css" href="css/style.css">-->
	<title>Accueil</title>
</head>
<body>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum lacus rutrum, euismod mi non, vehicula urna. Fusce ultrices nisl eu magna ornare, posuere tincidunt erat rhoncus. Pellentesque sagittis enim sed tortor ultrices, congue tempor est hendrerit. Mauris convallis varius nisl et bibendum. Duis sodales ultricies libero, vel porta est tristique at. Sed nec ipsum luctus, pharetra turpis nec, fringilla augue. Maecenas rutrum dui nec mi cursus dignissim. Vestibulum venenatis dignissim orci vitae suscipit. Nam sit amet sapien ac diam venenatis imperdiet at dapibus orci. Duis viverra, sapien ac semper tincidunt, lectus libero facilisis enim, sit amet placerat mauris eros id augue.</p>

   
</body>
</html>


voici le code de la page header html 
<doctype html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="./css/header.css">
	<script src="https://use.fontawesome.com/698969780e.js"></script>	

</head>


<body>

	<div class="menu">

		<ul>
			<li><a href="#" rel="nofollow noopener noreferrer" target="_blank"><span class="fa fa-home"></span>Home</a></li> 
			<li><a href="#" rel="nofollow noopener noreferrer" target="_blank"><span class="fa fa-home"></span>Users</a>
				<ul>
					<li><a href="#" rel="nofollow noopener noreferrer" target="_blank"><span class="fa fa-plus"></span>ADD</a></li>
					<li><a href="#" rel="nofollow noopener noreferrer" target="_blank">Edit</a></li>
					<li><a href="#" rel="nofollow noopener noreferrer" target="_blank">Delete</a></li>

				</ul>
			</li>
			<li><a href="#" rel="nofollow noopener noreferrer" target="_blank"><span class="fa fa-edit"></span>Web Design</a></li>
			<li><a href="#" rel="nofollow noopener noreferrer" target="_blank"><span class="fa fa-home"></span>Contact</a></li>
		</ul>

		<div id="sidebar-btn">
			<span></span>
			<span></span>
			<span></span>
		</div>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script>
		$(document).ready(function(){
			$('#sidebar-btn').click(function() {
				$('.menu').toggleClass('visible');
			});
		});
	</script>
</body>

</html>


et voici le css qui va avec 
.body{
	padding: 0;
	margin: 0;


}
.menu{ 
	background-color: #34495E;
	width: 200px;
	height: 100%;
	display: block;
	position: absolute;
	left: -210px;
	top: 0px;
	transition: left 0.3s linear;
}

.menu.visible{
	left: 0px;
	transition: left 0.3s linear;
}

#sidebar-btn{
	display: inline-block;
	vertical-align: middle;
	width: 35px;
	height: 15px;
	cursor: pointer;
	margin: 20px;
	position: absolute;
	top:0px;
	right:-70px;
}

#sidebar-btn span{
	height: 1px;
	background: #111;
	margin-bottom: 5px;
	display: block;


}

.menu ul{
	list-style: none;
	margin: 0;
	padding: 0;

}

.menu ul li{

	padding: 15px;
	position: relative;
	width: 170px;
	vertical-align: middle;
	background-color: #34495E;
	cursor: pointer;
	border-top: 1px solid #BDC3C7;
	border-right: 5px solid #F1C40F;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.menu ul ul{
	transition: all 0.3s;
	opacity: 0;
	position: absolute;
	border-left: 5px solid #F1C40F;
	visibility: hidden;
	left: 100%;
	top: -2%;

}

.menu ul li:hover > ul {
	opacity: 1;
	visibility: visible;
	
}

.menu ul li a{
	color: #fff;
	text-decoration: none;
}

span {
	margin-right: 15px;

}

.menu ul li:hover{
	background-color: #2ECC71
}


merci d'avance
0
Réponse 2 / 3
jojolebarge Messages postés 20 Date d'inscription mercredi 20 mai 2015 Statut Membre Dernière intervention 30 novembre 2016
1 nov. 2016 à 15:55
upupup
0
Réponse 3 / 3
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
2 nov. 2016 à 13:55
Plusieurs corrections pour commencer :
- petite erreur de syntaxe html sur la balise doctype du fichier header.php : oublie du !
- l'inclusion de tes fichiers html n'est pas correcte : un document html ne doit contenir qu'une seule balise doctype et qu'une seule balise head et body.
Actuellement avec ton inclusion, le document final possède deux doctype, body et head ce qui n'est pas valide en html.
Si tu veux inclure le header dans la page index, il faut supprimer les balises doctype, head et body du fichier header.php qui doit contenir uniquement le code html du menu.

Pour gérer le décalage du texte à l'ouverture du menu :
- j'ai englobé le contenu du site (le texte) dans un div class="content"
- j'ai ajouté un toggleClass('menu-visible') sur le body au clique sur le bouton du menu
- j'ai ajouté quelques règles css pour décaler le texte à l'ouverture du menu

Exemple de solution :
- le fichier index.php : 
<!DOCTYPE html>
<html>
<head>
	<title>Accueil</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/header.css">
</head>
<body>

	<?php include 'include/header.php'; ?>

	<div class="content">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum lacus rutrum, euismod mi non, vehicula urna. Fusce ultrices nisl eu magna ornare, posuere tincidunt erat rhoncus. Pellentesque sagittis enim sed tortor ultrices, congue tempor est hendrerit. Mauris convallis varius nisl et bibendum. Duis sodales ultricies libero, vel porta est tristique at. Sed nec ipsum luctus, pharetra turpis nec, fringilla augue. Maecenas rutrum dui nec mi cursus dignissim. Vestibulum venenatis dignissim orci vitae suscipit. Nam sit amet sapien ac diam venenatis imperdiet at dapibus orci. Duis viverra, sapien ac semper tincidunt, lectus libero facilisis enim, sit amet placerat mauris eros id augue.</p>
	</div>

	<script src="https://use.fontawesome.com/698969780e.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script>
		$(document).ready(function(){
			$('#sidebar-btn').click(function() {
				$('body').toggleClass('menu-visible');
				$('.menu').toggleClass('visible');
			});
		});
	</script>
</body>
</html>


- le fichier header.php : 
<div class="menu">
	<ul>
		<li><a href="#" rel="nofollow noopener noreferrer" target="_blank"><span class="fa fa-home"></span>Home</a></li> 
		<li><a href="#" rel="nofollow noopener noreferrer" target="_blank"><span class="fa fa-home"></span>Users</a>
			<ul>
				<li><a href="#" rel="nofollow noopener noreferrer" target="_blank"><span class="fa fa-plus"></span>ADD</a></li>
				<li><a href="#" rel="nofollow noopener noreferrer" target="_blank">Edit</a></li>
				<li><a href="#" rel="nofollow noopener noreferrer" target="_blank">Delete</a></li>

			</ul>
		</li>
		<li><a href="#" rel="nofollow noopener noreferrer" target="_blank"><span class="fa fa-edit"></span>Web Design</a></li>
		<li><a href="#" rel="nofollow noopener noreferrer" target="_blank"><span class="fa fa-home"></span>Contact</a></li>
	</ul>

	<div id="sidebar-btn">
		<span></span>
		<span></span>
		<span></span>
	</div>
</div>


- les règles css à ajouter : 
.content {
    /* transition du décalage du contenu */
    transition: transform .3s linear;
}

body.menu-visible .content {
    /* décalage du contenu quand le menu est visible */
    /* décalage de 200px = largeur du menu */
    transform: translateX(200px);
}
0
jojolebarge Messages postés 20 Date d'inscription mercredi 20 mai 2015 Statut Membre Dernière intervention 30 novembre 2016
2 nov. 2016 à 16:04
Bonjour,
merci pour ta réponse ça fonctionne!!!
en revanche mon texte sort de la zone de lecture lorsque je déploie le sidebar je suis donc obliger de scroller vers la droite
aurait tu une solution pour recadrer le texte, je penser qu'un margin-right fonctionne mais aurait tu une solution plus élégante.
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
2 nov. 2016 à 16:35
En général ce genre de menu ne permet pas voir la zone de lecture en entière lorsque le menu est ouvert, on pourrait d'ailleurs ajouter un cadre gris transparent au dessus du contenu du site à l'ouverture du menu pour renforcer cette idée, comme on peut le voir sur cet exemple (avec les boutons REVEAL ou PUSH) :
https://tympanus.net/Development/SidebarTransitions/

Néanmoins pour cacher la barre de scroll lorsque le contenu est décalé, tu peux simplement ajouter un overflow hidden sur le body quand le menu est ouvert : 
body.menu-visible {
  overflow: hidden;
}
0
jojolebarge Messages postés 20 Date d'inscription mercredi 20 mai 2015 Statut Membre Dernière intervention 30 novembre 2016 > Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022
3 nov. 2016 à 11:04
merci de ton aide ça fonctionne!!!
0

Discussions similaires

la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
&nbsp ; Quelle Fonction ?
-Jeff- -
sl4ck -

14 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse
Que veut dire <p>&nbsp;</p>?
quinn mallory -
prosthetiks -

3 réponses