Positionnement de div

doomer2 · 20 Décembre 2004

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

**Ernestine** · 20 Décembre 2004

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

Au plaisir,

Ernestine

Modifié 20 Décembre 2004 par Ernestine

doomer2 · 21 Décembre 2004

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.

Modifié 22 Décembre 2004 par Monique

**Ernestine** · 21 Décembre 2004

Vi vi on a bien compris, mais tu as déjà posé ta question hier : http://www.webmaster-hub.com/index.php?showtopic=8215 et on a répondu, pourquoi donc la reposer à nouveau ?

Ernestine

doomer2 · 22 Décembre 2004

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é

**Ernestine** · 22 Décembre 2004

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é 22 Décembre 2004 par Ernestine

doomer2 · 22 Décembre 2004

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.

**Ernestine** · 23 Décembre 2004

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 quun é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é 23 Décembre 2004 par Ernestine

Connexion

Positionnement de div

Sujets conseillés

doomer2

Ernestine

doomer2

Ernestine

doomer2

Ernestine

doomer2

Ernestine

Veuillez vous connecter pour commenter

Parcourir

Activité