[Résolu] Besoin d’aide CSS

  • Statut : non résolu
14 sujets de 1 à 14 (sur un total de 14)
  • Auteur
    Messages
  • #447995
    Jean-Marc
    Membre
    Chevalier WordPress
    142 contributions

    Salut à toutes et à tous,

    Sur le site que j’installe (http://www.crorb.org/wordpress/), j’ai ajouté une partie de connexion. Toutefois, elle ne s’affiche pas comme le search form qui est au dessus (champs et textes plus grands et couleur différente).
    Je ne comprend pas vraiment pourquoi. Ca doit être une question de CSS mais je ne trouve pas ce que je dois faire pour que mes textes et les grandeurs des champs soient comme le searchform.

    Je vous mets ci-dessous, les codes de ces fichiers.

    Merci de vos z’avis z’avisés,
    Jean-Marc

    Sidebar.php

    <div id="sidebar">
    <?php if(function_exists('polyglot_list_langs')){
    polyglot_list_langs(true);
    }
    ?>
    <div id="noindent">
    <ul>
    <li>
    <h2><?php _e('Search','relaxation'); ?></h2>
    <?php include (TEMPLATEPATH . '/searchform.php'); ?>
    </li>
    <?php
    	global $user_ID, $user_identity, $user_level;
    	get_currentuserinfo();
    	if (!$user_ID):
    ?>
    
    		<h2><?php _e('Connection','relaxation'); ?></h2>
    		<form name="connexionform" id="connexionform" action="<?php echo get_settings('siteurl'); ?>/wp-login.php » method= »post »>
    			<?php _e('Name:','relaxation') ?> <br> <input type="text" name="log" id="log" value="" size="14" tabindex="1" /><br><br>
    			<?php _e('Password:','relaxation') ?> <br> <input type="password" name="pwd" id="pwd" value="" size="15" tabindex="2" /><br><br>
    
      <?php _e('Remember me','relaxation'); ?> <input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="3" /> 
    			<input type="submit" name="submit" value="<?php _e('Login','relaxation'); ?>  » tabindex= »3″ />
    			<input type="hidden" name="redirect_to" value="<?php echo convert_chars($_SERVER['REQUEST_URI']); ?>« /><br>
    			<a href="<?php echo get_option('siteurl'); ?>/wp-register.php?redirect_to=<?php the_permalink(); ?>« ><?php _e('Inscription','relaxation') ?></a> |  <a href="<?php bloginfo('wpurl'); ?>/wp-login.php?action=lostpassword » title= »<?php _e('Password Lost and Found') ?>« ><?php _e('Lost your password?','relaxation') ?></a>
    		</form>
    <?php 
    	else:
    ?>
    		<h2><?php _e('Connected: ','relaxation') ?><?php echo $user_identity; ?></h2>
    		<a href="<?php echo get_settings('siteurl') . '/wp-login.php?action=logout&redirect_to=' . $_SERVER['REQUEST_URI']; ?> » title= »D?nnecter l’utilisateur en cours »><?php _e('Logout','relaxation'); ?></a><br>
    <?php
    		if (1 >= $user_level) : ?>
    			<a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php?redirect_to=<?php the_permalink(); ?>« ><?php _e('Modify your profile','relaxation') ?></a>
    <?php 
    		else : ?>
    			<?php wp_register('', ''); ?> 
    <?php 
    		endif; ?> 
    <?php
    	endif;
    ?>
    
    <?php wp_list_pages('title_li=<h2>Pages</h2>‘ ); ?>
    <li>
    <h2><?php _e('Categories','relaxation'); ?></h2>
    <ul>
    <?php list_cats(0, '', 'name', 'asc', '', 1, 0, 1, 1, 1, 1, 0,'','','','','') ?>
    </ul>
    </li>
    <li>
    <h2><?php _e('Archive','relaxation'); ?></h2>
    <ul>
    <?php wp_get_archives('type=monthly'); ?>
    </ul>
    </li>
    <?php get_links_list(); ?>
    <li>
    <!--
    <h2><?php _e('Meta','relaxation'); ?></h2>
    <ul>
    <?php wp_register(); ?>
    <li><?php wp_loginout(); ?></li>
    <?php wp_meta(); ?>
    </ul>
    </li>
    -->
    <li><br /><br /><a href="<?php bloginfo('rss2_url'); ?> » title= »<?php _e('Entries (RSS)', 'relaxation')?>« ><img src="<?php bloginfo('template_directory'); ?>/images/rss.png » alt= »<?php _e('Entries (RSS)', 'relaxation')?> » height= »15″ width= »80″ /></a></li>
    <li><a href="<?php bloginfo('comments_rss2_url'); ?> » title= »<?php _e('Comments (RSS)', 'relaxation')?>« ><img src="<?php bloginfo('template_directory'); ?>/images/rss-comments.png » alt= »<?php _e('Comments (RSS)', 'relaxation')?> » height= »15″ width= »80″ /></a></li>
    <li><br /><a href="http://validator.w3.org/check/referer" title="Valid XHTML 1.1"><img src="<?php bloginfo('template_directory'); ?>/images/valid-xhtml11.png » alt= »Valid XHTML 1.1″ height= »15″ width= »80″ /></a></li>
    <li><a href="http://jigsaw.w3.org/css-validator/check/referer" title="Valid CSS"><img src="<?php bloginfo('template_directory'); ?>/images/valid-css.png » alt= »Valid CSS » height= »15″ width= »80″ /></a></li>
    </ul>
    </div> <!-- end of noindent -->
    </div> <!-- end of sidebar -->

    searchform.php

    <form method="get" id="searchform" action="<?php echo $_SERVER['PHP_SELF']; ?>« >
    <div><input type="text" value="<?php echo wp_specialchars($s, 1); ?> » name= »s » id= »s » />
    </div>
    </form>

    search.php

    <?php get_header(); ?>
    <div id="content">
    <?php if (have_posts()) : ?>
    <h2 class="pagetitle"><?php _e('Search Results','relaxation'); ?></h2>
    <?php while (have_posts()) : the_post(); ?>
    <div class="post">
    <h1 id="post-<?php the_ID(); ?>« ><a href="<?php the_permalink() ?> » rel= »bookmark » title= »Permanent Link to <?php the_title(); ?>« ><?php the_title(); ?></a></h1>
    <span class="date"><?php the_time(__('F dS, Y','relaxation')) ?></span>
    <div class="entry">
    <?php the_excerpt() ?>
    </div>
    <p class="postmetadata"><?php the_category(', ') ?> <strong>|</strong> <?php edit_post_link(__('Edit','relaxation'),'','<strong> |</strong>‘); ?>  <?php comments_popup_link(__('Comments (0)','relaxation'), __('Comments (1)','relaxation'), __('Comments (%)','relaxation')); ?></p> 
    <!--
    <?php trackback_rdf(); ?>
    -->
    </div>
    <?php endwhile; ?>
    <div class="navigation">
    <div class="alignleft"><?php posts_nav_link('','',__('« Previous Entries','relaxation')) ?></div>
    <div class="alignright"><?php posts_nav_link('',__('Next Entries »','relaxation'),'') ?>

    < ?php else : ?>

    < ?php _e('Not found.','relaxation') ?>

    < ?php include (TEMPLATEPATH . '/searchform.php'); ?>
    < ?php endif; ?>

    < ?php get_sidebar(); ?>
    < ?php get_footer(); ?>

    style.css

    /*
    
    	Theme Name: Relaxation
    	URI: http://www.jowra.de/wp/
    	Description: A clean, simple and soothing theme. Now multilingual.
    	Version: 2.0
    	Author: John Wrana
    	Author URI: http://www.jowra.de/
    
    	Relaxation
    	http://www.jowra.de/wp/2005/04/wordpress-theme-relaxation/
    	This theme was designed and built by John Wrana (Jowra),
    	whose blog you will find at http://www.jowra.de/wp/
    	E-Mail: jowra [at] jowra [dot] de
    	
    	While I’ve written this CSS for my own and nearly from scratch,
    	the well-known Kubrick-Theme by Michael Heilemann (http://binarybonsai.com/kubrick/)
    	functioned as a base-template to start working.
    	
    	The CSS, XHTML and design is released under the GPL:
    	http://www.opensource.org/licenses/gpl-license.php
    	
    */
    
    html, body {
    	margin: 0;
    	padding: 0;
    	text-align: center;
    }
    
    body {
    	background: #a9ac99 url(images/top_right.gif) no-repeat top right;
    	font-size: 13px;
    	font-family: ‘Trebuchet MS’, ‘Bitstream Vera Sans’, Verdana, Arial, ‘Lucida Sans’, ‘Lucida Sans Unicode’, Helvetica, sans-serif;
    	padding: 20px 0;
    	color: #000000;
    }
    
    a {
    	background: inherit;
    	color: #a06000;
    	text-decoration: none;
    }
    
    acronym {
    	text-decoration: none;
    	border-bottom: 1px dotted #808979;
    }
    
    blockquote {
    	border-left: 1px solid #e0e0d0;
    	padding-left: 10px;
    	margin: 0 30px;
    }
    
    code {
    	background: inherit;
    	color: #005577;
    	text-align: left;
    }
    
    h1, h1 a {
    	background: inherit;
    	color: #005577;
    	font-size: 20px;
    	font-weight: normal;
    	font-family: Georgia, ‘Times New Roman’, Times,’Lucida Sans’, ‘Lucida Sans Unicode’, serif;
    	margin: 40px 0 0 0;
    	padding: 0;
    	text-decoration: none;
    }
    
    h2, h2 a {
    	background: inherit;
    	color: #990000;
    	font-size: 13px;
    	font-weight: normal;
    	letter-spacing: 0.09em;
    	margin: 0;
    	padding: 0;
    }
    
    h3 {
    	background: inherit;
    	color: #005577;
    	font-size: 13px;
    	margin: 15px 0 15px 0;
    	padding: 0;
    }
    
    h4 {
    	font-size: 11px;
    	font-weight: normal;
    	margin: 0;
    	padding: 0;
    }
    
    img {
    	border: none;
    }
    
    ol, form {
    	margin: 0;
    	padding: 0;
    }
    
    ul {
    	list-style-type: circle;
    }
    
    p {
    	line-height: 1.5em;
    	text-align: justify;
    }
    
    small {
    	font-size: 10px;
    	line-height: 1.2em;
    }
    
    #comment {
    	background: #ffffff;
    	border: 1px solid #e9e9d9;
    	color: #595949;
    	font-size: 11px;
    	padding-left: 2px;
    	vertical-align: middle;
    	width: 350px;
    }
    
    #content {
    	background: inherit;
    	border: none;
    	color: #000000;
    	margin: 0;
    	padding: 0 30px 30px 67px;
    	text-align: left;
    	width: 430px;
    }
    
    #content a:hover {
    	text-decoration: underline;
    }
    
    #content img {
    	float: left;
    	margin: 5px 15px 0 0;
    	border: 1px solid #e0e0d0;
    }
    
    #email, #author {
    	background: #ffffff;
    	border: 1px solid #e9e9d9;
    	color: #595949;
    	font-size: 11px;
    	padding-left: 2px;
    	vertical-align: middle;
    }
    
    #footer {
    	background: url(images/bottom.gif) no-repeat bottom center;
    	background-color: inherit;
    	clear: both;
    	color: #808979;
    	font-size: 11px;
    	height: 65px;
    	margin: 0;
    	padding: 10px 10px 10px 67px;
    }
    
    #header {
    	background: inherit;
    	color: #a0a999;
    	font-size: 11px;
    	height: 120px;
    	margin: 0;
    	padding: 8px 30px 0 7px;
    	text-align: right;
    	width: 490px;
    }
    
    #header a {
    	background: inherit;
    	color: #990000;
    }
    
    #header img {
    	border: none;
    }
    
    #page {
    	background: url(images/middle.gif) repeat-y top center;
    	margin: 0 auto;
    	padding: 0;
    	text-align: left;
    	width: 714px;
    }
    
    #s {
    	background: #ffffff;
    	border: 1px solid #e0e0d0;
    	color: #595949;
    	font-size: 11px;
    	height: 15px;
    	padding-left: 2px;
    	vertical-align: middle;
    	width: 115px;
    }
    
    #sidebar {
    	border: none;
    	float: right;
    	font-size: 11px;
    	margin: 0;
    	padding: 0 27px 30px 0px;
    	text-align: left;
    	width: 128px;
    }
    
    #sidebar a {
    	background: inherit;
    	color: #444433;
    }
    
    #sidebar a:hover {
    	background: inherit;
    	color: #a06000;
    }
    
    #sidebar h2 {
    	background: inherit;
    	color: #005080;
    	font-size: 11px;
    	font-weight: normal;
    	letter-spacing: 0.3em;
    	margin: 20px 0 10px 0;
    	padding: 0;
    }
    
    #sidebar li {
    	line-height: 1.5em;
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    }
    
    #sidebar ul {
    	list-style-type: none;
    	margin: 0 0 0 10px;
    	padding: 0;
    }
    
    #noindent {
    	margin: 0 0 0 -10px;
    	padding: 0;
    }
    
    #submit {
    	background: #ffffff;
    	border: 1px solid #e9e9d9;
    	color: #595949;
    	font-size: 11px;
    	margin: 0;
    	padding: 0 10px;
    }
    
    #top {
    	background: transparent url(images/top.gif) no-repeat top center;
    	height: 30px;
    }
    
    #url {
    	background: #ffffff;
    	border: 1px solid #e9e9d9;
    	color: #595949;
    	font-size: 11px;
    	padding-left: 2px;
    	vertical-align: middle;
    }
    
    #wrapper {
    	float: left;
    	margin: 0;
    	padding: 0;
    }
    
    .alignleft {
    	float: left;
    	text-align: left;
    }
    
    .alignright {
    	float: right;
    	margin-top: -1px;
    	text-align: right;
    }
    
    .commentbody {
    	color: #595949;
    	font-size: 11px;
    	margin: 0 0 10px 0;
    	padding: 15px 15px 5px 15px;
    	background: #f7f7f0;
    	border: 1px solid #f0f0e0;
    	position: relative;
    }
    
    .commentbody p {
    	line-height: 1.2em;
    }
    
    .commentlink {
    	font-size: 10px;
    }
    
    .commentlist {
    	list-style: none;
    }
    
    .commentcount {
    	background: inherit;
    	position: absolute;
    	right: 36px;
    	top: 0;
    	font-family: Georgia, Times, ‘Times New Roman’, serif;
    	font-size: 24px;
    	font-weight: bold;
    	color: #e0e0d0;
    	float: right;
    }
    
    html[xmlns] .commentcount {
    	position: absolute;
    	right: 7px;
    	top: 0;
    }
    
    .date {
    	background: inherit;
    	color: #808979;
    	font: 11px ‘Trebuchet MS’, Verdana, Arial, Helvetica, sans-serif;
    	letter-spacing: 0.09em;
    	margin: 0;
    	padding: 0 0 0 2px;
    }
    
    .navigation {
    	font-size: 11px;
    	padding: 40px 0 0 0;
    }
    
    .pagetitle {
    	font-size: 11px;
    	letter-spacing: 0.09em;
    	text-align: right;
    }
    
    .postmetadata {
    	background: inherit;
    	color: #808979;
    	font-size: 11px;
    	letter-spacing: 0.09em;
    	margin: 0;
    	padding: 0;
    	text-align: right;
    }
    
    .postmetadata a {
    	background: inherit;
    	color: #808979;
    }
    
    /* different postmetadata style for single.php */
    
    .alt {
    	line-height: 1.4em;
    	padding: 0 0 15px 30px;
    }
    
    .alt a {
    	background: inherit;
    	color: #005577;
    }

    #575998
    damino
    Participant
    Maître WordPress
    1243 contributions

    Salut, la taille de tes champs de connexion sont dans le XHTML (size: »15px »)

    Pour la mise en forme de ton imput de recherche c’est dans ta CSS

    #s {
    	background: #ffffff;
    	border: 1px solid #e0e0d0;
    	color: #595949;
    	font-size: 11px;
    	height: 15px;
    	padding-left: 2px;
    	vertical-align: middle;
    	width: 115px;
    }

    Maintenant reste à savoir quel est le modèle : ton champ de recherche ou de connexion ?

    Si c’est ton champ de recherche tu remplaces dans ta feuille de style le #s par #s, #log, #pwd

    Par ailleurs tu devrais valider ton site W3C car il semble y avoir des problèmes de balises

      et

    • dans ta sidebar …
    #575999
    Qwindoo
    Modérateur
    Maître WordPress
    2866 contributions

    A noter que si tu souhaites que tous tes champs de formulaires aient la même apparence, tu peux utiliser

    input

    sans utiliser d’ID, mais alors les boutons auront la même apparence 😕 Pour éviter ça, fais

    input[type= »text »]

    😉

    #576000
    Jean-Marc
    Membre
    Chevalier WordPress
    142 contributions

    Salut,

    Je vais adapter mon code.

    Par ailleurs tu devrais valider ton site W3C car il semble y avoir des problèmes de balises

      et

    • dans ta sidebar …

    J’avais remarqué de certaines choses semblent bizarres, mais je ne connais pas W3C. Comment fait-on pour vérifier le site ?

    Merci de votre aide, les amis,
    Jean-Marc

    #576001
    Qwindoo
    Modérateur
    Maître WordPress
    2866 contributions
    Jean-Marc wrote:
    J’avais remarqué de certaines choses semblent bizarres, mais je ne connais pas W3C. Comment fait-on pour vérifier le site ?

    Le WorldWideWeb Consortium est un organisme (fondé par le créateur du web) qui établit des spécifications pour les langages du web (XHTML, CSS, etc).

    Pour vérifier ton site, il faut passer ta page par le Validateur XHTML puis par le Validateur CSS 😉

    Par exemple, pour ta page d’accueil, tu obtiens 37 erreurs (ce qui empêche le validateur CSS de fonctionner)

    Heureusement, ces erreurs sont rapides à corriger :

    * Balises non fermées dans le bon ordre (voire non fermées du tout ^^ )
    * Mélange de types de balises (block et inline)
    * Non-Fermeture de balises spéciales comme <br />
    * Texte non encapsulé dans des balises de paragraphe

    * etc

    #576002
    Jean-Marc
    Membre
    Chevalier WordPress
    142 contributions

    J’en perds mon latin à certains endroits :

    * Mélange de types de balises (block et inline)

    Ca mange quoi l’hiver, ça ? en d’autre termes, c’est quoi les « block » et « inline » ? les div et li ?

    * Non-Fermeture de balises spéciales comme

    On m’a toujours dis que les
    n’avaient pas de fermeture, puisque ce sont des instructions uniques. Ca a changé ?
    Si oui, on fait comment ? on met un br et sa fermeture derrière ? Style
    . Ca servirait à quoi ?
    Il y a vraiment qqch qui m’échappe, ici.

    J’ai l’impression que je vais apprendre plein de choses dans très peu de temps.

    Merci de ton aide,
    Jean-Marc

    #576003
    damino
    Participant
    Maître WordPress
    1243 contributions

    Attention avec le XHTML certaines choses ont changés.
    Les balises qui ne se referment pas finissent par un slasch :

    devient



    devient
    Et pas de balises en majuscule en XHTML.

    A lire de toute urgence OpenWeb pour les différences HTML et XHTML …

    Pour les Block et Inline, c’est un concept super important pour tes feuilles de style. Pour cela à consulter de manière urgente : Alsacreations et Pompage.net

    Cela étant, ton problème est-il résolu ?

    #576004
    Qwindoo
    Modérateur
    Maître WordPress
    2866 contributions

    Oui, je me suis embrouillé dans le BBCode : <br /> et non
    😉

    #576005
    Jean-Marc
    Membre
    Chevalier WordPress
    142 contributions

    J’ai déjà remarqué ces / à la fin des br. De quoi s’agit-il ?
    Le
    bien connu n’est-il plus valable ?
    J’ai constaté aussi que Xinha (un wysiwyg) ajoute des / à la fin des balises .

    Pourquoi ces / ?
    A quoi servent-ils et en faut-il partout ? Une balise fermante type devient-elle ?

    Merci,
    Jean-Marc

    #576006
    Qwindoo
    Modérateur
    Maître WordPress
    2866 contributions

    En XHTML (le standard qui à remplacé l’HTML), toute balise doit être fermée. Pour cela, il existe deux cas :

    * La balise est une balise destinée à posséder un contenu (ex : un paragraphe) et dans ce cas on encadre le contenu de deux balises, dont la dernière dite « fermante » contient un / devant elle
    Ex:

    Mon superbe paragraphe</p>

    * La balise est une balise « vide » qui ne contient rien (ex: un retour à la ligne) et dans ce cas on la ferme en placant un / à la fin de celle-ci
    Ex:

    Une ligne<br />Une autre ligne

    Voilà 😉

    #576007
    Jean-Marc
    Membre
    Chevalier WordPress
    142 contributions

    Tu vois, je savais que j’allais apprendre des choses.

    Eh oui, je me fais vieux. Je ne connais pas le Xhtml. J’en suis encore resté au html et au php.
    C’est dur de se rendre compte qu’on vieilli … 😕

    Merci quand-même de ces informations claires, précises, et fort utiles,

    Jean-Marc

    #576008
    Qwindoo
    Modérateur
    Maître WordPress
    2866 contributions
    Jean-Marc wrote:
    Tu vois, je savais que j’allais apprendre des choses.

    Eh oui, je me fais vieux. Je ne connais pas le Xhtml. J’en suis encore resté au html et au php.
    C’est dur de se rendre compte qu’on vieilli … 😕

    Merci quand-même de ces informations claires, précises, et fort utiles,

    Jean-Marc

    Allons allons :rolleyes:

    Avec un peu de logique, le XHTML devient très vite un jeu d’enfant 😉

    #576009
    Jean-Marc
    Membre
    Chevalier WordPress
    142 contributions

    J’ai oublié de répondre à Damino (que je remercie au passage pour ses liens de tuto sur les blocks et inline).

    Mon problème est résolu. Merci
    Mais au fait, y a-t-il un moyen de notifier soi-même la discussion comme résolue ?

    #576010
    AmO
    Participant
    Maître WordPress
    4452 contributions

    Nan… et vu que j’ai pas envi de développer quelque chose pour PunBB 1.2 alors que la 1.3 ne vas pas tarder… bah c’est les modos qui s’en charge 😉

14 sujets de 1 à 14 (sur un total de 14)
  • Vous devez être connecté pour répondre à ce sujet.