28172 sujets

CSS et mise en forme, CSS3

Ajouter 2 colonnes... ?

Bonjour

Je galère à comprendre les positions :s. j'ai voulu rajouter 2 colonnes à gauche et à droite du conteneur de l'exemple 15.
J'ai pour cela rajouté 2 class div avant la déclaration du conteneur et après.
J'ai nommé ces 2 nouveaux div ombregauche et ombredroite.
dans la déclaration css de ses 2 nouveau div j'ai mis ça :


body 
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	margin: 0;
	padding: 0;
}
#conteneur {
	margin:0 auto;
	width:900px;
	border-color:black;
	height:100%;
	background-color:#CCCCFF;
	float:left;
}
#ombregauche{
margin:0 auto;
height:500px;
width:20px;
background-image: url("../images_site/ombregauche.png");
float:left;
background-repeat: repeat-y ;
}


#ombredroite{
margin:0 auto;
height:500px;
width:20px;
background-image: url("../images_site/ombredroite.png");
background-repeat: repeat-y ;
float:left;
}

#centre {
	background-color:#9999CC;
	margin-left: 160px;
	margin-right: 160px;
	background-color: #d4d9f7;
	border:2px;	
	padding :15px;
}



#header {
	height: 203px;
	background-color: green;
	background-image: url("../images_site/banniere.jpg");
	background-repeat: no-repeat;
}
#pubcentre {
	height: 75px;
	background-color: green;
	background-repeat: no-repeat;
}
#haut {
	height: 81px;
	background-color:#CCCCFF;
	text-align:center;
}
#news {
      	width: 300px;
      	height: 150px;
      	overflow: auto;
      	border: 1px solid #000;
}

#gauche {
	float:left;
	width: 150px;
	background-color:#d4d9f7;
	border:2px ridge black;
	padding-bottom:20px;
	text-align:center;
}
#droite {
	float:right;
	width: 150px;
	background-color:#d4d9f7;
	text-align:center;
	padding-bottom:20px;
	border: 2px ridge black;	
}
#pied {
	margin-top:10px;
	clear:both;
	height: 50px;
	background-color: #99CC99;
	background-image: url("../images_site/piedpage.jpg");
	background-repeat: no-repeat;
	text-align:center;
}

#menugauche {
	list-style-type: none;
	margin: 0;
	padding:0;
}

#menudroit {
	list-style-type: none;
	margin: 0;
	padding:0;
}


J'ai mis float:left pour celui de gauche, de droite , et dans le conteneur. D'après le tuto d'alignement de bloc il faut faire comme ça. Sa marche mais:

Le conteneur n'est plus centré dans le navigateur, il est sur la gauche.
Si je le mets pas de valeur fixe a height, 100% par exemple, dans ombredroite et ombregauche, ces dernieres n'apparaisse pas. Ce qui me gène car le conteneur peut, à cause des textes et des images mis dans centre, faire bien plus de 500px.

Comment dois je m'y prendre ?
Modifié par deuval (16 Sep 2008 - 22:16)
Bonjour aussi...

Tout d'abord, voudrais-tu faire un effort sur l'orthographe et la lisibilité de tes messages car comme tu le sais, la vocation de ce forum est d'être accessible à tous... même aux personnes qui suivent ton sujet à l'aide d'une synthèse vocale.

Ensuite, pour constater un peu plus précisément ton problème et être en mesure de t'aider, il serait bien que tu nous fournisses dans l'idéal une page en ligne, ou au moins l'intégralité de ton code, et/ou des images explicatives si nécessaire, comme le recommande la règle 13 du forum. Smiley cligne
En l'état, j'ai peur qu'il ne soit difficile de t'apporter une solution.
Modifié par Mikachu (14 Sep 2008 - 20:01)
up

Désolé j'ai été trop pressé d'écrire le précèdent message, je l'ai donc réédité. J'ai beau cherché mon problème persiste je n'ai toujours pas trouvé.
deuval a écrit :
up

Désolé j'ai été trop pressé d'écrire le précèdent message, je l'ai donc réédité. J'ai beau cherché mon problème persiste je n'ai toujours pas trouvé.


Bonjour,

Merci pour l'édition de ton précédent message. Il manque par contre une page en ligne pour constater les problèmes que tu rencontres, ta seule feuille de style, sans le code html correspondant est de peu d'utilité Smiley cligne
Bonjour deuval,

Tu aurais pu relancer ton sujet initial Smiley cligne

En ce qui concerne ton petit soucis, voici peut-être une piste à étudier:
Une seule image pour l'ombrage droite et gauche (plus la taille du conteneur) à mettre en background du conteneur + répétition sur l'axe des ordonnées.
Puis centrage via les marges latérales automatiques (sans float:left...) :

#conteneur {
background:#CCCCFF url(tonimage.png) repeat-y top center;
border-color:black;
margin:0 auto;
width:900px;
overflow:hidden;
}


Cdt,
Sylvain
Sujet clos
Aller à