28173 sujets

CSS et mise en forme, CSS3

[Résolu] 3 colonnes dont 2 hauteurs variables

Bon aprés avoir regarder la FAQ et les sujet avec 100% dedans je suis pas sur que ce soit possible. Mais dans le doute je demande:

j'ai 2 "bulles" ( des div avec cadres arrondis) de part et d'autres d'un menu , plus un pied de page en dessous. le pied de page ce plaçant actuellement sous la bulle la la + grande.

Est-il possible de faire s'allonger la bulle la plus petite a la même taille que l'autre?
Modifié par CPascal (02 May 2007 - 10:25)
Euh... je n'ai absolument rien compris Smiley confused

Les 2 "bulles" comme tu dis composent l'habillage de ton menu et sont donc purement esthétiques ? C'est quoi cette histoire de pied de page sous la bulle la plus grande ? Smiley biggrin

As-tu un exemple de ce que tu aimerais faire à proposer ?
Ben voila ce que j'ai en tous cas upload/11833-exemple.jpg

et ce qui m'embete c'est la partie blanche en bas à droite. (mais qui peut etre a gauche selon mes pages)

maintenant je suis une bille en design Smiley confus et je tatonne pour voir ce que je peux faire et pas faire......

sinon je peut rajouter mon css aussi 

div#global {
	margin-left: auto;
    margin-right: auto;
	width:1024px;
	min-height:100%;
	position:relative;
}

#regiongauchemodifiable {
	padding:5px;
	border: 1px solid #333333;
	float: left;
	width:440px;
	border-top-width:25px;
	background-color:#FFFFFF;
	height:100%;
}

.divmenu {
	float:left;
	margin:auto;
	width:1px;
	
}

#regiondroitemodifiable {
	padding:5px;
	border: 1px solid #0000FF;
	float:right;
	width:440px;
	border-top-color:#3366CC; 
    border-top-width:25px; 
	background-image:url(../image/fondblanc.jpg);
	
}

#footer {
    bottom: 0;
	background-color:#0099CC;
	width:100%;
}

.divmenu table{
    border:6px solid black;
	margin-left:1px;
	background-color: #000;
}
.divmenu table td {
	background-color: #FFFFFF;
	text-align: center;
	padding: 14px;
}

#cadregauche { 
width: 452px;
background-color: #333;
float: left;
}

#cadredroit { 
width: 452px;
background-color: #36C;
float: right;
}

/* propriétés communes à l'ensemble des 4 coins */
#CDhautgauche, #CDhautdroit, #CDbasgauche, #CDbasdroit, #CGhautgauche, #CGhautdroit, #CGbasgauche, #CGbasdroit {
height: 19px; width: 19px;
background-repeat: no-repeat;
font-size:1px; /* correction d'un bug IE */
}

/* propriétés spécifiques à chaque coin */
#CGhautgauche {
background: url(../image/hautgauche333.gif);
}

#CGhautdroit {
float: right;
background: url(../image/hautdroit333.gif);
}

#CGbasgauche {
background: url(../image/basgauche333.gif);
}

#CGbasdroit {
float: right;
background: url(../image/basdroit333.gif);
}


#CDhautgauche {
background: url(../image/hautgauche36C.gif);
}

#CDhautdroit {
float: right;
background: url(../image/hautdroit36C.gif);
}

#CDbasgauche{
background: url(../image/basgauche36C.gif);
}

#CDbasdroit  {
float: right;
background: url(../image/basdroit36C.gif);
}


J'ai essayé de mettre des heignt ou min-height 100% un peu partout sans succes.

et puis le code html la comme ca vous avez tous


<body >
<div id="global">
<div class="titreprincipal" align="center">
      <div align="center">
        PASC J'M LES JEUX 
      </div>
</div>
<br />

<div id="cadregauche">
	<div id="CGhautdroit"></div><div id="CGhautgauche"></div>
	<div id="regiongauchemodifiable">
  		<!-- TemplateBeginEditable name="RegionGaucheModifiable" -->
		<p> </p>
  		<!-- TemplateEndEditable -->
	</div>
	<div id="CGbasdroit"></div><div id="CGbasgauche"></div>
</div>

<div class="divmenu" >  
  <table>
  <?php do { ?>
    <tr>
      <td><a href="<?php  echo $row_infomenu['lien'];  ?>" class="menu"><?php echo $row_infomenu['titre']; ?></a></td>
    </tr>
   <?php } while ($row_infomenu = mysql_fetch_assoc($infomenu)); ?>
  </table>
</div>

<div id="cadredroit">
	<div id="CDhautdroit"></div><div id="CDhautgauche"></div>
	<div id="regiondroitemodifiable">
 		<!-- TemplateBeginEditable name="RegionDroiteModifiable" -->
		<p> </p>
 		<!-- TemplateEndEditable -->
	</div> 
	<div id="CDbasdroit"></div><div id="CDbasgauche"></div>
</div>


<!-- test pied de page -->

<div id="footer">bab</div>
</div> <!-- fin div global --> 

</body>
Bon les height,min-height 100% ne semblant rien faire, j'ai eu l'idée de rajouter des min-height en pixel a mes pages.

Le pixel ca lui plait mieux. peut etre que tel qu'il sont mes div sont déja considéré a 100%

en faisant des pages assez longues ( min-height:600px par exemple )ça aurait réglé mon problème pour presque toutes les pages.

mais min-height ne fonctionne pas sous ie.

bon bien sur reste la solution de mettre un height fixe et des ascenseurs mais c'est pas ce que je souhaitais a la base.

y a pas de solutions?

sinon par rapport au dernier post j'ai rajouté clear:both a mon footer car sinon celui si etait en haut au lieu dans bas dans firefox.
Salut,

Je up cette question car j'ai enfin quasi-trouvé comment faire mes 2 colonnes a longueurs variables. et meme 3 avec le menu.

sur un autre topic j'ai lu des choses sur les colonnes factices et j'essai de l'appliquer a mon cas.

ça marche sur IE6.......et sur firefox ben Smiley bawling .

le pb : mes colonnes factices ne finissent pas la page j'ai besoin d'un pied de div ( != dans mon esprit d'un pied de page.Ai-je tord ou raison? ) pour fermer mes cadres arrondis.

voilà a quoi ça ressemble sous FF:

upload/11833-Sans-titre.gif

pas de pied de div à gauche.

voila le code html concerné par cette bulle gauche:



<div id="global">
<!--[if lte IE 6]>
<style type="text/css">
div#cadregauche {
	height: 100%;
}	
</style>
<![endif]-->
<div id="cadregauche" >
	<div id="CGhautdroit"></div><div id="CGhautgauche"></div>
	<div id="regiongauchemodifiable">
  		..............
	</div>
	<div id="footergauche"></div>
</div>
.........
</div>


et les parties de mon css qui me semblent conçernées:




div#global {
	margin: auto;
	width:980px;
	position:relative;
	min-height: 100%;
	background-image:url(../image/tranchemenu.gif);
	overflow:hidden
}

#regiongauchemodifiable {
	padding:5px;
	border: 1px solid #333333;
	border-bottom:none;
	width:418px;
/*	min-height:700px; */
	border-top-width:25px;
	background-color:white;
	float:left;
}



#cadregauche { 
width: 430px;
background-color: #333;
float:left;
/* min-height:100%; */
/* position:relative; */
}

......

#footer {
    bottom: 0;
	background-color:#09C;
	width:100%;
	clear: both;
}

#footergauche {
	position:absolute;
	background-image:url(../image/pieddebullegauche.jpg);
	bottom: 19px;
	left:0px;
	width:430px;
/*	clear: both; */
}


peut etre est ce plus facile de mettre un div tous en bas d'un autre div que de le mettre en bas de l'écran mais je seche. quand j'essai d'appliquer le tuto les choses vont encore plus mal et IE 6 devient fou aussi Smiley biggol quand a moi mon sort est réglé Smiley langue

Si une ame généreuse peut m'expliquer comment faire

Pascal
Modifié par CPascal (01 May 2007 - 21:52)
Smiley smile Smiley biggrin Smiley ravi Smiley biggol .

j'y suis arrivé donc les colonnes a hauteurs variables c'est possible

bon finalement mon pb de pied de div était tout bête. sous FF et Opera il fallait que je precise une height a mon div il m'avait mis 0 par defaut.


Bon reste plus qu'a tous jeter et refaire quelquechose de beau. dites vous connaissez pas un bon site où on apprends les régles élémentaires pour faire un design, choisir ses polices et tous çà?

en tous cas je trouve que ce post vaut un résolu dans son sujet^^

pascal
Sujet clos
Aller à