[Résolu] Position Absolute, left, right et IE

Salut à tous,

J'ai un petit problème dans la création de ma mise en page en "position: absolute;". Sous Firefox, pas trop de problèmes, mais sous IE, ça pêche ("évidemment", marmonneront certains).

Trève de bavardages, voici la page:

http://phpassoc.raboud.com/projets/choeur/absolute-ie.html

Le problème est le suivant:

le bloc Choeur aux pieds (texte d'un h1, en rose en haut de la page) devrait prendre (et prend, sous FF1.0) toute la largeur entre le #prelude (Aller à ...) et l'image à gauche. Sous IE6, ce n'est pas le cas. Pourquoi ? Et surtout: Comment le résoudre ?

Merci d'avance,

@+, HoPHP

P.S. Pas de commentaire sur les couleurs, c'est juste pour visualiser les blocs.
Modifié par HoPHP (20 Feb 2005 - 18:10)

Donner une largeur à <h1> ?

h1 {
   width: 100%; 
}

IE n'accepte pas qu'on lui définisse le left ET le right, il faut choisir , pareil avec top et bottom. J'utilise du Javascript pour pallier ce problème :$

Grrrr,
ça m'énerve, ça m'énerve !

Le CSS parfait (dont Firefox s'approche) est tellement plus simple que les bidouilles auxquelles on doit s'astreindre pour ce IE6 à la manque ! C'est réellement pénible!

M'enfin bon, merci quand même.

@+, HoPHP

P.S. Stephan, je vais essayer une autre idée avec ta solution et je reviens.

@Stephan> J'ai un peu creusé ton idée. Je suis parti d'une largeur de 100% puis j'ai appliqué les padding correspondants aux éléments annexes: mon image et mon #prelude. Ce à quoi je n'avais pas pensé c'était que ceci ne peut fonctionner que grâce au modèle de box microsoft (qui, il est vrai a une logique différente et parfois plus adaptée) et que, par conséquent, ça ne fonctionne plus sous Firefox (mon h1 déborde)! Le serpent se mord la queue !

Je ne vois actuellement qu'une seule solution: Il me faut mettre le prologue XML (pour faire basculer IE6 dans son mode Quirks) et faire deux mises en pages: une avec le quirks-mode (décrit ci-dessus) et une autre, avec des propriétés entièrement sélectionnées par des html>body pour qu'elles ne soient interprétées que par les Gecko's. C'est bourrin, ça risque de prendre du temps, mais ça devrait fonctionner, non ?

Si quelqu'un a une autre solution, je suis preneur !

@+, en attente d'autres solutions et de la mienne finalisée (donc, pas de [résolu]), HoPHP

Et bien le Javascript mon vieux ! Comme je n'aime pas donner les solutions tout cru, et que j'sais que t'es un gars qui réfléchi, j'vais te donner le code Javascript que j'utilisais pour un site : http://descartespowa.free.fr/NarutoFrance/
(faut voir tous les designs pour comprendre l'enjeu du Javascript, quand on sait qu'il y'a qu'une structure XHTML )

<script type="Text/Javascript">
  navObj=document.getElementById('navigation');
  navObj.style.height=document.documentElement.scrollHeight -170;
</script>

Vlà, si ca t'intéresse d'utiliser le Js !

Evidemment, faut que tu fasses une recherche en PHP par exemple pour être sûr que le navigateur en face est IE , ou en Js avec navigator.userAgent
Modifié par Kevin (19 Feb 2005 - 01:12)

Euh plutôt que hacker de partout avec du mode quirks à gogo et du html>body partout ou du JS.

Pourquoi ne pas faire la solution qui marchait initialement sous firefox à coup de html>body Element { } (un seul en principe), et d'utiliser la solution qui fonctionne sous IE à coup de * html Element { }
Tu trouves pas ça moins bourrin ??

Et comme ça, tu te préocuppe moins de ceux qui n'ont pas activé le JS pour un simple élément de mise en forme, je trouve le JS peu adapté.
Modifié par Olivier (19 Feb 2005 - 01:29)

T'en connais vraiment beaucoup des utilisateurs qui sont sur IE et qui ont le Js de désactivé ?! Nan parce que réellement eux, faut les abattre !

[HS ]
j'ai parlé de toi Olivier dans mon dernier billet
[/HS ]

Bah, oui j'en connais !! pas personnelement, mais ça existe et plus que tu ne crois

Les mecs au courant des failles d'IE qui ont pensé que JS était la cause et que sa désactivation était LA solution.
Par ailleurs, désactiver le JS, c'est bien aussi parfois

<hs>Ohh ooh... tu m'insultes ? !
Je vais voir de ce pas </hs>
Modifié par Olivier (19 Feb 2005 - 01:57)

Olivier a écrit :
Bah, oui j'en connais !! pas personnelement, mais ça existe et plus que tu ne crois

Les mecs au courant des failles d'IE qui ont pensé que JS était la cause et que sa désactivation était LA solution.

Tu crois qu'il reste une lueur d'espoir pour eux, ou bien tout est perdu ?

Enfin , passons, oui, le * html Element , mais c'est moins drole quand même !

Moins drôle oui, mais l'efficacité est ennuyeuse en général. Regarder developper sous firefox, c'est chiant, on peut même pas faire joujou avec les spywares, les virus et autres hacks CSS

Je crois que c'est le MOMENT de ressortir ce lien !

Sur ce ... bonne nuit !

En fait, ça me semble bien complexe comme mise en forme pour un header. Surtout que le but rechercher est qu'un logo et un titre soient cliquables, or il doit y avoir moyen d'achever le même résultat plus simplement. Peut-être considérer le logo comme une énorme puce en background ?

h1 {
   height: 165px;
}

h1 a { 
   background: transparent url(images/header.gif) top left no-repeat; 
   padding: 0 0 0 147px; 
}

h1 a:hover { 
   background: transparent url(images/headerhover.gif) top left no-repeat; 
   text-decoration: none; 
}

Et ensuite appliquer un margin-top: negative; sur le <div id="contenu">.

Je pense que c'est comme ça que je procéderais dans ce contexte.
Modifié par Stephan (19 Feb 2005 - 02:11)

Merci, merci et re-merci !

Voilà, je suis parvenu à ce que je cherchais. Stephan m'a mis sur la voie, il avait juste omis quelques détails.

La solution que j'ai utilisée est la suivante:

h1 {
	height: 165px; /* hauteur de l'image */
}

h1 a {
	[b][#red]display: block;[/b][/#] /* Pour pouvoir dimensionner */
	background: transparent url(note.gif) top left no-repeat;
	[b][#red]height: 100%;[/b][/#]
	padding: 0 3.04em 0 147px; /* 3.04em, c'est ma marge de droite et les 147px, la largeur du logo */
}

Ensuite, il a fallu placer le #contenu. L'idée de la margin-top: negative; était bonne mais posait un problème pour un design "liquide", puisque le logo n'est pas redimensionnable, cette marge ne peut s'exprimer qu'en px et par rapport au bas de l'image. Il m'aurait fallu plutôt un placement du haut de ce #contenu par rapport au bas du texte. J'ai donc mis le bloc en position absolue:

#contenu{
	position: absolute;
	top: 3.5em; /* "Marge" du haut */
	left: 147px; /* Largeur du logo */
}

Et voilà !

Merci encore à toutes les personnes qui ont daigné m'aider,

@+, HoPHP

P.S. Parce que je veux utiliser "position: fixed;" (pour les Gecko's), je vais procédér encore différemment, mais la solution reste valable !