[Résolu] Include une page php avec un CSS à lui seul par UnLamaSwag - page 1

<!--Je suis désolé c'est un peu fouilli et y'a plein de truc que je dois retirer je le sais x)-->

<link rel="stylesheet" href="LesCSS\Accueil.css" />
    </head>
	<body>
<div id="global1">

<div class="global">

		<div id="connexion">		
			<?php
			$connexion = mysqli_connect('localhost','root','','projet'); /*le lama est ma page de connexion/déconnexion
			if(isset($_SESSION['email']))
			{
				include("Deconnexion.php");

			}
			else
			{
				include("Connexion.php");
			}
			?>
	</div>
		<h1>Chez </br> Lamabrairie </h1>
		<b><p>Une librairie de lama !</p></b>
</div>

<div id="global">
<ul id="menu">
	<li id="accueil"><a href="SitesDesLamas2.php">Accueil</a></li>
	<li><a href="#">Livres</a>
		<ul>
			<li><a href="#">BD's</a></li>
			<li><a href="#">Mangas</a></li>
			<li><a href="#">Romans</a></li>
			<li><a href="#">Comics</a></li>
		</ul>
	</li>
	<li><a href="#">Nos coups de c&oelig;ur</a>
		<ul>
			<li><a href="#">Selection mangas</a></li>
			<li><a href="#">Selection BD's</a></li>
			<li><a href="#">Selection romans</a></li>
			<li><a href="#">Selection comics</a></li>
		</ul>
	</li>

	<li><a href="#">Contact</a>
		<ul>
			<li><a href="#">Nous contacter</a></li>
			<li><a href="#">Qui sommes nous ?</a></li>
		</ul>
	</li>

</ul>
</div>

Voici la partie de mon code concerné en html

Celui-ci c'est celui du lama:

<html>
<?php 
	ini_set("display_errors",0);error_reporting(0);
	session_start();
?>
    <head>
		<meta charset="utf-8"/>
		<title>Connexion</title>
       <link rel="stylesheet" href="LesCSS\deconnexion.css" />
    </head>
	<div id="deco">
		<form method = 'POST' action= 'SitesDesLamas2.php'>
		<img id="bulle" src="LesCSS\bulle2.png" />
		<p>Bonjour
		<?php 
			$connexion = mysqli_connect('localhost','root','','projet');
			$email= $_SESSION['email'];
			$query="SELECT prenom FROM utilisateurs WHERE email='$email'";
			$result = mysqli_query($connexion, $query);
			$row = mysqli_fetch_assoc($result);
			echo $row["prenom"];
		?></br> pour voir ton profil</br> passe ta souris sur</br> ma petite tête !
		</br>
		</p>
<ul id="menu">
	<li id="profil"><a href="SitesDesLamas2.php"><img src="LesCSS\lamauser.gif" width="100"></a>
		<ul>
			<li>
			<span id="arrow_border"></span>
			<span id="arrow_inner"></span>
			<div id="fondtransp"></div>
			</li>
			<div id="basmenu">
			<li>
			<a href="#">Mon compte</a></li>
			<li><a href="#">Mes paramètres</a></li>
			<li>		
						<button class="button" name="Valider" id="refresh"><div id="bouton">Deconnexion</div></button></br></br>

						<?php 	if(isset($_POST['Valider'])){ include("DeconnexionUser.php"); header("refresh:0.001;url=SitesDesLamas2.php");} ?>
			</li>
			</div>
		</ul>
	</li>
</ul>

</form>
</div>
		<br>
		</br>

</html>

ça c'est le css du lama:

#deco form
{
	height: 220px;
	width: 200px;
}
#deco button {
  display: inline-block;
  padding: 5px 30px;
  font-size: 15px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #FF8D00;
  border: none;
}
#deco p
{
	text-align: center;
	position: absolute;
	top:8;
	left:90;
}
#deco #bulle
{
	position:absolute;
	top:0;
	left:50;
	width:200;
}
#deco #profil
{
	top:50;
	left:-60;
	bottom:0;
}
#deco button:hover {background-color: #3e8e41}

#deco button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
#deco #arrow_border{
  width:0;
  height:0;
  line-height:0;
  border-top:30px solid transparent;
  border-left:30px solid #000000;
  border-right:30px solid transparent ; /* couleur de la bordure de la bulle */
}
#deco #arrow_inner{
  width:0;
  height:0;
  line-height:0;
  border-top:30px solid transparent;
  border-left:30px solid #000000;
  border-right:30px solid transparent ; /* couleur du fond de la bulle */
}
#deco #arrow_border{
	position:absolute;
	top:0;
	left:5;
}
#deco #arrow_inner{
	position:absolute;
	top:4;
	left:7;
}
#deco #fondtransp
{
	height: 25px;
	width: 200px;
}
/*menuderoulant*/
#deco #menu, #deco #menu ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
}
#deco #menu li{
display:inline-block;
position:relative;
}
#deco #menu ul li, #deco #menu ul span{
display:inherit;
border-radius:0;
}
#deco #menu ul li:hover{
border-radius:0;
}
#deco #menu ul li:last-child{
border-radius:0 0 8px 8px;
}
#deco #menu ul{
position:absolute;
z-index: 1000;
max-height:0;
left: 83;
right: -83;
top: 67;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#deco #menu li:hover ul{
	max-height:15em;
}
/* background des liens sous menus */
#deco #menu li  div#basmenu li:nth-child(1){
background:#000000;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
#deco #menu li  div#basmenu li:nth-child(2){
background:#000000;
}
#deco #menu li  div#basmenu li:nth-child(3){
background:#000000;
padding-top:10px;
}
/* background des liens menus et sous menus au survol */

#deco #menu li div#basmenu li:nth-child(1):hover{
background:#ffffff;
}
#deco #menu li div#basmenu li:nth-child(2):hover{
background:#ffffff;
}
/* les a href */
#deco #menu a{
text-decoration:none;
display:block;
padding:8px 32px;
color:#fff;
font-family:arial;
}
#deco #menu ul a, #deco #menu ul span{
padding:8px 0;
}
#deco #menu li:hover li a{
color:#fff;
text-transform:inherit;
}
#deco #menu li:hover a, #deco #menu li li:hover a{
color:#000;
}

et ça celui du principal:

html, body
{
	height: 100%;
	width: 100%;
	position: absolute;
	padding: 0px;
	margin: 0px;
	background-color: grey;
}
.global:nth-child(3) img
{
	float: left;
}

#connexion
{
	position: absolute;
	left: 10px;
	top: 10px;
}
#menu li a:hover
{
		color: white;
}
.onglet
{
	border-bottom: 2px groove black;
	border-right: 2px groove black;
	color: red;
}
h2
{
	background-color: rgba(0, 0, 0, 0.8);
	padding: 10px;
	box-shadow: 6px 6px 6px black;
	color: #FF8D00;
	border: 2px groove black;
	border-radius: 10px;
}
.global:nth-child(1) h1
{
	background-color: rgba(0, 0, 0, 0.8);
	font-size: 250%;
	margin-left: 40%;
	box-shadow: 6px 6px 6px black;
	color: #FF8D00;
	border-bottom: 2px groove black;
	border-right: 2px groove black;
	width: 350px;
}
.info
{
	background-color: rgba(0, 0, 0, 0.8);
	padding: 10px;
	box-shadow: 6px 6px 6px black;
	color: #FF8D00;
	border: 2px groove black;
	border-radius: 10px;
}
#autre p
{
	word-wrap: break-word;
	background-color: rgba(255, 255, 255, 0.9);
	color: black;
	padding-left: 2px;
	padding-top: 2px;
	padding-right: 10px;
	padding-bottom: 10px;
	border: 2px groove black;
	border-radius: 10px;
	width: 450px;
	height: 250px;
	overflow: hidden;
}
#autre
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#global1
{
	display: flex;
	flex-direction: column;
	position: absolute;
	width: 100%;

}
.global:nth-child(3) h1
{
	background-color: rgba(255, 255, 255, 0.9);
	color:#FF8D00;
	position: fixed;
	right: 10px;
	top: 280px;
	text-align: center;
	font-size: 130%;
	width: 180px;
	border: 2px groove black;
}
.global:nth-child(3)
{
	display: flex;
	padding-bottom: 100px;
	border-top: 2px groove black;
	width:100%;
	height: 100%;
	background-image: url(mangas.jpeg);
}
.global:nth-child(3) em
{
	position: fixed;
	right: 0;
	top: 60px;
}
.global:nth-child(3) span
{
	position: fixed;
	right: 160px;
	top: 0;
}
.global:nth-child(3) h3
{
	position: fixed;
	right: 200px;
	top: 5px;
	text-align: center;
}
.global:nth-child(2)
{
	align-self: center;
}
.global:nth-child(1)
{
	text-align: center;
	background-image: url(mangas.jpeg);
	border-bottom: 2px groove black;
}
.global:nth-child(1) b p
{
	background-color: rgba(0, 0, 0, 0.3);
	width: 210px;
	font-size: 130%;
	margin-left: 45%;
	text-align: left;
	color: white;
	margin-bottom: 70px;
}
.global:nth-child(4)
{
	display: flex;
	align-self: center;
	width: 900px;
	background-color: rgba(255, 255, 255, 0.7);
	padding: 10px;
	border-top: 2px groove black;
	border-radius: 10px;
	position: absolute;
	bottom: 0;
}
/*menuderoulant*/
#menu, #menu ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
}
#menu li{
display:inline-block;
position:relative;
}
#menu ul li{
display:inherit;
border-radius:0;
}
#menu ul li:hover{
border-radius:0;
}
#menu ul li:last-child{
border-radius:0 0 8px 8px;
}
#menu ul{
position:absolute;
z-index: 1000;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu li:hover ul{
max-height:15em;
}
/* background des liens menus */
#menu li:first-child{
background-color: #000;
background-image:-webkit-linear-gradient(top, #000 0%, #2A2333 100%);
background-image:linear-gradient(to bottom, #000 0%, #2A2333 100%);
}
#menu li:nth-child(2){
background-color: #000;
background-image:-webkit-linear-gradient(top, #000 0%, #2A2333 100%);
background-image:linear-gradient(to bottom, #000 0%, #2A2333 100%);
}
#menu li:first-child{
background-color: #000;
background-image:-webkit-linear-gradient(top, #000 0%, #2A2333 100%);
background-image:linear-gradient(to bottom, #000 0%, #2A2333 100%);
}
#menu li:nth-child(2){
background-color: #000;
background-image:-webkit-linear-gradient(top, #000 0%, #2A2333 100%);
background-image:linear-gradient(to bottom, #000 0%, #2A2333 100%);
}
#menu li:nth-child(3){
background-color: #729EBF;
background-image: -webkit-linear-gradient(top, #000 0%, #2A2333 100%);
background-image:linear-gradient(to bottom, #000 0%, #2A2333 100%);
}
#menu li:nth-child(4){
background-color: #F6AD1A;
background-image:-webkit-linear-gradient(top, #000 0%, #2A2333 100%);
background-image:linear-gradient(to bottom, #000 0%, #2A2333 100%);
}
#menu li:last-child{
background-color: #CFFF6A;
background-image:-webkit-linear-gradient(top, #000 0%, #2A2333 100%);
background-image:linear-gradient(to bottom, #000 0%, #2A2333 100%);
}
/* background des liens sous menus */
#menu li:first-child li{
background:#2A2333;
}
#menu li:nth-child(2) li{
background:#2A2333;
}
#menu li:nth-child(3) li{
background:#2A2333;
}
#menu li:nth-child(4) li{
background:#2A2333;
}
#menu li:last-child li{
background:#2A2333;
}
/* background des liens menus et sous menus au survol */
#menu li:first-child:hover, #menu li:first-child li:hover{
background:#404040;
}
#menu li:nth-child(2):hover, #menu li:first-child li:hover{
background:#404040;
}
#menu li:nth-child(3):hover, #menu li:nth-child(2) li:hover{
background:#404040;
}
#menu li:nth-child(4):hover, #menu li:nth-child(3) li:hover{
background:#404040;
}
#menu li:last-child:hover, #menu li:last-child li:hover{
background:#404040;
}
/* les a href */
#menu a{
text-decoration:none;
display:block;
padding:8px 32px;
color:#FF8D00;
font-size: 20px;
}
#menu ul a{
padding:8px 0;
}
#menu li:hover li a{
color:#FF8D00;
text-transform:inherit;
}
#menu li:hover a, #menu li li:hover a{
color:#fff;
}
/*gauche*/
.element:nth-child(1)
{
	width: 40%;
}
/**/
.element:nth-child(2)
{
	margin: 10px;
	min-width: 950px;

}
.element:nth-child(3)
{
	width: 40%;
}
#bas li
{
	list-style: none;
}
#bas li a
{
	text-decoration: none;
	color: black;
}
#bas li a:hover
{
	color: blue;
}
#bas:nth-child(1)
{
	text-align: center;
	flex: 2;
	border-right: 2px groove black;
	padding: 10px;
}
#bas:nth-child(2)
{
	text-align: center;
	flex: 1.5;
	border-right: 2px groove black;
	padding: 10px;
}
#bas:nth-child(3)
{
	text-align: center;
	flex: 2;
	padding: 10px;
}

J'hésitais un peu à le mettre parce que c'est pas mal long y'a beaucoup d'essais dedans, j'ai pas encore fais le tri

-
Edité par UnLamaSwag 23 juillet 2017 à 20:24:24

UnLamaSwag

23 juillet 2017 à 5:10:43

Tout d'abord je tiens à m'excuser si je suis pas dans le bon forum je ne savais pas si le problème était d'ordre CSS ou PHP :-°

Mon problème est donc le suivant ! J'aimerais mettre ce petit lama tout mignon:

dans un page html qui possède un css pour mon menu déroulant qui est le suivant :

or quand je fais cela vous vous en doutez mon lama prend le css du menu déroulant ci-dessus et cela donne:

Ma question est la suivante : est-il possible de faire agir un css uniquement sur une partie de code ? Ou alors une solution à me proposer pour que mon p'tit lama ne reste pas comme ça ?

-
Edité par UnLamaSwag 23 juillet 2017 à 6:09:10

Lamecarlate

23 juillet 2017 à 8:05:57

Bonjour,

quand je fais cela vous vous en doutez mon lama prend le css du menu déroulant

Euh bah pourquoi on s'en douterait ? Nous n'avons pas ton code, ni HTML ni CSS, impossible de faire le lien.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

23 juillet 2017 à 20:13:00

Martin PAUCOT

24 juillet 2017 à 11:12:25

Bonjour, voici un peu de lecture :

https://www.w3schools.com/cssref/css_selectors.asp

Je ne sais pas si les lamas parlent anglais mais je penses que tu va réussir à te débrouiller.

Quelques part dans ton CSS, tu dois attribuer du style à toutes les li/ul/a, il faut donc que tu fasse en sorte de leur rajouter une précision pour éviter que d'autres éléments soient modifiés (En l’occurrence le lama).

Si debugger, c’est supprimer des bugs, alors programmer ne peut être que les ajouter | Développeur Web et Mobile chez Beemoov

24 juillet 2017 à 18:35:49

Merci bien, c'est que je n'avais pas pensé à changer en class et id même si je l'avais déjà fait avant, je me sens un peu bête pour le coup x)

Par contre j'ai toujours le problème avec mes positionnements comment je peux faire pour arranger ça ?

Je n'ai rien dis ça marche maintenant mais faut juste mettre px après les positions dans le css de base sinon il les prend pas voilà tout.

-
Edité par UnLamaSwag 24 juillet 2017 à 22:07:43

Include une page php avec un CSS à lui seul

Include une page php avec un CSS à lui seul

Supprimer

Modérer

Signaler le message aux modérateurs