28220 sujets

CSS et mise en forme, CSS3

Problème en passant de .xhtml à .html

Bonjour,

Actuellement en train d'experimenter le css/xhtml, je dois passer par du php. Et les problèmes arrivent:
J'ai une page xhtml 1.1 et css 2.0 bien validés et qui s'affiche très bien sous firefox. Vu que je dois mettre du code php dans ma page, je change l'extension de .xhtml à .php mais 2 problèmes apparaissent.
1) dans mon fichier css, j'ai une ligne qui ajoute une image à chaque lien d'une certain classe.
a.emule:after {
  content:" "url(emule.gif);
}

En .xhtml, ça s'affiche nickel. En .php ou .html, l'image apparait en double ou triple et sa position est aléatoire (j'en trouve à l'autre bout de la page)
2) je colorie certains paragraphes grace à une classe mais la colorisation est faite aléatoirement .php ou .html

Je suis toujours sous firefox 1.04 et l'entête du fichier est toujours l'XHTML strict 1.1, et quand l'extension est .xhtml, tout va bien. pourquoi Smiley bawling ?
Salut,
as tu un exemple en ligne (les 2 versions) que l'on se rendent mieux compte de la chose ?
Lol, c'est rigolo tout plein ça !!!

*ahem* désolé ^^
Bon, déjà on sait que ça vient pas du passage extension *.xhtml à *.php/html
C'est bien ce qu'il me semblait que c'était étrange Smiley cligne

Arf, mon extension Edit CSS semble merdouiller, je vais avoir du mal à t'aider pour tout de suite, faudra que je vois ce qui cloche Smiley ohwell
Bonjour gokudomatic et bienvenue sur Alsacréations,

Y a t-il une raison particulière pour avoir choisi la version 1.1 du doctype xhtml ? (infos sur les doctypes)

Sinon ton hébergeur ne me semble pas le plus adéquat avec les codes qu'il rajoute pour espérer un rendu satisfaisant et un comportement correct, il te fait perdre tout espoir de validité et risque fort de modifier le comportement des navigateurs qui affichent tes pages, personnellement Firefox m'indique une page en quirks mode, ce qui est dommage à la vue des efforts entrepris Smiley cligne .

ps: le couple xhtml/css n'est pas obligatoire, on peut très bien mettre en page avec css et baliser son contenu avec html, css fonctionne très bien avec Smiley biggrin .
Modifié par Igor (14 Jun 2005 - 21:46)
bien vu, Igor.

Je n'avais pris l'xhtml que pour la propreté et la pérennité du code.
A moins que je ne change d'hebergeur, je vais passer en html strict (ça m'apprendra à vouloir bien faire), ou pire, en transitional (mais je le validerai coute que coute).
Mais les problèmes subsistent en local malgré les changements.
C'est rigolo de parler de "pérrenité du code" quand son hébergeur ajoute du Javascript au début de sa page pour bouter un cadre !
Juste pour rigoler:
<script language="javascript">

myreg=new RegExp("lycos\.co.uk","i");
if ( !myreg.test("'"+top.location+"'") ) {
	nwreg=new RegExp ("http://([^/]+)?(/([a-z0-9A-Z\-\_]+)?[^']+)","i");
	rn=nwreg.exec("'"+self.location+"'");
	if (parent.frames.length==2) { top.location="http://" + rn[1] + rn[2]; }
	else { top.location="http://" + rn[1] + "/" + rn[3]; }
}

if(window == window.top) {
        var address=window.location;
        var s='<html><head><title>'+'</title></head>'+
        '<frameset cols="*,140" frameborder="0" border="0" framespacing="0" onload="return true;" onunload="return true;">'+
        '<frame src="'+address+'?" name="memberPage" marginwidth="0" marginheight="0" scrolling="auto" noresize>'+
		'<frame src="http://ads.tripod.lycos.co.uk/ad/google/frame.php?_url='+escape(address)+'&gg_bg=&gg_template=&mkw=&cat=noref" name="LycosAdFrame"  marginwidth="0" marginheight="0" scrolling="auto" noresize>'+
        '</frameset>'+
        '</html>';

        document.write(s);      
}
</script>
(Pour résumer, si j'ai bien compris le script, il cherche à se mettre en "top" (si déjà intégré dans d'autres cadres) puis écrit un conteneur de cadres dont une des pages est de la pub et l'autre la page en question.)

Pour moi, le problème vient principalement de là (ce qui expliquerait pourquoi EditCSS ne parvient pas à agir sur la page) . Non ?

@+, HoPHP
HoPHP, peut-être que tu réponds ça parce que tu penses que j'édite directement mon site sur ftp.
Mais j'ai pour habitude de travailler sur un serveur local et donc mes sources ne sont jamais modifiés pa l'hebergeur. Je peux donc parler de pérennité du code source.
Vu qu'EditCSS ne semble pas pouvoir passer (c'est curieux parce que chez moi il arrive, mais j'utilise adblock), je veux mettre ici le code css, mais il fait une centaine de lignes.

Bref, en tous cas, ce n'est pas à cause de l'hebergeur vu que j'ai le même problème en local.

code CSS :
http://members.lycos.co.uk/drahal/main.css
si ça peut te rassurer (ou pas) j'ai exactement le même rendu avec mon Firefox 1.0.4.
@gokudomatic> Meuh non... Je disais juste que "c'est très bien de faire du (x)html pour la pérennité du code, par contre, tes efforts sont vains au vu de ce que le serveur t'ajoute comme code!"

Conclusion, c'est très bien, mais change d'hébergeur !

@+, HoPHP
merci, HoPHP, mais mon problème reste entier, et l'hebergeur n'y changera rien.

Merci, shine. Au moins, ça prouve que l'erreur est W3C compatible. Smiley biggrin
Bon, j'ai trouvé du nouveau dans mon problème (comme quoi, le temps libre du weekend, ça aide).

Il semble qu'en mode html, firefox ne supporte pas trop les balises <xyz />. Il lui faut spécifiquement dire <xyz></xyz> pour que le css s'y retrouve.
Et pour le prouver:
fichier exemple en xhtml:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  <body>
    <div>
      <div class="corps">
        <div class="bloc">
          <h1>1</h1>
          <p>
            aaa
            <a href="#" />
          </p>
        </div>
        <div class="bloc">
          <h1>2</h1>
          <p>
            bbb
            <a href="#" />
          </p>
        </div>
        <div class="bloc">
          <h1>5</h1>
          <p>
            ccc
            <a href="#" />
          </p>
          </div>
      </div>
    </div>
  </body>
</html>


fichier css (qui ne changera pas):

p > a:after {
  content:"#";
}


si le fichier xhtml a bien une extension .xhtml, tout va bien en local.

renommez l'extension du fichier xhtml en .html et vous pourrez voir qu'à chaque lien, un # s'ajoutera, qui semble être celui du précédent lien.

voilà maintenant le code corrigé pour html (en gros):

<html>
  <body>
    <div>
      <div class="corps">
        <div class="bloc">
          <h1>1</h1>
          <p>
            aaa
            <a href="#"></a>
          </p>
        </div>
        <div class="bloc">
          <h1>2</h1>
          <p>
            bbb
            <a href="#"></a>
          </p>
        </div>
        <div class="bloc">
          <h1>5</h1>
          <p>
            ccc
            <a href="#"></a>
          </p>
          </div>
      </div>
    </div>
  </body>
</html>


et là, ça marche. Smiley sweatdrop
Bon, cette contrainte me gonfle assez mais j'espère que mon nouvel hebergeur va m'accepter et que le xhtml passera comme une lettre à la poste.
oups, il y a comme une erreur dans mes codes:

en html non corrigé:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  <head>
    <title>
     aaa
    </title>
    <link rel="stylesheet" type="text/css" href="main1.css" />
  </head>
  <body>
    <div>
      <div class="corps">
        <div class="bloc">
          <h1>1</h1>
          <p>
            aaa
            <a href="#" />
          </p>
        </div>
        <div class="bloc">
          <h1>2</h1>
          <p>
            bbb
            <a href="#" />
          </p>
        </div>
        <div class="bloc">
          <h1>5</h1>
          <p>
            ccc
            <a href="#"/>
          </p>
          </div>
      </div>
    </div>
  </body>
</html>


en html corrigé:

<html>
  <head>
    <title>
     aaa
    </title>
    <link rel="stylesheet" type="text/css" href="main1.css" />
  </head>
  <body>
    <div>
      <div class="corps">
        <div class="bloc">
          <h1>1</h1>
          <p>
            aaa
            <a href="#" ></a>
          </p>
        </div>
        <div class="bloc">
          <h1>2</h1>
          <p>
            bbb
            <a href="#" ></a>
          </p>
        </div>
        <div class="bloc">
          <h1>5</h1>
          <p>
            ccc
            <a href="#"></a>
          </p>
          </div>
      </div>
    </div>
  </body>
</html>
Sujet clos
Aller à