Div fantôme, déplacement effectif mais n'affectant pas les autres éle

Salut tlm.

J'aime beaucoup alsacreations, et c'est mon premier post ici.

Voilà, j'ai un petit problème, je viens de créer un début de squelette d'une page, et j'ai voulu insérer un cadre contenant un menu.

Ce cadre est une suite de 'div' dont j'ai modifié la position gràce à la propriété position.

Mais mon prblème est que mon cadre se déplace bien, mais pas le texte qui est dans le document, le texte réagit comme si le cadre n'avait pas bougé.

Je n'arrive pas à cerner le problème.

Voici la page de test : http://www.kawaiyume.net/~test-css/

PS : ne prenez pas en compte le cadre non finit, je me suis arrété pour les images dès que j'ai rencontré ce problème.


Merci pour tout.

Salut iXo et bienvenue...

Je viens d'aller jeter un oeil à ton squelette et je me posais une question :
pourquoi as-tu placé autant de div ?
Un petit tour du côté de ce post te serait salutaire ...

Pour faire ce que tu veux, il te suffirait d'avoir un conteneur global à l'intérieur duquel tu positionnes un div 'header' -pour ton bandeau supérieur- et un div 'footer' -pour ton bas de page.
Il te reste ensuite simplement de mettre une image d'arrière-plan de 1px de haut qui se répète en y à ton conteneur global.

Concernant le texte qui doit contourner ton image, il te suffit de positionner ton div en haut à gauche comme c'est le cas, puis de faire float le texte tout autour.
A ce sujet, je pense que cet articlie-là te sera très utile...

Bonne continuation !

Ok, pour le 'surnombre' de div, c'est tout bête : au départ je ne voulais pas fixer la largeur de la page, et donc que cela puisse s'adapter, c'est pourquoi j'ai 3 div : coin gauche, milieu à largeur dynamique, et coin droit.


Mais je pense que je vais fixer la largeur et faire comme tu m'as conseillé.


Pour le texte en float, voilà ce que çà donne : http://www.kawaiyume.net/~test-css-float/

en espérant avoir bien compris et mis le float au bon endroit, il me met mon texte après le menu, et c'est pas trop ce que je cherche.

une idée ?

Bon voilà, suite aux conseils, j'ai enlevé des div inutiles, mais j'ai encore deux problèmes :

http://www.kawaiyume.net/~test-css-2/firefox_sans_ul.png
avec firefox

http://www.kawaiyume.net/~test-css-2/ie_sans_ul.png
avec ie

Donc ceci est le premier problème, mon menu n'est pas d'un seul bloc, il semble que cela vienne du code <ul> ... </ul> du menu. Si je met un cadre à mon menu (1px dotted ...) sous firefox, j'ai bien le fonctionnement que j'attend, mais déjà, 1 - je ne veux pas de cadre et 2 - çà décale mes images (le fond du menu)

donc j'ai mis çà dans le css :

ul
{
  margin               : 0px 0px 0px 0px;
}

ce qui donne :


http://www.kawaiyume.net/~test-css-2/firefox_avec_ul.png
avec firefox

http://www.kawaiyume.net/~test-css-2/ie_avec_ul.png
avec ie

Donc, pas de problème pour firefox, mais gros problème pour IE


Deuxième problème : le texte réagit correctement sous firefox (il colle le menu) mais sous ie, il est en dessous du menu, et c'est vraiment pas terrible

Une âme charitable peut elle m'aider ?

PS : test ici : http://www.kawaiyume.net/~test-css-2/

Hello,

Il y'a un sujet sur les puces et leur alignement dans la FAQ, l'as-tu suivi ?

Argh, je suis confu , désolé

j'ai donc résolu le problème du menu comme çà :

ul
{
  margin-top           : 0px;
  margin-bottom        : 0px;
  margin-left          : 0px;
  
  padding-top          : 0px;
  padding-bottom       : 0px;
  padding-left         : 40px;
}

Merci.


Il me reste plus que le problème du text sous ie qui ne veux pas suivre le menu en partant du haut de celui ci.

iXo a écrit :
Mais je pense que je vais fixer la largeur et faire comme tu m'as conseillé.

Dans ce cas, ne pas fixer à 1008px ! Tu as une chance sur deux que ça ne passe pas sur un écran en 1024x768 (et 100% de chances sur ce type d'écran sur un mac, vu que les fenêtres prennent rarement toute la largeur).

Une largeur plus raisonnable, même en partant du principe que l'on ne s'occupe pas du quart des utilisateurs qui ont un écran en 800x600, serait autour de 980-990px.

très bien, je note que je doit réduire la largeur pour plus tard.

Qqu'un à une idée pour mon texte qui réagit différemment sous IE ? (j'espère que c'est pas dans la FAQ , j'ai pas trouvé)