Site 3 colonnes, texte colonne centrale repoussé vers le bas

Question

3 Feb 2011 à 11:40

Bonjour à tous, je suis en train de refaire mon site avec un framework (cakephp) en local et j'en profite pour optimiser le CSS.
Alors voici mon problème en image :

J'ai placé un carré rouge pour mettre bien en évidence le problème.
Alors voilà, j'ai beau chercher dans mon code CSS (qui suit et qui ne concerne que la mise en page des éléments de la page) je ne sais pas pourquoi le texte est décalé comme cela. Evidemment je souhaiterai qu'il soit en haut.

		
/*TOUT CECI EST CLASSER DANS L'ORDRE OÙ LE NAVIGATEUR CHARGERA LES DONNEES*/		
	/*Les balises html/body*/
		html{height:100%;font-size: 100%; background-color:#000; }
		body{width:100%; max-width:1500px;min-width:800px; margin:auto; background:url('../img/banniere.png') no-repeat fixed;}

		.blockTopLeft{
			background: url("../img/top-left-menu.png") no-repeat;
			height: 40px;
			width: 161px;
			float: left;}
		.blockTopMid {
			background-image: url("../img/top-mid-menu.png");
			height: 40px;
			margin: 0px 161px 0px 161px;}
		.blockTopRight {
			background: url("../img/top-right-menu.png") no-repeat;
			height: 40px;
			width: 161px;
			float: right;
			margin-top: -40px;
			}			
		
		.blockBorderLeft { background: url("../img/border-left.png") repeat-y;}
		.blockBorderRight {
			background: url("../img/border-right.png") repeat-y;
			background-position:right;}	

		.blockContent{
			overflow:hidden;
			clear:both;
			margin: 0px 5px 0px 5px;
			background-color:#383b3e;
			}					
		/* category base cells */

		.blockBottomLeft {
			background: url("../img/base-left.png") no-repeat;
			height: 40px;
			float: left;
			width: 161px;}
		.blockBottomMid {
			background-image: url("../img/base-mid.png");
			margin: 0px 161px 0px 161px;
			height: 40px;}
		.blockBottomRight {
			background: url("../img/base-right.png") no-repeat;
			height: 40px;
			float: right;
			margin-top: -40px;
			width: 161px;}			

	/*En têtes comprenant la bannière*/
	/*Barre de séparation supérieure du site*/
		#espace-header{height:250px;}
		
	/*Menu Gauche*/
		#menu-gauche{
			float:left;
			width:200px;}
	/*Menu Droite*/
		#menu-droite{
			float:right;
			width:200px;}

	/*Corps*/
		#corps{ clear:both; margin-left:200px; margin-right:200px; padding:0px 15px 0px 15px;}
	/*Pied*/
		#pied{}

L'id #corps concerne la partie centrale du site, autrement les noms sont explicites. Les blockXXX sont les parties de la mise en page qui compose les éléments du site.

Voilà et merci beaucoup, je compte sur votre aide.
Modifié par Deus Ex Machina (03 Feb 2011 - 13:50)

Mabelle

3 Feb 2011 à 12:15

Bonjour, est-ce ton problème se produit sur tous les navigateurs ? Avec lequel as-tu ce problème ?
C'est plus facile aussi d'aider avec la structure html, simplifiée c'est suffisant...

Deus Ex Machina

3 Feb 2011 à 13:02

J'utilise Google Chrome ^^

Voici la structure HTML entre les balises nécéssaire Smiley smile

<!-- MENU DROITE -->

		

		<div id="menu-droite">

		

			<div class="blockTopLeft"></div>

<div class="blockTopMid"></div>

<div class="blockTopRight"></div>

<div class="blockBorderLeft">

	<div class="blockBorderRight">

		<div class="blockContent">				

			

				<p style="text-align:center; margin-top:-10px;">

				<a href="http://fr-fr.facebook.com/pages/MMORPG-2d-Collapse-of-Time/132105466816117"><img src="/COT/img/facebook.png" alt="FaceBook" title="" target="_blank" /></a><a href="http://www.twitter.com/Collapse_MMORPG"><img src="/COT/img/logo-twitter.png" alt="Twitter" title="Suivez-nous sur Twitter!" target="_blank" /></a><a href="http://collapse-of-time.groups.live.com/"><img src="/COT/img/logo-msn.png" alt="Msn" title="" target="_blank" /></a><a href="http://www.youtube.com/user/CollapseOfTime"><img src="/COT/img/logo-youtube.png" alt="Youtube" title="" target="_blank" /></a>	

				</p>

					<div style="margin-bottom:10px;">

						<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FMMORPG-2d-Collapse-of-Time%2F132105466816117%3Fref%3Dts&amp;width=190&amp;colorscheme=dark&amp;connections=10&amp;stream=false&amp;header=false&amp;height=255" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:190px; height:255px;"></iframe>

					</div>				

			

					</div>

	</div>

</div>

<div class="blockBottomLeft"></div>

<div class="blockBottomMid"></div>

<div class="blockBottomRight"></div>	<div class="blockTopLeft"></div>

<div class="blockTopMid"></div>

<div class="blockTopRight"></div>

<div class="blockBorderLeft">

	<div class="blockBorderRight">

		<div class="blockContent">				

			

				<h4>Derniers messages venant du <a href="http://www.collapse-of-time.net/forum/" title="Répondez aux derniers messages via le forum!">Forum</a></h4>

								

					</div>

	</div>

</div>

<div class="blockBottomLeft"></div>

<div class="blockBottomMid"></div>

<div class="blockBottomRight"></div>			

		</div>

			

<!-- CORPS DE LA PAGE -->	

		

		<div id="corps">

		

			<div class="blockTopLeft"></div>

<div class="blockTopMid"></div>

<div class="blockTopRight"></div>

<div class="blockBorderLeft">

	<div class="blockBorderRight">

		<div class="blockContent">								<p>TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST </p>

							</div>

	</div>

</div>

<div class="blockBottomLeft"></div>

<div class="blockBottomMid"></div>

<div class="blockBottomRight"></div>	<div class="blockTopLeft"></div>

<div class="blockTopMid"></div>

<div class="blockTopRight"></div>

<div class="blockBorderLeft">

	<div class="blockBorderRight">

		<div class="blockContent">			<script type="text/javascript" src="http://exchange.pbem.fr/view.php?id=58&amp;f=3"></script>		</div>

	</div>

</div>

<div class="blockBottomLeft"></div>

<div class="blockBottomMid"></div>

<div class="blockBottomRight"></div>				

		</div>

Jvtanguy

3 Feb 2011 à 13:31

Bonjour,
Tout d'abord, je pense qu'il faudrait que tu revoies ta structure html. Il y a beaucoup trop de divs et on s'y perd facilement. Ton css est effectivement court mais c'est au détriment de la structure du site, qui à mon avis est le l'essentiel.

Je n'ai pas regardé le code dans le détail, mais je vois que le texte central est dans un div.blockcontent. Si on regarde dans le css, on voit que cette classe possède un clear:both.

Vu que tes colonnes sont fait en float, le contenu est repoussé en bas du float le plus long, qui se trouve être ton bloc de droite.

Je pense que revoir complètement la structure html te permet d'éviter de te retrouvé noyé en cas d'erreur, et te permet de voir plus facilement d'éventuelles erreurs.

Deus Ex Machina

3 Feb 2011 à 13:41

Oui merci de la réponse, je vais voir si je peux organiser tout ceci differemment mais le problème est qu'en fait y'a 3 images par haut de block (droite, milieu, gauche) et je ne vois pas d'autres moyens que de placer 3 div successifs pour les afficher.

Une idée? J'editerai ce post si j'avance Smiley smile

Deus Ex Machina

4 Feb 2011 à 11:23

J'ai beau chercher je ne trouve pas Smiley sweatdrop

J'ai essayé d'améliorer mon HTML mais je ne vois pas là où je pourrais faire des optimisations pour avoir le résultat sur le screen concernant les blocs contenant l'information.

Et puis pour la colonne centrale j'ai essayé longtemps, sans succès là non plus.
Bon courage et merci pour votre aide =)

Sujet clos

CSS et mise en forme, CSS3

Site 3 colonnes, texte colonne centrale repoussé vers le bas