Titre: texte en colonne
Posté par: Tanns le le 02-08-2006 a 11:46:46
Bonjour,
je suis actuellement en train de travailler sur la mise en place de mes feuilles de style.
Je voudrais savoir ce qu'il faut définir dans la feuille de style pour avoir plusieurs colonnes dans le rédactionnel du site, genre, dans mon cas, avec 2 colonnes de texte dans un calque de 800px environ.
Merci d'avance :) |
Titre: Re:texte en colonne
Posté par: MarvinLeRouge le le 02-08-2006 a 22:34:19
Salut,
Une solution : 2 blocs en float left, avec chacun une largeur de 50% (en fait un peu moins pour mettre du padding ou du margin). |
Titre: Re:texte en colonne
Posté par: bardamu le le 22-08-2006 a 12:53:26
imaginons un bloc cadre, dans lequel tu mets deux colonnes. La première colonne est en float left, la 2e est positionnée par rapport au bord gauche du bloc cadre par une marge. ce qui donne :
Code:
#cadre {
width:800px;
height:auto; /* la hauteur s'adapte au contenu des colonnes */
}
#colonne_gauche {
float:left;
width:400px;
height:auto;
}
#colonne_droite {
height:auto; /* ne pas préciser la largeur de cette colonne, elle prendra l'espace qui reste */
margin-left:400px; /* cette marge correspond à la largeur de la 1ere colonne */
}
|
|
NB : si tu veux que la hauteur de ton bloc cadre s'agrandisse en fonction du contenu des colonnes, tu dois rajouter une 4e balise DIV dans ton code HTML qui se situe après les deux colonnes et avant la fermeture de la balise cadre. Et cette balise DIV doit avoir l'attribut css :
Code:
exemple de code complet :
Code:
<html>
<head>
<style>
#cadre {
width:800px;
height:auto;
margin:0px;
padding:0px;
background-color:#D2D2D2;
text-align:left;
}
#colonne_gauche {
float:left;
width:400px;
height:auto;
margin:0px;
padding:0px;
background-color:#CCCCCC;
}
#colonne_droite {
height:auto;
background-color:#EEEEEE;
margin:0px;
padding:0px;
margin-left:400px; /* cette marge correspond à la largeur de la 1ere colonne */
}
#spacer {
clear:both;
}
</style>
</head>
<body>
<div id="cadre">
<div id="colonne_gauche">En 1913, Henri Focillon est appelé à Lyon pour enseigner l'histoire
de l'art à l'Université. Quelques mois plus tard, il est nommé directeur des musées de Lyon,
poste qu'il va occuper une dizaine d'années dans un contexte marqué par la première guerre
mondiale. Dès son arrivée au Palais Saint-Pierre, Focillon projette une importante
réorganisation des collections.
</div>
<div id="colonne_droite">En 1913, Henri Focillon est appelé à Lyon pour enseigner l'histoire
de l'art à l'Université. Quelques mois plus tard, il est nommé directeur des musées de Lyon,
poste qu'il va occuper une dizaine d'années dans un contexte marqué par la première guerre
mondiale. Dès son arrivée au Palais Saint-Pierre, Focillon projette une importante
réorganisation des collections.
</div>
<div id="spacer"></div>
</div>
</body>
</html> |
|
|
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|