28173 sujets

CSS et mise en forme, CSS3

Bonsoir, je m'explique j'ai un div a gauche (menu) un div a toute droite (menu) et un div au milieu, classique

Mais voila j'ai attribué aux deux menus, a gauche et a droite une taille fixe 145px et au div du milieu, je n'ai rien precisé a sa largeur.

Jusqu'ici je n'avais aucun probleme, sauf le jour j'ai créer une page ou j'avais le contenu de mon div du centre qui etait un peu vide, et donc il occupait uniquement la 1ere moitié du centre. En clair il y a un gros trou entre le div du centre et le menu de droite.

Comment faire, que precisez au div du centre pour qu'il prenne toute la place qu'il reste.

Merci d'avance
Bonsoir GomuSan,

Sans une page en ligne ou au moins les lignes de codes de ce que tu as déjà produit, c'est toujours assez problèmatique de répondre juste...
Toutefois, ce tuto d'Alsacreations semble correspondre à ce que tu cherches à faire Smiley cligne
Modifié par 6l20 (06 Nov 2007 - 22:28)
Oups desolé, voila le css
Ce sont les id #leftcontent #rightcontent et #centercontent


body {
	margin:10px 10px 0px 10px;
	background: #333366;
}

a:link, a:active, a:hover, a:visited {
	color: #9966CC; 
	font-family: Verdana,Geneva,Arial,Helvetica,Sans-Serif; 
	font-size: 12px; 
	text-decoration: none
}

.topbanner {
	color: #33CC66; 
	font-family: Lucida Console, Courier New, Sans-Serif; 
	font-size: 12px
}
.topbanner2 {
	color: #6666CC; 
	font-family: Lucida Console, Courier New, Sans-Serif; 
	font-size: 12px
}
.sitetext {
	color: #6699CC; 
	font-family: Verdana,Geneva,Arial,Helvetica,Sans-Serif; 
	font-size: 12px
}
.menutext {
	display : block; 
	padding-top : 2px; 
	padding-right : 2px; 
	padding-bottom : 2px; 
	padding-left : 2px;
	background: #6666CC;
	border-style : solid; 
	border-color: #6666CC;
	border-top-width : 2px; 
	border-right-width : 2px; 
	border-bottom-width : 2px; 
	border-left-width : 2px; 
	color: #333366; 
	background: #6666CC;
	font-family: Verdana,Geneva,Arial,Helvetica,Sans-Serif; 
	font-size: 12px;
	font-weight: bold;
	width: 145px; 
}

a.menu:link {
	display : block; 
	padding-top : 2px; 
	padding-right : 2px; 
	padding-bottom : 2px; 
	padding-left : 2px; 
	border-style : solid; 
	border-color: #6666CC;
	border-top-width : 0; 
	border-right-width : 2px; 
	border-bottom-width : 2px; 
	border-left-width : 2px; 
	width: 145px; 
	font-weight : normal; 
	text-align : left; 
} 

a.menu:hover {
	display : block; 
	background: #000066;
	padding-top : 2px; 
	padding-right : 2px; 
	padding-bottom : 2px; 
	padding-left : 2px; 
	border-style : solid; 
	border-color: #6666CC;
	border-top-width : 0; 
	border-right-width : 2px; 
	border-bottom-width : 2px; 
	border-left-width : 2px; 
	width: 145px; 
	font-weight : normal; 
	text-align : left; 
} 

a.menu:visited {
	display : block; 
	padding-top : 2px; 
	padding-right : 2px; 
	padding-bottom : 2px; 
	padding-left : 2px; 
	border-style : solid; 
	border-color: #6666CC;
	border-top-width : 0; 
	border-right-width : 2px; 
	border-bottom-width : 2px; 
	border-left-width : 2px; 
	width: 145px; 
	font-weight : normal; 
	text-align : left; 
}

#banner {
	height:60px;
	border-top:2px solid #6666CC;
	border-right:2px solid #6666CC;
	border-left:2px solid #6666CC;
	border-bottom:2px solid #6666CC;
}
#bannerleft {
	height: 60px;
	width:450px;
	/*You put a 60x450 background with no text, and then put text on top of it in .htm so that it looks like layers and it will make you look cool =^_^= */
	/*background: url(banner.jpg); */
}
#bannerright {
	position: absolute;
	top:10px;
	text-align: right;
	height: 60px;
	right: 10px;
}

#bannerleftcont1 {
	position: absolute;
	top:20px;
	left: 10px;
}
#bannerleftcont2 {
	position: absolute;
	top:20px;
	left: 100px;
}
#bannerleftcont3 {
	position: absolute;
	top:20px;
	left: 175px;
}
#bannerleftcont4 {
	position: absolute;
	top:45px;
	left: 70px;
	text-align: right;
}

#leftcontent {
	position: absolute;
	left:10px;
	width: 145px;
	top:90px;
}
#centercontent {
	position: absolute;
	padding-left:165px;
	padding-right: 165px;
	top:90px;
}
#rightcontent {
	position: absolute;
	right:10px;
	width: 145px;
	top:90px;
}
#submenu1, #submenu2 {
	text-align: center;
	display : block; 
	padding-top : 2px; 
	padding-right : 2px; 
	padding-bottom : 2px; 
	padding-left : 2px;
	border-style : solid; 
	border-top:0px;
	border-right:2px solid #6666CC;
	border-left:2px solid #6666CC;
	border-bottom:2px solid #6666CC;
	width: 145px; 
} 

.subjecttext {
	display : block; 
	padding-top : 2px; 
	padding-bottom : 2px; 
	background: #6666CC;
	border-style : solid; 
	border-color: #6666CC;
	border-top-width : 2px; 
	border-right-width : 2px; 
	border-bottom-width : 2px; 
	border-left-width : 2px; 
	color: #333366; 
	background: #6666CC;
	font-family: Verdana,Geneva,Arial,Helvetica,Sans-Serif; 
	font-size: 12px;
	font-weight: bold;
}

#textblock {
	text-align: left;
	display : block; 
	padding-top : 2px; 
	padding-bottom : 2px; 
	padding-left: 2px;
	border-style : solid; 
	border-top:0px;
	border-right:2px solid #6666CC;
	border-left:2px solid #6666CC;
	border-bottom:2px solid #6666CC;
} 

#footer {
	text-align: center;
	display : block; 
	padding-top : 2px; 
	padding-bottom : 2px; 
	border-style : solid; 
	border-top:0px;
	border-right:0px;
	border-left:0px;
	border-bottom:0px;
} 

/* A appliquer a form */

.formulaire {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #4e4e4e; border: 0px; background-color: #fff; margin: 0px 0px 0px 0px; padding-top: 15px; padding-left:17px;}
.boiteFormulaire {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #5c5e69; border: 1px solid #fff; background-color: #dadbe2; padding-top:1px; padding-bottom:1px; padding-left: 5px; font-weight:normal;}
.formMenu {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#5c5e69; font-weight:normal; margin: 0px 0px 0px 0px}