Retour à Forum de site web

CSS avec Firefox émission Liste non ordonnée

  • devilwood
  • Silver Member
  • Silver Member
  • Avatar de l’utilisateur
  • Inscription: Nov 18, 2007
  • Messages: 429
  • Status: Offline

Message Janvier 29th, 2009, 9:32 am

Les liens dans Firefox Obtenir affichée inférieure à la superficie (Aire des couleurs d'arrière-plan), où ils devraient l'être. IE, les liens sont alignés où ils sont supposé être et elle fonctionne bien. Firefox affiche les liens mais ils sont plus proches du contenu plutôt que sur la couleur de fond fixées par la navigation.


Code: [ Select ]
body{
margin:0;
width:800;
background-image: url(bg.jpg);
background-repeat: repeat-x;
background-color: #4e361e;
}

#page {
width: 800px;
padding-bottom:5px;
background-color:#fff;
margin: 0 auto;
border-top: 5px #999967 solid;
border-bottom: 5px #999967 solid;
display:table;
background-image: url(body2.jpg);
}

#header_img{
width:800px;
height:110px;
background-image:url(headerimg.jpg);
}

#navigation {
background-color:#6d6d4a;
border-top: 1px #999967 solid;
border-bottom: 1px #999967 solid;
border-left: 2px #999967 solid;
border-right: 2px #999967 solid;
    float: left;
    left: 0px;
    width: 99.5%;
    height: 20px;
}
#navigation ul {
    text-align: center;
}

#navigation ul li {
    display: inline;
    margin-right: .75em;
}
#navigation ul li a{
    font: 14px/18px Arial, Helvetica, sans-serif;
    color: #48231A;
    text-decoration: none;
}
#navigation ul li.last {
    margin-right: 0;
}
  1. body{
  2. margin:0;
  3. width:800;
  4. background-image: url(bg.jpg);
  5. background-repeat: repeat-x;
  6. background-color: #4e361e;
  7. }
  9. #page {
  10. width: 800px;
  11. padding-bottom:5px;
  12. background-color:#fff;
  13. margin: 0 auto;
  14. border-top: 5px #999967 solid;
  15. border-bottom: 5px #999967 solid;
  16. display:table;
  17. background-image: url(body2.jpg);
  18. }
  20. #header_img{
  21. width:800px;
  22. height:110px;
  23. background-image:url(headerimg.jpg);
  24. }
  26. #navigation {
  27. background-color:#6d6d4a;
  28. border-top: 1px #999967 solid;
  29. border-bottom: 1px #999967 solid;
  30. border-left: 2px #999967 solid;
  31. border-right: 2px #999967 solid;
  32.     float: left;
  33.     left: 0px;
  34.     width: 99.5%;
  35.     height: 20px;
  36. }
  37. #navigation ul {
  38.     text-align: center;
  39. }
  41. #navigation ul li {
  42.     display: inline;
  43.     margin-right: .75em;
  44. }
  45. #navigation ul li a{
  46.     font: 14px/18px Arial, Helvetica, sans-serif;
  47.     color: #48231A;
  48.     text-decoration: none;
  49. }
  50. #navigation ul li.last {
  51.     margin-right: 0;
  52. }





Code: [ Select ]

<body>


<div id="page">
    
    
        <div id="header">
            <div id="header_img">&nbsp;</div>
        </div>
    <div id="navigation">
    <ul>    
                            <li><a href="main.html" target="_self">Home</a></li>
                    <li><a href="about.html" target="_self">About</a></li>            
                    <li><a href="projects.html" target="_self">Special Projects</a></li>
                    <li><a href="news.html" target="_self">News and Events</a></li>
                            
     </ul>
</div>



<div content.....>

....</div></body>
  2. <body>
  5. <div id="page">
  6.     
  7.     
  8.         <div id="header">
  9.             <div id="header_img">&nbsp;</div>
  10.         </div>
  11.     <div id="navigation">
  12.     <ul>    
  13.                             <li><a href="main.html" target="_self">Home</a></li>
  14.                     <li><a href="about.html" target="_self">About</a></li>            
  15.                     <li><a href="projects.html" target="_self">Special Projects</a></li>
  16.                     <li><a href="news.html" target="_self">News and Events</a></li>
  17.                             
  18.      </ul>
  19. </div>
  23. <div content.....>
  25. ....</div></body>



Un grand merci à l'avance.
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Janvier 29th, 2009, 9:32 am

  • devilwood
  • Silver Member
  • Silver Member
  • Avatar de l’utilisateur
  • Inscription: Nov 18, 2007
  • Messages: 429
  • Status: Offline

Message Février 17th, 2009, 10:37 am

J'ai juste pris les <ul> et a changé ma css et maintenant, il fonctionne très bien dans firefox. Vous ne savez pas pourquoi le <ul> était là, tout semble theres beaucoup de menus horizontaux css là qui font que, mais je ne pouvais pas le faire pour les afficher la navigation div. Les liens ont été affichées un peu plus loin sur la page dans Firefox. J'ai pensé qu'il devait être une question de remplissage de quelque sorte que la cause, mais je n'ai jamais compris ça. Je viens de la <ul> supprimé.
  • graphixboy
  • Control + Z
  • Mastermind
  • Avatar de l’utilisateur
  • Inscription: Juil 11, 2005
  • Messages: 1828
  • Loc: In the Great White North
  • Status: Offline

Message Février 17th, 2009, 10:40 am

autrement changer le type d'affichage li inline-block aurait probablement fixé la question.
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • devilwood
  • Silver Member
  • Silver Member
  • Avatar de l’utilisateur
  • Inscription: Nov 18, 2007
  • Messages: 429
  • Status: Offline

Message Février 17th, 2009, 1:53 pm

Merci pour la réponse. Mauvais jour mon code pour que je puisse le faire de deux façons:) Je croyais que je jouais avec les options d'affichage mais je ne crois pas que j'ai utilisé le trait d'union inline-block attribut.
  • graphixboy
  • Control + Z
  • Mastermind
  • Avatar de l’utilisateur
  • Inscription: Juil 11, 2005
  • Messages: 1828
  • Loc: In the Great White North
  • Status: Offline

Message Février 17th, 2009, 2:22 pm

yeah que l'un est devenu mon ami. Surtout pour des cas comme celui que vous avez décrites avec positionnée ULS
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 5 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 142 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