Votre question
Résolu

[HTML/CSS] Supprimer des traits dans le CSS

Tags :
  • Codage
  • CSS
  • Arrière plan
  • Navigation
  • Xml
  • Programmation
Dernière réponse : dans Programmation
6 Juillet 2012 09:39:46

Bonjour à tous,

Pendant le codage d'un theme en HTML/CSS, j'ai un problème avec des barres qui ne veulent pas s'effacer :

(Ne pas faire attention aux titres entourés, j'ai réussis à le résoudre)

Voici un bout de code du HTML :
Spoiler
  1. <div id="footer">
  2. <div id="conteneur">
  3. <div id="explore">
  4. <ul>
  5. <h3>Navigation rapide</h3>
  6. <li><a href="../" title="Accueil" class="first-child">Accueil</a></li>
  7. <li><a href="../forum" title="Forum">Forum</a></li>
  8. <li><a href="../archives" title="Articles">Articles</a></li>
  9. <li><a href="../portfolio" title="Portfolio">Portfolio</a></li>
  10. <li><a href="../contact" title="Contact">Contact</a></li>
  11. <li><a href="../aide" title="Aide" class="last-child">Aide</a></li>
  12. </ul>
  13. </div>
  14.  
  15. <div id="article">
  16. <ul>
  17. <h3>Liens utiles</h3>
  18. <li><a href="#" class="first-child">Premier lien</a></li>
  19. <li><a href="#">Deuxième lien</a></li>
  20. <li><a href="#">Troisième lien</a></li>
  21. <li><a href="#" class="last-child">Quatrième lien</a></li>
  22. </ul>
  23. </div>
  24.  
  25. <div id="forum">
  26. <h3>Derniers posts sur le forum</h3>
  27. <p>
  28. <span>01</span>
  29. Derniers sujet actif
  30. </p>
  31. <p>
  32. <span>02</span>
  33. Avant-dernier sujet actif
  34. </p>
  35. <p>
  36. <span>03</span>
  37. Avant avant-dernier sujet actif
  38. </p>
  39. </div>
  40. </div>
  41. </div>


Et voici le code du CSS :
Spoiler
  1. #footer {
  2. background: url(./images/footer_bg.jpg) repeat-x;
  3. overflow: hidden;
  4. height: 320px;
  5. }
  6.  
  7. #conteneur {
  8. width:1000px;
  9. margin:auto;
  10. background: url(./images/deco.jpg) repeat-x;
  11. background-position: 0px 30px;
  12. }
  13.  
  14. #explore {
  15. float: left;
  16. width: 200px;
  17. margin-right: 10px;
  18. position:absolute;
  19. }
  20.  
  21. #forum {
  22. float: right;
  23. width: 450px;
  24. }
  25.  
  26. #article {
  27. margin-left: 250px;
  28. width:200px;
  29. margin-right: 400px;
  30. position:absolute;
  31. }
  32.  
  33. #footer a {
  34. text-decoration: none;
  35. }
  36.  
  37. #footer h3 {
  38. color: #fff;
  39. font-family: Segoe UI;
  40. font-size: 18px;
  41. font-weight: normal;
  42. line-height: 22px;
  43. }
  44.  
  45. #footer p {
  46. font-family: Myriad Pro;
  47. font-size: 13px;
  48. text-transform: uppercase;
  49. color: #b5b5b5;
  50. height: 42px;
  51. border-top: 1px solid #353535;
  52. border-bottom: 1px solid #000;
  53. margin: 0;
  54. }
  55.  
  56. #footer p:first-child {
  57. border-top:0px;
  58. }
  59.  
  60. #footer p:last-child {
  61. border-bottom:0px;
  62. }
  63.  
  64. #footer p span {
  65. font-family: Segoe UI;
  66. font-size: 24px;
  67. color: #373737;
  68. float: left;
  69. line-height: 42px;
  70. margin: 0 15px 0 0;
  71. }
  72.  
  73. #footer ul li {
  74. list-style: none;
  75. margin: 0px;
  76. font-family: Myriad Pro;
  77. font-size:[/spoiler] 13px;
  78. text-transform: uppercase;
  79. line-height: 25px;
  80. border-top: 1px solid #353535;
  81. border-bottom: 1px solid #000;
  82. }
  83.  
  84. #footer ul li a {
  85. color: #b5b4b4;
  86. display: block;
  87. }
  88.  
  89. #footer ul li a:hover {
  90. color: #d7d5d5;
  91. }
  92.  
  93. #footer ul li:first-child {
  94. border-top:0px;
  95. }
  96.  
  97. #footer ul li:last-child {
  98. border-bottom:0px;
  99. }


Merci d'avance pour votre aide :) 
A bientôt

Autres pages sur : html css supprimer traits css

Meilleure solution

a c 232 L Programmation
6 Juillet 2012 09:57:48

Salut,

Il manque un peu de choses dans ton code HTML (genre le <div id="footer"> et <ul>... du coup ça applique pas le style si on récupère ton code...)

Bref, tu appliques la bordure aux "li", et tu essaies de l'enlever sur les "a", donc forcément ça marche pas bien :) 

Edit: et tu as des sélecteurs en CSS pour sélectionner le premier et le dernier élément.
  1. #footer ul li:first-child {
  2. border-top:0px;
  3. }
  4. #footer ul li:last-child {
  5. border-bottom:0px;
  6. }
partage
6 Juillet 2012 10:12:09

Merci pour ta réponse, très rapide en plus. Maintenant ça marche pour le "last-child" mais pas pour le "first-child", une idée ? :/ 
m
0
l
Contenus similaires
a c 232 L Programmation
6 Juillet 2012 10:16:34

J'avais modifié ma réponse, je sais pas si tu l'avais vu ou pas.
Ca marche bien chez moi... sauf si j'ai loupé un truc
m
0
l
6 Juillet 2012 10:19:33

J'ai pris ton code que j'ai remplace (d'ailleurs, j'ai aussi mis à jour les fichiers plus haut), et chez moi, la barre blanche en haut et toujours présente :/ 

Edit : J'ai aussi un problème avec "position:absolute" qui fait disparaître une barre prenant toute la largeur

m
0
l
a c 232 L Programmation
6 Juillet 2012 11:12:14

Ca marche pas le first-child parce que tu as mis un <h3> avant le premier li. Du coup le h3 est le 1er enfant.
Et de toute manière, on ne met pas de <h3> directement dans un <ul>.

Pour ton autre problème de barre, je sais pas, j'ai pas ton code qui va avec
m
0
l
6 Juillet 2012 11:35:08

Pour l'histoire de first et last-child, tout fonctionne merci beaucoup.

Pour la barre, c'est l'id conteneur (qui a l'image) et l'id article (qui pose problème lorsqu'on lui met un "position:absolute"), ils sont présents dans les fichiers du premier post.
m
0
l
a c 232 L Programmation
6 Juillet 2012 11:41:02

N'ayant pas l'image, c'est compliqué :) 
Je met un fond de couleur à la place, mais ça suffit peut être pas
T'as pas un lien vers le fichier en ligne ?
m
0
l
a c 232 L Programmation
6 Juillet 2012 12:20:49

Tu ne devrais pas utiliser de position:absolute. C'est le mal :-D
Enfin, non c'est pas le mal, mais c'est pas ça que tu veux dans ton cas.

Dans ton cas, tu mets les 3 blocs en float:left, et tu arranges les marges vu que ça sera dépendant du bloc à gauche.
(tu peux aussi laisser le 3ème en float:right si tu veux)

Et après des float, il faut mettre un clear:both pour que le parent (#conteneur) se mette à la bonne taille.
  1. <div style="clear:both;"></div>


Il te suffira d'arranger quelques tailles, distances et ça devrait le faire.
m
0
l
6 Juillet 2012 12:56:12

Super, tout fonctionne, merci :) 
m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS