Publicité
+ Répondre à la discussion
Affichage des résultats 1 à 14 sur 14
  1. #1
    Candidat au titre de Membre du Club
    Inscrit en
    avril 2010
    Messages
    280
    Détails du profil
    Informations forums :
    Inscription : avril 2010
    Messages : 280
    Points : 10
    Points
    10

    Par défaut Espace pour menu insuffisant

    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 :
    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;
    }

  2. #2
    Expert Confirmé Avatar de Muchos
    Homme Profil pro Jonathan Renoult
    Étudiant
    Inscrit en
    décembre 2011
    Messages
    1 348
    Détails du profil
    Informations personnelles :
    Nom : Homme Jonathan Renoult
    Âge : 28
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : décembre 2011
    Messages : 1 348
    Points : 2 985
    Points
    2 985

    Par défaut

    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…

    Pensons aux balises [CODE][/CODE] — Team #MrGreen
    ---
    Debug the Web together!

  3. #3
    Candidat au titre de Membre du Club
    Inscrit en
    avril 2010
    Messages
    280
    Détails du profil
    Informations forums :
    Inscription : avril 2010
    Messages : 280
    Points : 10
    Points
    10

    Par défaut

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


    Code html :
    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 :
    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,;;

  4. #4
    Membre habitué Avatar de tonton16
    Homme Profil pro
    Formateur en informatique
    Inscrit en
    novembre 2003
    Messages
    66
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Formateur en informatique
    Secteur : Service public

    Informations forums :
    Inscription : novembre 2003
    Messages : 66
    Points : 119
    Points
    119

    Par défaut

    Les balises, c'est pas comme en CSS, on ne peut pas les cumuler :
    Code html :
    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.
    Si vous pensez que ma réponse est utile pour vous et pour les autres utilisateurs du forum, pensez à voter.
    Mon pearltree : Construire un système d'information (en cours de construction)

  5. #5
    Candidat au titre de Membre du Club
    Inscrit en
    avril 2010
    Messages
    280
    Détails du profil
    Informations forums :
    Inscription : avril 2010
    Messages : 280
    Points : 10
    Points
    10

    Par défaut

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

  6. #6
    Membre habitué Avatar de tonton16
    Homme Profil pro
    Formateur en informatique
    Inscrit en
    novembre 2003
    Messages
    66
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Formateur en informatique
    Secteur : Service public

    Informations forums :
    Inscription : novembre 2003
    Messages : 66
    Points : 119
    Points
    119

    Par défaut

    C'est à dire que :
    Ça n'est pas possible.

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

    Alors qu'en CSS :
    C'est possible.
    Si vous pensez que ma réponse est utile pour vous et pour les autres utilisateurs du forum, pensez à voter.
    Mon pearltree : Construire un système d'information (en cours de construction)

  7. #7
    Candidat au titre de Membre du Club
    Inscrit en
    avril 2010
    Messages
    280
    Détails du profil
    Informations forums :
    Inscription : avril 2010
    Messages : 280
    Points : 10
    Points
    10

    Par défaut

    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 :
    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

  8. #8
    Membre du Club Avatar de raydenprod
    Homme Profil pro Adrien PANEL
    Frontend Developer
    Inscrit en
    février 2013
    Messages
    35
    Détails du profil
    Informations personnelles :
    Nom : Homme Adrien PANEL

    Informations professionnelles :
    Activité : Frontend Developer

    Informations forums :
    Inscription : février 2013
    Messages : 35
    Points : 43
    Points
    43

    Par défaut

    Bonjour,

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

    Code :
    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.

  9. #9
    Responsable Développement Web

    Avatar de Bovino
    Homme Profil pro Didier Mouronval
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    21 255
    Détails du profil
    Informations personnelles :
    Nom : Homme Didier Mouronval
    Âge : 43
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 21 255
    Points : 83 097
    Points
    83 097

    Par défaut

    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 !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  10. #10
    Candidat au titre de Membre du Club
    Inscrit en
    avril 2010
    Messages
    280
    Détails du profil
    Informations forums :
    Inscription : avril 2010
    Messages : 280
    Points : 10
    Points
    10

    Par défaut

    BOnjour,

    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.........

  11. #11
    Membre du Club Avatar de raydenprod
    Homme Profil pro Adrien PANEL
    Frontend Developer
    Inscrit en
    février 2013
    Messages
    35
    Détails du profil
    Informations personnelles :
    Nom : Homme Adrien PANEL

    Informations professionnelles :
    Activité : Frontend Developer

    Informations forums :
    Inscription : février 2013
    Messages : 35
    Points : 43
    Points
    43

    Par défaut

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

  12. #12
    Candidat au titre de Membre du Club
    Inscrit en
    avril 2010
    Messages
    280
    Détails du profil
    Informations forums :
    Inscription : avril 2010
    Messages : 280
    Points : 10
    Points
    10

    Par défaut

    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................


  13. #13
    Modérateur
    Avatar de rodolphebrd
    Homme Profil pro Rodolphe brd
    Indépendant
    Inscrit en
    novembre 2012
    Messages
    2 166
    Détails du profil
    Informations personnelles :
    Nom : Homme Rodolphe brd
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : novembre 2012
    Messages : 2 166
    Points : 5 237
    Points
    5 237

    Par défaut

    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.

  14. #14
    Candidat au titre de Membre du Club
    Inscrit en
    avril 2010
    Messages
    280
    Détails du profil
    Informations forums :
    Inscription : avril 2010
    Messages : 280
    Points : 10
    Points
    10

    Par défaut

    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...)

    Images attachées Images attachées

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •