Espace pour menu insuffisant

logiclogic · 02/02/2013, 19h15

Bonjour,

Pourquoi dans ce CSS, l'espace pour mon menu est en fait plus petit que les images que j'ai mis comme élément du menu ?
Ce code n'est pas censé intervenir sur la taille de l'espace du menu ?
Sinon, comment faire pour que le box du menu soit plus grand que les images que j'y mets ?
Merci...................

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#menu
{
	display: inline;
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
	border: 1px;
}
 
#menu li
{
	display: inline;
	margin-left: 10;
	margin-right: 10;
	margin-top: 5;
	margin-bottom: 20;
}

Muchos · 02/02/2013, 19h28

Merci de nous montrer plus de code css, et le code html correspondant.
Quant aux valeurs des margin, il faut une unité. Un nombre tout seul n'a pas de sens…

logiclogic · 02/02/2013, 22h16

Pour la question relative à l'espace du menu, voici le code HTML sur lequel porte le CSS :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<ul div id="menu">
	<li><a href="index.html"><img src="images/monimage.JPG" alt="HOME" title="Home" /></a></li>

Voici la suite du code CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
#menu li img	/*il faut donc mettre le LI puis IMG*/
{
	border: 0.5px solid #000;
}
 
/*source : http://www.w3schools.com/css/css_image_transparency.asp*/
#menu img:focus, #menu img:hover, #menu img:active
{
	color: green;
	opacity: 0.4;
	filter: alpha(opacity=40);
}

Autre question par rapport au CSS : comment faire pour que les images deviennent vert lorsqu'on survole avec la souris ? Cela ne marche pas avec le img:hover.
Par contre, l'opacité fonctionne.

2) autre question : lorsque l'affichage à l'écran dépasse 200%, une partie du menu passe en deuxième ligne - contrairement aux autres sites sur lesquels on voit l'apparition d'une barre de navigation en bas de l'écran.
Pourquoi n'est-ce pas automatique dans mon cas ?
Il est vrai que j'utilise des images, mais ne doivent-elles pas être redimensionnées auto à partir d'un certain seuil d'affichage ? ou sinon, avoir la barre de navig ?

merci,;;

tonton16 · 02/02/2013, 23h44

Les balises, c'est pas comme en CSS, on ne peut pas les cumuler :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="menu">
	<ul>
		<li><a href="index.html"><img src="images/monimage.JPG" alt="HOME" title="Home" /></a></li>
	</ul>

Commence par ça.

logiclogic · 03/02/2013, 18h52

cest a dire ? Je nai pas compris le rapport avec les balises et votre code... Merci,

tonton16 · 03/02/2013, 21h38

C'est à dire que :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<ul div id="menu">

Ça n'est pas possible.

Soit c'est une balise <ul> soit c'est une <div>, pas les 2.

Alors qu'en CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
ul div {
...
}

C'est possible.

logiclogic · 04/02/2013, 21h58

D'accord, modification faite.

AUTRE QUESTION :
1) Dans la même logique, je tente le code sur le w3c. L'image n'apparaît pas ?? Pourquoi ?
C'est un JPG de 160*160.
2) Si j'utilise ce code à plusieurs reprises, où placer le "background" ? Dans le HTML ? Dans le css ? Mais comment ?? Je prévois au moins 6 images opaques.
3) Dans le <p>, j'ai inséré une image qui ne s'affiche pas, il y a le logo "cassé". Pourquoi ? Puis-je insérer une image ? Logiquement, oui. J'ai diminué la taille de l'image, mais idem.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<html>
<head>
<style>
div.background
  {
  width:500px;
  height:250px;
  background:url(klematis.jpg) repeat;
  border:2px solid black;
  }
div.transbox
  {
  width:400px;
  height:180px;
  margin:30px 50px;
  background-color:#ffffff;
  border:1px solid black;
  opacity:0.6;
  filter:alpha(opacity=60); /* For IE8 and earlier */
  }
div.transbox p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  }
</style>
</head>
 
<body>
 
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
 
</body>
</html>

Rq : La partie CSS est dans mon style.css

raydenprod · 05/02/2013, 14h28

Bonjour,

le code aux normes w3c d'un background en CSS est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
div.blabla{
   background: url('smiley.gif') no-repeat fixed center; 
}

le fixed et le center ne sont pas obligatoire pour le w3c il me semble en revanche les simple quote et le no-repeat le sont.

Bovino · 05/02/2013, 14h40

Non, les quotes ne sont pas obligatoires ni le no-repeat, mais si ce dernier est absent, l'image sera par défaut répétée sur les deux axes.

logiclogic · 05/02/2013, 17h33

BOnjour,

Citation:

e fixed et le center ne sont pas obligatoire pour le w3c il me semble en revanche les simple quote et le no-repeat le sont.

J'ai mis Images/nomimage.jpg et ça marche!

N'est-ce pas possible d'avoir un FLOAT pour que la BOX s'adapte au contenu (le texte) pour éviter d'avoir à calculer combien je dois mettre en pixels pour tel texte ?? Car la taille du texte est > à la taille de l'image.
Je peux modifier manuellement pour l'adapter à la quantité de texte, mais ?? Ne peut-on automatiquement ?
Ne dois-je craindre qu'en fonction des navigateurs, il y ait des problèmes ?

Merci.........

raydenprod · 05/02/2013, 17h39

si j'ai bien compris ton soucis enlève les height de tes div

logiclogic · 16/02/2013, 19h12

Bonjour, Le problème n'est pas réglé, car il y a le fond en noir ne s'affiche pas...

Comment fait-on pour que les images aient la même taille ? Les HEIGHT et les WIDTH ne semblent pas marcher................

rodolphebrd · 16/02/2013, 20h49

J'essaye de comprendre votre problème mais avec les réponses + les questions que vous avez reposées, je m'y perds

Pouvez-vous récapituler votre demande avec au besoin un screen de ce que vous souhaitez ou un exemple à partir d'un site.

logiclogic · 17/02/2013, 14h31

Bonjour,

Voici le cas :

PC IE : le fond apparaît mais l'opacité au survol de la souris n'a pas lieu (voir copie d'écran jointe)
PC Chrome : rien, aucun fond, sinon 2 petits tirets qu'on peut voir sur la copie d'écran "PC2 Chrome"
Sous Firefox, ça marche

Sur un autre PC sous Chrome, le fond apparaît en noir sur 1/3 en partant du bas du menu (dans le cas d'une page à laquelle je n'ai pas encore ajouté de contenu...)

02/02/2013, 19h28	#2
Muchos Membre Expert Jonathan Renoult Étudiant Inscription : décembre 2011 Messages : 901 Détails du profil Informations personnelles : Nom : Jonathan Renoult Âge : 27 Localisation : France, Calvados (Basse Normandie) Informations professionnelles : Activité : Étudiant Secteur : Arts - Culture Informations forums : Inscription : décembre 2011 Messages : 901 Points : 1 918 Points : 1 918	Merci de nous montrer plus de code css, et le code html correspondant. Quant aux valeurs des margin, il faut une unité. Un nombre tout seul n'a pas de sens… __________________ Pour être aidé, donnez vos codes source svp ! ( balise # ) - - - Debug the Web together!
	00

05/02/2013, 14h40	#9
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 18 565 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 42 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 18 565 Points : 66 564 Points : 66 564	Non, les quotes ne sont pas obligatoires ni le no-repeat, mais si ce dernier est absent, l'image sera par défaut répétée sur les deux axes. __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

03/02/2013, 18h52	#5
logiclogic Invité régulier Inscription : avril 2010 Messages : 248 Détails du profil Informations forums : Inscription : avril 2010 Messages : 248 Points : 8 Points : 8	cest a dire ? Je nai pas compris le rapport avec les balises et votre code... Merci,
	00

05/02/2013, 17h39	#11
raydenprod Nouveau Membre du Club Adrien PANEL Frontend Developer Inscription : février 2013 Messages : 28 Détails du profil Informations personnelles : Nom : Adrien PANEL Informations professionnelles : Activité : Frontend Developer Informations forums : Inscription : février 2013 Messages : 28 Points : 34 Points : 34	si j'ai bien compris ton soucis enlève les height de tes div
	00

16/02/2013, 19h12	#12
logiclogic Invité régulier Inscription : avril 2010 Messages : 248 Détails du profil Informations forums : Inscription : avril 2010 Messages : 248 Points : 8 Points : 8	Bonjour, Le problème n'est pas réglé, car il y a le fond en noir ne s'affiche pas... Comment fait-on pour que les images aient la même taille ? Les HEIGHT et les WIDTH ne semblent pas marcher................
	00

16/02/2013, 20h49	#13
rodolphebrd Modérateur Rodolphe Inscription : novembre 2012 Messages : 864 Détails du profil Informations personnelles : Nom : Rodolphe Localisation : France, Gironde (Aquitaine) Informations professionnelles : Secteur : Conseil Informations forums : Inscription : novembre 2012 Messages : 864 Points : 1 557 Points : 1 557	J'essaye de comprendre votre problème mais avec les réponses + les questions que vous avez reposées, je m'y perds Pouvez-vous récapituler votre demande avec au besoin un screen de ce que vous souhaitez ou un exemple à partir d'un site.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email