28173 sujets

CSS et mise en forme, CSS3

Problème marge CSS thème WordPress

Bonjour,
je viens de créer un thème WordPress (visible ici)et j'ai quelques soucis niveau CSS.

Déjà pour exactement les mêmes fichiers du thème l'affichage est différent en local (easyphp) et sur un serveur free Smiley confus !

Les PNG/GIF ne s'affichent pas sur free alors qu'ils s'affichaient très bien en local... J'ai mis en jpeg ça a réglé le problème pour le moment.

Premier bug du site : je veux que le site soit entièrement collé a droite mais il y a un léger décalage et j'ai beau triturer le CSS je trouve pas Smiley bawling ... Surement un problème de 'margin' mais je passe à côté.

Deuxième bug : Le footer, il s'étend sur toute la page avec une image herbe.jpg en repeat-x. Le problème c'est que le footer est directement en-dessous de la page alor qu'il devrait être tout en bas.

Troixième bug : Le deuxième problème du footer se situe au niveau du texte. Quand on est déconnecté tout va bien le texte s'affiche correctement mais quand on est connecté le texte s'affiche comme ceci :

Image

J'ai volontairement surfacé le texte pour le rendre visible, sinon il est blanc. Le problème est donc visible, Il y a un retour à la ligne après "Déconnexion" et la suite du texte ne suit pas les instructions du CSS.

Merci de votre aide.
Si possible rapide car à partir de la semaine prochaine j'aurai beaucoup moins de temps disponible pour régler les bugs du thème.

<modération>attention à ne pas afficher d'images géantes qui déforment le forum. Merci d'utiliser le bouton "créer une miniature" lorsque vous chargez une image.
Modifié par Julien Royer (24 Nov 2007 - 15:43)
Bonsoir koho,

C'est ton #searchform qui pose problème, enlève le width ou diminues sa taille, et ton site sera colé à droite
Pour le pied de page, je ne vois pas très bien où se situe ton problème :

upload/12813-koho.gif

Ce n'est pas ce que tu veux obtenir ?

Pour ce qui est de la connexion, mystère et boules de gommes, désolé...

Bon courage Smiley cligne
Salut 6l20 et merci de ta réponse.

T'as raison le problème vient apparament du #searchform sauf qu'entre temps j'avais fais quelques modifications en local et j'ai déplacé la sidebar à gauche. Le #searchform n'influ plus à ce niveau mais le décalage persiste.

J'ai mis le site à jour, regarde par toi même.

Pour l'autre problème, j'ai vidé le footer pour remplir la sidebar, ça crée automatiquement une scrollbar qui plaque le footer (l'herbe) en bas, ça règle temporairement le problème du footer.
A priori une marge de 20px à droite est venue se glisser malicieusement dans ton body... Smiley cligne 
body {
font-family: Lucida Grande, Arial, Helvetica, Sans-serif;
font-size: 0.8em;
text-align: left;
background-image: url(images/ciel.jpg);
background-repeat: repeat-x ;
background-color: white;
margin: 0 [#red]20px[/#] 0 0;
}

Ceci dit, il me semble que ta sidebar était mieux à droite Smiley cligne
Oui j'ai pensé à cette marge mais apparament ce n'est pas la cause.
Regarde ce que ça donne en mettant.
margin: 0 0 0 0;

On croit que ça a résolu l'affaire mais une scrollbar horizontale est apparue en bas et hop quand on va a droite le décalage est toujours là... Smiley fache

Pour la sidebar c'est une question de goût et pour le moment ce n'est pas ma priorité, on verra ça par la suite Smiley cligne
Bonjour,

Pour s'assurer du rendu souhaité, je crois qu'il faudrait faire un peu de ménage dans le code html (voir les erreurs renvoyées par le validateur) et dans les appels des divers feuilles de style, en particulier celle de lightbox qui est appelée à deux reprises et dont le fichier lightbox.css contient du... html Smiley eek .

Je crois qu'une fois nettoyéetout çà on devrait y voir plus clair Smiley cligne
Le bonjour,


#content {
margin-bottom:20px;
[#blue]margin-left:20px;[/#] -> [#red]A supprimer[/#]
width:684px;
}
[#black]/*par "soucis d'esthétisme" pour rétablir l'équilibre, mais tu tu fais évidemment ce que tu veux*/[/#].post .date {
background:transparent url(images/calendar.gif) no-repeat scroll 0%;
color:#002844;
float:left;
font-family:Arial,Helvetica,sans-serif;
font-size:2em;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
height:50px;
line-height:100%;
margin-top:3px;
padding:0px 2px 0pt 0pt;
text-align:center;
width:45px;
[#blue]margin-left:32px;[/#][#black]/*aligné sur le titre, mais tu mets évidemment ce que tu veux*/[/#]
[#black]/*par "soucis d'esthétisme" pour rétablir l'équilibre, mais tu tu fais évidemment ce que tu veux*/[/#]
.post_content {
clear:both;
color:#002844;
font-size:1em;
padding:10px 0px 5px;
[#blue]margin-left:32px;[/#]}[#black]/*idem commentaire ci-dessus*/[/#]
}

A priori, ça devrait fonctionner...
Pour la sidebar tu fais exactement comme tu veux Smiley cligne

Cdt,
Sylvain
Salut Igor,

J'ai désactivé tout les plugins ce ne sont pas eux la cause en particulier lightbox même si son code semble désordonné.

Pour ce qui est des validateurs, le CSS est valide donc ce de côté pas de problème mise à part qu'il affiche: Aucune erreur ou avertissement (28 ignorés). 28 ignorés?!?! Smiley confus

Par contre le code html est invalide. J'ai réglé quelques erreurs mais celles qui reste me posent problème car elles portent sur la sidebar et plus particulièrement sur des codes introduits par des commandes PHP.

Par exemple :
a écrit :

# Error Line 107, Column 52: document type does not allow element "a" here; assuming missing "li" start-tag.

<a href="http://koho6.free.fr/blog/wp-login.php">Connexion</a> </ul>


# Error Line 107, Column 72: end tag for "li" omitted, but OMITTAG NO was specified.

…ree.fr/blog/wp-login.php">Connexion</a> </ul>

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".


# Info Line 107, Column 4: start tag was here.

<a href="http://koho6.free.fr/blog/wp-login.php">Connexion</a> </ul>


Alors que le code correspondant dans la sidebar est :
a écrit :

<li><h2>Administration</h2>
<ul>
<?php wp_register(); ?>
<?php wp_loginout(); ?>
</ul>
</li>


Comment agir la dessus ?

merci de ton aide Igor.
Merci Sylvain t'es un dieu!!
Merci aussi à Igor de m'avoir montrer les erreurs html que je n'avais pas vu!

Maintenant que c'est presque fini, je voudrais avoir votre avis sur le design ?
J'ai voulu faire quelque chose de sobre, estétique, class, un brin fantaisiste, et quelque chose d'un peu moderne.
Vous en pensez quoi??

Voilà ce que je voulais mais je ne sais pas comment placer le personnage avec les problème de transparence : serait-ce possible avec Z-index?
Image

<modération>attention à ne pas afficher d'images géantes qui déforment le forum. Merci d'utiliser le bouton "créer une miniature" lorsque vous chargez une image.
Modifié par Julien Royer (24 Nov 2007 - 15:42)
Sujet clos
Aller à