Retour à Forum de site web

Besoin d'aide haut Nav image d'arrière-plan est coupé

  • AlvinMedia
  • Born
  • Born
  • No Avatar
  • Inscription: Aoû 24, 2011
  • Messages: 1
  • Status: Offline

Message Août 24th, 2011, 1:04 pm

Salut

Im travaillant sur une barre de navigation supérieure créé en CSS. J'ai créé un fond de le 2 onglet images. Un pour l'état bloqué et un état stationnaire.

Sur certains des onglets partie de l'image d'arrière-plan a été coupée verticalement. Le coupé ne fonctionne pas lorsque le texte est placé sur 2 lignes. Comment faire pour que les images de fond de taille fixe.

Voici le code css et j'attache une image.

Merci,
Attachments:
Screen shot 2011-08-24 at 4.02.41 PM.png

CSS Code: [ Select ]
@charset "UTF-8";
/* CSS Document */
 
/*body {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 13px;
color: #00136c;
}*/
 
#nav{  
  width:100%;  
  height:100%;  
  background: url(images/topnav_nohover.png) no-repeat left top;
  }
 
#nav {
   width: 100%;
   height: 100%;
   float: left;
   margin: 0 0 3em 0;
   padding: 0;
   list-style: none;
   background: url(images/topnav_hover.png) no-repeat left top;
   border-bottom: 2px solid #00136c;
   border-top: none;
   }
   
#nav li {
   float: left;
   width: 95px;
   height: 40px;
}
   
#nav li a {
   display: block;
   padding: 5px 15px;
   text-decoration: none;
   font-weight: none;
   font-family: Arial, Verdana, Helvetica, sans-serif;
   font-size: 13px;
   text-align: center;
   border-right: 1px solid #fff;
   border-bottom: none;
   background:url(images/topnav_nohover.png) no-repeat left top;
   padding-bottom:none;
   }
   
#nav li a:hover {
   border-bottom:none;
   border-left:0px;
   border-right:0px;
   border-top:0px;
   color:#fff;
   display:block;
   font-family:Arial, Helvetica, Sans-Serif;
   font-size:13px;
   padding: 5px 15px;
   text-decoration:none;
   background-image:url(images/topnav_hover.png);
   }
   
   /*div:hover { background:url(/images/stuff.gif) }
  1. @charset "UTF-8";
  2. /* CSS Document */
  3.  
  4. /*body {
  5. font-family: Arial, Verdana, Helvetica, sans-serif;
  6. font-size: 13px;
  7. color: #00136c;
  8. }*/
  9.  
  10. #nav{  
  11.   width:100%;  
  12.   height:100%;  
  13.   background: url(images/topnav_nohover.png) no-repeat left top;
  14.   }
  15.  
  16. #nav {
  17.    width: 100%;
  18.    height: 100%;
  19.    float: left;
  20.    margin: 0 0 3em 0;
  21.    padding: 0;
  22.    list-style: none;
  23.    background: url(images/topnav_hover.png) no-repeat left top;
  24.    border-bottom: 2px solid #00136c;
  25.    border-top: none;
  26.    }
  27.    
  28. #nav li {
  29.    float: left;
  30.    width: 95px;
  31.    height: 40px;
  32. }
  33.    
  34. #nav li a {
  35.    display: block;
  36.    padding: 5px 15px;
  37.    text-decoration: none;
  38.    font-weight: none;
  39.    font-family: Arial, Verdana, Helvetica, sans-serif;
  40.    font-size: 13px;
  41.    text-align: center;
  42.    border-right: 1px solid #fff;
  43.    border-bottom: none;
  44.    background:url(images/topnav_nohover.png) no-repeat left top;
  45.    padding-bottom:none;
  46.    }
  47.    
  48. #nav li a:hover {
  49.    border-bottom:none;
  50.    border-left:0px;
  51.    border-right:0px;
  52.    border-top:0px;
  53.    color:#fff;
  54.    display:block;
  55.    font-family:Arial, Helvetica, Sans-Serif;
  56.    font-size:13px;
  57.    padding: 5px 15px;
  58.    text-decoration:none;
  59.    background-image:url(images/topnav_hover.png);
  60.    }
  61.    
  62.    /*div:hover { background:url(/images/stuff.gif) }
Moderator Remark: Added the [css][/css] bbcode around the CSS. Please remember to use bbcode on any code you post. Thanks!
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Août 24th, 2011, 1:04 pm

  • sherma
  • Silver Member
  • Silver Member
  • Avatar de l’utilisateur
  • Inscription: Juin 13, 2011
  • Messages: 127
  • Status: Offline

Message Août 24th, 2011, 3:48 pm

Bonjour, j'espère que quelqu'un qui sait ce que theyre faisant sera ainsi que bientôt à sortir le comprendre, mais sans regarder le code réel que vous utilisez pour cela appeler à partir de la feuille de style, j'ai personnellement, ne peux pas dire.

Je demanderais de bien quelle taille sont les images ? Je veux dire qu'ils sont (ex : 150px x 150px et révélant tout simplement pas entièrement sans la deuxième ligne du contenu, ou qu'ils sont plus petits graphiques qui sont conçus pour répéter x, y, au besoin ?

Ma seule autre question est cela se produit-il dans tous les navigateurs ou seulement certaines plus comme IE ? (bonne chance!)
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de l’utilisateur
  • Inscription: Déc 20, 2002
  • Messages: 8934
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Message Septembre 6th, 2011, 4:46 pm

Peu tard à répondre, j'espère que vous déjà figurd it out. Je crois que tout ce que vous devez faire pour résoudre ce problème est défini un min-height sur le #nav li un bloc. Donc ajouter quelque chose comme :

CSS Code: [ Select ]
#nav li a {
   min-height:50px;
}
  1. #nav li a {
  2.    min-height:50px;
  3. }


Vous pouvez aussi simplement définir une hauteur fixe ainsi. Je crois que c'est probablement la seule raison pour laquelle l'arrière-plan n'est pas montrant. Laissez-nous savoir si cela a aidé.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • Peepsmam
  • Born
  • Born
  • No Avatar
  • Inscription: Oct 31, 2012
  • Messages: 1
  • Status: Offline

Message Octobre 31st, 2012, 8:18 am

Essayez de faire votre marge supérieure un entier négatif. A fonctionné pour moi.

Télécharger

margin-top:-20px ;

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 4 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 102 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC