[ résolu] colonne left et right de meme taille

61 Posts

murdok Reply #1, 16 years, 9 months ago

Bonjour,

comment faire pour que la colonne left et la colonne right soit de la meme taille en fonction du contenu saisi dans la partie la plus grande, pour moi content et dans right.

merci

428 Posts

Jean-Christophe B. Reply #2, 16 years, 9 months ago

A mon avis, il faudra un peu plus d’informations pour pouvoir t’aider.
Tu parles du modèle par défaut de MODx ?

Intégrateur web freelance

61 Posts

murdok Reply #3, 16 years, 9 months ago

oui pardon! c’est le site que tu as vu dans l’autre post!

61 Posts

murdok Reply #4, 16 years, 9 months ago

je reposte le code du template et le css si quelqu’un à une idée.
merci

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>[(site_name)] | [*longtitle*]</title>
  <meta http-equiv="Content-Type" content="text/html; charset=[(modx_charset)]" />
  <meta name="keywords" content="[*introtext*]" />
  <meta name="description" content="[*description*]" />
  <base href="[(site_url)]"></base>
  <link rel="stylesheet" href="assets/templates/modxhost/layout.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="assets/templates/modxhost/modxmenu.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="assets/templates/modxhost/form.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="assets/templates/modxhost/modx.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="assets/templates/modxhost/print.css" type="text/css" media="print" />
  <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="[(site_url)][~11~]" />
  <script src="manager/media/script/mootools/mootools.js" type="text/javascript"></script>
  <script src="assets/templates/modxhost/drop_down_menu.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
  <div id="minHeight"></div>
  <div id="outer">
    <div id="inner">
      <div id="derriere">
      <div id="right">
         <div id="haut-droit">
         </div>
         <div id="right-inner">
           <h1 style="text-indent: -5000px;padding: 0px; margin:0px; font-size: 1px;">[(site_name)]</h1>
          <div id="sidebar">
               <div id="content">
              	<div class="post">
                [*#content*] 
              	</div>
            	<!-- close .post (main column content) -->
              </div>
              <!-- close #content -->
                         
                     </div>
          <!-- close #sidebar -->
        </div>
        <div id="bas-droit">
        </div>
        <!-- end right inner-->
      </div>
      <!-- end right -->
      <div id="left">
          <div id="haut-gauche">
          </div>
          <div id="left-inner"><img src="assets/templates/modxhost/images/left2.jpg" border="0" />
          </div>
          <div id="formulaire">{{form_fr}}
          </div>
          <div id="menu-gauche"><img src="assets/templates/modxhost/images/left_bas.jpg" border="0" />
          </div>
          <div id="bas-gauche">
          </div>
        <!-- end left-inner -->
      </div>
      <!-- end left -->
    </div>
    <!-- end inner -->
    </div>
    <div id="clearfooter"></div>
    <div id="header">
      <h1><a id="logo" href="[~[(site_start)]~]" title="[(site_name)]">[(site_name)]</a></h1><div id="flag">[[YAMS? &get=`repeat` &currenttpl=`currentFlagItemTpl` &repeattpl=`otherflagItemTpl` ]]</div>
            <div id="ajaxmenu">[[Wayfinder?startId=`0` &outerTpl=`mh.OuterTpl` &innerTpl=`mh.InnerTpl` &rowTpl=`mh.RowTpl`  &innerRowTpl=`mh.InnerRowTpl` &firstClass=`first` &hereClass=``]] </div>
      <!-- end topmenu -->
    </div>
    <!-- end header -->
    <br style="clear:both;height:0;font-size: 1px" />
    <div id="footer">{{footer_valcenis}}
    </div>
    <!-- end footer -->
  </div>
  <!-- end outer div -->
</div>
<!-- end wrapper -->
</body>
</html>

/* commented backslash hides from ie5mac \*/ 
html{
	height:100%;
	margin:0;
	padding:0
} 
/* end hack */ 
html,body {
	padding:0;
	margin:0;
	/*background-color: #FFFFFF;*/
	font-size: 11px;
	font-family: "Trebuchet MS", verdana, sans-serif;

}
body{	
	text-align:left;
	min-width:1000px;/* for mozilla*/
	background-color: #FFFFFF;
	height:100%;
	background-image:url(images/fond.jpg);
	/*background:  url(images/fond.jpg) no-repeat center top;*/
	background-repeat:no-repeat;
	background-attachment:fixed;
}
#wrapper {
	background:  url(images/foot_4x82.jpg) repeat-x left bottom;
	_height: 82px;
}

#outer{
	height:99.9%;
	min-height:100%;
	width:1000px;
	text-align:left;
	margin:auto;
	position:relative;
	overflow:visible;
	/*background:  url(images/inner_776x1.jpg) repeat-y left top;*/
}

/* mac hide \*/
* html #outer{
	width:1000px
}
/* end hide*/

html>body #outer{
	height:auto;
} /*for mozilla as IE treats height as min-height anyway*/

#inner{
	width:100%;
	padding-top:143px;/*needed to make room for header*/
	
} 

#header{
	position:absolute;
	top:0px;
	left:0px;
	width:1000px;
	height:93px;
	z-index:74;
	background:  url(images/top-header_776x93_2.png) no-repeat left top;

}

#flag{
	width:90px;
	float:right;
}

#ajaxmenu{
	position:absolute;
	top:93px;
	left:0px;
	width:1000px;
	height:43px;
	z-index:1000;
/*	background:  url(images/header_776x43.png) no-repeat left top;*/
}
#logo {
	position:absolute;
	top:26px;
	left:10px;
	width:237px;
	height:63px;
	text-indent: -5000px;
	z-index:300;
	background:  url(images/logo_237x63.gif) no-repeat left top;
}
/* mac hide \*/
* html #outer, * html #header {width:1000px}
/* end hide*/
#footer {
	color: #ffffff;
	width:1000px;
	clear:both;
	height:82px;
	text-align:left;
	left:0px;
	bottom:0px;
	position: absolute;
	/*background:  url(images/foot_776x82_2.jpg) no-repeat left top;*/

}
#footer p {
	margin-top: 10px;
}
#footer p a {
	text-decoration: none;
	color: #ffffff;
}
* html #footer{
	margin-bottom:-1px
}/* ie rounding bug*/

/* mac hide \*/
* html #footer {
	/*only ie gets this style*/
	height:82px;
	/* for ie*/
}
/* end hide*/

div,p  {
	margin-top:0px;
}/*clear top margin for mozilla*/

#haut-gauche{
    height:29px;
	background: url(images/coin1.png) no-repeat right top;
}
#haut-droit{
    height:29px;
	background: url(images/coin2.png) no-repeat right top;
}
#bas-droit{
    height:29px;
	background: url(images/coin3.png) no-repeat right bottom;
}
#bas-gauche{
    height:29px;
	background: url(images/coin4.png) no-repeat right top;
}
#formulaire{
	height:40px;
    background-color:#ece4d5;
	padding-left:15px;

}
#menu-gauche{
	background-color:#ece4d5;
	
}

#right {
	width:794px;
	float:right;
	
	overflow:hidden;
	/*z-index: 55;*/
	/*background-color: #FFFFFF;*/
	/*height:485px;*/
		
}
#right-inner {
	padding-left: 9px;
	padding-right: 9px;
	text-align: left;
	background-color:#FFFFFF;
	/*z-index: 54;*/

	
}
#right-inner h2 {
	font-size: 15px;
	color:#00d4f6;
}
#left {
	position:relative;/*ie needs this to show float */
	width:206px;
	float:left;
	/*padding-left: 7px;*/
	z-index: 56;
	/*height:485px;*/
	/*background-color:#ece4d5;*/

}
#left-inner {
	width: 206px;
	height:80px;
	/*padding-left: 9px;
	padding-right: 9px;*/
	text-align: left;
	z-index: 57;
	/*height:470px;*/
	/*background:  url(images/left.jpg) no-repeat center top;*/
}
#derriere {
	background-color:#993333;
}

#clearfooter {
	width:100%;
	height:82px;
	clear:both;
} /* to clear footer */

html>body #minHeight{
	float:left;
	width:0px;
	height:100%;
	margin-bottom:-82px;
} /*safari wrapper */
#content {
	z-index: 300;
	padding-bottom: 7px;
}

#content h2 {
	font-size: 15px;
	/*color: #618200;*/
	/*background:  url(images/bullet_17x21.gif) no-repeat left top;*/
	padding-left: 19px;
	line-height: 24px;
	position: relative;
	z-index: 999;
}

h3#post-  {
	font-size: 12px;
	color: #00d4f6;
	background:  url() no-repeat left top;
	padding-left: 0px;
}

#content p {
	font-size: 12px;
	color: #444444;
	line-height: 18px;
	_line-height: 16px;
}

#content p a {
	color: #000000;
}

#content p a:hover {
	background-color: #00d4f6;
	color: #ffffff;
}


#footer p {
	padding: 8px;
}

.FSF_searchResults {
	font-size: 12px;
	color: #444444;
	line-height: 18px;
	_line-height: 16px;
}


.FSF_extract {
	font-size: 12px;
	color: #444444;
	line-height: 18px;
	_line-height: 16px;
}


.FSF_resultLink {
	color: #00d4f6;
}

.FSF_extract {
	font-size: 12px;
	color: #444444;
	line-height: 18px;
	_line-height: 16px;
}

.highlight {
	font-size: 12px;
	background-color: #f2f2f2;
	color: #00d4f6;
	font-weight: bold;
/*	line-height: 18px;
	_line-height: 16px;*/

}

img {
	/*border: dotted 1px #444444;*/
	border: none;
}

#content ul li{
	list-style-image: url(images/bullet_11x8.gif);
	margin-bottom: 0.5em;
	font-size: 110%;
}

.LIn_shortMode {
	list-style-type: none;
	margin: 0;
	padding: 0;

}

.LIn_desc {
	display: none;
}
.LIn_date {
	font-style: italic;
	margin-left: 5px;
}

#content a, #sidebar a
{
    color: rgb(97, 130, 0);
}

#content a:hover, #sidebar a:hover
{
    background-color: rgb(97, 130, 0);
    color: rgb(255, 255, 255);
}

.style1 {color: #FFFFFF}

a img { border: none;}

/*#hg {
background:url(images/coin1.png) no-repeat top left;
}*/
/*#hd {
background: url(images/coin2.png) no-repeat right bottom;
}*/
/*#bd {
background:url(images/coin3.png) no-repeat bottom right;
}*/
/*#bg {
background:url(images/coin4.png) no-repeat bottom left;
}*/

61 Posts

murdok Reply #5, 16 years, 9 months ago

Bonjour a tous,

je me permet de relancer ce topic car je n’ai toujours pas trouver la solution merci.

353 Posts

mr_go Reply #6, 16 years, 8 months ago

La largeur des colonnes est-elle fixe ?

Auquel cas, je ferais quelque chose de ce type

<div id="conteneur-colonnes">
<div id="col-gauche">Blabla...</div>
<div id="col-droite">Blabla...</div>
<div class="clearBoth"> </div>
</div>

- Dans conteneur-colonne une image background (un trait au milieu) avec repeat-y pour délimiter les deux colonnes.
- col-gauche, col-droite en float:left et avec une width fixe.

ne pas oublier .clearBot{clear:both;}

Cela devrait suffire à faire ton bonheur.

Dernière réalisation > [http://shop.hpfinewines.com/cms.php?id_cms=17]

61 Posts

murdok Reply #7, 16 years, 8 months ago

Bonjour,

je te remercie beaucoup de ton retour.
Oui les colonnes sont fixes en largeur.
je comprend bien ton code mais j’ai un peu de mal à l’intégrer dans mon template actuel.

merci beaucoup

61 Posts

murdok Reply #8, 16 years, 8 months ago

j’ai fait un petit test avec ton code mais la colonne de droite ne prend pas la taille de la colonne de gauche.
j’ai fait un petit bout de code pour voir ou j’ai fait une erreur:

<body>
<div id="conteneur-colonnes">
<div id="col-gauche">colonne gauche</div>
<div id="col-droite">
  <p>colonne droite</p>
  <p>fezf</p>
  <p>fezf</p>
</div>
<div class="clearBoth"> </div>
</div>

puis le css:

@charset "utf-8";
/* CSS Document */
#conteneur-colonnes {
	width:400px;
}
#col-gauche {
	float:left;
	width:200px;
	background-color:#0099FF;
}
#col-droite {
	float:left;
	width:200px;
	background-color:#CCFF00;
}
.clearBot{clear:both;}

merci!!

353 Posts

mr_go Reply #9, 16 years, 8 months ago

Dans l’esprit les deux colonne n’auront pas la même taille.

On simule cet effet en créant une image en background de conteneur-colonnes.

Cette image fait dans ton cas 400px de long et "reproduit" tes deux couleurs (les 200 premiers px en #0099FF et les suivants en #CCFF00...). Peu importe la hauteur de celle ci (3 ou 4 px suffisent).

La css donne du coup ceci

@charset "utf-8";
/* CSS Document */
#conteneur-colonnes {
	width:400px;
        background:#fff url(./ton-background.jpg) left top repeat-y;
}
#col-gauche {
	float:left;
	width:200px;
	
}
#col-droite {
	float:left;
	width:200px;
	
}
.clearBot{clear:both;}

Dernière réalisation > [http://shop.hpfinewines.com/cms.php?id_cms=17]

61 Posts

murdok Reply #10, 16 years, 8 months ago

ok super merci j’ai bien saisi le fonctionnement, je vais tester dans mon template.
je reviens vers toi!