18073 sujets

Questions générales et questions de débutants

[Résolu] Colones avec une hauteur "élastique"

Bonjour,

J'ai épluché le forum et pleins d'autres sites (car Google est mon ami) et finalement je me lance à poser la question ici... Donc je suis nouveau ici, pas taper trop fort Smiley smile

En gros, j'aimerais faire un gabarit centré et de taille fixe, avec deux parties distinctes. La partie de gauche qui serait la plus grande (600px par exemple), et celle de droite (200px) qui contiendrait juste des nouvelles. (J'ai essayé de faire une variante sur l'exemple de ce site dans les tutors, mais dès que j'ajoute du contenu dans la colonne élastique ça foire sous IE).

J'aimerais que la partie de droite "s'allonge" s'il y a beaucoup de contenu dans celle de gauche. Pour finir, j'aimerais placer un header et mon menu (horizontal) dans la partie de gauche, et qu'ils s'arrêtent à la colonne de droite (Pas vraiment un bandeau, juste une partie dans la partie gauche).

Alors j'ai commencé à faire un truc que vous pouvez voir ICI.

Ca passe à peu près sous FF, pas sous IE, et si je change l'ordre de mes div je préfère m'en aller Smiley smile

En tout cas, merci à ceux qui auront pris la peine de lire, et à ceux qui auront des idées!

A bientot,
Pierre

Ajouté après résolution:
Je viens de regarder le conseil de Tibrus à l'adresse suivante et il se trouve que c'est éclaircissant, regardez!
Modifié par hickscorp (05 Oct 2005 - 18:33)
Bonsoir et bienvenue parmi nous sur le forum.

J'ai regardé ta feuille de style, et je comprends qu'il y ait des soucis en raison de ton mode de positionnement des sous-éléments.

Plutôt que de corriger ta page, je peux te proposer de partir de ce gabarit, qui est celui qui est le plus proche de ce que tu veux obtenir.

A partir de là, tu peux faire les changements suivants :
- Tu supprimes le menu gauche du code HTML et de ta CSS ;
- Tu enlèves la margin-left de 150px du #centre, ce qui te permettra de coller ton contenu au bord gauche ;
- Tu peux placer margin-right: 150px pour les deux éléments #header et #haut ;
- Enfin, si tu veux écrire dans ton menu dès le haut de la page, tu peux placer le bloc #droite juste après avoir ouvert le conteneur dans ton code XHTML.

En ce qui concerne le code CSS, cela te donnera (en se limitant aux id) :


#header {
height: 50px;
margin-right: 150px;
background-color: #99CCCC;
}
#haut {
height: 30px;
margin-right: 150px;
background-color:#CCCCFF;
}
#conteneur {
position: absolute;
width: 750px;
left: 50%;
margin-left: -375px;
background-color:#CCCCFF;
}
#centre {
background-color:#9999CC;
margin-right: 150px;
}
#droite {
position: absolute;
right:0;
width: 150px;
}
#pied {
height: 30px;
background-color: #99CC99;
}


Tu peux donc modifier de la sorte le modèle et réutiliser éventuellement les classes qui avaient été définies notamment pour les listes et les liens. Il reste les couleurs que tu pourras changer à ta guise.

On aurait également pu utiliser un positionnement flottant pour le menu droit, mais comme tu débutes, je me suis dit qu'adapter un tutoriel construit par Raphaël était plus judicieux. Smiley cligne
Modifié par Romain H. (03 Oct 2005 - 23:16)
Re-Bonsoir!

Merci à tous de ces réponses!

Je viens de jetter un oeil à la première solution que vous m'avez proposé (Romain). Je pense que cela convient, mais si cela ne vous dérange pas, pourriez vous m'expliquer la raison du pourquoi du qu'est-ce que si le div "droite" est placé après les autres ça foire :O ?

En tout cas, merci beaucoup la solution me convient parfaitement, je regarderais tout de même les solutions de Raphaël demain, des fois que ça soit différent on en apprend tous les jours Smiley smile

Dans le cas où un administrateur passerait dans le coin ne fermez pas le topic, je me ferais un plaisir de placer le code dessus au cas où quelqu'un cherche la même chose!

Merci à tous! Smiley biggrin
(Bon quand vous commencez à parler en float je suis plus trop Smiley lol )
Pierre
Modifié par hickscorp (04 Oct 2005 - 01:09)
Bonjour,

Une chose au moins à corriger dans ce code : le centrage de #conteneur par les marges négatives. Le contenu sera en effet rogné à gauche en cas de largeur d'affichage plus petite que prévue, sans que le scroll horizontal ne permette de l'atteindre.

Centrer en utilisant les marges automatiques.
Bonjour,

A tous merci de vos réponses, elles m'ont permis d'avancer jusqu'à l'étape suivante!

A bientot, et un grand merci à Raphaël pour ce forum dont la qualité est très satisfaisante par rapport à d'autres que l'on trouve sur de soit disant réputées "usines à gaz" Smiley cligne

Amicalement,
Pierre
Sujet clos
Aller à