[Résolu] Saut de ligne / CSS

[nedkcinnay]

Bonjour à tous,

Je suis en train de travailler un peu sur mon site perso, et j'essaye de mettre en pratique du mieu que je peut ce que j'apprend à la n'école .. j'ai choisit donc pour l'instant d'appliquer un peu de CSS à mon site web, j'ai quelque base (grace au cours) mais suis encore débutant ( du au manque de pratique) ...

Bref (c'était pour situer mon niveau :-), j'ai donc opté pour ma page accueil.php et une page style.css liée. Pour résumer mon problème, voilà ce que j'ai dans ma css pour mon texte principal :

.texte1

{

text-align:left;
color:#000000;
width:760px;
background-color:#FFFFFF;
font-family: Garamond; 
font-size: 12pt; 
padding:0px 20px 0px 20px

}

et j'obtient ceci

et voilà le code de ma page Accueil

<td>
<h1 class="texte1">Voilà le problème, c'est la ligne au dessus et au dessous de ce texte appartenant à class "texte1" que je n'arrive pas à supprimer</h1>
</td>

Donc les lignes au dessous et au dessus du texte que vous voyez sur l'image me pose probleme, est ce que cela peu venir de la balise utilisé ? (h1 ? div ? p ?) j'ai essayé de la changer mais sans succès.

Merci de votre aide !!

Kinay

[Yangzebul]

.texte1{
  /* text-align: left; inutile par défaut le navigateur interpretera tes pages en ltr */
  color: #000; /* forme réduite */
  width: 760px;
  background: #FFF; /* shorthand + forme réduite */
  font: 12px Garamond, sans-serif; /* short hand + fallback sur une famille typographique générique */ 
  padding: 0 20px; /* attention à ne pas oublier les points virgules css est très strict
  + forme réduite cf. système de l'horloge + pas besoin d'unité devant un zéro car ca fera toujours zéro */
  margin: 0;
  }

Globalement quelque conseils :

- évite d'étaler trop tes instructions et tes selecteurs, tu gagnera beaucoup en lisibilité. Il vaut mieux faire des déclarations compactes et mettres tes espaces entres, pas à l'intérieur. De plus indente tes instructions, même si css permet très peu d'imbrications ça te permet de repérer très vite tes différents selecteurs.

- apprends les formes réduites (héxa miroir et horloge) et les shorthand (une instruction qui regroupe toute une famille).

- donne des noms de classes/id explicites ET sémantiques "texte1" est une très mauvaise pratique.

- abstient toi de d'utiliser l'unité pt pour du screen

- spécifie toujours des fallbacks pour tes typos.

- utilise un global margin reset cela t'évitera bien des soucis et des redondances :

*{

  margin: 0;

  padding: 0;

  }

[nedkcinnay]

Je cache pas que c'est un peu compliqué pour moi car il y a des termes que je ne connait pas mais je vais cherché, en tous les cas merci pour les conseils.

Donc le problème viendrai du manque de rigeur de la rédaction ? fin je veu dire qu'en simplifiant et en améliorant la rédaction du code je peut régler le problème ?

[Yangzebul]

Non, là ton problème vient très clairement du fait que tu n'as pas réinitialisé tes marges. La plupart des élèments ont des margins et paddings par défaut, donc il convient de remettre tout celà à zéro quand on démarre un projet.

Après les seules véritables erreurs que tu as faites sont l'oubli du point virgule et le nom "bateau" que tu as donné à ta classe.

Tout le reste ce sont des conseils pour acquérir les bons réflexes et les bonnes pratiques : ce n'est pas vital en soi.

Désolé si je ne suis pas tout le temps très clair ou un peu "télégraphique", le truc c'est que j'en fait plus de 8/9h par jour au boulot alors j'ai l'habitude d'aller vite et de parler avec des gens qui connaissent le jargon technique.

[nedkcinnay]

Désolé si je ne suis pas tout le temps très clair ou un peu "télégraphique", le truc c'est que j'en fait plus de 8/9h par jour au boulot alors j'ai l'habitude d'aller vite et de parler avec des gens qui connaissent le jargon technique.

Merci c'est trés bien j'ai bien compris mes erreurs :) c'est pas facile d'être débutant mais quand on s'y met on apprend vite ... et avec des bon conseils alors là !!!!

Bref merci pour les infos, je reprend tous ca et j'essaye d'être plus rigoureux et j'vous dit ce que ca donne !!!!

[Bab00n]

impec topic Résolu

[BreizFenrir]

Juste un détail en complément de ce que Yangezbul t'a déjà dit, mais concernant le code HTML fournit en exemple ce coup-ci : tu as utilisé une balise <h1> pour, visiblement du texte qui n'avait rien d'un titre (ou alors tu as juste remplacé ton titre par un texte explicatif, auquel cas ignore ma remarque). Or c'est ce à quoi servent les balises <hX> : titrer des sections, sous-sections, sous-sous-sections... bref, structurer le contenu de la page d'un point de vue informationnel. Il y a un outil très bien sur le site du W3C pour vérifier un bon usage de cette famille de balises (en plus de la détection de tout un tas de méta-informations) : le Semantic Extractor. Ça n'est pas un outil primordial mais ça peut être utile.

Si par contre j'ai vu juste, et que tu voulais simplement une zone blanche où mettre les éléments du contenu de ta page, utilise plutôt la balise de bloc générique <div>.

Bonne chance pour le développement de ton site !

[nedkcinnay]

Merci,

Effectivement il s'agissait juste d'un texte pour exemple, mais merci des infos.

@pluche