Annonce

Important : WordPress 2.5.1 est disponible.
Annonce 1 : Le Codex en français a besoin de vous pour avancer !
Annonce 2 : Avant de poster, n'oubliez pas de faire une petite Recherche et de lire les règles de ce forum.

#1 04-05-2008 23:32:58

froma
Connaisseur WP
Date d'inscription: 01-05-2008
Messages: 23

Mise en page presque résolue

Bonjour,

Mon blog ne semble fonctionner que sur Firefox et pour cause c'est du total bricolage, à savoir des bouts de codes par ci par là, comme des bouts de ficelle pour construire une maison. http://benoitbenoit.redby.fr/

Ce qui est bien c'est que j'ai bien la mise en page que je veux : 2 colonnes de contenu dans le bon ordre, bref tout bien. Sauf que voilà, ça tient pas la route partout...

Quelqu'un a du bon ruban adhésif ? Ou les connaissances suffisantes pour fixer réellement tout ça ? Ca me serait vraiment d'une grande aide. Si j'ai réussi en bricolant, il y a surement moyen de faire ça proprement ?

Hors ligne

 

#2 05-05-2008 12:14:53

froma
Connaisseur WP
Date d'inscription: 01-05-2008
Messages: 23

Re: Mise en page presque résolue

Des précisions peut être : Comme vous le voyez, la première colonne est la suite logique de la seconde, les posts s'affichent donc dans l'ordre. Pour cela, j'ai du passer par une astuce toute simple : coder dans le CSS pour que la colonne de contenu principale soit au centre de la page (left: 335px;) et que le reste s'affiche à sa gauche (left: -335px;) toujours en colonne. Seulement voilà, cela ne fonctionne pas sous IE où il n'y a plus qu'une seule colonne qui s'affiche (alors que tout va bien sur Firefox, Opera et un troisième sous Mac).

Quelqu'un saurait pourquoi cela déraille sous IE ?

Dernière modification par froma (05-05-2008 12:16:24)

Hors ligne

 

#3 05-05-2008 12:59:00

Difré
Connaisseur WP
Date d'inscription: 28-04-2008
Messages: 17

Re: Mise en page presque résolue

Je n'ai pas de réponse à ton problème, juste un petit outil qui pourrait bien te servir.

Il s'agit du plugin FireBug de Firefox et/ou debugBar sous IE.

Ce sont des plugins qui permettent d'inspecter ta page HTML, de voir tout tes blocs et de connaitre leurs marges, padding etc.

Et donc de découvrir pourquoi ça marche sous FF et non sous IE.


PS : Les problèmes sous IE vient souvent de valeurs par défaut. Tu peux essayer de supprimer toutes ces valeurs au début de ton CSS en faisant :

Code:

  1. *{
  2.    margin:0;
  3.    padding:0;
  4.    /* et d'autres truc du genre */
  5. }

Pour les redéfinir par la suite sur chacun de tes blocs qui en ont besoin.

Hors ligne

 

#4 05-05-2008 15:21:39

froma
Connaisseur WP
Date d'inscription: 01-05-2008
Messages: 23

Re: Mise en page presque résolue

Merci de tes conseils, mettre toutes les valeurs à 0 n'a rien changé mais j'essaie avec DebugBar sans trop savoir comment m'y prendre.

Par contre je me souviens d'une autre barre qui me permettait de voir et de modifier virtuellement le CSS, ce qui était pratique pour corriger directement à l'écran avant de changer réellement le CSS. mais je ne sais plus le nom de cette barre ?

Hors ligne

 

#5 05-05-2008 15:31:26

drakulls
Membre WP
Lieu: Belgique / hainaut
Date d'inscription: 04-05-2008
Messages: 6
Site web

Re: Mise en page presque résolue

salut, tu parles certainement du plugin " webdevelopper" de firefox...

Hors ligne

 

#6 05-05-2008 15:59:16

froma
Connaisseur WP
Date d'inscription: 01-05-2008
Messages: 23

Re: Mise en page presque résolue

Oui c'est surement ça
mais ça ne règlera en fait pas mon pb sous IE hmm

Hors ligne

 

#7 06-05-2008 11:55:14

Difré
Connaisseur WP
Date d'inscription: 28-04-2008
Messages: 17

Re: Mise en page presque résolue

Firebug permet de modifier le CSS dynamiquement, mais effectivement tu ne verra rien, puisque tes problèmes viennent de IE.

Je ne crois pas qu'un tel soft existe pour IE.

Mais avant tout, as tu des exemples précis de problèmes à nous exposer ? On pourra peut-être t'aider !!

Déjà, à mon humble avis, si la barre de gauche ne s'affiche pas sous IE, c'est à cause du left -335px.
Le 0px étant défini tout à gauche de la fenètre, plus à gauche on en sort, donc on ne voit rien.

En fait maintenant, je ne comprend pas pourquoi cela marche sous FF !!

Dernière modification par Difré (06-05-2008 12:00:02)

Hors ligne

 

#8 06-05-2008 14:50:23

froma
Connaisseur WP
Date d'inscription: 01-05-2008
Messages: 23

Re: Mise en page presque résolue

le left -335px n'est pas défini à partir de la bordure de page, mais à partir du body qui lui est à 335 px.
la seconde colonne est attachée au body, donc à 335px de la bordure de page, la première est elle aussi attachée au body mais à -335px, donc elle se retrouve à gauche. FF comprend ça mais pas IE.

voici mon code CSS tout simple :

body {
left: 335px;
margin:15px;
padding:0px;
position: absolute;
width: 320px;
color:#333333;
font: 10px Arial, Helvetica, sans-serif;
background: #FFFFFF;
}


#content2
{
margin:0px;
padding:0px;
position: absolute;
top: 5px;
left: -335px;
width: 320px;
color:#333333;
font: 10px Arial, Helvetica, sans-serif;
background: #FFFFFF
}


Donc mon problème est que IE ne lit pas le code de la même manière et ne veut pas placer le body à 335 px à droite, et par conséquent ne veut pas non plus afficher la première colonne.

Hors ligne

 

#9 06-05-2008 15:29:13

drakulls
Membre WP
Lieu: Belgique / hainaut
Date d'inscription: 04-05-2008
Messages: 6
Site web

Re: Mise en page presque résolue

Ne deplace pas ton body positione le à 0 c'est tout..
Et englobe ton design WP dans un "container" auquel tu appliquera ton margin-left.

Hors ligne

 

#10 06-05-2008 15:52:21

froma
Connaisseur WP
Date d'inscription: 01-05-2008
Messages: 23

Re: Mise en page presque résolue

et plus précisément que dois je faire ? qu'est ce qu'un container ?
et surtout aurais toujours la même mise en page ?

Hors ligne

 

#11 06-05-2008 16:47:19

drakulls
Membre WP
Lieu: Belgique / hainaut
Date d'inscription: 04-05-2008
Messages: 6
Site web

Re: Mise en page presque résolue

Place un

Code:

  1. <div class="container">

juste apres ton body dans le header.php

ensuite juste avant le

Code:

  1. </body>

dans le footer.php rajoute juste :

Code:

  1. </div>

tu n'as plus qu' a éduter ta feuille de style css et de rajouter :

Code:

  1. .container {
  2. margin-left:335px;
  3. }

tu deplacera ainsi l'entiereté de ton code html de 335 px vers la droite...

maintenat, faut jouer avec ce que tu veux faure exactement..

Si c'est centrer la page c'est un peu different., car pense qu"en deplacant de la sorte ton container, les plus petites resolutions seront désavantagées.....

Hors ligne

 

#12 06-05-2008 17:05:46

froma
Connaisseur WP
Date d'inscription: 01-05-2008
Messages: 23

Re: Mise en page presque résolue

C'est bon je crois avoir trouvé, pas besoin de container en fait.
Il suffisait de dire à IE margin-left, plutot que left.

Dernière modification par froma (06-05-2008 17:13:05)

Hors ligne

 

#13 06-05-2008 21:47:29

FelipeA
Membre WP
Lieu: Strasbourg
Date d'inscription: 29-04-2008
Messages: 6
Site web

Re: Mise en page presque résolue

Bonjour,

pour rappel (?) un id ne doit pas être présent plus d'une fois dans une page HTML. Pour ça il y a les classes. Dans ta page, il y a X fois id="content". Bon là tu ne le styles pas, mais si tu essaies, le navigateur fera ce qui lui chante parce que le code HTML de la page n'est pas valide wink

Tu utilises à outrance le positionnement absolu et c'est plutôt à utiliser comme ultime recours quand tout le reste a échoué smile (le missile balistique là où parfois faire les gros yeux suffit)
Tu veux deux colonnes? Crée 2 div de même classe et d'une certaine largeur (en % ou en px) que tu fais flotter à gauche, entre autre solution.
Pour le positionnement en CSS, tu peux consulter:
http://css.alsacreations.com/Bases-et-i … ses-en-CSS (puuub siffle )
et les 3 articles de référence qui commencent par celui-ci: http://openweb.eu.org/articles/initiation_flux/

Hors ligne

 

#14 06-05-2008 21:55:12

froma
Connaisseur WP
Date d'inscription: 01-05-2008
Messages: 23

Re: Mise en page presque résolue

Personnellement je fais du bricolage, je ne connais en CSS et autres programmations que ce que j'ai lu par ci par là. Je veux dire par là que je ne sais pas tout, donc c'est normal que ça ait l'air d'un fouillis. (et je veux bien nettoyer tout ça pour que ce soit plus logique)

Cela dit tes deux colonnes en div ne répondent pas au problème de l'ordre des posts (?) C'est le problème majeur qui a engendré mon bricolage à renfort de bouts de codes.

Dernière modification par froma (06-05-2008 22:14:08)

Hors ligne

 

Pied de page des forums

Propulsé par PunBB 1.2.16
© Copyright 2005-2006 WordPress France

Tous droits réservés - wordpress-fr.net © 2005-2006

  • RSS
WPfr ValidatorXhtml ValidatorCSS mysql Php GetFirefox
Design par AmO - Crédits - Equipe WordPress France

Réseau International : Hongrie - Allemagne - Grèce - Italie - Japon - Corée - Suisse - Turquie - USA