28173 sujets

CSS et mise en forme, CSS3

Encore une histoire de colonnes

Bonjour,

J'ai lu beaucoup d'exemples de mises en page par colonnes, et je sais qu'il y a déjà beaucoup de messages sur le sujet sur ce propre forum... mais comme je deviens vraiment chèvre à force de tourner en rond, je ne peux m'empêcher d'envoyer cet appel au secours !

Voila, dans l'idée je voudrais imprimer un annuaire sur trois pages. Sur la première je voudrais un bloc pour la direction, centré en haut, puis, en dessous deux colonnes avec dans chacune un ou plusieurs services. Sur les deux pages suivantes je voudrais deux colonnes avec plusieurs services dans chacune.

Je voudrais que le tout soit centré sur la page, et qu'il y ait un peu d'espace autour et à l'intérieur des "blocs services".

J'ai intégré des divisions pour faire mes "sauts de sections" et "sauts de pages". J'ai mis le fond de la division principale en gris pour mieux voir (parfois le gris ne va plus jusqu'à la fin du document, ce qui me signale qu'il y a un gros problème).

J'ai simplifié au maximum mon code pour le débugger. Les services sont nommés "texte", et ne comportent plus que le prénom d'une des personnes qui en font partie.

Les "border:..." ne sont là que pour mieux visualiser.

<html><head>
<style>
body {
  padding: 0;
  margin: 0;
  text-align:center
}
#impression {
  width: 100%;
  padding: 0;
  background-color: #ccc;
  text-align:center;
}
.colonne {
  margin:auto;
  border:solid 1px black;
  text-align:center;
  width:48%
}
.texte {
  margin:auto;
  border:dashed 1px black;
  width:96%
}
.sautdesection {
  clear:both;
}
.sautdepage {
  page-break-after:always;
}
</style>
<title>Annuaire</title></head>
<body >
<div id="impression">
    <div class="colonne">
        <div class="texte">Jacqueline</div>            
    </div>

    <div class="sautdesection"></div>

    <div class="colonne">
        <div class="texte">Jean-Marc</div>        
    </div>
    <div class="colonne">
        <div class="texte">Michel</div>
        <div class="texte">Alain</div>        
    </div>

    <div class="sautdepage"></div>

    <div class="colonne">
        <div class="texte">Philippe</div>        
        <div class="texte">Louis</div>        
    </div>
    <div class="colonne">
        <div class="texte">Marie-Ange</div>
        <div class="texte">Nakita</div>        
    </div>

    <div class="sautdepage"></div>

    <div class="colonne">
        <div class="texte">Bernadette</div>        
        <div class="texte">Jean-Michel</div>        
        <div class="texte">Richard</div>        
    </div>
    <div class="colonne">
        <div class="texte">Elisabeth</div>
        <div class="texte">Madeleine</div>
    </div>
</div>
</body>
</html>


Avec ce code je n'ai qu'une seule colonne tout au long du document. Si j'ajoute un float:left dans ma définition du style "colonne" ça fonctionne, mais les sauts de page ne sont plus corrects et d'ailleurs le fond gris s'arrête dès la fin de la première "section". De plus du coup le centrage est perdu.

Là c'est moi qui suis totalement perdu. J'avoue que les float et autres clear posent quelques problèmes à mes petits neurones... mais j'ai l'intuition que ça doit pas être si compliqué que ça et qu'il y a forcément quelque chose d'énorme que je ne vois pas.

Merci pour toute aide !

Mathieu
Comme je me dis que peut être ma demande n'est pas très claire, et que j'ai beau continuer à rechercher la solution un peu partout... rien ne vient, voici une version très sale de mon code qui me permet d'obtenir ce que je souhaite à l'impression (faire "aperçu avant impression" pour comprendre).

<html><head><style>
body {
  padding: 0;
  margin: 0;
  text-align:center
}
.texte {
  margin:auto;
  border:dashed 1px black;
  width:96%
}
.sautdesection {
  clear:both;
}
.sautdepage {
  page-break-after:always;
}
</style><title>Annuaire</title></head><body >

<table border='0' align='center' width='96%'  height='95%'>
<tr>
<td style='text-align:center' colspan='2'>
        <div class="texte" style="width:48%">Jacqueline</div>
</td>
</tr>
<tr>
<td width='48%' valign='center'>
        <div class="texte">Jean-Marc</div>
</td>
<td width='48%' valign='center'>
        <div class="texte">Michel</div>
        <div class="texte">Alain</div>
</td>
</tr>
</table>

    <div class="sautdepage"></div>

<table border='0' align='center' width='96%' height='95%'>
<tr>
<td width='48%' valign='center'>
        <div class="texte">Philippe</div>
        <div class="texte">Louis</div>        
</td>
<td width='48%' valign='center'>
        <div class="texte">Marie-Ange</div>
        <div class="texte">Nakita</div>        
</td>
</tr>
</table>

    <div class="sautdepage"></div>

<table border='0' align='center' width='96%' height='95%'>
<tr>
<td width='48%' valign='center'>
        <div class="texte">Bernadette</div>
        <div class="texte">Jean-Michel</div>        
        <div class="texte">Richard</div>        
</td>
<td width='48%' valign='center'>
        <div class="texte">Elisabeth</div>
        <div class="texte">Madeleine</div>
</td>
</tr>
</table>

</body>
</html>
Sujet clos
Aller à