18073 sujets

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

Mise en forme

Bonsoir
Je reviens à la charge avec du code. Smiley confused

1°
Nous avons les colonnes B, C, D
Quand je réduis la page du navigateur la colonne D saute en dessous de la
colonne A et le texte sort du div.
Ou est mon erreur ?

2°
Dans la colonne D les éléments agrandissent celle ci,
mais les colonnes C et D restent au même niveau.
Y a t'il un moyen pour que les colonnes soient toujours au même niveau
et flexibles ?
Merci pour votre écoute




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<title>essais</title>
<style type="text/css" media="screen">
		<!--
.global {
	   border : 1px solid #000000;
	   width : 90%;

	   margin-right: auto;
	   margin-left: auto;
}
.titre {
	    width : 100%;
	    border : 1px solid #000000;
}
.coldroite {
   		margin : 0; 
   		border : 1px solid #000000; 
   		width : 30%; 
   		float : left; 
}
.centre {
   		margin : 0; 
		border : 1px solid #000000; 
   		width : 49%;
		float : left; 
}
.colgauche {
   	   margin : 0; 
   	   border : 1px solid #000000; 
   	   width : 20%; 
   	   float : left; 
}
.pied {
	   margin : 0;
	   border : 1px solid #000000;
	   width : 100%;
	   clear: both;   		        
}
.Ca{
	  background-color: #B2B286;
	  font-family: Verdana, Arial, Helvetica, sans-serif;
	  font-size: 11px;
	  font-weight: bold;
	  color: #FFFFFF;
	  padding: 4px 5px 3px 7px;
	  border-color: #A6A6A6;
	  border-width: 1px 1px 0px 1px;
	  border-style: solid solid none solid;
	  margin-top: 1em;
	  margin-right: 3px;
	  margin-left: 3px;
	
}
.Cb{
	  background-color: #FFFFFF;
	  padding: 10px;
	  clear: both;
	  border-color: #A6A6A6;
	  border-width: 1px;
	  border-style: solid;
	  margin-top:0px;
	  margin-right: 3px;
	  margin-left: 3px;
}

	
	   -->
</style>
</head>



<body>
<div class="global">
<div class="titre">A</div>   
<div class="colgauche">
  <p>B</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<div class="centre">
  <p>C</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<div class="coldroite">
  <p>D</p>
<div class="Ca">a</div>
    <div class="Cb">a1aaaaaaaaaaaaaa</div>
    <div class="Ca">b</div>
    <div class="Cb">
	    b1<br />
	    bbbbbbbbbb<br />
        bbbbbbbbbbbb<br />
    </div>
    <div class="Ca">c</div>
    <div class="Cb">c1</div>
    <div class="Ca">d</div>
    <div class="Cb">d1</div>
    <div class="Ca">e</div>
    <div class="Cb">e1</div>
    <div class="Ca">f</div>
    <div class="Cb">f1</div>
    <div class="Ca">g</div>
    <div class="Cb">g1</div>
    <div class="Ca">h</div>
    <div class="Cb">h1</div>
</div>

<div class="pied">E</div>

</div>
</body>
</html>
Bonsoir Michel,

Je viens de faire un CV pour un copain, une page, bandeau, 3 colonnes, fluide. Je me suis servi d'un schéma comme celui-là :

#conteneur {
width:100%;
height:450px;
}
#cv,#compet,#rea {
height:100%;
width:29.8%;
margin:1%;
float:left;
border:2px dotted #900;
background:#fff;
}
.contenu {
height:422px;
overflow:auto;
scrollbar-face-color:#d58d38;
}
#cv {
margin-left:1.4%;
}
#conteneur>#cv {
margin-left:2%;
}

<div id="conteneur">
	<div id="cv">
		<div class="contenu">
		<p>blabla</p>
		</div>
	</div>
	<div id="compet">
		<div class="contenu">
		<p>blabla</p>
		</div>
	</div>
	<div id="rea">
		<div class="contenu">
		<p>blabla</p>
		</div>
	</div>
</div>

J'espère que ça va t'inspirer.
Bonsoir Papyjo

Effectivement ton approche est très ingénieuse.
Mais voilà , le hic c'est que quand j'insère des données dans une colonne
celle ci affiche une scrollbar, quand j'enlève la scrollbar les données sont rognées(normal) ,ce que j'aimerais c'est entrainer les trois colonnes vers le bas quand on insère des données à l'intérieur de l'une des colonnes.
En gros,j'aimerais que le bas des colonnes soient toujours au même niveau
quelque soit la hauteur du contenu de celles ci.
Ta présentation met de l'eau au moulin, je cherche encore
merci beaucoup pour ta réponse
upload/1522-idee2.gif
Sujet clos
Aller à