28172 sujets

CSS et mise en forme, CSS3

[RESOLU] "Puce" invisible sur le premier H1

Bonjour,

J'ai un problème d'affichage d'une "puce" sur un titre H1.

Parce qu'une image vaut mieux qu'un long discours : sur la page suivante, le premier titre du contenu en H1 n'a pas de puce (en réalité c'est une image de background)
http://charade-concept.fr/puceH1/accueil06.html

Après avoir cherché un peu, je me suis rendu compte que l'image en question était dessous le Sub-header vert (#context-header placé en float:right;)

Ma page est structurée de la manière suivante : 1 float:left pour le menu, 2 float:right pour la colonne de droite, et ce fameux Sub-header, et mon centre, sans float.

Quand je met un padding-top de 140px à mon conteneur #centre, ça résout a moitié le problème sur firefox, mais pas sur Ie. Et ça n'est pas ce que je veut faire : Je voudrais que ma "puce" s'affiche de la même manière que le texte, et que si je vire la <div id="context-header">, tout le contenu remonte d'un seul et même homme ! Smiley lol

Une idée de comment procéder chers experts en float ?
Modifié par charade (27 Jan 2009 - 10:32)
Bonjour,

C'est une conséquence logique du positionnement flottant: les blocs flottants repoussent les contenus (texte), mais pas les blocs. Donc ici ton H1 commence au même niveau (vertical) que ton «sub-header», et seul le texte du titre est repoussé par le flottant.

La solution classique ici serait d'utiliser un clear:both (ou simplement un clear:right), mais vu que tu utilises trois blocs flottants pour ton en-tête et tes deux menus latéraux, ça risque d'être compliqué. À part revoir la structure (ordre des éléments HTML, utiliser un div supplémentaire si besoin...), je ne vois pas trop.

Ah si, peut-être, si le «sub-header» a une hauteur fixe:
- ne pas le faire flotter;
- ne pas lui donner de largeur fixe, mais utiliser un simple margin-left;
- faire remonter le menu de gauche avec un margin-top négatif, ou éventuellement du positionnement relatif.
Plus marrant encore, l'image apparait quand on scroll vers le bas et que le titre n'est plus visible O_o (sous IE6)

[ EDIT : Grilled et j'étais dans le faux en plus. ]

Ps. : ça me perturbe de voir un h2 avant un h1 dans le code
Modifié par Yasashii (22 Jan 2009 - 12:09)
Modérateur
bonjour ,
repositionner l'image ?
background:url('img/puceh1.jpg') left bottom no-repeat;


pour evter de jouer avec les contextes de formatages.

GC
Je reviens avec mon problème en partie résolu...

En ajoutant : 
#centre{
position:relative;
}


L'affichage de la puce est OK sur ie.

Cf http://charade-concept.fr/puceH1/accueil062.html

Par contre, mon #chemin (breadcrumb) contenant "Accueil >> Hop >> autre chose... " est maintenant positionné derrière le contenu et n'est donc plus cliquable (liens) / selectionnable sur firefox. (OK sur ie cette fois)

Il faudrait certainement remonter par dessus le chemin ? Avec z-index, ça ne semble pas fonctionner... any idea ?
Modifié par charade (26 Jan 2009 - 14:54)
Hello Smiley smile
charade a écrit :
Il faudrait certainement remonter par dessus le chemin ? Avec z-index, ça ne semble pas fonctionner... any idea ?
La propriété z-index ne fonctionne que si l'élément est positionné (absolument ou relativement). Si tu rajoutes :

#chemin{
[...]
position:relative;
z-index:2;}

Cela fonctionne parfaitement Smiley cligne
Merci !

BeliG a écrit :
Hello Smiley smile
La propriété z-index ne fonctionne que si l'élément est positionné (absolument ou relativement). Si tu rajoutes :

#chemin{
[...]
position:relative;
z-index:2;}

Cela fonctionne parfaitement Smiley cligne
Sujet clos
Aller à