Superposition de bloc

Bonjour,

Le site que je tente de moderniser est compose en CSS en deux blocs
Un corps gauche avec des pubs
Un corps principal central/droit avec une bordure
Je souhaite insérer 3 nouveaux éléments en tête de page
#top : un bandeau traversant la page tout en haut (un degradé de 12px de haut sur 1 de large avec repeat-x) servant de menu technique.
#top1 : un dégradé de 900px sur 1 que je voudrai utiliser en background de l’ensemble du haut de page (c’est à dire que je voudrai qu’il soit sous les élément suivants sur toute la largeur de page)
#top2 Une image que je veux coller en centre de page juste sous le top et qui doit servir de cadre à des banières
Enfin mes deux corps cités plus haut



Brouillon de ce que je veux obtenir

1ere question est-ce que c’est possible de créer un div (top1) qui sera recouvert par tous les autres « boites div »
2eme question pourquoi sur ma page test, le degradé #top se trouve-t-il décalé n’importe où et mon #top1 refuse-t-il d’apparaître

page css

Merci
HH

Salut,

Rapidement...
#top1 et #top2 n'ont pas d'attribut height.
En l'absence de contenu dans le div, la hauteur sera nulle, donc invisible.
Soit tu ajoutes un height dans la css pour les top concernés
Soit tu place du contenu (même un espace   devrait suffire pour voir apparaître qq chose).

question : pour le degradé du top1 pourquoi ne pas le mettre en background de ta page ? si tu le positionnes dans un div je crains que si tu lui donnes une dimension il pousse les autres div vers le bas.

Bonjour,

vous étiez en ballade hier ?

En fait, j'ai pas mal avancer vers le résultat que je voulais. (Ne vous inquiétez pas pour les couleurs et la qualité de la banniere, c'est du brouillon pour positionner les éléments).

A cette heure il me reste 2 PB à résoudre :
malgré que je sois en width 100 % et en margin-top 0 px j'ai un retrait blanc à gauche, en haut et à droite que je n'arrive pas à éliminer

Par ailleurs contrairement aux autres blocs CSS ma boite à bannière en haut n'a pas la même position dans FireFox que dans IE (elle se décalle à gauche dans FF)

comment puis-je régler ces 2 bug SVP.

Personne dans la journée ???

Bon, c'est à peu près fini, je veux bien recevoir des avis sur l'esthétique, si vous n'êtes pas trop méchant
Il me reste 2 pb :
Un pas grave : IE me donne un tour de page blanc (un retrait périphérique) d'une 20 de px qui tasse un peu le tout
Si vous savez comment l'éliminer je prend

Un plus embétant:
Avec la même valeur de margin-left FF me décale la bannière haute de 200 px à gauche par rapport à son cadre CSS dans IE
je vais voir un peu dans le forum si je trouve un cas similaire mais si vous savez déjà comment palier à ça n'hésitez pas

merci

HH
Modifié par papa22 (09 Oct 2008 - 16:22)

pour le contour en trop, essayes dans la css

body {
margin:0;
padding:0;
}

pour la marge différente entre FF et IE, c'est un grand classique.
Faut que utilises !important pour la marge chez FF et que tu redéfinisses la marge pour ie avec une valeur inférieur
exemple :

.maclasse {
margin-left:150px !important; /* pour FF */
margin-left:135px; /* poir IE */
}

Sinon, je viens de voir ton code, tu répliques tes div avec les même ID (top, top1, top2)

C'est évidement à déconseiller.
L'ID doit être unique.
Utilises les class pour des usages multiples.
Modifié par dolmenhir (12 Oct 2008 - 12:43)

dolmenhir a écrit :

pour la marge différente entre FF et IE, c'est un grand classique.
Faut que utilises !important pour la marge chez FF et que tu redéfinisses la marge pour ie avec une valeur inférieur
exemple :

.maclasse {
margin-left:150px !important; /* pour FF */
margin-left:135px; /* poir IE */
}

POur la premiere partie de ton message ok le margin du body c'était pile poil ça.
en revanche d'après mes tests l'attribut

!important

est prioritaire dans les deux navigateurs
j'ai tournée le PB dans tous les sens sur mon serveur et je ne trouve pas la solution.

C'est d'autant plus bizare que toute chose semblant égale par ailleurs, le margin-left de ma bannière (en premier plan) est correctement interpretté et semble positionné au bon endroit dans les les deux navigateurs.

papa22 a écrit :

POur la premiere partie de ton message ok le margin du body c'était pile poil ça.
en revanche d'après mes tests l'attribut

!important

est prioritaire dans les deux navigateurs
j'ai tournée le PB dans tous les sens sur mon serveur et je ne trouve pas la solution.

C'est d'autant plus bizare que toute chose semblant égale par ailleurs, le margin-left de ma bannière (en premier plan) est correctement interpretté et semble positionné au bon endroit dans les les deux navigateurs.

Toutes mes excuses
J'avais un point virgule qui était resté dans mon code avant le

!important

Dès qu'on met la syntaxe en couleur, ça se voie tout de suite mieux!!!

Et effectivement la solution était là !
Un grand merci à toi Grande table de pierre dressée
Modifié par papa22 (15 Oct 2008 - 18:20)

Bonjour,

A quoi cela sert-il de mettre "!important" ce serait tout de même plus propre d'utiliser des commentaires conditionnels non ?
Modifié par knarf (15 Oct 2008 - 19:02)