[RESOLU] Design deux colonnes étirable

Bonjour,

J'ai repris le design d'un site 2 colonnes fait par un ami pour que dans le code HTML le contenu de la page soit avant le menu de droite et pour le rendre un eu plus étirable. Pour cette dernière requête je l'ai défini en pourcentage avec un min-width et max-width arbitraire. Ce n'est pas parfait mais c'est déjà ça.

Par contre je n'arrive pas à satisfaire les choses suivantes :
-le menu de droite à une largeur fixe
-le contenu et le menu sont à égale distance entre eux, que de chacun avec son bord
-faire en sorte qu'il soit à la même hauteur

C'est cette dernière requête que je n'arrive pas à satisfaire. J'ai pourtant essayé de jouer sur les flottants, les marges, les espacements...

Le résultat actuel est là : http://www.freeholdem.fr/alsa/index.htm

Avez-vous une piste ? Merci d'avance.
Modifié par ThomasB (03 Dec 2008 - 12:01)

Bonjour,

Il n'y a rien qui t'inspire ici ?

Celui qui s'en rapproche le plus est celui-ci : http://www.alsacreations.com/gabarits/modele04b.html mais il place le menu de droite AVANT le contenu dans le code HTML

Bonjour,

Pas de solution idéale à ma connaissance, en dehors de l'utilisation de display: table-cell en table-layout: auto (colonne de gauche en width 100% par exemple, colonne de droite en width: la largeur souhaitée), non compatible IE 6 et 7.

Tu peux éventuellement positionner la colonne de droite en absolu. Celle de gauche sera alors en static (par défaut) avec un margin-right de la largeur de la colonne de droite (plus l'écart souhaité). Mais dans ce cas la colonne de droite ne repoussera plus le pied de page ou les limites du conteneur, ce qui peut se gérer (de manière non idéale une fois de plus) avec min-height et du JavaScript.

bonsoir,

En jouant sur le marges , positive , puis négatives , cela permet de reserver un espace , puis de le reconquerir ...

Pour rendre la chose compatible avec IE (6/7) , il est preferable de faire usage d'une marge interne sur le premier flottant , et la marge négative sera appliqué au second flottant qui remontera estimant avoir de la place .

Penser a appliqué un display:inline; pour eviter le double margin bug dans IE aux flottants .

Si un fond ou une bordure doit-etre appliqué a #corps_contenu , alors inserer un conteneur supplementaire pour y transposer ceux-ci.

CSS a tester :

#corps_menu {
    margin-right: 20px;
    width:200px;
    float:right;display:inline;
    border: 1px solid #000;
    position:relative;
    top: 0;
   margin-left:-240px;

}

#corps_contenu{
    float: left;display:inline;
    margin: 0 20px;
    padding-right: 240px;
    border: 1px solid #F0F;
/* si besoin d'afficher un fond , inserer un conteneur suplementaire */
}

GC

Merci pour vos réponses. J'ai utilisé le principe de gcyrillus et ça fonctionne.

Cependant je n'ai pas de IE sous la main pour tester.

Bonsoir ,

En mettant ta page test a jour , il sera possible aux différents alsanautes de la tester .

<hs>alsacreationSnautes , ça le fait pas trop , non ? et p'i , j'aime bien les petits biscuits </hs>

Voici la nouvelle page de test : http://www.freeholdem.fr/alsa2/index.html

Par contre je ne garantie pas la pérennité de ces deux pages de tests. Il arrivera un moment où je modifierais ce serveur

bonsoir

Quelques défauts trés désagréables apparaissent dans IE.

La première chose a faire est éliminé le prologue xml qui fait basculer IE lte 7 irrémédiablement en mode quirk , ingérable ce mode necessiterait a lui seul de refaire les gabarits dans leur quasi totalité pour IE ....

<?xml version="1.0" encoding="UTF-8"?>

Puis une fois ceci réglé subsiste 2 gros problémes

1) le pied ne se degage pas malgré le clear , ceci est un defaut frequement rencontré dans IE (je n'en ai pas encore bien observé les raisons)
Il se régle (quand c'est possible) en faisant flotter les elements précedents dans la même direction.

2) quelques : width:100%; provoque des bugs d'affichage , en particulier dans IE7 . Dans IE cela a la particularité de conferé le layout , particularité a user avec modérations et seulement si necessaire

J'ai donc repris un peu le fichier css entre autre , rectification des marge , float:right devient left et des width:100%; retirés

résultat : http://gcyrillus.free.fr/essai/indexauto-size-colonne.html

La correction ne reprend pas l'ensemble de ton code , elle ne corrige les toussotements de IE sur ta page.

Si il t'est impossible de verifiez les résultats sur IE , peut-etre aurais tu intéret a t'appuyer sur un tableau 2 colonnes. et surtout , ne laisse pas trainé des prologue xml inutiles , la balise meta suffit pour déclarer l'encodage de ta page.

GC

<edit>Cette page test risque de rester la un moment , je l'enleverai a ta demande bien sur </>
Modifié par gcyrillus (03 Dec 2008 - 23:27)

Merci de tes conseils. Si je n'ai pas répondu avant c'est car j'ai trop de boulot en ce moment, et que ce projet n'était pas une priorité.

En se basant sur le dernier code (avant correction pour IE, que je n'ai pas eu le temps d'appliquer) j'ai un autre soucis avec les "vrais" navigateur :
http://www.freeholdem.fr/alsa2/form.html

Si le contenu n'est pas suffisamment large, la boite est trop petite. Vous voyez une solution simple ? Peut-être que ce que je cherche à faire est trop compliquer... Le codedesign de mon pote avait beau ne pas être très propre et avec le code HTML du menu AVANT celui du contenu, au moins ça "marchait" Faut dire que mes bidouilles ne le font pas rire

ThomasB a écrit :
Merci de tes conseils. Si je n'ai pas répondu avant c'est car j'ai trop de boulot en ce moment

idem en quelque sorte.

Pour IE , il faut effectivement ne pas oublié de virer le prologue xml et de cibler #page2 au lieu de #corps-contenu.

Ensuite un probleme avec clear sur #footer apparait , ... les contenu le précedent flotte dans des direction oppposée , IE tousse et bug .
C'est pourquoi dans l'exemple précedent , #corps_contenu et #corps_menu flotte dans le même sens .

Dans l'exemple précedent , le texte ou contenu etait assez inportant pour etiré sur toute la largeur l'ensemble des contenus de ta colonne.

Pour occupe 100% de la largeur dispo et sans contenu ,on peut alors généré un element vide .


ton css corrigé

html {
    text-align: center
}

body{
    text-align: left;
    margin: auto;
/*  Voici quelques exemples de collections cohérentes de fontes (propriété CSS "font-family"): */
/*  font-family: Tahoma, Verdana, sans-serif; */
/*  font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif; */
/* 	font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif; */
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
/* 	font-family: Georgia, "Bitstream Vera Serif", Norasi, serif; */
	
	line-height: 1.5;
	font-size: .8em;
}

h1, h2 {
	font-family: Georgia, "Bitstream Vera Serif", Norasi, serif;
}

/* Paragraphes */
p {
	margin: .75em 0;
}
li p, blockquote p {
	margin: .5em 0;
}

/* Citations */
blockquote, q {
	font-size: 1.1em;
	font-style: italic;
	font-family: Georgia, "Bitstream Vera Serif", Norasi, serif;
}
blockquote {
	margin: .75em 0 .75em 24px;
}
cite {
	font-style: italic;
}

/* Liens */
a:link {
	color: black;
}
a:hover, a:focus {
	color: crimson;
}
a img {
	border: none;
}


#page {
    width:100%;
    min-width:725px;
    max-width: 1000px;
    margin: 15px auto;
    background: right url(page_menu_bord_droit.jpg) repeat-y;
}

#page2 {
    background: url(page_menu_bord_gauche.jpg) repeat-y;
}

#tete{
    background-image:url(page_tete_bord_haut.jpg);
    background-repeat:repeat-x;
    width:100%;
    height:99px;
}

#tete .bord_gauche, #tete .bord_droit{
    background-image:url(page_tete_bord_gauche.jpg);
    height:99px;
    width:14px;
    float:left;
}
#tete .bord_droit{
    background-image:url(page_tete_bord_droit.jpg);
    float:right;
}

#tete .logo{
    background-image:url(logo.jpg);
    margin-top:15px;
    margin-left:8%;
    width:360px;
    height:83px;
    float:left;
}
#tete .logo a {
    display: block;
    height: 83px;
    overflow: hidden;
}
#tete .logo a span {
    margin-left: -2000px;
}

#tete .recherche{
    background:url(page_tete_recherche.jpg) no-repeat;
    margin-top:15px;
    margin-right:15px;  
    width:232px;
    height:74px;
    float:right;
}

#tete .recherche #recherche{
    border:none;
    margin-top:32px;
    margin-left:8px;
    width:215px;
}

#tete .recherche #bouton_recherche{
    border:none;
    float:right;
    margin-top:2px;
    margin-right:8px;
    width:65px;
    height:21px;
    background-color: transparent;
}

#menu {
    background-image:url(page_tete_menu.jpg);
    background-repeat:repeat-x;
    width:100%;
    height:39px;
}

#menu .bord_gauche, #menu .bord_droit{
    background-image:url(page_menu_bord_gauche.jpg);
    height:39px;
    width:8px;
    float:left;
}
#menu .bord_droit{
    background-image:url(page_menu_bord_droit.jpg);
    float:right;
}

#corps_menu {
    margin-right: 20px;
    width:200px;
    float:left;
    display:inline;
    position:relative;
    top: 0;
    margin-left:-220px;
}

#corps_contenu{
    float: left;
    display:inline;
    margin: 0 20px;
    padding-right: 220px;
}

#formConnexion {
    margin-top: 15px;
}

#formConnexion label:hover {
    cursor: pointer;
}

#formConnexion input[type="text"],#formConnexion input[type="password"] {
    margin: 3px auto;
    -moz-border-radius: 3px;
    border: none;
    width: 100%;
}

.m1, .m2 {
    margin-top:15px;
    background:#ff7717;
    -moz-border-radius: 3px;
    width:100%;
    padding: 5px 0;
	overflow:hidden;
}

.mt1, .mt2 {
    font-size: 16px;
    background:#ff9a4f;
    -moz-border-radius: 3px;
    margin:7px;
    padding-left:5px;
}

.m2 {
    background:#ff9a4f;
}

.mt2 {
    background:#ff7717;
}

.c1, .c2 {
    margin-top:15px;
    background:#d8d3d3;
    width:100%;
    padding: 5px 0;
    -moz-border-radius:4px;
	overflow:hidden;
}
.c1:after , .c2:after  , m1:after , .m2:after  {content:'';display:block;width:800px;float:left;}

.c1 p, .c2 p, .m1 p, .m2 p {
    margin: 10px ;
}

.ct1, .ct2 {
    font-size:16px;
    background:#c4bbbb;
    -moz-border-radius:3px;
    margin:7px;
    padding-left:5px;
}

.c2 {
    background:#c4bbbb;
}

.ct2 {
    background:#d8d3d3;
}

#menuPanier {
    margin: 10px;
    max-height: 280px;
    overflow:auto;
}

#menuPanier p {
    margin: -1px auto;
}

#menuPanier a {
    display: block;
    background: #ff9a4f;
    border-top: 1px solid #fff;
    text-decoration: none;
    height: 41px;
    color: #000;
    font-size: 12px;
}

#menuPanier p img {
    float: left;
    height: 40px;
    width: 40px;
}

p span.prix {
    float: right;
    font-size: 16px;
}

#menuPanier p span.detailItem {
    float: left;
    margin-left: 3px;
}

#footer {
    padding-top: 15px;
    clear:both;
    text-align: center;
    font-size: 11px
}

#pied{
    background-image:url(page_pied_bord.jpg);
    background-repeat:repeat-x;
    width:100%;
    height:16px;
/*     float:right; */
}

#pied .pied_coin_basg, #pied .pied_coin_basd{
    background-image:url(page_pied_coin_gauche.jpg);
    float:left;
    height:16px;
    width:16px;
    line-height:0px;
    font-size:0px;
}
#pied .pied_coin_basd{
    background-image:url(page_pied_coin_droit.jpg);
    float:right;
}

Enfin , je continue a penser que si tu ne peut pas verifier de toi même tes effets de mise en forme d'un navigateur a l'autre , ou que c'est un peu trop compliqué , tu devrais t'appuyer sur un tableau 2 colonnes ou l'aisser tombé la semi fluidité en largeur.

Jouer sur le marges négatives et les contextes de formatages c'est toujours risqué , plus la page est complexe dans sa structure et les imbrications , plus le risque de voir tout s'écroulé dans un ou plusieurs
navigateur est grand.

Allez , bon Noël a tous

Bonsoir,

Merci pour ta réponse. J'ai appliqué les corrections mais ça devient trop compliqué. J'ai donc repris le code HTML du début (code du menu avant le code du contenu) et c'est plus facile à gérer.

J'aurais bien passer plus de temps à comprendre et essayer de pérenniser l'affaire mais le temps me manque
Modifié par ThomasB (27 Dec 2008 - 00:08)