28234 sujets

CSS et mise en forme, CSS3

Problème de position dans CSS

Bonjour,
Je suis un débutant dans le développement web et je suis en train de concevoir un site internet et j'ai un problème avec les positionnements.
Pour chaque rubrique j'ai mis des position absolute, mais ensuite mon footer ne pouvait pas se mettre tout en bas de la page, et quand j'ai enlevé tous les positions absolute des rubriques du site alors le footer est bien mis en bas, mais en ce qui concerne mes rubriques, je ne sais pas comment les remettre dans leur place initiale.
Je ne sais vraiment pas comment faire Smiley bawling
de l'aide svp!!! Smiley bawling
Merci de ta réponse!
Ah mince c'est vrai ! Smiley confused le site n'est pas encore en ligne.
Comment j'envoie mon code parce qu'il est long...???
dur dur de pas savoir cmt ça fonctionne sur ce forum Smiley sweatdrop
Merci!
voici le code CSS.
Ce qui me pose problème c'est au niveau des 3 rubriques, gauche,centre et droite.
Quand je ne met pas les positions, le pied de page est bien tout en bas. 



body
{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-family: verdana;
	font-size: 12px;
	background-image: url('background.jpg');
	background-attachment:fixed;

}


#entete
{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}


#contenu_gauche
{
	float: left;
	/*position: absolute;*/
	left: 15px;
	top: 270px;
	width: 250px;
	height: 300px;
	border: 1px solid grey;
	padding-left: 20px;
	border-radius: 20px;
	box-shadow: 7px 7px 7px black;
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}

#contenu_droite
/* c'est un tableau*/
{
	float: right;
	/*position: absolute;*/
	top: 270px;
	right: 15px;
	width: 250px;
	border: 1px solid grey;
	border-radius: 20px;
	box-shadow: 7px 7px 7px black;
	height: 300px;
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}

td
/* Reglages pour le tableau du contenu droite*/
{   margin: 0px;
	padding: 10px 10px 10px 10px;
	font-size: 12px;
}

#contenu_centre
/* Section nos principaux objectifs*/
{
	float:left;
	border: 1px solid grey;
	width: 550px;
	border-radius: 20px;
	box-shadow: 7px 7px 7px black;
	/*position: absolute;*/
	left: 360px;
	top: 270px;
	padding-left: 20px;
	margin-left:120px;
	margin-right:20px;
	margin-bottom:30px;
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}

.contenu_rubrique_condition_vente, .contenu_rubrique_societe, .catalogue_produits
/* Section condition de vente, societe, decouvrez nos produits*/
{
	text-align: justify;
	border: 1px solid grey;
	border-radius: 20px;
	box-shadow: 7px 7px 7px black;
	width: 500px;
	/*position: absolute;*/
	left: 300px;
	top: 250px;
	padding: 0px 15px 0px 15px;
	margin-top: 20px;
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}


#piedepage
{
	clear:both;
	bottom: 0px;
	text-align:center;
	height: 50px;
	width: 100%;
    background: #6cf;
}

Modifié par kwad (26 Jul 2013 - 15:04)
Sujet clos
Aller à