Aller au contenu

Positionnement de div


doomer2

Sujets conseillés

Bonsoir à tous,

Je suis en train de refaire une maquette(je le précise c'est juste un essai de 1ére page afin d'avoir une bonne trame tout ce qui est couleur,design changera) et me voilà confronter à un probléme sur lequel je planche depuis ce matin en faisant plusieurs essais sans succés.

L'adresse temporaire : L'accessibilite au bout des doigtsL

Sous Firefox 1.0 ma premiere page passe nickel pas de probleme de positionnement.

Sous IE 6.0 2 problemes :

- Décalage de mes 4 div du bas pour les sites a voir, site en bref ....

- Probleme de positionnement ce l'actualité car elle ne se font pas en dessous de mon flottant droit.

Ce que je ne comprends pas c'est que j'utilise bien le float puis un hr avec l'attribut clear:both

S'il vous plait, là je pense vraiment avoir besoin d'aide pour repositionner correctement cela.

Merci à tous, j'attends beaucoup de vous. cligne

Lien vers le commentaire
Partager sur d’autres sites

Salut Doomer,

Hou... pas facile de s'y retrouver dans ce code...

Je tiens d'abord à préciser que je suis loin d'être une spécialiste :)

Mais il y a plein de choses qui me choquent dans ce code. A commencer par la page elle-même :

<body>
<div id="conteneur">
............................... le code du body........................
</div>
</body>

A quoi donc sert ce div conteneur ? La balise Body est elle-même une boîte de contenu, à laquelle tu aurais pu attribuer les mêmes propriétés que celle du div Conteneur.

Idem pour ce genre de choses :

<h3><span class="second">LE XHTML </span></h3>

Pourquoi donc inclure un span dans un h3, quand on peut régler les attributs du h3 ?

Il y a énormément de choses de ce style dans ton code... Ce n'est pas ta question, ok, mais je pense que la taille fichier HTML + feuille de style pourrait être divisé au moins par trois, en mettant un peu d'ordre dans tout ça ;) Et du coup, ça rendrait le débugage des problèmes, tels que celui que tu présentes, beaucoup plus facile :)

Parce que là, j'avoue que chercher les class et les id des différents divs dans une feuille de style qui fait 371 lignes :wacko: (elle aussi, elle pourrait être considérablement réduite !!!) et faires les allers-retours html-css, ben c'est pas très motivant.

Un conseil : le test sous IE, il ne faut pas le faire une fois que tout est ok sous FF. Il faut faire les tests sous les deux navigateurs, en parallèle, tout au long de la création de la maquette. Sinon c'est prise de tête assurée au moment où on veut corriger :P

Au plaisir,

Ernestine

Modifié par Ernestine
Lien vers le commentaire
Partager sur d’autres sites

Bonsoir à tous,

Je vous propose un petit probleme à résoudre, je refias totalement une mise en page en css et xhtml afin que mon prochain site soit plus lisible et facile à mettre à jour.

Mon probleme est que je n'arrive pas à centrer mes 4 blocs d'actualités sous Firefox alors que sous IE pas de probleme.

L'adresse du site : Essai de page en CSS

Quelqu'un peut il m'aider car cela devient urgent.

Je précise que j'ai consulté de nombreux articles et fait de nombreux essai mais en vain.

Merci à tous pour votre aide d'avance.

<Edit Monique : Même si tu as recommencé entièrement ta page, il s'agit toujours du même problème et il est inutile de commencer un nouveau sujet. J'ai donc combiné les deux discussions.>

Modifié par Monique
Lien vers le commentaire
Partager sur d’autres sites

Je la repose car hier tu m'as dis que j'avais une strcture de page complexe et donc j'ai refait une mise en page totalement de 0 et j'arrive toujours au même probleme avec ces 4 boites.

Desolé

Lien vers le commentaire
Partager sur d’autres sites

Salut,

Je crois que j'ai compris ce qui n'allait pas dans la précédente version ! Il s'agit d'un petit dysfonctionnement de IE (un de plus).

En effet, soit deux boites 1 et 2 (je leur donne des dimensions et une couleur de fond pour bien les distinguer quand on visualise la page) :

.boite1 {
width: 200px;
height:100px;
background-color:#006666;
float: left;
}

.boite2 {
width:200px;
height:100px;
background-color:#FF0066;
margin-left: 200px;
}

En principe, la 2 s'affiche à côté de la 1. C'est d'ailleurs le cas si on visionne le résultat sous FF, mais également sous IE (pour l'instant ;) )

Mais sous IE, ce :evil: de navigateur met une marge entre les deux blocs, c'était d'ailleurs ce dont je parlais dans ce topic.

Conclusion : la largeur de l'ensemble est supérieure, sous IE (mais pas sous FF) à la somme largeur 1 + largeur 2.

Alors si je mets ces deux boîtes dans un div dont je fixe la largeur à la somme des deux, ben automatiquement, à cause de la marge que IE ajoute entre chacune d'elle, le div se retrouve trop petit.

Conclusion : IE, étant dans l'impossibilité d'aligner les deux boîtes à cause de la trop petite taille du conteneur, ben il les décale l'une en dessous de l'autre. Voilà :)

Je vois que tu as résolu le problème en donnant à la deuxième boite la propriété float:right. Ca marche, mais tu pouvais résoudre le problème en augmentant de 2 pixels la largeur du conteneur des 4 divs ;)

Au plaisir,

Ernestine

Modifié par Ernestine
Lien vers le commentaire
Partager sur d’autres sites

Bonsoir à tous,

Déjà Merci Ernestine pour ton aide d'hier soir,

J'ai refait comme je l'avais dis tout mon architecture CSS,

Voilà le résultat pour l'instant :

Essai de page en CSS

Maintenant après de nombreux essais, j'y suis depuis ce matin et comme tu peux le voir à chaque fois que j'ajoute tu texte dans mon menu gauche , mes 4 blocs descendent par rapport à mon conteneur alors qu'ils sont bien dans ce conteneur.

As tu déjà eu ce probléme ?

merci beaucoup.

Lien vers le commentaire
Partager sur d’autres sites

C'est normal, tu as donné l'attribut clear:both au div qui contient les 4 cases. Or la définition de cet attribut est :

Clear détermine si un élément peut se trouver sur la même bande horizontale qu’un élément flottant.

Normal, donc, qu'il s'aligne avec le float de gauche.

Il suffit de le mettre à none, ou mieux de ne pas le mettre du tout, et ça marchera ;)

Ernestine

Modifié par Ernestine
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...