28220 sujets

CSS et mise en forme, CSS3

Ecart entre le haut de page et un tableau

Bonjour

Qui sait comment faire pour qu'un tableau centré horizontallement soit tout en haut de ma page sans avoir les 3 ou 4 px qui me décale tout par rapport à mon fond de page.

D'avance merci.
Administrateur
Bonjour Winnie et bienvenue,

As-tu pensé à supprimer les marges par défaut du document (body) ?
Merci pour ces réponses aussi rapide

Je viens de tester ceci

.body{
background-image:.....
border :0;
margin : 0;
padding: 0;
}

Mais cela ne change rien au problème j'ai toujours mon tableau qui est plus bas de 3 ou 4 px par rapport au haut de la page.

Je dois me tromper dans le code pour annuler les marges automatique du body.

D'avance merci.
Modifié par Winnie (17 Jun 2005 - 16:08)
Salut,

un truc du genre

body {margin: 0;
padding: 0;
}

Ainsi que te l'a indiqué Macpom...
Modifié par bouquins (17 Jun 2005 - 16:07)
Non cela ne change rien, je tacherai de vous mettre les exemples ce soir sur internet, mais là je n'ai pas de connexion FTP donc souci.
Si le PNG24 bits était pris en compte par IE, je serai pas là a chercher une solution pour contourner les problèmes, mais bon.

A ce soir et merci pour vos idées.
Le png nous donnerait une image de son problème...
Tu as un "binzz" dans ton code : enlève le point (".") devant "body", ce n'est pas une classe, et tes infos de css ne sont pas prises en compte...
Et bien admettons la chose suivante :
Tu veux avoir un fond de page avec dégradé.
Puis au centre de ta page un titre fait sous photoshop (sous lequels tu veux avoir le degradé)

Tu as donc plusieur solution devant toi :
- Le fichier Gif : non trop dégueulase, sa bave etc...
- Le fichier PNG de ton titre et la transparence, ainsi ton background sera une image d'un pixel et tu auras l'effet voulu sous ton titre en PNG. Mais IE 6 ne gère plus le PNG 24 et 48 bits, je ne suis donc dans la ...
- Tu te dit alors, on va garder le mm fond (1 px en jpg) et je vais faire un jpg de mon titre avec le mm degradé que je colle dans un tableau tout en haut de la page et là l'idée est bonne.

Mais il y a un mais, c'est que tu ne sais pas pour qu'elle raison ton tableau en question qui est centré horizontallement et qui devrait être tout en haut de la page n'y est pas. il est juste plus bas de quelques px.
Là est le fond du pb et la solution pour le moment il n'y a pas...

Smiley bawling

La solution est donc dans ce petit morceaux de code :

<STYLE type="text/css"><!-- 
#haut {
body {
background-color: #666666;
background-image: url(../images/fond.jpg);
background-repeat-x;
margin : 0;
padding: 0;
}
--></STYLE>
</head>
<body id="body">
...
</body>

Modifié par Winnie (17 Jun 2005 - 16:39)
Winnie a écrit :

- Tu te dit alors, on va garder le mm fond (1 px en jpg) et je vais faire un jpg de mon titre avec le mm degradé que je colle dans un tableau tout en haut de la page et là l'idée est bonne.

Mais il y a un mais, c'est que tu ne sais pas pour qu'elle raison ton tableau en question qui est centré horizontallement et qui devrait être tout en haut de la page n'y est pas. il est juste plus bas de quelques px.
Là est le fond du pb et la solution pour le moment il n'y a pas...


Ok je comprend mieux. Mais tu te fais fausse route. Pourquoi utiliser un tableau pour ta mise en page? Ce n'est pas fait pour, un tableau sert à afficher des données tabulaires, pas à mettre en forme une page.

Dans ton cas tu devrais mieux utiliser un bloc (balise <div>).

Ce turoriel t'aidera à mieux comprendre :
construire un site sans tableaux

Winnie a écrit :

La solution est donc dans ce petit morceaux de code :

<STYLE type="text/css"><!-- 
#haut {
body {
background-color: #666666;
background-image: url(../images/fond.jpg);
background-repeat-x;
margin : 0;
padding: 0;
}
--></STYLE>
</head>
<body id="body">
...
</body>



Code qui comprend quand même pas mal d'erreurs, à moins que tu ne te soit trompé en faisant ton copié/collé. Ta règle #haut n'est pas fermées correctement (il manque la deuxieme accollade). Ensuite tu met <body id="body"> qui ne sert à rien et ne risque pas de fonctionner (il n'y a pas d'identifiant #body dans ton code HTML. Et "background-repeat-x;" n'existe pas (c'est "background-repeat: repeat-x;")

Je pense que tu as des problèmes avec l'application des règles en CSS.

Petit récapitulatif rapide :


selecteur
{
 propriétés : valeurs;
}


ça c'est la syntaxe de base pour une règle CSS. selecteur etant les éléments auxquels tu souhaite appliquer la règle (soit les propriétés et leurs valeurs).

selecteur peut etre :

- Une balise HTML existante, par exemple body s'appliquera au code HTML <body>.

Un balise doit être une balise HTML existante.

- Une classe .maclasse s'appliquera aux élémentents HTML ayant cette classe, exemple : <body classe="maclasse">, <div classe="maclasse">, etc...

Une classe, en CSS, commence par un point (.).

- Un id #monid, le principe est identique aux classes mais tu ne doit avoir QU'UN SEUL id dans ton document HTML. Exemple : <div id="monid">

Un id, en CSS commence par # et ne doit pas contenir de chiffre juste aprés le #.


Si je reprend ton code apres ces quelques explications on devrait plutôt avoir quelques chose comme ça :


<style type="text/css">
<!--
body {
background: #666 url(../images/fond.jpg) repeat-x;
margin : 0;
padding: 0;
}

#haut {
 /* ce que tu veux... */
}

-->
</style>
</head>

<body>
<div id="haut"></haut>
</body>

Modifié par jb_gfx (17 Jun 2005 - 17:08)
Sujet clos
Aller à