[CSS] Problème de conteneur qui ne veut pas s'étendre

Problème de conteneur qui ne veut pas s'étendre [CSS] - HTML/CSS - Programmation

Marsh Posté le 12-12-2005 à 20:26:24    

Bonjour à tous,
Je réalise actuellement un site sur le covoiturage étudiant.
J'ai mon div conteneur à l'intérieur duquel je place toute les pages etc...
le problème est que pour certaines pages de texte assez longues (la charte) mon cadre ne veut pas s'étendre :(
Le cadre qui contient le texte lui meme s'étend mais pas le conteneur.
 
Le plus simple pour expliquer est de regarder ici : L'accueil et  la charte vous comprendrez imédiatement.
Je laisse les bordures pour le moent pour bien voir mes div.
 
Et voici un extrait du css :  
 


#conteneur  
{
 position:absolute;
 width: 750px;
 left: 50%;
 margin-left: -375px;
 background-color:#EEFFFF;
 font-size: 12px;
 height:100%;
 border:solid;
 vertical-align: top;
}
 
#corps
{
 border:solid;
 position:absolute;
 left:150px;
 top:150px;
 width:440px;
 height:auto;
 overflow:hidden;
 /*vertical-align: bottom;*/
 background-color:#EEFFFF;
}


 
Merci beaucoup pour votre aide, je 'marrache les cheveux dessus depuis plusieurs jours. J'avance mais toujorus pas de bonne solution :(
Merci

Reply

Marsh Posté le 12-12-2005 à 20:26:24   

Reply

Marsh Posté le 12-12-2005 à 20:51:18    

Tu n'as pas besoin de mettre #corps en position absolue.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 12-12-2005 à 20:56:59    

Merci pour la réponse mais je dois tout de même mettre une position, en inherit au moins, sinon il se place mal, il se colle à la gauche du conteneur.
Et même en le supprimant, il ne m'étend pas le conteneur :(

Reply

Marsh Posté le 12-12-2005 à 20:59:21    

S'il se colle à gauche tu lui donnes les marges qui vont bien. Et tu mets tes colonnes en flottant.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 13-12-2005 à 11:49:30    

Merci pour cette aide :):)
Cette fois-ci ça fonctionne, le corps s'étire bien lorsque je met le css suivant :  


#conteneur  
{
 position:absolute;
 width: 750px;
 left: 50%;
 margin-left: -375px;
 background-color:#EEFFFF;
 font-size: 12px;
 border:solid;
}  
 
#menu_gauche
{
 float:left;
 margin-left:0px;
 margin-top:150px;
 width:140px;
 height:auto;
 overflow:hidden;
 list-style-type: none;
 padding:5px;  
}
#menu_droit
{
 float:right;
 margin-right:5px;
 margin-top:150px;
 width:140px;
 height:auto;
 overflow:hidden;
}
#corps
{
 border:solid;
 margin-left:10px;
 margin-top:150px;
 width:440px;
 height:auto;
 overflow:hidden;
 background-color:#EEFFFF;
 padding-bottom:20px;
}


Par contre l'affichage sous IE est devenu chaotique :pfff: , il ne ressemble aps du tout à celui sous firefox, il me place mon corps complétement en dessous des 2 menu et aligné à gauche.
et si je met un

margin-left:150px;

pour le corps, il me le place correctement sous IE mais plus sous firefox (ou il est décalé à droite :( )
Merci pour ton aide.
 
Et apparement ça change beaucoup de chose car plusieur bouton, champs etc.. qui sont dans le corps sont aussi déplacés (ils étaient tous en absolute) mais je vais m'occuper de cela.

Reply

Marsh Posté le 13-12-2005 à 13:39:34    

J'ai réussi à replacer tout ems autres élements à l'interieur du corps.
Mais pour IE je n'arrive pas à le placer correctement :(
Il regarde les  margin-left:0px;  margin-top:150px; à partir du bas des menus gauche et droite donc forcement il les place mal  :pfff:  
J'ai vu que c'était un problème connu mais je n'arrive pas à adapter une solution correcte à mon problème.
Merci pour votre aide.
 
EDIT : C'est bon j'ai réussi !!!
J'avais tout simplement ma bannière toujorus définie en position: absolute !!
 
Merci beaucoup pour l'aide  :jap:


Message édité par Jinroh le 13-12-2005 à 13:48:45
Reply

Marsh Posté le 13-12-2005 à 14:43:04    

Hmmm... je te conseille d'oublier les flottants et de partir sur un structure en absolute.
Ton site est du même gabarit que le mien, je pense que tu peux jeter un oeil là dessus:
 
http://www.rpgamers-fr.com/rpgamers3
 
J'ai testé sur pas mal de navigateurs, le seul qui me pose problème étant IE 5.2 (cela dit on s'en fiche, il est aux oubliettes).
J'avais des soucis avec les float sur certain navigateurs, des navigateurs linux en particulier, et même firefox qui ne plaçait pas bien les menus par moments, réglé après actualisation... :| (et puis ça fait un peu bidouille je trouve...)
Chelou enfin bon.
 
Avec cette structure c'est parfait.

Message cité 1 fois
Message édité par Nigel_ le 13-12-2005 à 14:44:16

---------------
RPGamers, la passion du RPG : http://www.rpgamers.fr
Reply

Marsh Posté le 13-12-2005 à 23:04:17    

Nigel_ a écrit :

Hmmm... je te conseille d'oublier les flottants et de partir sur un structure en absolute.


Et bien je ne suis pas vraiment d'accord... Le positionnement absolu c'est bien mais c'est un peu l'arme absolue (ha ha). C'est à dire que ça marche à tous les coups. On ne peut pas mal placer un élément avec cette méthode. Mais on perd pas mal en souplesse. Si je veux changer des blocs de place tout le reste est va bouger car les blocs sont positionnés les uns relativement aux autres.
 
Et comme l'a remarqué Jinroh, si on est pas maître du contenu (c'est à dire si on ne sait pas quelle colonne va contraindre le conteneur à s'agrandir) le positionnement absolu devient impossible à tenir.
Un minimum de données doit rester dans le flux normal pour avoir un design relativement souple qui s'adapte au contenu.
Les flottants posent aussi des problèmes (en particulier avec IE) mais le design à 3 colonnes est un sujet simple et qu'on maîtrise désormais.
Et finalement Jinroh a trouvé presque tout seul la solution qui est bien résumée ici : http://www.cssplay.co.uk/layouts/3cols.html


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 15-12-2005 à 12:37:03    

Vu la structure, j'aurais dit que ses menus de gauche et droite ne bougeront pas, ou bien, il ajoutera des rubriques manuellement.
Par contre, le contenu central s'étire.
 
Enfin c'est la structure de page que j'ai mis en exemple, seul le contenu central bouge.
Pas besoin de hack, pas de problèmes sur 90% des navigateurs (pas IE mac :P), etc...
Mais c'est vrai que l'exemple ci-dessus est pas mal...
A tester sur différents navigateurs linux, mac etc, je suis pas convaincu que cette structure ne délire pas...


Message édité par Nigel_ le 15-12-2005 à 12:37:21

---------------
RPGamers, la passion du RPG : http://www.rpgamers.fr
Reply

Marsh Posté le 16-12-2005 à 22:19:04    

J'ai réussi à placer exactement comme je le souhaitais, sur IE et firefox (pas encore testé d'autres navigateurs pour le moment).
Le placement ne me parait aps trop trop bidouiller et assez stable, je vais rester avec cela pour le moment ;)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed