[dev@xmlfr.org] RE : Re: RE : Reprise des travaux sur CSS?

Bonsoir,

Vous trouverez des réponses au
fil du texte ci-dessous, et la
feuille de style à la fin.

Cordialement
Xavier Boully

> -----Message d'origine-----
> De : dev-bounce@xmlfr.org
[mailto:dev-bounce@xmlfr.org]
De la
> part de Eric van der Vlist
> Envoyé : dimanche 23 janvier
2005 12:12
> À : dev@xmlfr.org
> Objet : [dev@xmlfr.org] Re:
RE : Reprise des travaux sur
CSS?
>
>
> Bonjour,
>
> Le samedi 22 janvier 2005 à
19:42 +0100, Xavier Boully a
écrit :
> > Bonsoir,
> > Je ne sais pas si votre
> > méthode vous permettra de
> > converger rapidement vers
une
> > solution satisfaisante
pour
> > l'ensemble du site. Vous
> > risquez de rencontrer
encore
> > quelques autres problèmes.
>
> Quelle autre méthode vous
semblerait plus rapide?

Il est préférable pour créer
les styles CSS d'avoir une
vision d'ensemble des designs
et mises en page à obtenir
pour les différentes
catégories de pages du site,
et des contenus à produire par
catégorie.
En l'occurrence, il se peut
que les modifs introduites
maintenant doivent être
remises en cause lorsque vous
allez ajouter du contenu ou
passer à une autre catégorie
de page.

>
> > Concernant le pb actuel, à
> > savoir delta entre Mozilla
et
> > IE concernant la page
donnée
> > en lien voici les
corrections
> > à apporter :
> > - mettre les styles
affectés à
> > html sur body.
> > - retirer margin:0 et
> > padding:0 de body
> > - ne pas spécifier les
> > font-size en terme
générique
> > (small, large...) car
> > l'interprétation varie
trop
> > d'un navigateur à l'autre.
> > Utiliser des unités
> > classiques. Exemple sur h3
> > {font-size: 1em}
>
> Je pensais au contraire que
c'était une bonne pratique de
ne
> pas indiquer de tailles en
absolu de manière à s'adapter
aux
> souhaits de chaque
utilisateur. Est-ce donc
seulement une
> "bonne pratique théorique"?

Non, vous avez parfaitement
raison. Mais em n'est pas une
unité absolue contrairement à
px.
large small... Ne sont pas des
unités du tout, c'est
finalement n'importe quoi.

>
> > - sous IE un contenu dont
la
> > taille est plus grande que
son
> > container étant la taille
du
> > container au lieu de
dépasser.
> > Ceci explique que la
colonne
> > de droite passe sous la
> > colonel de gauche dans le
> > modèle présenté (certaines
> > lignes du contenu sont
trop
> > larges). Comme je ne
connais
> > pas la nature du contenu à
> > introduire en général, je
ne
> > sais s'il faut changer
> > totalement de modèle, ou
> > simplement réduire le
contenu.
> > Dans le second cas il
suffit
> > par exemple de réduire la
> > taille de la font :
> > dl{font-size: 0.7em}
>
> Le contenu est, en général,
généré dynamiquement et ce
n'est
> pas toujours évident de la
réduire. Que voulez-vous dire
par
> changer de modèle?

- soit trouver un container
qui ne se dilate pas avec son
contenu sous IE (à base de
tableaux bien rigides
peut-être)
- soit avoir un contenu plus
souple qui accepte de passer à
la ligne. Vous avez des
<ul><li> actuellement,
pourquoi ne pas les conserver
dans la nouvelle version ?

>
> > Vous trouverez ci-joint
> > style.css modifiée selon
ce
> > qui est écrit au-dessus.
J'ai
> > testé ce style sous
Windows
> > 2k, mozilla 1.7x, opéra
7.54,
> > IE6. Ces 3 navigateurs
> > produisent un résultat
très
> > similaire.
>
> Le gestionnaire de liste
supprime les attachements.
> Pouvez-vous renvoyer cette
feuille de style dans le corps
de
> votre message?
>
> > Autres choses :
> > - IE s'étouffe avec le
script
> > google : pb à voir lorsque
la
> > pub sera réellement
> > opérationnelle
>
> OK. SI cela aide, je peux
éventuellement remplacer
> temporairement le script
Google par une image fixe.
>
> > - Le menu sous forme
d'image
> > (surtout pour exposer un
> > simple texte) est une
erreur
> > fondamentale. Il faut
revoir
> > ça absolument.
>
> Oui. Nous avions fait comme
cela parce que le graphiste
qui a
> conçu le design du site
souhaitait absolument utiliser
une
> police non standard (et
payante). Il faudrait trouver
un jeu
> de polices qui s'en
rapprochent et soient
fréquemment
> présentes sur les
différentes plateformes...

Oui sincèrement il faut faire
un petit effort. Des images
c'est très bien pour
agrémenter, mais pas pour
produire du texte. Il est
toujours possible de réaliser
un menu très design qui
comprenne à la fois textes et
images, c'est certainement
l'idéal, mais d'après moi le
texte en image ce n'est pas
acceptable.

>
> > Cordialement
>
> Merci beaucoup pour ces
conseils!
>
> Eric
>
> > Xavier Boully
> >

Style.css :

body{
  background-color:#8FA391;
  color:#000;
  font-family:"Trebuchet
MS",Verdana,Geneva,Arial,Helve
tica,sans-serif;
  text-align:center;
}

#doc{
  width:750px;
  margin:auto;
  text-align:left
}

.petit-bandeau{
  float:left;
  width:234px;
  height: 64px;
  background-color:#3E5255;
}

.grand-bandeau{
  float:right;
  width:468px;
  height: 64px;
  background-color:#3E5255;
}

#bandeau{
  width: 750px;
  height: 106px;
  float: left;
 
background-image:url('bandeau.
png');
  background-repeat: repeat-x;
  text-align:justify;
}

img {
  border-style:none;
}

#grenouille{
  float:left;
}

#champRecherche {
  float:right;
  margin-right: 5px;
  margin-top: 34px;
  height:38px;
}

img.bandeau {
  vertical-align: middle;
}

#loupe {
  margin-left: 10px;
}

#plan {
  margin-left: 62px;
}

#english {
  margin-left: 62px;
}

#menu {
  float: left;
  width: 750px;
  height: 18px;
  background-color:#3E5255;
  text-align: center;
}

#pub1, #pub2 {
  padding-top: 0px;
  padding-bottom: 4px;
}
#pub3 {
  margin-top: 20px;
  padding-top: 4px;
}
#pub4, #pub5 {
  margin-top: 20px;
  padding-top: 4px;
  padding-bottom: 0px;
}

#contenu {
  width: 750px;
  float: left;
  padding-top: 20px;
}

.col4gauche{
  float:left;
  margin-top:20px;
  width:490px;
  background-color:white;
  border:2px solid #3E5255;
}

.col2droite{
  float:right;
  margin-top:20px;
  width:246px;
  background-color:white;
  border:2px solid #3E5255;
}

h3{font-family: Arial,
Helvetica,
sans-serif;font-size:
1em;font-weight: bold;color:
#3E5255;margin:0;}
dl{font-size: 0.7em}

--
Devenez redacteur <XML>fr et contribuez au developpement du
xml francophone (http://xmlfr.org/infos/redacteurs/) !
Liste de diffusion "dev@xmlfr.org" (http://xmlfr.org).
Cette liste est a votre disposition pour discuter en francais de 
tout sujet technique lie au developpement du site XMLfr.
Pour resilier votre abonnement, envoyez un message contenant 
la commande "unsubscribe" a dev-request@xmlfr.org
(mailto:dev-request@xmlfr.org?Subject=unsubscribe)