28173 sujets

CSS et mise en forme, CSS3

[RESOLU]Div se plaçant au dessous de la premiere et non à coté.

Bonjours, voila le topo.

J'ai mon squellette de base avec:

- une div conteneur centrer (pour centrer le site.) qui contient :

- Une div headeur,
- une div menu à gauche,
- une div centre à coté du menu (contient mon text)
- Une div pied de page qui prend la largeur de ma div conteneur.

Jusque la tout va bien tout se place nikel, c'est beau.

j'utilise se squellette pour pratiquement toutes mes pages, Mais pour une j'ai besoin de rajouter 2 div dans ma div centre. (J'ai tester avec un tableau au lieu des 2 div et sa marche nikel mais c'est pas pro hein)
alors j'aimerais que les deux div soient l'une à coté de l'autre, qu'elles alongent (en longeur) la div centre et que le pied de page reste bien pousser par la div centre car elle se rattache à une des nouvelles div ...( bon sa je crois l'avoir corrigé avec un clear:both;).

voila. Merci de votre aide
Modifié par yuluka (19 Sep 2007 - 11:59)
Html 

<body>
<!--Bloc conteneur qui contient donc tout les autres blocs.-->
<div id="conteneur">
             <!-- bloc baniere haut -->
	<div id="header1"></div>

	<!-- bloc  baniere bas-->
	<div id="header2">
		<!--Menu haut-->
		<ul class="menuhaut">
		<li><a href="../index.html">xxx</a></li>
		<li><a href="../index.html">xxx</a></li>
		<li><a href="../index.html">xxx</a></li>
		<li><a href="../index.html">xxx</a></li>
		<li><a href="../index.html">xxx</a></li>
		</ul>
		<!-- Fin du menu haut -->
	</div>
	<!-- Fin du bloc baniere bas-->

	<!-- bloc contenant le menu et le moteur de recherche-->
	 <div id="gauche">
		<!-- menu -->
		<ul class="menugauche">
		<li><a href="../index.html">xxx</a></li>
		<li><a href="../index.html">xxx</a></li>
		<li><a href="../index.html">xxx</a></li>
		<li><a href="../index.html">xxx</a></li>
		</ul>
		<!--Fin de menu-->
			
	<!-- tableau moteur de recherche-->
	<TABLE class="recherche">
	<TR id>
	<TD >
	<p>Recherche thematique</p>
	<p><INPUT TYPE="text" NAME=""><INPUT TYPE="submit" value="Go"></p>
	<p>Aide à la recherche</p>
	</TD>
	</TR>
	</TABLE>
             <!-- Fin du tableau-->

	<br>
	<p class="inforecherche">Vous ne trouvez pas l'illustration que vous recherchez?</p>
	<p class="inforecherche">Contactez-nous</p> 
				
	</div>
	<!-- fin du bloc menu + moteur de recherche-->
	  
	 
<!-- Bloc central contenant ici une image (un oeil) ce bloc pousse le bloc "pied"-->
<div id="centre">

             <!--div image centre contenant une image en dynamique -->
	<div id="imgcentre">
	<TABLE>
	<TR>
	<TD>
	<IMG SRC="../css/img/imgtest.jpg" WIDTH="270" HEIGHT="335" BORDER="0" ALT="">
	<h3>Titre info panier</h3>
	</TD>
             </TR>
	</TABLE>
	<br>
	</div>
	<!-- Fin de la div image centre-->

	<!-- div text centre contenant le descriptif de l'image-->
		<div id="textcentre">
		<H3>Titre: ...</h3>
		<h4>Ref de l'illustration: ...</h4>
		<h4>Discipline: ...</h4>
		<H4>Illustrateur: ...</h4>
		<Br>
		<p>Ajouter<br><A HREF="">cliquez ici</br></A></p>
		<p>Demandez plus de renseignements sur cette illustration<br><A HREF="">cliquez ici</br></A></p>
		<p>Cette image est <b>personnalisable</b>. Pour plus de renseignements <br><A HREF="">cliquez ici</A>
		</div>
		<!-- Fin de la div text centre-->

</div>
<!-- Fin du bloc central-->

	<!-- Bloc pied -->
	<div id="pied"></div>
	<!-- Fin du bloc pied-->
</div>
<!-- Fin du bloc conteneur-->
	  

</body>

Modifié par yuluka (19 Sep 2007 - 11:26)
Modérateur
Bonjour yuluka et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Si ce n'est déjà fait, il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif

PS : Ton code CSS serait aussi bien utile. Smiley jap 
 /*et voila le CSS ^^*/

/*__________________Css 1_____________________*/

body 
{
position: relative;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
margin: 0;
padding: 0;
text-align: center;
}
#conteneur 
{
	position: relative;
	text-align: left;
	width: 800px;
	margin-left: auto;
   margin-right: auto;
	background-image: url(img/fond2.jpg);
	background-repeat: no-repeat;
		
}
#header1 
{
	position: relative;
	height: 86px;
	background-image: url(img/banierehaut2.jpg);
	background-repeat: no-repeat;
}
#header2 
{
	position: relative;
	height: 36px;
	background-image: url(img/banierebas2.jpg);
	background-repeat: no-repeat;
}

#centre 
{
	margin-left: 210px;
	width: 590px;
}

#gauche 
{
	margin-top: 50px;
	position: absolute;
	left: 0;
	width: 200px; /*height:328px;*/
}
#gauche table
{
 margin-left: 10px;
}

li {display: inline;}	/* correction pour IE5 et IE5.5 */

.menuhaut 
{
list-style-type: none;
margin:  0;
padding:5px 0;
text-align: center;
}
.menuhaut li 
{ 
display: inline;
}
.menuhaut a {
color: #633d3c;
margin: 0 2px;
text-decoration: underline;
}
.menuhaut a:hover {
text-decoration: none;
}

.menugauche 
{

	margin: 0;
	padding: 0;
}
.menugauche li 
{	

}
.menugauche a 
{
	display: block; /* mise en block de <a> pour lui donner des dimensions */
	background-color: #ae8543;
	padding: 0 0 0 10px;
	margin: 0 0 5px 10PX;
	color: White;
	text-decoration: none;
	font-size: 17px;
	font-family: georgia, serif;
	line-height: 25px;
	text-align: left;
	display: list-item;
	list-style-position: inside; /*list-style-image: url(css/img/puce.jpg);*/
	list-style-type: disc;
	color: White;
}

.menugauche a:hover 
{
background-color: #875f26;
text-decoration: none;
color: #a97f43 ;
}
.recherche
{
	color: #815747;
	WIDTH: 200;
	border: double;
	font-weight: bolder;
	border-color: #815747;
	text-align: center;
}
.inforecherche {
	text-align: center;
	color: #815747;
 	margin: 0;
}

p 
{
	margin: 0 0 10px 0;
	color: #815747;
}

#pied 
{
	clear: both;
	background-color: #c6ad99;
	height: 30px;
	padding: 0;
	text-align: center;
}

/*__________________Css 2_____________________*/

#imgcentre
{
 margin-top: 50px;
 margin-left:15px; 
 WIDTH: 280px;
}
#imgcentre table
{
	text-align: center;
	border: thin solid;
}
#textcentre {

 	margin-top: 50px;
	margin-left: 305px;
	WIDTH: 285px;
}
#textcentre p
{
 	display: list-item;
	list-style: disc;
	list-style-position: outside;
	padding: 5px;
	margin: 10px 10px 10px 20px;
}


Bon j'ai tout sortie mais comme dis je pense que le délire Se passe dans le 2ème css...
Je cherche encore de mon coté si je trouve jvous le dis voila merci pour tout ^^.
Modifié par yuluka (19 Sep 2007 - 11:37)
Bonjour,

Si tu ne veux pas utiliser de tableau à deux cellules, tu peux utiliser deux div, et faire flotter la première à gauche. Dans le style suivant: 
#gauche {width: 48%; float: left;}
#droite {margin-left: 52%;}


Le problème que tu risques d'avoir, c'est que le bloc flottant (que j'ai appelé #gauche ici, mais on pourra lui donner l'identifiant ou la classe souhaitée...) risque de dépasser de div#centre.

Pour éviter ce dépassement du flottant, on pourra faire: 
div#centre {overflow: hidden;}
et pour IE6 et inférieurs (via un commentaire conditionnel qui va bien): 
div#centre {overflow: visible; height: 1%;}

Edit: si on garde le width de div#centre, on peut se passer du correctif proposé pour IE6. Mais pour ma part je virerais cette largeur inutile pour dimensionner le bloc et potentiellement problématique.
Modifié par Florent V. (19 Sep 2007 - 11:40)
Tout dabord merci de cette reponse rapide et précise.

resultat nikel sous FF et Ie7, j'ai pas tester encore Ie6 et Ie5.


#centre 
{
	overflow: hidden;
	margin-left: 210px;
	width: 590px;
}
#imgcentre
{
	float: left;
	width: 48%; 
 	margin-top: 50px;
 	margin-left:15px; 
 
}
#textcentre 
{
 	margin-top: 50px;
	margin-left: 52%;
}


Gros merci à toi.
jvous donnerais le lien du site fini...
Sujet clos
Aller à