28173 sujets

CSS et mise en forme, CSS3

Centrage de deux blocks cote à cote (taille fixe et variable)

Bonour à tous Smiley biggrin


Maintenant que le contenu du site est réalisé, je m'attaque au contenant Smiley confus et j'ai un petit soucis.
Je crois qu'une image parlera d'elle même :
http://img220.imageshack.us/img220/3917/contenant8wi.th.gif


qui vous montre ce que j'obtiens actuellement et ce que je voudrais faire.
Ce que j'ai actuellement à été réalisé avec le code css suivant (le plus simple possible)




body {
	margin: 10px 0;
	padding: 0;
	text-align: center;
	font: 12px "Trebuchet MS", helvetica, sans-serif;
	background-image:url(../theme/bg.gif);
}

div#header {
	width:90%;
	margin: 0 auto ;
	border: 2px solid #ab4 ;
	background: #fff ;
	-moz-border-radius : 9px 9px 0px 0px;
}

div#menu {
	float:left;
	width:275px;
	height:300px;
	margin: 5px auto 5px;
	border: 2px solid #ab4 ;
	background: #fff ;}

div#content {
	float:left;
	width:500px;
	height:400px;
	margin: 5px 5px 5px;
	border: 2px solid #ab4 ;
	background: #fff ;}

div#footer {
	clear:both;
	width:90%;
	margin: 0 auto ;
	border: 2px solid #ab4 ;
	background: #fff ;
	-moz-border-radius : 0px 0px 9px 9px;
}

div#pub {
	margin-top: 4px;
	text-align: center;
	font-size: 10px;
	vertical-align: middle;
}

div#pub a img {
	border: 0px;
}


et celui en html (tres simple aussi)

<body>
		<div id="header">
			header
		</div>
		
		<div>
			<div id="menu">
				menu
			</div>
			
			<div id="content">
				content
			</div>
		
			<div id="footer">
				© [2005 - 
				<script type="text/javascript">
    				var dDate = new Date() ;
   			 		document.write(dDate.getFullYear()) ;
				</script>]
			</div>
		</div>
		<div id="pub">
			<img alt="" src="images/pub/w3ccss.gif" />
			<img alt="" src="images/pub/w3cxhtml.gif" /></a>
			<img alt="" src="images/pub/firefox.gif" /></a>
		</div>
	
	</body>



j'aurais voulu donc savoir si les modifications faites en rouge etaient possibles (tout est possible me direz vous Smiley lol ) et si oui si vous aviez un un début de piste.

J'ai dejà essayer de mettre ces deux div centraux dans un contenuer mais tout se chevauche et rien ne va au niveau des tailles....
Et j'avoue pour l'instant ne plus avoir d'idée Smiley confused

A vot' bon coeur M'ssieurs dames Smiley smile

Et bon week end à tous Smiley ravi
Modifié par Xstof (07 May 2006 - 12:06)
Administrateur
Hello,

Je t'invite à trouver un titre plus pertinent (et surtout plus "juste"), car un "Problème de div", ça ne peut pas exister Smiley cligne
Tu parles sans-doute d'un problème avec des CSS, mais quel problème exactement ?

Rappelle-toi la Règle 11 du forum : "à question bien posée, réponse vite trouvée". Choisis un titre évocateur et tu multiplieras tes chances Smiley smile
Modifié par Raphael (07 May 2006 - 11:52)
Mes hommages dominicaux à toi Raphael Smiley biggrin

Pour le titre je vais le changer de suite (des que j'aurais trouvé quelque chose d'assez pertinent Smiley cligne )

En fait il s'agit d'un probleme de div ET de css (qui vient de moi surtout Smiley confused )

en fait comme indiqué sur le dessin, j'ai deux blocks centraux : l'un de largeur fixe (275 px), l'autre de largeur variable que j'aimerais centrer avec mes deux blocks supérieur (en tete) et inférieur (pied de page) qui sont d'une largeur variable (90%) et qui sont centrés sur la page....

le dessin parle plus je trouve
Salut

Je crois avoir comprit ce que tu veux

Ce-ci devrait correspondre



<body>
		<div id="header">	header	</div>
		<div id="global">
			<div id="menu">	menu </div>
			<div id="content">	content	</div>
		</div>
		<div id="footer">
			© [2005 - 
			<script type="text/javascript">
				var dDate = new Date() ;
				document.write(dDate.getFullYear()) ;
			</script>]
		</div>
		<div id="pub">
			<img alt="" src="images/pub/w3ccss.gif" />
			<img alt="" src="images/pub/w3cxhtml.gif" /></a>
			<img alt="" src="images/pub/firefox.gif" /></a>
		</div>
</body>





body {
	margin: 10px 0;
	padding: 0;
	text-align: center;
	font: 12px "Trebuchet MS", helvetica, sans-serif;
	background-image:url(../theme/bg.gif);
}

div#header {
	width:90%;
	margin: 0 auto ;
	border: 2px solid #ab4 ;
	background: #fff ;
	-moz-border-radius : 9px 9px 0px 0px;
}

div#menu {
	float:left;
	width:275px;
	height:300px;
	border: 2px solid #ab4;
	background: #fff;
	padding: 0px;
}

div#content {
	height:400px;
	border: 2px solid #ab4;
	background: #fff;
	margin-left: 285px;
}

div#footer {
	clear:both;
	width:90%;
	margin: 0 auto ;
	border: 2px solid #ab4 ;
	background: #fff ;
	-moz-border-radius : 0px 0px 9px 9px;
}

div#pub {
	margin-top: 4px;
	text-align: center;
	font-size: 10px;
	vertical-align: middle;
}

div#pub a img {
	border: 0px;
}
#global {
	padding: 5px 0px;
	margin-right: auto;
	margin-left: auto;
	width: 90%;
}



A+
Roooooooooh c'est nickel c'est pile poil ce dont je voulais Smiley prie


J'avais essayé quelque chose du genre mais ca ne donnais pas du tout le meme résultat Smiley confused

Je comprends bien l'utilisation du
margin-left: 285px; dans la partie content

mais par contre les :
margin-right: auto;
margin-left: auto;
dans la partie global Smiley sweatdrop ???
C'est cela qui permet de centrer la partie global ?? (j'essaye de bien comprendre le code et de ne pas recopier betement Smiley cligne et plus tard c'est moi qui aiderais les debutants Smiley lol )



En tout cas merci beaucoup pour ce coup de main Gege Smiley smile
Sujet clos
Aller à