hover et background image qui ne fonctionne pas

AliKo1

21 mars 2018 à 0:11:03

bonsoir , j ai fait un menu avec une image au dessus, mais ya un espace au milieu qui me gene comment l enlever?

aussi l attribut hover ne marche pas dans mon code, puis je savoir comment l inserer?

Mewen_bzh

21 mars 2018 à 8:50:01

Bonjour,

Impossible de te répondre sans voir ton code, nous ne sommes malheureusement pas devins.

Tu dois nous aider à t'aider...

Je ne réponds pas aux messages privés.

AliKo1

21 mars 2018 à 11:20:42

<!DOCTYPE html>

<html>

<head>

<title>etudier en cote d ivore</title>

</head>

<body>

h1{ text-align: center;

font-style: italic;

font-family: "courier new"

}

#titre {

background-image: url(new/img.jpg);

height: 200px;

width: 100%;

}

nav ul {

margin: 0

padding:10px;

}

nav ul li {

float: left;

position: relative;

}

nav li { list-style: none; }

.lol {

display: none;

}

#menu {

width: 100%;

background-color:black;

font-family: arial;

font-size: large;

}

nav ul::after {content: "";

display:block;

clear: both}

nav a {display: inline-block;

text-decoration: none;}

nav ul li a {padding: 20px 30px 20px 30px;

color:white;

}

nav li :hover.lol{

display: inline-block;

position: absolute;

top: 100%;

left: 0;

padding: 0;

z-index: 100000;

}

</style>

<h1>ETUDIER EN COTE D IVOIRE</h1>

</div>

<nav>

<li><a href="#">Acceuil</a></li>

<li><a href="/orientation.html">Orientation</a></li>

<ul class="lol" > <li><a href="">Enseignement General</a></li>

<li ><a href="">Enseignement Technique</a></li>

<li><a href="">Ensignement Professionnel</a></li>

<li><a href="">Post-BAC:Enseignement Superieur</a></li>

<ul ><li><a href="">Grandes Ecoles</a></li>

<li><a href="">Université</a></li>

</ul>

<li><a href="">Concour</a></li>

<ul class="lol"> <li><a href="">concour post BAC</a></li>

<li><a href="">concour de la fonction public</a></li>

</ul>

<li><a href="">Agenda</a></li>

<li><a href="">forum</a></li>

</ul>

</nav>

</div>

</header>

<h2>PRESENTATION</h2>

<p> l education est la clé du succés comme le disait Solomon Ortiz. Ainsi tout pays desirant atteindre ou maintenir le devellopement se doit de se doter d'un systeme educatif infaillible et efficace. Cependant un gros probleme se pose au niveau de l orientation. quelques soit la qualité de la formation qu'il recoit, un eleve mal orienté a beaucoup plus de chance d echouer. l information est donc primordial et necessaire pour bien s orienter et poursuivre une carriere professionnel reussi et aisé sans perdre d année. ce site a donc pour vocation de repertorier toutes les offres et possibilité qu offre la cote d ivoire en matiere d education et de formation. </p>

</div>

</body>

</html>

-
Edité par AliKo1 21 mars 2018 à 11:25:27

philiga

21 mars 2018 à 13:19:44

Bonjour,

L'espace entre #titre et #menu est due au fait que tu as oublié le point-virgule dans ton css sur l'ul:

nav ul {
margin: 0;

(Utilise le bouton d'insertion du code qu'on ait des lignes numérotées les prochaines fois).

Par ailleurs, il manque une fermeture de div juste avant </header>

Pour ton hover, ce passage est bourré d'erreurs:

nav li :hover.lol{
display: inline-block;
position: absolute;

En 1ère ligne, les espaces sont mal placés, c'est:

nav li:hover .lol{

Pour display: inline-block; suivi de position: absolute; c'est l'un ou l'autre, jamais les deux ensemble.

Enfin, essaie de soigner l'orthographe, surtout vu le sujet de ton site:

Accueil s'écrit bien U.E.I.L
Concours prend toujours un s et tu peux mettre une majuscule à Forum comme aux autres.

Peut-être as-tu un clavier anglais, car il manque les accents et les apostrophes dans le texte.

Tu devrais pouvoir trouver un moyen...

-
Edité par philiga 21 mars 2018 à 13:21:25

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

AliKo1

30 mars 2018 à 13:42:39

merci super gentil de ta part. mais malgré que j enleves l espace le hover n est toujours pas pris en compte et il reste blanc. ensuite j aimerai centrer le menu. comment faire? en 3eme lieu comment faire pour le menu s affiche sur toutes les autres pages filles? merci d avance

Kaidan

30 mars 2018 à 15:07:08

Salut, utilise les balises de code </> puisque là sa me donne même pas envie d'essayer de lire ton message... ensuite tu devrais mettre le CSS dans un fichier à part du HTML...

Et enfin pour répondre à ton troisième point il y a deux solutions(que je connaisse...) : la première consiste à faire des copier/coller (c'est pas terrible...), la seconde c'est d'utiliser les includes en PHP mais sa c'est aprés les cours HTML... Y a certainement moyen de le faire en JS mais j'y connais rien...

Pour le reste j'ai pas lu le code donc...

philiga

30 mars 2018 à 15:23:03

Bonjour,

Ton code html est bourré d'incohérences ;

tu as notamment trop de niveaux hiérarchiques et surtout la répétition interdite du même id menu (un id doit être unique par page)

<div id="menu">

<nav>

<ul id="menu">

Voici ton code corrigé d'un certain nombre d'erreurs (j'ai arrêté de compter combien!) ; je te laisse poursuivre sur cette meilleure base...

(Utilise le 2ème bouton en partant de la droite pour insérer ton code comme ceci:)

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/p.css"/>
<title>etudier en cote d ivore</title>
<meta charset="utf-8">
</head>
<body>
<header>
<div id="mon_site">
<style type="text/css">
*, *:before, *:after {
  box-sizing: border-box;
}
h1 {
	text-align:center;
	font-style:italic;
	font-family:"courier new";
}
#titre {
	background-image:url(new/img.jpg);
	height:200px;
	width:100%;
}
nav ul {
	margin:0;
	padding:10px;
	text-align:center;
}
nav ul li {
	display:inline-block;
	position:relative;
	list-style:none;
  border:4px ridge crimson;
}
.lol {
	display:none;
  position:absolute;
	top:0;
	left:0;
	padding:0;
	z-index: 100000;
}
#menu {
	width:100%;
	background-color:grey;
	font-family:arial;
	font-size:large;
}

nav a {
	display:block;
	text-decoration:none;
  border:1px solid blue;
}
nav ul li a {
	padding:20px 30px 20px 30px;
	color:gold;
}
nav ul li:hover .lol {
	display:block;
}
</style>
	<div id="titre">
		<h1>ETUDIER EN COTE D IVOIRE</h1>
	</div>
		<nav>
<ul id="menu">
	<li><a href="#">Accueil</a></li>
	<li><a href="/orientation.html">Orientation</a>
	<ul class="lol">
		<li><a href="">Enseignement General</a></li>
		<li><a href="">Enseignement Technique</a></li>
		<li><a href="">Enseignement Professionnel</a></li>
		<li><a href="">Post-BAC:Enseignement Superieur</a></li>
		<li><a href="">Grandes Ecoles</a></li>
		<li><a href="">Université</a></li>
	</ul>
	</li>
	<li><a href="">Concours</a></li>
	<ul class="lol">
		<li><a href="">Concours post BAC</a></li>
		<li><a href="">Concours de la fonction publique</a></li>
	</ul>
	<li><a href="">Agenda</a></li>
	<li><a href="">Forum</a></li>
</ul>
</nav>
</div>
</header>
<br>
<br>
<div id="presentation">
	<h2>PRESENTATION</h2>
	<p>
		 l education est la clé du succés comme le disait Solomon Ortiz. Ainsi tout pays desirant atteindre ou maintenir le devellopement se doit de se doter d'un systeme educatif infaillible et efficace. Cependant un gros probleme se pose au niveau de l orientation. quelques soit la qualité de la formation qu'il recoit, un eleve mal orienté a beaucoup plus de chance d echouer. l information est donc primordial et necessaire pour bien s orienter et poursuivre une carriere professionnel reussi et aisé sans perdre d année. ce site a donc pour vocation de repertorier toutes les offres et possibilité qu offre la cote d ivoire en matiere d education et de formation.
	</p>
</div>
</body>
</html>

PS: Pour inclure ton menu (enregistré dans un autre fichier), il te faut passer par une ligne de php

Voir: https://openclassrooms.com/courses/concevez-votre-site-web-avec-php-et-mysql/inclure-des-portions-de-page-1

Cela nécessite que ton fichier appelant soit lui-même suffixé .php et non .html.

-
Edité par philiga 30 mars 2018 à 21:17:26

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)