Problème placement du captcha et de la page de contact.

termicastor · juillet 2011

Bonsoir à tous !

Il me reste un petit problème à résoudre, avant que mon pluXml soit prêt pour le monde !

Le formulaire de contact est totalement excentré par rapport au reste de la page :

http://pix.toile-libre.org/upload/original/1311437213.png

La css du thème que j’utilise :

/*
 * À vérifier :
 * .center .clearer
 */

/* ---------------------
Html et body
--------------------- */
body {
        font-family: 'Puritan', sans-serif;
		font-size: 11px;
        color : #555;
        background : #dedede;
        margin : 0;
        padding : 0;
        letter-spacing: 0.5px;
}
#section {
        width : 925px;
        margin : 0 auto;
        padding : 0;
}

/* ---------------------
Styles generaux
--------------------- */
h1 { font-size : 2.1em; }
h2 { font-size : 1.2em; }
h3 { font-size : 1.1em; margin : 0; padding: 0; }
p { margin : 0; padding: 0; }
a { color : #2365b0; text-decoration : none;}
a:hover { color : #b50000; }
a.active, .active a { font-weight: bold; }
.center { text-align : center; }

/* ---------------------
Formulaire
--------------------- */
fieldset {
        border : 0;
        margin: 0;
        padding: 0;
}
label { display : block; }
input, textarea {
        background-color : #EEEEEE;
        border: 1px solid;
        border-color: #C3C9D0 #D4DAE2 #D4DAE2 #C3C9D0;
        border-radius: 4px;
        padding: .2em;
        letter-spacing: 0.5px;
}
input:focus, textarea:focus {
        background-color : #FFFFFF;
        border-color: #D4DAE2 #C3C9D0 #C3C9D0 #D4DAE2;
}

/* ---------------------
Haut de page (#header)
--------------------- */
#header {
        max-width : 925px;
        margin : 0 auto 2em auto;
}
#title { /* Titre et sous-titre */
        color : #333;
        padding : 9px 0 2em 160px;
        background: url("../img/logo.png") no-repeat 0px 15px;
}
#title h1 { /* Titre */
        margin: 0 0 .2em 0;
        padding : 0 0 0 70px;
        letter-spacing : 1px;
		font-family: 'Lobster Two', cursive;
		font-size: 36px;
		color : #689D71;
}
#title h1 a { /* Lien du titre */
        text-decoration : inherit;
        color : inherit;
}
#header h1 a:hover { color : #777; }
#title p { /* Sous-titre */
        padding : 0 0 0 93px;
		font-family: 'Puritan', sans-serif;
		font-size : 13px;
		font-weight : bold;
		color : #723E64;
}
#nav { /* Menu de navigation */
        background : #5A5E6B;
        border-radius : 4px;
        height : 2.5em;
        margin: 0;
        padding : 0 0 0 1em;
        list-style-type : none;
		font-size : 12px;
}
#nav li { float : left; }
#nav .feed { float : right; }
#nav li a {
        display : block;
        padding-left: 19px;
        padding : .5em 1em .5em 19px;
        color :  #FFF;
        text-decoration : none;
        font-size : 0.9em;
        letter-spacing : 2px;
        background : url("../img/icons.png") no-repeat 0 -345px;
}
#nav li a:hover, #nav li a.active {
        background : url("../img/icons.png") no-repeat 0 -377px;
}
#nav li#static-home a{
        background : url("../img/icons.png") no-repeat 0 -89px;
}
#nav li#static-home a.active, #nav li#static-home a:hover {
        background : url("../img/icons.png") no-repeat 0 -121px;
}
#nav .feed li a {
        background : url("../img/icons.png") no-repeat 0px -185px;
        padding : .5em 1em .5em 19px;
}
#nav .feed li a:hover {
        background : url("../img/icons.png") no-repeat 0px -217px;
}

/* --------------------- 
Zone de contenu (#content)  
--------------------- */
#content { /* Bloc */
        width : 650px;
        margin : 0;
        padding : 0;
        float : left;
}
.article {
        margin-bottom: 2em;
        border-bottom: 1px solid #bbb;
}
.art-title { /* Titre de l'article */
        color : #333;
        font-size : 1.75em;
        margin : 0 0 0 0;
        padding : 0;
        letter-spacing : 2px;
        font-weight : lighter;
        max-width: 600px;
}
.art-title a { /* Lien sur le titre de l'article */
        color : #333;
        text-decoration : none;
}
.art-title a:hover { color : #2365b0; }
.art-chapo, .art-content, .static-content {
        background : #FFF;
        border : 1px solid #CCC;
        border-radius: 4px;
        margin : 1em 0;
        clear : both;
        padding : .5em .7em;
}
.art-topinfos {
        float : left;
        margin-top : .2em;
}
.art-date {
        float: right;
        margin-top: .5em;
        text-align: center;
}
.art-numday {
        display: block;
        margin-bottom: .1em;
        font-size: 275%;
}
.art-cat {
    background : url("../img/icons.png") no-repeat 0px -320px;
    padding-left: 19px;
}
.art-tags {
    background : url("../img/icons.png") no-repeat 0 -418px;
    padding-left: 19px;
}
.art-ncomments a{
        background : url("../img/icons.png") no-repeat 0 -158px;
        float: right;
        padding: 0 0 0 19px;
}

.feed-arts, .feed-art-com {
        clear : both;
        padding : 0;
        text-align : center;
}
.feed-arts a, .feed-art-com a {
        color : #333;
        background : url("../img/icons.png") no-repeat 0 -190px;
        padding : 4px 0 .5em 20px;
}
.feed-arts a:hover, .feed-art-com a:hover { text-decoration: underline; }
#pagination { /* Conteneur des liens 'page suivante' et 'page precedente' */
        text-align : center;
}
#pagination span { margin-right: .5em; }
#pagination a { color : #333; }
#pagination a:hover { color : #777; }

/* --------------------- 
Paneau lateral (#aside)  
--------------------- */
#aside {
        float : right;
        width : 250px;
        padding : 0;
        margin : 0 -1px 0 0;
        line-height: 1.5em;
}
#aside h3 { /* Titre des menus de la sidebar */
        color : #333;
        font-size : 1.1em;
        margin : 0;
        border-radius: 4px 4px 0 0;
        padding : 6px 0 .5em 26px;
        height: 1.5em;
}
#aside ul { /* Bloc de liste */
        margin : 0 0 2em 0;
        border : 1px solid #cbcbcb;
        border-top : none;
        border-radius: 0 0 4px 4px;
        padding : 0;
        background: #FFF;
}
#aside li { /* Element de liste */
        list-style-type : none;
        border-top : 1px solid #C3C9D0;
        padding: 0 1em;
}
#aside li a { /* Liens dans les listes */
        text-decoration : none;
        color : #333;
}

.side-1 h3 { background-color : #83A697 !important }
.side-2 h3 { background-color : #CBD7AD !important }
.side-3 h3 { background-color : #BBD2E1 !important }
.side-4 h3 { background-color : #7F8FA6 !important }
.side-5 h3 { background-color : #9E9E9E !important }
#side-categories h3 { background : url("../img/icons.png") no-repeat 6px -313px; }
#side-archives   h3 { background : url("../img/icons.png") no-repeat 6px -249px; }
#side-tags       h3 { background : url("../img/icons.png") no-repeat 6px -408px; }
#side-articles   h3 { background : url("../img/icons.png") no-repeat 6px -281px; }
#side-comments   h3 { background : url("../img/icons.png") no-repeat 6px -152px; }
.side-1 li:hover, .side-1 li.active { background : #FDE9E0; }
.side-2 li:hover, .side-2 li.active { background : #FBF2B7; }
.side-3 li:hover, .side-3 li.active { background : #E9C9B1; }
.side-4 li:hover, .side-4 li.active { background : #766F64; }
.side-5 li:hover, .side-5 li.active { background : #CECECE; }

#side-tags ul { padding: .4em; }
#side-tags li{
        border-top: none;
        border-bottom: none;
        display: inline-block;
        padding: 0;
        margin: .2em;
}
#side-tags li a{
        display: inline-block;
        padding: .2em .5em;
}
#side-tags li:hover, #side-tags li.active { border-radius: 1em; }

/* ---------------------
Commentaires (#comments)
--------------------- */
#comments {
        border-bottom: 1px solid #bbb;
        margin-bottom: 1em;
        padding-bottom: 1em;
}
#comments h2 {
        color : #333;
        font-size : 1.5em;
        margin : 0 0 1em 0;
        letter-spacing : 2px;
        font-weight : lighter;
}
.comment { margin-bottom: 1em; }
.comment blockquote {
        padding : 0;
        margin : 0;
}
.info_comment { color : #333; }
.num-com {
        float:right;
        padding : .1em .2em;
}
.content_com {
        padding : .1em .3em;
        border: 1px solid #ccc;
        border-radius: 4px;
        background: white;
}
.type-admin .content_com {
        background : #e8efd9;
        border-color: #cbd7ad;
}
#form h2 {
        color : #333;
        font-size : 1.5em;
        margin : 0 0 1em 0;
        letter-spacing : 2px;
        font-weight : lighter;
}
.com-alert {
        text-align : right;
        font-weight : bold;
        color : #b50000;
}
.form_left {
        float: left;
        margin-bottom: 1em;
}
.form_right {
        float: right;
        margin-bottom: 1em;
}
.form_foot  {
        clear: both;
        margin-bottom: 1em;
}
#form input[type=text]{
        width: 200px;
}
#form textarea {
        width : 410px;
        height : 105px;
}
#form .button span.buttons { float: right; }
#form input[type=submit] {
        background : #EEE;
        padding : .3em .6em;
        border-radius: 4px;
}

#form input[type=submit]:hover {
        cursor: pointer;
        background : #5baa21;
        color: #FFF;
}
.captcha{
        background:  url('../img/icons.png') no-repeat 0 -62px;
        padding: 0 0 0 19px;
        height: 16px;
        }

/* ---------------------
Pied de page (#footer)
--------------------- */
#footer {
        max-width : 925px;
        margin : 2em auto .5em auto;
        background : #5A5E6B;
        border-radius: 4px;
        color : #FFF;
        padding : 0;
        height : 2.5em;
        clear : both;
		font-size : 12px;
}
#footer p {
        float : left;
        margin : .5em 1em;
}
#foot-links {
        float : right;
        margin: .5em 1em;
}
#footer a {
        color : #DDD;
        text-decoration : none;
}
#footer a:hover {
        border-bottom : 1px dashed;
}
#foot-top{
        background: url('../img/icons.png') no-repeat 0 -449px;
        padding-left: 19px;
}
#foot-admin{
        background: url('../img/icons.png') no-repeat 0 -1px;
        padding-left: 19px;
}
#foot-top:hover {
        background: url('../img/icons.png') no-repeat 0 -481px;
}
#foot-admin:hover {
        background: url('../img/icons.png') no-repeat 0 -33px;
}

/* ---------------------
Capcha
--------------------- */
.capcha-letter {
        font-weight : bold;
        color : #222;
}
.capcha-word {
        padding: .2em .5em;
        background:#eee;
        border:1px solid #fff;
        border-radius:.8em;
        color:#333;
        font-size:1.1em;
        font-style:italic;
        font-weight:bold;
        letter-spacing:2px;
}

Voilà. Comment fixer cela ?

Merci beaucoup pour tout !

ti_pierre · juillet 2011

Bonjour !

Un aperçu réel, autre qu'image est d'une plus grande aide

termicastor · juillet 2011

ti_pierre a écrit:

Bonjour !

Un aperçu réel, autre qu'image est d'une plus grande aide

Bonsoir !
Le truc, c'est que je n'ai pas uploadé le site, je le teste en local avec easyphp pour l'instant.

Mais je peux l'envoyer par mail sans problème !

Merci !

Bloody · juillet 2011

+1 avec Ti_pierre.

Je te l'ai fait pour ta CSS des fonts Google et le sprite.
Mais c'est vrai qu'en ligne, c'est plus facile.
Pourquoi, tu l'uploades pas ton site ?

termicastor a écrit:

Mais je peux l'envoyer par mail sans problème !

Seulement le thème cette fois-ci.

termicastor · juillet 2011

Salut !

Bon, pour le placement de deux images alignées en css3, j'ai trouvé une solution, pas forcément élégante mais qui fait son office :

#title { /* Titre et sous-titre */
        color : #333;
        padding : 9px 0 2em 160px;
        background-image: url("../img/logo.png"), url("../img/logop.png");
	background-position : 0px 15px, 870px 30px;
	background-repeat : no-repeat;

La question que je me pose, c'est si une résolution autre que celle avec laquelle je travaille, ne va pas tout casser.

Bloody a écrit:

Pourquoi, tu l'uploades pas ton site ?

Bonne question !

En fait, simplement, c'est mon premier "vrai" site depuis que j'ai entrevu le couple HTML/CSS sur le siteduzéro (comme à peu près tout le monde j'imagine !

), il y a de cela quelques années quand même (et donc en plus, j'ai tout oublié ou presque, alors je tâtonne !

), et que je lorgne sur un hébergement par toile-libre en remplacement de mon hébergement free. Donc plutôt que de jouer du filezilla, je préfère pour l'instant tout faire en local, car je trouve cela plus commode.

Seulement le thème cette fois-ci.

Je prépare ça. Merci beaucoup pour toute l'aide !

Bloody · juillet 2011

Voilà, je t'ai fait les modif.
Tu peux télécharger ici.

Par contre, je n'ai eu aucun soucis avec le formulaire de contact : tout était bien formaté au niveau CSS.

termicastor · juillet 2011

Bonsoir !

Merci beaucoup ! C'est nickel !

Reste donc le problème du formulaire de contact : c'est donc uniquement chez moi que l'on retrouve ce comportement ?
Je vais essayer d'installer chromium et tester avec. Peut-être est-ce un bug de firefox 5.0.

Encore un grand merci !

Édit : ah et bien joué pour les polices ! Elles rendent carrément mieux comme ça !

Edit-2 : pour le formulaire de contact : même problème avec google chromium.

Je pense que ça vient de ce morceau du code du formulaire :

global $plxShow;
	
	if ($plxShow->plxMotor->style == "theme-cm") {
		echo "</div>
			</div>
			</div>";
		include('themes/'.$plxShow->plxMotor->style.'/sidebar.php');
		include('themes/'.$plxShow->plxMotor->style.'/footer.php');
	} else {
		echo "</div>";
		include('themes/'.$plxShow->plxMotor->style.'/sidebar.php');
		echo "</div>";
		include('themes/'.$plxShow->plxMotor->style.'/footer.php');
	}
}

include('themes/'.$plxShow->plxMotor->style.'/header.php');
if ($plxShow->plxMotor->style == "theme-cm") {
?>

<div style="width: 100%; float: left; overflow: hidden;">
	<div style="padding: 0 10px; margin: 20px 290px 0 10px;">
		<h2 class="entry-title"><?php echo $plxPlugin->getParam('tabname'); ?></h2>
		<div style="margin: 10px 0 15px; font-size: 0.9em;">

Je vais modifier un peu, pour voir.

Édit-3 : modifier ou supprimer le passage après <div, ne change rien.

Par contre, modifier le passage entre les ?>, chamboule complètement la présentation !

Donc ce doit être dans ce coin là qu'il faut modifier quelque chose.
Je vais bricoler un peu ce passage, on va voir ce que cela donne !

Je crois que j'ai oublié de le préciser

: l'addon en question est celui-ci :
http://forum.pluxml.org/viewtopic.php?id=2491

Edit : si je m'amuse à intercaller cette ligne (en gras) :

<div id="page">
<div style="padding: 0 178px; margin: 0px 0px 0 0px;">
<div id="content">
<h2><?php echo $plxPlugin->getParam('tabname'); ?></h2>
<?php
}

Dans le fichier contact_form.php, ça marche, mais ça ne résiste pas à un changement de résolution.
Comment faire ça proprement ?

Bloody · juillet 2011

Je t'ai répondu sur la discussion du plugin.

Problème placement du captcha et de la page de contact.

Réponses