28172 sujets

CSS et mise en forme, CSS3

Probleme avec mon menu navigation

Salut a tous j'ai un problème avec l'affichage de mon menu sous firefox ? je vois pas d'ou vient l'erreur puisque sous chrome il s'affiche bien : http://www.ong-centrafrique.org/
s'il y a besoin d'autre renseignements pas de problème merci a vous
Modifié par 6l20 (02 May 2013 - 18:36)
Bonjour,

Voici le rendu que j'ai :
Sous Firefox :
upload/12813-Firefox.png
Sous Chrome :
upload/12813-Chrome.png

Le tout sous mac.
Du coup, je dirai que c'est sous Chrome que vous avez un souci Smiley ohwell
A priori quelques erreurs dans votre code (servez-vous du validateur du W3C pour valider votre code), peut-être également un problème d'encodage.

Pour info, la balise hgroup vient d'être dépréciée.
Salut d'abord merci de me répondre 6120
suite à ta réponse j'ai passer mon site au w3c il m'affiche
9 La règle @charset doit apparaître au début du fichier. Vérifiez qu'il n'y a pas d'espace avant. @charset "UTF-8";
10 @import n'est pas autorisé s'il apparaît après toute déclaration autre que @charset et @import. @import url(http://fonts.googleapis.com/css?family=Alegreya+SC:900italic|Economica:700);
471 * Erreur lors de l'analyse grammaticale. */ #domainesExpertises , p { text-align:justify; padding-left:3.9%; }


par la suite la balise hgroup est déprécier??
ok pour "at-rules" c'est regler w3c m'affiche aucune erreur pour hgroup cela peut-il avoir un impact si oui pourquoi cela reste une balise je vérifie mon encodage en html

sérieux pouvez vous m'aidez plus je suis dans le flou

mon fichier wp-config est encodé en utf8,
aprés pour vérifier l'encodade de mes fichiers je ne sais pas
Modifié par Kincaid (02 May 2013 - 16:37)
a écrit :
Line 34, Column 20: The hgroup element is obsolete

Ceci dit, personne ne va vous fusiller, et cela ne nuira pas vraiment à votre site.

En ce qui concerne votre déclaration de feuille de styles :
<link rel="stylesheet" href="http://www.ong-centrafrique.org/wp-content/themes/RADI-RCA/style.css">
Il faut déclarer l'attribut type :
<link rel="stylesheet" [b]type="text/css"[/b] href="http://www.ong-centrafrique.org/wp-content/themes/RADI-RCA/style.css">

De même pour la déclaration de vos fichiers JavaScript :

<script src="http://www.ong-centrafrique.org/wp-content/themes/RADI-RCA/js/jquery/carouFredSel.js"></script>

<script [b]type='text/javascript'[/b] src="http://www.ong-centrafrique.org/wp-content/themes/RADI-RCA/js/jquery/carouFredSel.js"></script>

Ceci :
                 <!-- Begin MailChimp Signup Form -->
<link href="http://cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
	#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
	/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>

Devrait se trouver entre vos balises 
<head>ici<head>
et non dans le corps de document.
Plus loin :
</section>
			 </section><!-- END content -->

Une fermeture de section de trop Smiley cligne

Une fois le code corrigé, nous regarderons ce qui cloche au niveau de votre menu Smiley cligne
Modérateur
Bonsoir,

Il y a de gros problèmes de débordement des flottants sur les éléments de la page, qui mettent le boxon à certaines tailles de l'écran,

un 


  #content, #mainNav { clear: both; }


permet déjà d'y voir plus clair…
Pour en savoir plus: Empêcher les flottants de dépasser de leur conteneur

@6l20: les attributs type sur script et style sont optionnels en HTML5, prenant par défaut les valeurs, respectivement "text/javascript" et "text/css"… pour link rel="stylesheet", l'attribut type est aussi optionnel et vaut par défaut "text/css". Ce qui est important, c'est que le serveur envoie les bonnes en-têtes
kustolovic a écrit :
Bonsoir,
@6l20: les attributs type sur script et style sont optionnels en HTML5, prenant par défaut les valeurs, respectivement "text/javascript" et "ext/css"… pour link rel="stylesheet", l'attribut type est aussi optionnel et vaut par défaut "text/css". Ce qui est important, c'est que le serveur envoie les bonnes en-têtes

Sir, yes sir Smiley cligne
j'ai essayé comme méthode la première en affectant un clear:both;
sur les balises mainNav,
mais voila rien de plus
Modérateur
C'est déjà mieux, seulement à la réduction de taille du navigateur, le slideshow part en sucette aussi à cause des flottants, il faut aussi appliquer le clear: both; sur la div #content.

Ensuite le dernier problème est le bandeau du haut avec la phrase «RESEAU AFRICAIN POUR LE DEVELOPPEMENT INTEGRE. BUREAU DE CENTRAFRIQUE» qui passe à la ligne.

Voici une solution:

1) enpêcher les boites de passer à la ligne:
header hgroup { white-space: nowrap; }


2) Permettre à la phrase de se placer sur 2 lignes:
header hgroup h2 { white-space: nowrap; }


3) maintenant à petite taille la phrase passe sur deux lignes, mais ça casse tout à cause d'un line-height de 170px … 2 solutions:

a) supprimer le line-height de 170px et aligner "à la main" avec un padding-top de 60px par exemple.
b) Utiliser la technique décrite là: http://www.alsacreations.com/tuto/lire/1032-comment-centrer-verticalement-sur-tous-les-navigateurs.html#cv_lignes pour aligner verticalement plusieurs lignes de texte.
header hgroup h2 { white-space: nowrap; }
Sujet clos
Aller à