28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous, une bande grise vient se placer sous ma bannière dont l'alignement avec la partie forum laisse plus qu'à désirer....De plus mon titre n'apparait qu'en transparence.
Des idées?
Merci d'avance.
http://www.mathstrass.fr/Forum
Modifié par Flotch (14 Sep 2006 - 14:31)
Bonjour Flotch,

Je ne voudrais pas te décourager, bien au contraire, mais ta page est tellement mal conçue que je n'arrive pas à isoler ton problème.

Pourquoi ne pas stocker tous les styles dans une feuille de style à part et surtout ne pas faire de déclaration à l'intérieur des balises html ?

Il y a sûrement plus simple à faire pour mettre en page ce design...

Par exemple : réunir les deux images de la bannière en une, la mettre en background d'un conteneur (et un seul) d'en-tête ...

Pourquoi tous ces div imbriqués ?
Pour les div imbriqués, je pense voir d'où ça vient :

    <div align="center">
      <div class="PDDiv">
        <div style="text-align:center;background:url(templates/default/images/page_bg.gif) center #7F7F7F repeat-y">
               <div style="width:800px;
	       margin-right:auto;
	       margin-left:auto;
	       margin-left:-10px;
	       margin-top:0px;
	       padding:0px">
                            <div style="background:url(templates/default/images/header.gif) top #7F7F7F no-repeat;
	                    height:76px;
	                    margin:0;
	                    padding:25px 25px 0 25px;
	                    clear:both;
	                    text-align:left">
                                             <h1 style="padding:0;
	                                     margin:0;
	                                     font-weight:normal;
	                                     line-height:.7em;
	                                     font-size:2.1em;
	                                     letter-spacing:-.1em;
                                             color:#ffffff;
	                                     font-family:helvetica">M@thstrass</h1>
                           </div>
<div style="margin:0;
	text-align:left;
	display:block;
	height:95px;
	background:url(templates/default/images/header_image3.jpg) center center transparent 
repeat-y"></div>
             </div>

</div>

</body>

À noter au passage que le </body> à la fin de cet extrait ne marque pas la fin de la page.

Passer des styles en-ligne via l'attribut CSS style ne devrait être utilisé que ponctuellement, et pour des détails. Les déclarations de style devraient, dans le cadre d'une conception efficace, rejetées dans une feuille de style séparée de la page HTML elle-même.

Il y a plusieurs erreurs à corriger avant de s'attaquer aux (possibles) problèmes de rendu :
- virer le prologue XML qui non seulement ne sert à rien (le XTML 1.0 servi avec le type MIME "text/html" n'est pas du XML, mais bien du HTML), mais en plus fait passer IE Windows en mode Quircks, ce qui n'est pas une bonne idée ;
- corriger les différentes erreurs de syntaxe (utiliser un validateur de syntaxe HTML) ;
- virer les styles en-ligne pour les placer dans une feuille de style.

Une fois que ceci sera fait, on pourra se pencher sur les problèmes de rendu. Smiley smile
Au passage, je signale juste que j'ai trouvé l'origine du problème de rendu, mais comme je suis un affreux pédagogue je ne la donne pas : à toi de la voir une fois que tu auras un peu « éclairci » ta maquette. Smiley cligne
Bonjour,

Un véritable jeu de piste ta page ... +1 Vero
Il y a vraiment sûrement plus simple, documentes toi sur les tutos

Bon courage
Merci pour toutes ces réponses, j'ai essayé de tout déclaré dans une feuille de style mais rien n'y fait aucune image n'apparait (voir sujet :ma bannière n'apparait pas... d'avant hier) donc j'ai utilisé cette méthode peu pratique....)
Si quelqu'un a un tuto clair pour intégrer un phorum 5 dans un blog wordpress, je suis preneur mais j'ai cherché avant de poster ici.
Si quelqu'un a une idée pour faire marcher mes déclarations dans la feuille de style
(voir sujet :ma bannière n'apparait pas...) je suis preneur aussi.
Si quelqu'un peut tout simplement m'aider à corriger ce problème de bannière j'en serai reconnaissant.

Merci
P.S: je suis bloqué sur ces problèmes depuis quatre jours et là je ne sais plus ou chercher.
Flotch a écrit :
Si quelqu'un peut tout simplement m'aider à corriger ce problème de bannière j'en serai reconnaissant.

Dans les styles en-ligne (directement dans le HTML) des blocs qui composent ta bannière, tu déclares une hauteur de 76px de hauteur. Or, 76 pixels c'est trop haut pour ton image de fond qui est plus courte que ça. Après test, il semblerait que ça corresponde très exactement à 51px.

Voilà pour la partie visible.

Je maintiens qu'il serait très utile de mettre ces déclarations dans la feuille de style, ce qui marche parfaitement pourvu que l'on respecte la syntaxe CSS.

Une petite révision sur la syntaxe CSS ? Smiley cligne

Bon, je vais voir si je trouve le sujet dont tu parles.
Merci beaucoup mpop tout s'affiche et j'ai tout déclaré dans le fichier style!!!
Il me reste à régler le problème de la bande grise, du titre qui n'apparait que faiblement et du problème d'alignement....
Au travail.
Merci à tous: il suffisait de jouer sur la largeur de l'image...
Modifié par Flotch (15 Sep 2006 - 12:24)
Flotch a écrit :
Merci à tous: il suffisait de jouer sur la largeur de l'image...

Hm... en l'occurence plutôt sur la hauteur.
Alternativement, on aurait pu adapter la hauteur du bloc à celle de l'image, bien sûr.