Plusieurs colonnes sur une page

seb1780 -  
 seb1780 -
Bonjour,

J'administre un site pour une association et j'ai un problème pour faire fonctionner sur une même page plusieurs colonnes. Mon fichier de travail est ci-dessous :

http://www.harmonie-saint-sever.fr/test/

Je souhaiterais que l'intégralité du texte s'affiche (en effet, si on réduit la fenêtre, le contenu des deux colonnes en dessous disparait au lieu de s'adapter. ) Je travaille sur Mac et donc avec Safari et Firefox mais il me semble que sur IE, le problème se pose aussi (voire en pire). Ce fichier CSS se trouve ici si vous voulez plus de détail.
http://www.harmonie-saint-sever.fr/test/styles.css

Ce travail me permet de rendre compatible mon site avec IE (ce qui n'est pas du tout le cas pour le moment)
Merci d'avance pour votre aide.

1 réponse

RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
c est un peu brouillon et je ne sais pas comment tu veux placer tes colonnes !

tu as mis des absolute un peu partout , et cela créait des chevauchement de div

avec ce css tout devrais etre bon
body {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	background-color: #000000;
	color: #FFFFFF;
	overflow: auto;
}
div#bandeau {
	position: fixed;
	width: 100%;
	height: 120px;
	background-color: #FFFFCC;
	background-repeat: no-repeat;
	z-index: 2;
}
div#page {
	position: absolute;
	top: 132px;
	left: 210px;
	width: 81%;
	height: 100%;
	z-index: 1;
}
div#contenu {
	float: left;
	top: 132px;
	padding-left: 10px;
	padding-right: 10px;
	background-color: #FFA07A;
}
div#contenu2 {
	float: left;
	padding-left: 10px;
	padding-right: 10px;
	background-color: #FFA500;
}
div#cgauche {
	float: left;
	width: 48%;
	text-align: justify;
	background-color: #66CDAA;
}
div#cdroite {
	float: left;
	top: 15px;
	width: 48%;
	text-align: justify;
	background-color: #BA55D3;
}
div#co-gauche {
	float: left;
	top: 15px;
	width: 32%;
	text-align: justify;
	background-color: #A52A2A;
}
div#co-milieu {
	float: left;
	top: 15px;
	left: 8px;
	width: 32%;
	text-align: justify;
	background-color: #5F9EA0;
}
div#co-droite {
	float: left;
	top: 15px;
	left: 8px;
	width: 32%;
	text-align: justify;
	background-color: #755500;
}
div#positionmenu {
	position: fixed;
	float: left;
	top: 132px;
	width: 200px;
	text-align: left;
	background-color: #DEB887;
}
0
seb1780
 
Merci beaucoup pour ton aide. L'aspect sous IE est impécable. C'est maintenant sous Firefox que quelques problèmes existent. En effet, le menu du site est une liste mise en forme avec un CSS. Firefox décalle le menu vers la droite laissant un espace inesthétique a gauche. De même, pour les titres en rouge qui apparaissent plus bas et non alignés avec le menu comme avec IE. Je sais comment régler le problème mais cela implique que je fasse un deuxième fichier CSS pour chaque navigateur avec un "if IE........" dans les fichiers HTML. J'aimerais m'en passer.

Le site : http://www.harmonie-saint-sever.fr/index2.php

Le CSS : https://www.harmonie-saint-sever.fr/css/styles.css

Mon deuxième problème se trouve sur les listes de définitions sur cette page :
https://www.harmonie-saint-sever.fr/liens.html

J'ai un problème avec le float:left afin d'afficher en ligne mes liens et non sur une seule colonne. Comme vous le voyez, Les titres <h2> apparaissent eux aussi décalé et moi, bien sur j'aimerais que cela passe à la ligne a chaque nouveau titre.

Merci d'avance pour votre aide précieuse, j'ai essayé beaucoup de chose sans succés.
0