28173 sujets

CSS et mise en forme, CSS3

Bonjour voilà j'ai quelque petit problème avec ma page. Voilà tout dabord le code de ma css
body 	{
	background-color: #28353D;
	margin-top: 65px;
		}

#global	{
	background-image: url(../img/design/bg_main.png);
	background-repeat: repeat-y;
	margin-left: auto; /* pour que #main soit centrer */
	margin-right: auto;
	width: 759px;
		}

#main	{
	margin: 0px 18px 0px 18px ;
		}


Et la page ICI
Divers problèmes apparaisse:_ il y a une répétition du background horizontale en bas de la page qui n'apparait pas dans dreamweaver
_la marge en haut n'est pas respecté, il y a un espace entre le header et le texte trop important par rapport au bas qui me convient

Pourriez-vous m'aider ? :jap:
Bonsoir,
a écrit :
il y a une répétition du background horizontale en bas de la page qui n'apparait pas dans dreamweaver


Il ne faut pas te fier a Dreamweaver qui n'affiche pas forcémment ce que tu vas obtenir sur un navigateur même s'il fait parti des editeur html qu'on qualifie abusivement d'éditeur WYSIWYG.

Pour eviter toute sorte de décalage intempestif et de différences entre navigateurs, tu px déclarer ça
 * [margin:0; padding:0}
voir les explications
Modifié par Hermann (27 Feb 2006 - 23:16)
Ok tu dois ajouter
dans ta CSS
#global	img {display:block}


Les images ont un espace de quelques pixels dessous.
Cela etirait ton div en hauteur.
Une astuce pour voir d'ou viennent les espaces génant est de déclarer
border: 1px solid #fff /*ou #000 sur fond clair*/


Cela ne s'appliquera qu'aux images se trouvant dans ton div global et a pour effet d'afficher les image l'une au dessous de l'autre.
Modifié par Hermann (27 Feb 2006 - 23:31)
Je suis obligé d'avoir deux classes:
#global	img {display:block}

#global	{
	background-image: url(../img/design/bg_main.png);
	background-repeat: repeat-y;
	margin-left: auto; /* pour que #main soit centrer */
	margin-right: auto;
	width: 759px;
		}


OU bien je peux les mettre dans un seul ?
Lis ce que j'avais oublié de préciser dans mon précédent post.
Oui tu dois le déclarer en plus et de préférence dessous dans ta css pour suivre l'odre logique de la cascade.
Si tu ne veux pouvoir afficher des image en ligne dans ton div global, tu devra annuler le display block par un display:inline.
Modifié par Hermann (27 Feb 2006 - 23:37)
Hermann a écrit :
Lis ce que j'avais oublié de préciser dans mon précédent post.
Oui tu dois le déclarer en plus et de préférence dessous dans ta css pour suivre l'odre logique de la cascade.
Si tu ne veux pouvoir afficher des image en ligne dans ton div global, tu devra annuler le display block par un display:inline.


Ou sinon, vu qu'il s'agit d'une seule image :
img#basdepage {display: block;}


Comme l'explique Hermann, il ne s'agit pas d'une "répétition" que tu as en bas de ta page, mais de la simple continuation de ton bloc conteneur. Appliques-lui un border: solid 1px red; et tu verras ses contours...

Dans la foulée, une ou deux références sur le type de graphisme que tu veux avoir :
http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html
http://web.covertprestige.info/test/06-page-fluide-avec-bordures-en-html-et-css.html