Ce forum est en partie financé par l’affichage de publicités. Merci de désactiver votre bloqueur de publicités pour nous permettre de continuer à fournir ce service.

Mes questions (newbie en CSS inside !)

Discussion dans 'Développement web' créé par smog, 18 Décembre 2008.

Modérateurs: Nephou
  1. smog

    smog Membre émérite

    Inscrit:
    17 Août 2005
    Messages:
    632
    J'aime reçus:
    44
    Bonjour à tous,

    J'ai suivi les conseils avisés des spécialistes du forum "développement web", un grand merci à eux. J'ai opté pour l'éditeur basique et la construction "propre" de mon site, en utilisant les CSS.
    Evidemment, je n'ai pas assez d'expérience dans ce domaine et plein de "problèmes" apparaissent au fur et à mesure de l'avancée.
    Je me permets donc de poser quelques questions ici...

    Voici mon ébauche (je vais voir pour les liens - utilisation du "roll-over" avec les sprites CSS).

    En attendant, pouvez-vous me dire ce qu'il faut modifier pour :
    1. enlever la ligne noire entre la bannière du haut et la ligne des menus ;
    2. faire disparaître aussi les bandes noires en haut et en bas du conteneur "content" (la partie centrale)...

    Je ne sais pas quel paramètre entraîne ces bandes "non prévues". Une histoire de bordure peut-être ?

    Merci pour votre aide et pour vos conseils !

    Edit : Avec le lien, c'est plus facile !
     
  2. da capo

    da capo abonné absent
    Club MacG

    Inscrit:
    12 Août 2001
    Messages:
    17 332
    J'aime reçus:
    3 497
    Re salut :

    En fait, il faut que tu gardes à l'esprit que chaque navigateur utilise des valeurs par défaut.

    Ces valeurs par défaut ont un impact immédiatement visible pour (notamment) les propriétés border, margin et padding.

    C'est en l'occurence cela qui est à l'origine des "écarts" que tu constates.

    Je t'invite à fixer de façon autoritaire des valeurs pour les propriétés en question en ajoutant :

    * {margin:0; padding:0;border:0;}

    Cela t'obligera à affecter des valeurs partout où tu en auras besoin mais tu garderas ainsi le contrôle de ta mise en forme.

    Pour voir exactement l'effet, tu peux passer en blanc les couleurs de fond des sections (div) concernées.
     
    smog aime ça.
  3. p4bl0

    p4bl0 Membre d’élite
    Club MacG

    Inscrit:
    12 Juillet 2004
    Messages:
    4 772
    J'aime reçus:
    425
    ou faire un petit
    Code (Text):
    /**/ *:hover { outline: 1px solid red; } /**/
    comme ça quand t'as la souris sur un truc un contour apparait (mais pas un border sinon ça change des trucs vu que ça appaissi la boîte d'1px de chaque côté).
    et quand on veut l'enlever suffit de remplacer /**/ par /*/, je m'en sert pour plein de truc de ça c'est pratique avec les fonctions remplacer dans tout un fichier pour activer / désactiver les truc pour du débuggage par exemple :).
     
    smog aime ça.
  4. TibomonG4

    TibomonG4 Vénérable sage
    Club MacG

    Inscrit:
    26 Novembre 2003
    Messages:
    18 290
    J'aime reçus:
    3 938
    En aparté : attention au nom mal orthographié de tes familles de police ;).
     
  5. smog

    smog Membre émérite

    Inscrit:
    17 Août 2005
    Messages:
    632
    J'aime reçus:
    44
    Tibomon -> merci ! J'ai corrigé !

    da capo -> Ca y est, j'ai imposé partout "mes" spécifications. Ca n'a pas changé grand chose, mais au moins j'aurai moins de surprises par la suite.
    J'ai résolu mes soucis : je n'avais pas spécifié de hauteur pour le "header", j'ai donc choisi une valeur identique à celle de l'image-bannière ; par ailleurs j'ai imposé une couleur de fond au "wrapper", alors que je m'étais contenter d'en affecter une au "content". Tout est donc rentré dans l'ordre !

    Pablo -> bonne astuce, ça m'a bien aidé !

    Merci encore à tous, ça devient vraiment un plaisir de "tout faire à la main", je comprends vraiment l'intérêt maintenant. Bon, la quête est semée d'embûches, mais grâce à vous je progresse à grand pas !:zen::zen::up::up:

    Il me reste à gérer les liens-images et à mettre les styles dans un fichier pour passer aux autres pages.
     
    p4bl0 aime ça.
  6. Chamyky

    Chamyky Membre d’élite
    Club MacG

    Inscrit:
    11 Mars 2005
    Messages:
    1 274
    J'aime reçus:
    39
    Je viens de survoler ton code, et j'ai remarqué un petit oubli :
    Tu as oublié ce guillemet :) .
     
  7. smog

    smog Membre émérite

    Inscrit:
    17 Août 2005
    Messages:
    632
    J'aime reçus:
    44
  8. p4bl0

    p4bl0 Membre d’élite
    Club MacG

    Inscrit:
    12 Juillet 2004
    Messages:
    4 772
    J'aime reçus:
    425
    pas seulement, il faut fermer le tag img vu qu'il n'y a pas de </img> :
    Code (Text):
    <a href="spe.htm"><img src="image/tonimage.png" alt="specialite"[B] /[/B]></a>
    :)
     
  9. da capo

    da capo abonné absent
    Club MacG

    Inscrit:
    12 Août 2001
    Messages:
    17 332
    J'aime reçus:
    3 497
    tant qu'on en est à faire des propositions d'amélioration :

    la balise img ne requière pas obligatoirement l'utilisation des attributs width et height ; cependant, on peut conseiller de les renseigner afin que le navigateur "réserve" l'emplacement de l'image avant son téléchargement réel.
    ce sera invisible en haut débit mais évitera parfois des "sauts" lors de la composition des pages avec des connexions au débit plus léger (voire même certains bugs d'affichage)
     
  10. smog

    smog Membre émérite

    Inscrit:
    17 Août 2005
    Messages:
    632
    J'aime reçus:
    44
    Ok, merci pour vos remarques.

    Pour les spécifications de la taille des images, je vais le faire dès que je me décide pour une version définitive des menus (je vais essayer de faire le système des "portes coulissantes" ou des sprites). Mais ça explique peut-être un léger problème avec Firefox (mes images étaient décalées de 1px vers le bas, et donc ressortaient du conteneur "menus" dont la hauteur était pile celle des images).

    Par ailleurs je me rends compte qu'il faut que je fasse un doublon des menus, mais en texte cette fois, pour le cas où les images seraient désactivées... Je viens de tester la désactivation sur Safari et le résultat est... Désastreux. Aucun menu accessible, et, curieusement, aucun texte à la place... J'ai encore une syntaxe erronée dans mes img ?
     
  11. Chamyky

    Chamyky Membre d’élite
    Club MacG

    Inscrit:
    11 Mars 2005
    Messages:
    1 274
    J'aime reçus:
    39
    Je ne sais pas pourquoi, mais Firefox fait tout un peu plus gros que Safari. Il rajoute des marges, des espaces, un peu partout, il faut bien le contraindre pour que ça reste consistent entre lui et Safari.

    Avec la taille spécifiée ça devrait régler le problème de la non-accessibilité. Pour les textes… je crois que Safari ne les affiche pas. Éventuellement les title ? Il me semble que c'est quand même destiné à autre chose.
     
  12. smog

    smog Membre émérite

    Inscrit:
    17 Août 2005
    Messages:
    632
    J'aime reçus:
    44
    salut à tous,

    J'ai voulu tester sur IE sous Windows : et là, catastrophe, rien ne s'affiche. Page blanche de chez blanche...

    Avez-vous une idée du pourquoi ? Peut-être des données d'introduction de la page ?

    Code (Text):
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
     
     
  13. Chamyky

    Chamyky Membre d’élite
    Club MacG

    Inscrit:
    11 Mars 2005
    Messages:
    1 274
    J'aime reçus:
    39
    Tu n'as pas fermé ta balise <title>. Ce qui perturbe fortement IE :) .
    Pour vérifier la bonne écriture de ta page, utilise le validateur du W3C, c'est le genre d'erreurs qu'il trouve.
     
    smog aime ça.
  14. smog

    smog Membre émérite

    Inscrit:
    17 Août 2005
    Messages:
    632
    J'aime reçus:
    44
    Merci à toi !

    Effectivement, je savais, en plus, qu'il y a des "validateurs - vérificateurs"... Ca a été tellement dit à droite et à gauche sur le forum:rose:
    :up: en tous cas !
     
Modérateurs: Nephou
Chargement...

iOccasion - Achetez un produit Apple d'occasion

refurb Apple