Probleme Mise en page CSS (toujours et encore ...)

louphil · Message par **louphil** » 01 avr. 2011, 16:44

Bonjour à tous ...

Voilà : je me suis procuré un modèle (payant) de site en CSS . Il correspond exactement au style que je recherchais, bref je le trouve très beau .

Cependant, si je change les images, tout va bien . Là ou ça se gatte, c'est quand je veux donner un titre à la page en question . En effet, le simple fait de s'approprier la page en rajoutant seulement un titre entre les balises idoine a pour résultat de décaler les positions de blocs . Et pourtant, je n'ai travaillé que sur le "head" de la page .

Pour mieux visualiser le problème, voici le lien vers la racine du site en question, dans le quel on trouve tous les documents relatifs :

http://philhgy.free.fr/modele/

Pour la page en question, on la trouve ici :http://philhgy.free.fr/modele/xhtmlcss/homepage

Le rajout du titre donne ça : http://philhgy.free.fr/modele/xhtmlcss/indexwu

Si je retire le titre rajouté, les blocs ne reviennent pas à leur place initiale ...

Il est à noter que le remplacement des images génériques par les miennes ne modifient pas la mise en page , dès l'instant ou elles sont de même dimensions ( tant que je ne rajoute pas de titre à la page ...) .

D'autre part, lors de l'édition des styles avec CasCades tout se passe bien jusqu'au moment ou je valide mes modifs en cliquant sur le bouton "OK" : les changements ne sont pas pris en compte, et la page reprend sa présentation précedente, quand ça ne me rajoute pas les fameux " *|" en face de chaque règle ....

Un grand merci d'avance à ceux ou celles qui pourront éclairer ma lanterne, et me permettront de comprendre ce qui se passe et de me dépanner ...

Message par **Ymai** » 01 avr. 2011, 20:41

Bonjour
Perso, pas de souci à ajouter un titre. En tous les cas en ouvrant la page dans KompoZer
Ci-dessous, le code obtenu. Sans doute à comparer avec le code de la page qui va de guingois. Je n'ai fait que rajouter un titre (> Format > Titre et propriétés de la page).
Pas d'autre idée pour l'instant.

Code : Tout sélectionner

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Un très joli titre pour cette page</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
@import url("layout.css");
-->
</style>
</head>
<body class="bg1">
<div id="wrapper" class="bg2">
<div id="extra1" />
<div id="container">
<div id="logo">
<h1>Website Name</h1>
<h2>Your slogan text here</h2>
</div>
<div id="menu">
<ul>
<li><a href="#" id="menu1" accesskey="1" title=""><b>Services</b></a><br />
</li>
<li><a href="#" id="menu2" accesskey="2" title=""><b>Portfolio</b></a><br />
</li>
<li><a href="#" id="menu3" accesskey="3" title=""><b>About</b></a><br />
</li>
<li><a href="#" id="menu4" accesskey="4" title=""><b>Contact</b></a><br />
</li>
</ul>
</div>
<div id="content">
<h2 id="title1" class="title"><b>Welcome to our website</b></h2>
<div class="content">
<div id="splash"><img src="images/homepage09.jpg" alt="" height="140"
width="322" /></div>
<h2 id="title2" class="title"><b>Veroeros etiam dolor</b></h2>
<div id="box1" class="bg3">
<div id="box1A">
<h3 class="text1">Lorem ipsum dolor</h3>
<p>Sit amet, consectetuer sed adipiscing elit, sed diam volutpat. Ut
wisi enim ad et minim veniam, quis exerci et tation sed suscipit
lobortis nisl. <a href="#">More…</a></p>
</div>
<div id="box1B">
<h3 class="text1">Consequat elit</h3>
<p>Elit, sed diam volutpat. Ut wisi enim ad et minim veniam, quis
nostrud exerci sed etiam et tation ullamcorper sed suscipit lobortis et
nullam dolor veroeros sed nisl. <a href="#">More…</a></p>
</div>
</div>
</div>
</div>
<div id="box2"><a href="#"><img src="images/homepage11.jpg" alt=""
border="0" height="272" width="105" /></a><a href="#"><img
src="images/homepage12.jpg" alt="" border="0" height="272" width="104" /></a><a
href="#"><img src="images/homepage13.jpg" alt="" border="0"
height="272" width="105" /></a></div>
<div id="footer" class="bg4">
<p class="text2">(c) 2006 websitename. all rights reserved.</p>
</div>
</div>
</div>
</body>
</html>

louphil · Message par **louphil** » 01 avr. 2011, 21:03

Merci pour ta réponse, Ymai ...

Je viens de faire une "petite" opération similaire :

1°) J'ai enregistré ma page sous un autre nom, histoire d'avoir 2 exemplaires du même code .
2°) J'ai édité le code source de l'une avec "Bluefish" , et la deuxième avec KompoZer, puis j'ai comparé les codes dans "bluefish" .

Effectivement, KPZ introduit une erreur dans le code source lors de la sauvegarde, et me déplace une balise de fin de bloc (</div>), de sorte que ce bloc devient ancêtre (ou parent) alors qu'il ne doit être qu'enfant ...

Ceci étant dit, je précise que la modif de titre, je la faisait directement dans la vue source de KPZ, trouvant plus rapide comme ça ( et surtout parce que je ne me souvenais plus qu'on pouvait le faire de façon graphique

) ... Peut-être mon soucis venait-il de là ? Si oui, est-ce un bug à signaler ?

louphil · Message par **louphil** » 01 avr. 2011, 21:28

Bon, je viens de faire la même manip que toi, en mode graphique, et chez-moi ça fait toujours une erreur . Ce n'est donc pas lié à l'édition directe du code source dans KompoZer . La version que j'utilise est la 0.8b3 en anglais (puisque ça ne me dérange pas) sous linux Mint ( dérivée de Debian ou Ubuntu )

Me reste plus qu'à editer mes pages "à la main", sachant que les trois installs sur diverses machines me donnent le même résultat ...

M'enfin, maintenant, déjà, j'ai situé le problème, je peux continuer à travailler, c'est déjà pas si mal ...

Maintenant, si tu (ou quelqu'un d'autre ) as une idée qui te viens, n'hésites surtout pas, malgré tout : je suis pas un pro du codage à la main, et sûr que je préfererais bosser avec KPZ ...

Message par **chinon37** » 02 avr. 2011, 14:37

Je ne suis pas sûr d'avoir bien compris le problème??
- par titre, tu entends "titre de la page" (balise <title>) ou titre à mettre en en-tête de la page pour remplacer Website Name Your slogan text here?
- à noter un bogue de KompoZer bien caractéristique dans ta page: le rajout de retour à la ligne <br> à la fin de chaque item de liste
- Autre problème lié par contre au modéle acheté: la mise en page est faite à base de tableaux, ce qui ne peut poser que des problèmes de mise en page et des prises de tête. La mise en page par tableaux date d'un autre siècle que les plus jeunes n'ont pas connu

. Voir ici entre autres: http://openweb.eu.org/articles/problemes_tableaux

louphil · Message par **louphil** » 02 avr. 2011, 20:38

Par "titre" j'entends bien le contenu entre les balises <title> .

Ce modèle comporte 2 versions : une dont la mise en forme est faite à partir de tableaux que je n'utilise pas, l'autre sur laquelle je m'escrime, mise en page par CSS que l'on peut voir ici : http://philhgy.free.fr/modele/xhtmlcss/homepage . Peut-être n'as tu vu que la version "tableau" ...?

A priori, Ymai a réalisé l'exercice sans aucun problème, aussi mon souci vient-il peut-être d'une configuration de KompoZer inadéquate ? J'ai bien essayé de configurer dans les préférences le choix du langage "xhtml strict" en lieu et place de "html4 strict" d'origine, mais ça ne change rien ...

Message par **Ymai** » 02 avr. 2011, 21:04

Bonsoir/jour

louphil a écrit :A priori, Ymai a réalisé l'exercice sans aucun problème, aussi mon souci vient-il peut-être d'une configuration de KompoZer inadéquate ?

Je serais très étonné... Un petit test simple:
- fermer KompoZer
- renommer le répertoire ~/.kompozer.net en ~/.kompozer.net.bak
- ouvrir la page http://philhgy.free.fr/modele/xhtmlcss/homepage.html
- l'enregistrer localement (le titre est demandé)
Un truc qui me chipote: pourquoi les deux feuilles de styles sont-elles déclarées différemment l'une de l'autre?

Code : Tout sélectionner

<link href="default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
	@import url("layout.css");
-->

Pourquoi pas plutôt

Code : Tout sélectionner

<link href="default.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />

Mais ce n'est que mon sens de la symétrie qui est un peu heurté. Ce ne doit pas être ça le souci.

louphil · Message par **louphil** » 02 avr. 2011, 21:32

Bon, je viens de faire la manip que tu viens de m'indiquer : ça change pas grand-chose ... Par contre, petite précision : les dégats ne se voient pas tant que la page est ouverte dans kompozer . Pour le constater, il faut d'abord fermer la page puis la recharger pour voir les differences . Sinon, les modifs font ce que l'on attend d'elles tant que la page est ouverte . Un petit détail que j'aurais du préciser dans le premier post ...

Je vais par contre essayer de modifier la liaison de la deuxieme feuille de style de "@import" a "<link href ...>" ....

louphil · Message par **louphil** » 02 avr. 2011, 22:00

Je viens de faire l'essai de changement de liaison de la 2eme feuille de style : toujours des erreurs ... J'ai bien sur édité directement dans la vue source de kpz : apres la sauvegarde des choses disparaissent comme la balise de fermeture </title> et d'autres que je ne vais pas énumérer, j'ai juste regardé vite fait ... Du grand n'importe quoi ...!

J'ai aussi essaye la modif avec bluefish, ça ne change rien à la présentation, sauf si je veux "enregistrer sous" ou changer le titre avec kpz, et après enregistrement, la page est de nouveau en desordre ...

Par contre, j'ai remarqué qu'à l'origine, sur le modèle, seule la ligne "@import "layout.css ...." est encadrée par les balises "<style type="text/css"> </style> " . Ne vaudrait-il pas mieux que la première feuille qui est liée par lien le soit aussi ?

Message par **Ymai** » 02 avr. 2011, 23:13

Juste une idée: je lis là http://www.cssnewbie.com/css-import-rule/ que

Your @imports must come before all other content in your CSS. And I mean all of your content. Even putting comments before the @import tag will cause your imports to fail. So be sure to do your imports before you do anything else.

Donc, peut-être supprimer le commentaire

Code : Tout sélectionner

<style type="text/css">
<!--
   @import url("layout.css");
-->
</style

et ne garder que

Code : Tout sélectionner

<style type="text/css">
   @import url("layout.css");

Mais je reste très perplexe.

[edit]ben non... Si je relis ce que j'écris plus haut, je vois que tout cela est du délire. Dans ma première réponse, j'indique clairement que le texte autour du @import n'est absolument pas modifié par KpZ. Contrairement au texte de la liste <ul> <li>xxxx</li>....</ul> dans laquelle des <br /> sont insérés (à tort).
Il faudrait reprendre l'ensemble des fichiers localement et voir si le souci est reproductible dans ces circonstances.
Mais là, il se fait tard dans nos contrées.[/edit]

Message par **chinon37** » 03 avr. 2011, 11:05

Au temps pour moi, pour la mise en page en tableaux. Toutes mes excuses, je n'avais pas vu l'autre version.
Je serais de l'avis d'Ymai de tout reprendre sur le disque dur de ton ordi, en respectant bien toute l'arborescence du site, et voir si localement, les choses réagissent différemment.
Perso, je crains de ne pas avoir le temps aujourd'hui

louphil · Message par **louphil** » 03 avr. 2011, 12:00

Je vais manquer de temps aujourd'hui pour "bricoler" .

Cependant, je fais toujours mes manips en local : c'est à dire que j'ai téléchargé le dossier contenant les fichiers du modèle et mis dans mon repertoire perso . La seule chose que je n'ai pas faite, c'est d'utiliser la localisation du site par "le site manager" de kpz : j'ouvre directement mes page avec "File" --> "Open" . Mais je doute que mon problème vienne de là . Je vais qd même essayer, au cas où ...

Message par **Ymai** » 03 avr. 2011, 12:43

Bonjour
Je crois avoir trouvé quelque chose...
Dans le haut de la page, un bloc

Code : Tout sélectionner

<div id="extra1"></div>

est parfaitement vide.
Et KompoZer ne semble pas apprécier. N'y avait-il pas un bug répertorié à ce sujet?
En tous les cas, quand on met quelque chose dans ledit bloc, il me semble que cela fonctionne mieux.

Code : Tout sélectionner

<div id="extra1"> </div>

(avec un simple caractère d'espacement) suffit.
Non?

Dans une page toute neuve générée par KompoZer, et donc parfaitement valide, un bloc vide disparaît totalement dès le premier enregistrement.

Mais c'est un peu différent ici. Je crois qu'il faut se poser des questions supplémentaires.
Il se passe des choses bizarres au niveau de ce bloc dès que l'on ouvre la page dans KompoZer. Le bloc devient

Code : Tout sélectionner

<div id="extra1" />

avec disparition de la balise fermante. Il n'est même pas nécessaire de faire la moindre modification.
Bug de KompoZer ou erreur dans la syntaxe pour le DOCTYPE? Je n'aurai pas trop le temps d'investiguer plus loin.
Peut-être voir ça avec les Cadors du forum "Développement web" ou passer encore du temps à chipoter sur le DOCTYPE.

C'était mes divagations du dimanche midi. Si quelqu'un comprend, c'est très bien.

Message par **chinon37** » 03 avr. 2011, 14:40

le simple fait de passer de:

Code : Tout sélectionner

<div id="extra1"></div>

à

Code : Tout sélectionner

<div id="extra1" />

n'est pas simplement l'écriture xhtml?

louphil · Message par **louphil** » 03 avr. 2011, 15:27

oui, j'avais noté cette erreur generée par une sauvegarde ds kpz . Mais la balise fermante ne disparait pas, elle est déplacée en fin de page . Ca a pour résultat de transformer ce bloc "enfant" en "parent" .

Aussi, j'ai constaté qu'un <div> vide disparaissait systématiquement dans kpz, et sans même enregistrer . Le simple fait de le créer dans le code source, puis de basculer vers un autre type de vue, l'élimine systématiquement ...

Geckozone

Probleme Mise en page CSS (toujours et encore ...)

Probleme Mise en page CSS (toujours et encore ...)

Re: Probleme Mise en page CSS (toujours et encore ...)

Re: Probleme Mise en page CSS (toujours et encore ...)

Re: Probleme Mise en page CSS (toujours et encore ...)

Re: Probleme Mise en page CSS (toujours et encore ...)

Re: Probleme Mise en page CSS (toujours et encore ...)

Re: Probleme Mise en page CSS (toujours et encore ...)

Re: Probleme Mise en page CSS (toujours et encore ...)

Re: Probleme Mise en page CSS (toujours et encore ...)

Re: Probleme Mise en page CSS (toujours et encore ...)

Re: Probleme Mise en page CSS (toujours et encore ...)

Re: Probleme Mise en page CSS (toujours et encore ...)

Re: Probleme Mise en page CSS (toujours et encore ...)

Re: Probleme Mise en page CSS (toujours et encore ...)

Re: Probleme Mise en page CSS (toujours et encore ...)

Qui est en ligne ?