DIV hors du flux

Hello,

j'ai un petit problème avec une page de splash que je suis en train de faire, elle est valide et apparaît normalement mais je voulais quand même savoir pourquoi ça ne marche pas comme je veux :
http://www.lemarcaire.fr/maquettes/infosolus/

en fait, c'est pour le bouton "ENTREE DU SITE", j'ai l'impression qu'il n'est pas dans le flux, il a fallu que je rajoute un position : relative avec une valeur à top de 350 pour qu'il soit là où il est. Je pensais qu'en mettant tout le DIV "bouton" simplement après "requirements", ça aurait suffit pour le placer. Mais en ne mettant pas "position:relative", le bouton se trouve au haut de la page, au -dessus du logo.
Pourquoi là et pas en-dessous du DIV requirements comme on pourrait s'y attendre?

Merci

Bonjour,

Pascal68bis a écrit :
Pourquoi là et pas en-dessous du DIV requirements comme on pourrait s'y attendre?

Parce que div#requirements déjà n'est pas à sa place dans le flux, mais décalé de 350px vers le bas?

Si tu supprimes les position: relative de div#requirements et de div#bouton, tu peux constater que les deux sont bien à leur place dans le flux.

Sinon, en vrac:
- rien que pour cette page, le résultat en 800x600 est problématique. Mais comme il est marqué «résolution optimale 1024 bla bla», je suppose qu'on se fiche du rendu chez 10-15% des utilisateurs?
- les pages de «splash», c'est inutile, ça fait perdre du temps aux visiteurs, et ça fait perdre des visiteurs au site;
- la première page après ça est tout en Flash (paf, des clients potentiels en moins), inflige au visiteur une musique qu'il n'a jamais demandé même l'espace d'un quart de seconde, et mets 3-4 secondes à se charger avant d'afficher la moindre info intéressante (re-des clients potentiels en moins).

Je sais bien que ça n'était pas la question, mais il y aurait là-dessous comme une méconnaissance des bonnes pratiques de la création de sites web, non?

Ceci dit, il n'est jamais trop tard pour prendre les bonnes habitudes:
http://fr.opquast.com/
http://fr.opquast.com/bonnes-pratiques/
Modifié par Florent V. (08 Aug 2007 - 14:12)

Je vois que tu n'aimes pas le flash et c'est ton droit mais je ne te demandais pas de juger le site flash qui n'est d'ailleurs pas fini...
Merci quand même pour la petite leçon, j'essaierai de consulter les liens quand j'aurai un moment, histoire de parfaire mes connaissances web.

Néanmoins merci pour ta réponse, quand j'essaye d'enlever les attributs "position : relative" comme tu dis, et je modifie la valeur margin de DIV#requirements de la façon suivante :

margin : 350px auto 0 auto;

ceci afin que le texte se trouve sous le logo, mais le problème en faisant comme ça, c'est qu'il me ramène tout à 350px du top ce que je trouve bizarre. Si tu veux, je l'ai mis en ligne...
Du coup, je ne sais à nouveau plus comment faire...
Modifié par Pascal68bis (08 Aug 2007 - 14:51)

en fait, je me rends compte que sous IE ça apparaît correctement, le décalage est uniquement constaté sous FIREFOX..

Rapidement,

1. Pour le problème rencontré lorsque tu utilises une marge: c'est un problème de fusion des marges.
http://web.covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html
Ça peut se corriger par exemple avec un padding: 1px 0; sur ton conteneur «colonne centrale».

2. Tu as deux blocs pour dessiner ta colonne centrale. Un seul suffirait largement, avec pour dessiner la double bordure une image de fond de la largeur du bloc, répétée en hauteur (background-repeat: repeat-y).

3. Si l'écran est un peu trop petit (800x600, fenêtre non maximisée en 1024x768, etc.), ton bloc central est «rogné», car figé à une hauteur correspondant à 100% de la zone de visualisation (et pas 100% de la «page»). Une fois que tu aurais unifié div#centre et div#bande_centrale (voir le point numéro 2 ci-dessus), je te conseille d'utiliser min-height: 100% plutôt que height: 100%. IE6 demandera un correctif, par contre. Les moyens d'obtenir un bloc en hauteur ou hauteur minimale 100% sont décrits dans la FAQ du forum.

Et voilà, ce sera tout.