28221 sujets

CSS et mise en forme, CSS3

[résolu] Probleme de div conteneur

Bonjour à tous Smiley smile

Voila je suis entrain de préparer la nouvelle version de mon site ici (il n'y a pas le header c'est normal, je le ferais aprés) : http://www.inferni.com/v2/design.html

Sous IE, il n'y a pas de problème, en revanche sous firefox, le conteneur (càd le div de fond blanc qui est censé regrouper tous les div) prend comme hauteur celle de la page (normal vu que j'ai mis 100% me direz vous). Ce qui est assez génant. Car sans ca, le div conteneur prend 0px comme hauteur sous firefox, et je ne comprend vraiment pas pourquoi.

Réduisez la fenêtre, et utilisez l'ascenceur, je crois que vous comprendrez mieux ce que je veux dire Smiley smile

Voila la page css : http://www.inferni.com/v2/screen.css

Merci par avance pour votre aide, amis intégrateurs Smiley smile
Modifié le 28 Dec 2004 - 11:27
Si tu veux que ton conteneur s'agrandissent avec la longueur de la page, ne lui affecte pas de height, il devrait alors englober tous les autres <div>

Edit: ça c'est pour IE, tu devrait pour mozilla essayer d'attribuer une valeur de

min-height: 100%;

ça reglera peut être le problème sous mozilla Smiley cligne Mais c'est pas testé
Modifié le 27 Dec 2004 - 20:11
salut et merci pour ton aide Smiley cligne

Effectivement le problême est bien sur firefox. J'ai testé min-height aussi bien sur body que sur le conteneur et cela n'a rien donné. Cela prend la hauteur de la fenetre et comme la hauteur de mon site est plus grande que la fenetre, ca merdouille Smiley smile
Et si tu supprime

height: 100%

et que tu remplace

margin: auto;

par

margin: 0 auto 0 auto;

puisque apparament, tu veux juste centrer horizontalement.
Comme on ne peut pas attribuer de margin a des valeurs relatives ici top et bottom. Le bug vient peut être de là Smiley cligne
nop toujours aucun changement Smiley decu (tu parlais bien des valeur de conteneur ou de body ?)

Edit : j'ai testé les 2 de toute facon Smiley smile
En fait si , il y a un changement, le fond blanc disparait complêtement, et j'ai le fond du body (noir rayé) à la place.
La, je vois pas pourtant le bug est connu faut faire appel aux pors qu'il y a ici Smiley cligne Smiley langue , je suis trop noob Smiley langue désolé. Je vais continuer a chercher on sait jamais si j'ai un éclair de génie Smiley cligne !

Edit :

Franquito a écrit :
En fait si , il y a un changement, le fond blanc disparait complêtement, et j'ai le fond du body (noir rayé) à la place.


a ton bloc a disparu, est ce qu'il disparait aussi sous IE ?
Modifié le 27 Dec 2004 - 20:38
et si tu enlève le
padding: auto;
du conteneur, finalement ça ne fonctionne peut être pas cette valeur !!

Essaie aussi de remplacer padding: auto; par une valeur finie padding: 10px ou autre

Edit: Des choses me semblent inutiles dans les paramètres de
body,html{}
notament, heigth: 100% et aussi les auto attribuée aux marges internes et externes (padding et margin)
Modifié le 27 Dec 2004 - 20:56
DarkNeo a écrit :
et si tu enlève le

padding: auto;

du conteneur
finalement ça ne fonctionne peut être pas cette valeur !!

Essaie aussi de remplacer padding: auto; par une valeur finie padding: 10px ou autre

En effet la propriété "padding" ne supporte pas la valeur "auto", et n'accepte qu'une valeur numérique (avec l'unité de mesure) ou des pourcentages.
Bon cela ne règle pas le problème pour autant. Smiley decu
bon alors j'ai changé le conteneur. La ou je le centrais avec un text-align:center, je le centre desormais en absolute avec left:50% et margin-width:350px

#conteneur{ position: absolute; left: 50%; margin-left:-350px; width:700px; background-color:white; text-align:left; }


Voila, en revanche j'ai un nouveau probleme, c'est ma barre verticale rouge, qui ne prend plus la totalité de la hauteur de la page.

Des idées ?
Tu devrais essayer de mettre la partie rouge de ta page en margin-left:xxxpx; et margin-right:xxxpx; et supprimer le float pour voir ce que cela donne.
En plaçant cette partie de ton code après les deux floats. Dont l'un devrais être mis en float:right;
wai je l'ai fait aussi, mais ca merde sur IE, et cela ne résout pas le problême de la barre rouge qui ne prend pas toute la hauteur.

En positionant le conteneur en absolute et avec tout en flottant, le conteneur encadre bien tous les div. le problême est bien résolu, reste juste a savoir comment faire en sorte que la barre rouge, prenne toute la hauteur. Il y a bien la technique des fausses colonnes en faisant un fond qu ise repete dans la verticale mais bon...

J'ai mis à jour les fichiers :

http://www.inferni.com/v2/design.html
http://www.inferni.com/v2/screen.css
Modifié le 28 Dec 2004 - 11:05
Ok, si c'est effectivement des élèment sen float dans le conteneur, ils deborderont puisque hors du flux.

Ce qu'il faudrait alors, c'est un "clearer", un élèment situé dans le conteneur, après ceux en float qui ait la propriété clear: left (si il n'y a que des float: left) histoire de venir se mettre sous les élèments en float tout en restant dans le flux.

Par exemple ce pourrait être un hr

<hr class="clearer">

HR {
     height: 1px;
     clear: left;
     visibility: hidden;
}


EDIT:
même pas sur que tu ai besoin de rajouter ce HR. Si je me trompe as, tu as une sorte de footer:


<div id="copyright">
     Inferni.com Copyright © 1994-2005. All rights reserved.
</div>


Tu peux mettre ce div en fin de contenu et lui donne un clear: left. Il se mettra alors sous la plus longue des trois colonnes tout en prolongeant le flux jusque là.
---

Ce n'est pas parfait, mais ca peut donner le résultat voulu.

Pour la colonne rouge, c'est un peu pénible aussi de trouver comment forcer un élèment à prendre la taille de son conteneur. Une bonne technique pour pallier ca, c'est le "faux column": l'élèment est en fait sans fond et c'est une image de fond du conteneur qui donne l'impression de colonne. Cf. http://www.alistapart.com/articles/fauxcolumns/ (EN)
Modifié le 28 Dec 2004 - 11:08
Sujet clos
Aller à