Mes questions (newbie en CSS inside !)

smog

smog

Membre actif
17 Août 2005
717
93
50
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 !
 
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.
 
  • J’aime
Réactions: smog
da capo a dit:
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.
Cliquez pour agrandir...
ou faire un petit
Bloc de code: 
/**/ *: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 :).
 
  • J’aime
Réactions: smog
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.
 
  • J’aime
Réactions: p4bl0
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)
 
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 ?
 
smog a dit:
…Mais ça explique peut-être un léger problème avec Firefox (mes images étaient décalées de 1px vers le bas…
Cliquez pour agrandir...

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.

smog a dit:
…Aucun menu accessible, et, curieusement, aucun texte à la place... J'ai encore une syntaxe erronée dans mes img ?
Cliquez pour agrandir...

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.
 
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 ?

Bloc de code: 
<!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">
 
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 !
 
Haut Bas
Back