28172 sujets

CSS et mise en forme, CSS3

Problem div mainContent sous div left [résolu]

Bonjour à tous, comme l'annonce le titre je n'arrive pas à positionner mes div.
La div "mainContent" passe sous "sidebar".

Ma page:
<html>

<head>
	<title>
		{{titre_jeu}}
	</title>
<!-- DEBUT DES SCRIPTS JavaScript -->

<SCRIPT LANGUAGE="JavaScript" src="templates/{{theme}}/javascript.js"></script>

<!-- FIN DES SCRIPTS JavaScript -->

<!-- Entete D -->

{{avertissement}}

<link rel="stylesheet" type="text/css" href="templates/{{theme}}/style.css">

</head>

<!-- Entete F -->

<body>
<div id="container">
<div id="header"><h1>{{titre_jeu}}</h1></div>
<div id="menuh">{{menu}}</div>

<div id="sidebar1">
<!-- Debut Menu Ressources Planetes -->
{{username}} ({{userrace}})<br>
<a href="?mod=changelog" target="_blank">Version {{version}}</a>

<br>

<!-- DEBUT Affichages des bases -->

<center>
<img width='50' src='templates/{{theme}}/images/bases/{{baseimage}}.gif' border='0'>
<br>
<form method='post' action='http://{{formactionbases}}'>
	<select name='idbase' onchange='this.form.submit();'>

	{{selectbases}}

	</select>
</form>

</center>

<!-- FIN Affichage des bases -->
{{ressources}}<br>

<b>Crédits :</b>
		
		{{credits}}
        <br>
<br>
<b>Allopass :</b>
		
		{{allopass}}
        <br>


</div>
<br class="clearfloat">

 <div id="mainContent">
 

 {{page}}
</div>
<br class="clearfloat">
	<!-- Cet élément de suppression doit suivre immédiatement l'élément div #mainContent afin de forcer l'élément div #container à contenir tous les éléments flottants enfants -->
  <div id="footer">
<p>{{nbconnect}}

<br>
Design et storyboard par <a href='http://www.allhambra.fr' target='_blank'>Allhambra</a> propulé par <a href='http://forum.epic-arena.fr/' target='_blank'>PHPsimul</a>
</p>

</div>

<!-- Fin pied de page -->
</div>
</body>
</html>


les css concernés : 

 #container {
	width: 1024px;  /* paramétrage de la largeur à 20 pixels de moins que le plein écran (800 pixels) pour tenir compte de l'habillage du navigateur et éviter l'apparition d'un ascenseur horizontal */
	background-color: #D3EFFB;
	background-image: url(images/body.jpg);
	background-position: 0px 119px;
	background-repeat: no-repeat; /* les marges automatiques (et dotées d'une largeur positive) centrent la page */
	text-align: left; /* ce paramétrage annule le paramètre text-align: center de l'élément body. */
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	overflow: hidden;
	clear: both;
 }
 #sidebar1 {
	float: left; /* cet élément est flottant, il faut donc lui attribuer une largeur */
	width: 200px;
	clear: both;
	padding-top: 15px;
	padding-right: 10px;
	padding-bottom: 15px;
	padding-left: 20px;
	overflow: hidden;
}
 #mainContent {
	margin-top: 40;
	margin-right: 0;
	margin-bottom: 40;
	padding-top: 0;
	padding-right: 10px;
	padding-bottom: 40;
	padding-left: 10px;
	width: 730px;
	float: right;
	clear: both;
	/*	position: absolute;
*/	margin-left: 250px;
	overflow: hidden;

} 
#mainContent :after { 
  content: ""; /* Important, sinon l'élément n'est pas généré. */ 
  display: block; 
  clear: both; 
}


J'ai l'impression que c'est tout bête, mais je ne mets pas le doigt dessus.
Tout conseil est bienvenu, merci Smiley cligne
Modifié par allhambra (27 Jun 2011 - 20:40)
Bonsoir allhambra,
allhambra a écrit :
J'ai l'impression que c'est tout bête, mais je ne mets pas le doigt dessus.


Oui et non! Voici sans doute un code qui se rapproche de ce que tu recherches, mais il y a encore pas mal de soucis à régler. Je te signale que j'ai modifié ton code à beaucoup d'endroits. Sois donc attentif!

<html>
<head>
	<title>{{titre_jeu}}</title>
<!-- DEBUT DES SCRIPTS JavaScript -->
<script type="text/javascript" src="templates/{{theme}}/javascript.js"></script>
<!-- FIN DES SCRIPTS JavaScript -->
<!-- Entete D
{{avertissement}}
<link rel="stylesheet" type="text/css" href="templates/{{theme}}/style.css"> -->
<style type="text/css">
#container { 
    width: 1024px;  /* paramétrage de la largeur à 20 pixels de moins que le plein écran (800 pixels) pour tenir compte de l'habillage du navigateur et éviter l'apparition d'un ascenseur horizontal */ 
    background-color: #D3EFFB; 
    background-image: url(images/body.jpg); 
    background-position: 0px 119px; 
    background-repeat: no-repeat; /* les marges automatiques (et dotées d'une largeur positive) centrent la page */ 
    text-align: left; /* ce paramétrage annule le paramètre text-align: center de l'élément body. */ 
    margin-top: 0; 
    margin-right: auto; 
    margin-bottom: 0; 
    margin-left: auto; 
    overflow: hidden; 
    clear: both; 
 } 
 #sidebar1 { 
    float: left; /* cet élément est flottant, il faut donc lui attribuer une largeur */ 
    width: 200px; 
    clear: both;
    padding-top: 15px; 
    padding-right: 10px; 
    padding-bottom: 15px; 
    padding-left: 20px; 
    overflow: hidden; 
} 
 #mainContent { 
    margin-top: 40px; 
    margin-right: 0; 
    margin-bottom: 40px; 
    margin-left: 250px; 
    padding-top: 0; 
    padding-right: 10px; 
    padding-bottom: 40px; 
    padding-left: 10px; 
    width: 730px; 
    overflow: hidden; 
}  
#mainContent :after {  
  content: ""; /* Important, sinon l'élément n'est pas généré. */  
  display: block;  
  clear: both;  
} 
.clearboth {clear: both}
</style>
</head>
<!-- Entete F -->
<body>
<div id="container">
	<div id="header">
		<h1>{{titre_jeu}}</h1>
	</div>
	<div id="menuh">{{menu}}</div>
	<div id="sidebar1">
		<!-- Debut Menu Ressources Planetes -->
		{{username}} ({{userrace}})<br>
		<a href="?mod=changelog" target="_blank">Version {{version}}</a>
		<br>
		<!-- DEBUT Affichages des bases -->
		<center>
			<img width='50' src='templates/{{theme}}/images/bases/{{baseimage}}.gif' alt="">
			<br>
			<form method='post' action='http://{{formactionbases}}'>
				<select name='idbase' onchange='this.form.submit();'>
				{{selectbases}}
				</select>
			</form>
		</center>
		<!-- FIN Affichage des bases -->
		{{ressources}}<br>
		<b>Crédits :</b> {{credits}}
		<br>
		<br>
		<b>Allopass :</b> {{allopass}}
		<br>
	</div>
	<br class="clearfloat">
	 <div id="mainContent">
		 {{page}}
	</div>

	<br class="clearfloat"><!-- Cet élément de suppression doit suivre immédiatement l'élément div #mainContent afin de forcer l'élément div #container à contenir tous les éléments flottants enfants -->
		
	<div id="footer">
		<p>{{nbconnect}}
			<br>
			Design et storyboard par <a href='http://www.allhambra.fr' target='_blank'>Allhambra</a> propulé par <a href='http://forum.epic-arena.fr/' target='_blank'>PHPsimul</a>
		</p>
	</div>
	<!-- Fin pied de page -->
</div>
</body>
</html>

Pense à mettre un doctype valable pour ta page, ainsi qu'une meta "charset". Je ne sais pas d'où tu sors ce code, mais il semble dater... Smiley confus
bonjour iddsoft et merci pour ta réponse. Smiley cligne
il s'agit d'un script php simul ou tout est géré par des classes de templates.

je testes tes modif et je te tiens au courant.
Juste en passant : utiliser un meta-langage de templating ne dispense et n'empèche pas de faire du HTML propre et valide (parce que je pense que c'est à ça que faisait allusion lddsoft, et pas au langage de templating en lui même).
Modifié par jb_gfx (27 Jun 2011 - 19:53)
jb_gfx a écrit :
Juste en passant : utiliser un meta-langage de templating ne dispense et n'empèche pas de faire du HTML propre et valide (parce que je pense que c'est à ça que faisait allusion lddsoft, et pas au langage de templating en lui même).


là en l'occurence, c'est le css qui est foireux car avec le code d'iddsoft, ça fonctionne.
J'ai donc pu réintegré mon css au fur et à mesure pour trouver le coupable:
.clearfloat { 
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}


merci de votre aide et bon code
Modifié par allhambra (27 Jun 2011 - 20:40)
Sujet clos
Aller à