SVG logo et CSS Browser Selector

Bonjour à tous,

Tout a commençé l'orsque j'ai voulu intégrer mon logo au format SVG.
J'ai du bidouiller pour adapter un tuto trouvé sur un autre site.
Il faut que j'utilise max-width sinon le logo reste petit.

Il a donc fallu que je décale d'autre tag et là je m'en sors plus, j'ai déjà plus beaucoup de cheveux...

Je me demandais si il y avait une âme charitable pour m'aider :calim2:

Malgré CSS Browser Selector.php le rendu est une vraie catastrophe.
Avec Chrome c'est le moins moche.

rendu lien cassé

Merci

Bonjour,

Il y un rendu correct sur FF (uniquement pour le svg) mais pas sur Safari (MAc), je n'ai pas regardé en détail mais regardez du côté des préfixes peut-être.

Par contre il y a du ménage à faire de tous vos codes.

Le Html n'est pas trop cohérent.
17 feuilles de styles et 24 scripts :calim2:

Merci d'avoir jeter un oeil.
En effet le site démarre tout juste, 15 jours que je dors peu...
Je suis loin de vouloir optimiser pour le moment.

Pour ce qui est du rendu FF je te confirme que ce n'est pas ok.

En fait, je ne veux pas de la margin/padding tout en haut.
J'arrive pas à voir d'ou ça vient.

Puis ya le menu aussi, même remarque, il devrait être juste sous le diapo.

C'est vrai que le SVG s'affiche pas trop mal (...) mais à quel prix!
(Le HTML c'est du Joomla 3.0.3/Gantry template)

J'ai testé sur W3C CSS Validation service the result = 820 erreurs !! - lien cassé
C'est grave docteur?
Elle proviennent essentiellement du Gantry Framework.
Est-ce normal autant d'erreurs?

Encore merci Rodolphe

Il y a beaucoup d'erreurs de syntaxe.

Concernant le svg et le slideshow. Faire un float left pour les deux.

Il y a des display table, positions relatives imbriquées qui ne vont pas ensemble.

Le svg m'a l'air bien grand pour la place qu'il occupe!

Isolez vos éléments et section par section nettoyez cela petit à petit puis repostez des questions précises. Parce que là à moins d'y passer beaucoup de temps (je viens d'y passer au moins une demi-heure) je ne pourrai pas vous aider plus.

Super, c'est vraiment sympa d'avoir passé autant de temps pour moi.
Je prend note de vos remarques. Je vais m'y pencher now.

Désolé pour mon manque de précision, chose qui n'est pas mon habitude.
Mais j'avoue également que le CSS et moi...on a jamais été pote. Jamais jamais.
Je sais pas pourquoi mais j'ai tjrs eu du mal avec. Ça me passera j'espère.
Je vais y remédier dans mon prochain post (imprécision).

Vous êtes un chef Rodolphe. Bonne soirée :ccool:

Je ne sais pas si c'est rassurant mais le site www.gantry-framework.org génère 251 erreurs de CSS sur ce même validator.
"Ils" font pourtant un boulot de dingue et le rendu est plutôt bien.
Comment expliquer ceci?

Non

J'ai 2 erreurs sur le validateur: http://validator.w3.org/check?uri=ht...Inline&group=0

D'abord travaillez votre code puis obtenez le rendu que vous souhaitez et enfin seulement passer le tout au validateur.

Effectivement, 249 erreurs de différences ce n'est pas rien.
Je vois que vous avez fait le test sous le "profil" HTML5 (j'avais choisi sans "profil").
Ca soulève donc encore une fois mes lacunes.
Comme vous dites, je me pencherai sur cet aspect quand je serai plus grand.

Je ne sais pas si c'est la bonne façon de faire mais voici comment je procède pour debugger:
j'utilise l'inspecteur d'éléments Chrome ou Firebug de Firefox.
Ca me permet de changer les CSS en live. Ensuite, j'intègre ça dans le code.

Votre remarque sur le float:left a certainement une raison mais je n'ai pas vu de changement.
J'ai tout de même laissé la modif dans le code.

J'ai retiré le chargement du CSS browser Selector.

Je suis en train de commenter pour revenir tout de suite après le tuto SVG.
Car, pour être un peu plus précis:

En suivant le tuto SVG logo mentionné plus haut j'ai pu avoir mon logo.
Mais dès que j'ai commençé à vouloir le tailler à ma hauteur (1m83) j'ai rencontré un soucis.

En tatonnant un peu (beaucoup) j'ai constaté qu'il fallait que j'augmente le max-width d'origine (100%).
En mettant 1000% (bête essai, avec 500% ça marche aussi) je pouvais avoir une taille "normale".
Sans cela, height/width ne correspondait pas visuellement aux valeurs du code.
Comme si il y avait un effet de zoom-. Trop bizard. J'ai donc laissé le max-width à 1000%.

Du coup, j'ai du rectifier les margin ou top (en négatif donc) des modules qui s'affichent après.
Car mon header est déclaré bien plus haut que voulu mais comme je disais ci-dessus...
La solution serait de pouvoir afficher le logo avec les dimensions définies dans le code.
C'est là que j'ai commençé à trouver des touffes de cheveux à mes pieds. C'est effroyable comme vision;)

Voilà c'est fait l'affichage semble ok suite à mes commentaires (N'oubliez pas le CTRL+F5 SVP).
Le tuto est suivit à la lettre et à l'heure ou je vous écris mon "seul" soucis est le suivant:

Si vous avez qlqs minutes à me consacrer encore (1000mercis)vous pouvez tester par vous même.
Dans Firebug je n'arrive pas à déterminer la taille du logo.
Sauf si je change le max-width qlqs lignes plus bas (tjrs ds Firebug).

Je verrai cela demain et tenterai de vous aidez du mieux que je peux.

Bon courage et reposez-vous.;)

Attends Rodolphe.

J'ai eu à faire par ailleurs et je crois avoir l'explication à mon problème.
J'étais dans mon camion quand j'y ai pensé et je m'y penche de suite.

Ça vient du SVG. La taille de la page....

J'ai pas trop eu le temps aujourd'hui mais je n'oublie pas.
C'est promis.;)

Je confirme que je suis bien c..parfois.
J'ai recadré le fichier SVG et tout va "bien".

Il me reste le reste le souci du rendu sous Safari mais j'ai pas tout testé encore.

Merci à toi Rodolphe. Je suis désolé de t'avoir fait perdre du temps.
Je passe ce post en réglé et reposterai plus tard.