#1 - Le dimanche 30 décembre 2007 à 01:05, par lise

Moi jvois tout bien ^^

#2 - Le dimanche 30 décembre 2007 à 15:06, par Sapho

Elle chie des bulles, elle se place au-dessus d'un cadre dont on voit le bord inférieur et elle est légèrement plus basse que d'habitude. Dju, je t'aiderais bien mais suis trop full full à bosser nuit et jour. Pendant mes rares pauses, j'ai besoin de m'éloigner de l'écran donc pff... Si ça chie toujours d'ici mi janvier là j'aurai au moins un ou deux jours de congé. En attendant tu pourrais la faire passer en background de la balise <h1 ou carrément la <div au lieu d'une image incrustée (<img src=...). Du reste, check aussi la css on ne sait jamais (sauvegarde avant heing).

Bisou par là, j'y retourne, j'ai une enquête de groupe à faire pff...

#3 - Le dimanche 30 décembre 2007 à 15:10, par Sapho

Ah mais zut: BONNE ANNEE!

:D
(La fêter n'est pas dans mon programme donc j'ai tendance à la zapper, déjà que je n'ai envoyé aucune carte de vœux cette année, honte sur moi.)

(Au fait, je suis sous Firefox si ça peut t'aider pour la bannière: teste toujours l'affichage sous les deux navigateurs, parfois les surprises sont à hurler...)

#4 - Le dimanche 30 décembre 2007 à 15:15, par Sapho

Rhoo à vouloir faire vite j'oublie de te dire que si tu la fais passer en background (via les propriété css) tu dois en préciser la hauteur et la largeur sinon ça risque de bien cafouiller, avec les propriétés width et height. Le truc aussi, c'est que tu ne pourras plus y insérer de lien vers ta page d'accueil si tu laisse la div vide (sans texte ni image incrustée). Et puis, laisse-lui le même nom de fichier, ainsi tu n'auras plus à toucher au code lorsque tu en changeras.

#5 - Le lundi 31 décembre 2007 à 10:15, par Claire

Moi je suis sous IE et je vois tout nickel =)
Bonne année en avance aussi!!

#6 - Le mercredi 2 janvier 2008 à 18:34, par Sapho

Bon, même après 14 heures d'affilée de boulot, je ne peux pas m'en empêcher: j'ai été zieuter ta feuille de style et j'y vois deux trois choses à tester:

1) /* "Headings" */
h1 {
font: 40px Verdana, Geneva, Arial, Helvetica, sans-serif;
padding-top: 45px;
text-align: center;

Le padding-top est à 45px!! D'où la probable balade de la bannière vers le bas (elle se trouve dans les balises de <h1>:

<h1><a href="/enfin/index.php/"><img src="/enfin/themes/OceanLeavesPerso2/images/masthead.jpg" alt="Ménille Avénale" /></a></h1>

2) Tu as oublié de mentionner "px" dans le heading pour le margin, ça peut fiche la grouille (passe ta feuille au validateur CSS, c'est encore mieux pour éviter ces erreurs!):

/* L'entête
*******************************************************************************/
#top{
height: 243px;
}

#top h1{
height: 243px;
margin: 10;
padding: 0;
}

3) Précise un peu le width de ton top h1 histoire que ça s'accorde à ta bannière pour tester... On ne sait jamais...

Super outils:
- validateur XHTML (pour ton template) validator.w3.org/check?ur...
- validateur CSS (pour ta feuille de style)
jigsaw.w3.org/css-validat...

Bon amusement et... Beaux nénés 2008!

#7 - Le mercredi 2 janvier 2008 à 18:47, par Sapho

J'oubliais! Pour mettre à zéro tous les navigateurs et augmenter les chances qu'ils affichent tous la même chose (en plus de la validation XHTML et CSS), il faut ajouter en début de CSS juste avant body{ ceci:

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

ce qui donne chez toi:

/* Les éléments HTML en général
*******************************************************************************/
* { margin: 0; padding: 0; border: 0; }

body{
margin: 20px 0;
padding: 0;
background-color: #F5FBF5;
font: 12px/20px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #17201b;
}

Lien pas mal d'aide:
petit.dotclear.net/pages/...

#8 - Le mercredi 2 janvier 2008 à 19:01, par Sapho

Ok, je vois autre chose qui cloche (je viens de zieuter les dimensions de ta bannière...):

Tu précises dans ta feuille de style que top h1 doit être haut de 243px

/* L'entête
*******************************************************************************/
#top{
height: 243px;
}

#top h1{
height: 243px;
margin: 10;
padding: 0;
}

Or, ta bannière est haute de 317px, est-ce fait exprès?
Tiens teste ceci (sauve ton ancien fichier avant hein):

Portion en haut de fichier css:
------------------------------------------

/* "Headings" */
h1 {
font: 40px Verdana, Geneva, Arial, Helvetica, sans-serif;
padding-top: 0px; /* ceci est un commentaire, il ne sera pas pris en compte: ton #page lui donne déjà un padding de 2px, j'ai viré le 45 sinon cet écart de malade du bord */
text-align: center;
}

Portion plus bas dans ta css:
----------------------------------------

/* L'entête
*******************************************************************************/
#top{
width: 850px;
height: 317px;
}

#top h1{
margin: 0px; /* ceci est un commentaire, il ne sera pas pris en compte: remise à zéro px car ta page fait 850px de largeur et tu as ajouté un margin de 10px ce qui sera mal calculé par IE en 890px et donc catastrophe */
padding: 0;
}
-----------------------------------

Bon, dis-nous quoi hein.
Et là, j'arrête d'envahir tes commentaires. :D

#9 - Le mercredi 2 janvier 2008 à 19:03, par Sapho

La fatigue me joue de vilains tours, erreta du second com: "car ta page fait 850px de largeur et tu as ajouté un margin de 10px ce qui sera mal calculé par IE en 870px et donc catastrophe". Bref catastrophe quand même huhu. Bon suffit maintenant, je m'en vais, na.

#11 - Le vendredi 4 janvier 2008 à 23:50, par Sapho

Yeah, la bannière est impeccable maintenant, bravo!!

En ce qui concerne les erreurs, cela vaut mieux dans la mesure où on espère trouver plus rapidement une erreur d'affichage s'il y'en a une... Par exemple, dans le forum d'aide de Dotclear, c'est la première chose à laquelle renvoient les modos quand quelqu'un expose son problème et j'avoue que dans mon cas, ce fut salvateur.

Bon, maintenant pour mitiger un peu la question, certaines ne posent pas nécessairement problème mais celles-là, il vaut mieux faire une recherche d'abord (par exemple, les propriétés pour arrondir les bords des div, "-moz-border-radius", qui ne fonctionne pas sous IE, ainsi les articles de mon blog sous IE ont des bords normaux et moches, or sous FF ils sont arrondis que c'est joli).

Certains tutoriels se consacrent entièrement au sujet et expliquent comment corriger les erreurs trouvées par le validateur XHTML. Tu peux facilement en trouver à partir d'une simple recherche sur Google (mon ancien pc n'est toujours pas remis sur "pieds", je n'ai plus accès à mes dossiers de marque-pages où j'en au stocké pas mal).

Et oui, malheureusement beaucoup de thèmes tout prêts sont négligés à ce niveau, c'est bien dommage... Et c'est bien pour ça que je les bidouille moi-même maintenant!

Tracasse va, là tout roule sur FF et IE aussi apparemment! Cependant, sache qu'à l'avenir, tu sauras par où commencer à chercher (il ne s'agit pas de devoir analyser et corriger entièrement les erreurs trouvées par le validateur mais les plus simples et évidentes comme ce ";" qui manquait par exemple; chose qui m'est déjà arrivée, un petit signe en plus ou en moins et tout fout le camp, on passe des heures à chercher en vain et puis le log du validateur nous le dit, ouf!).