L'affichage est en desordre je n'y comprends plus rien

Question

francess

23 Jul 2009 à 05:50

bjr à tous,
je suis en train d'integrer un site l'affichage n'arrive pas à être ordonner comme je le code 'du moin jecrois' Smiley decu

voici le css:

body{
	background:url(images/fondBody.jpg) repeat-x;
	margin:auto;
	width:1024px;;
	height:auto;
}
p{
	padding:0px;
	margin:0px;
}
input{	
	padding:0px;
	margin:0px;
}
a{
	padding:0px;
	margin:0px;
}
tr{padding:0px;
	margin:0px;}
td{padding:0px;
	margin:0px;}
table{padding:0px;
	margin:0px;
}
/*//////////////////////////////////
			CONTAINER
///////////////////////////////////*/
#container{
	margin:auto;
	width:1024px;

}

#colGauche{
	float:left;
	margin-left:20px;
	width:182px;
	margin-top:15px;
}
#colGauche .btnRegionFrance{
	background: url(images/btnRegionFrance.png) no-repeat;
	width:182px;
	height:53px;
	padding-top:17px;
	text-align:right;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	
}
#colGauche .btnRegionFrance .lienHaut{
	padding-right:13px;
}
#colGauche .btnRegionFrance .lienHaut a{
	text-decoration:none;
	color: #404040;
}
#colGauche .btnRegionFrance .lienBas{
	margin-top:13px;
	padding-right:13px;
}
#colGauche .btnRegionFrance .lienBas a{
	text-decoration:none;
	color: #404040;
}
/**/
#fiche{
	width:182px;
	margin-top:10px;
}
#fiche .ficheHautTitre{
	background:url(images/pageCarteFondHautBTNFiche.png) no-repeat ;
	width:115px;
	height:19px;
	margin-left:35px;
}
#fiche .ficheHaut{
	background:url(images/pageCarteFondHautFiche.png) no-repeat;
	width:160px;
	height:76px;
	margin-left:14px;
	text-align:center;
}

#fiche .ficheMilieu{
	background:url(images/pageCarteFondMilieuFiche.png) repeat-y;
	width:160px;
	margin-left:14px;
	font-family:Arial, Helvetica, sans-serif;
	
}
#fiche .ficheMilieu .speedPizza{
	font-size:14px;
	font-weight:bold;
	margin-bottom:15px;
	text-align:center;
}
#fiche .ficheMilieu .ouvert{
	background:url(images/pageCarteFondPtiBtn.png)  no-repeat;
	width:114px;
	height:30px;
	font-size:14px;
	font-weight:bold;
	margin-left:20px;
	margin-top:15px;
	line-height:24px;
	color:#74A305;
	text-align:center;
}
#fiche .ficheMilieu .txtOuvert{
	color:#74A305;
	font-size:12px;
	margin-bottom:15px;
	margin-top:5px;
	text-align:center;
}
#fiche .ficheMilieu .miniLogos{
	margin-bottom:15px;
	margin-top:15px;
	text-align:center;
}
#fiche .ficheMilieu .txtBas{
	font-size:12px;
	margin-top:15px;
	text-align:center;
}
#fiche .ficheBas{
	background:url(images/pageCarteFondBasFiche.png) no-repeat;
	width:160px;
	height:7px;
	margin-left:14px;
}

/*/////////COL MILIEU///////////////*/

#colMilieu{
	background:#FFF;
	float:left;
	margin-top:15px;
	width:520px;
	margin-left:30px;
}
#miniHeader{
	background:url(images/pageCarteminiHeader.png) no-repeat;
	width:510px;
	height:22px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	color:#FFF;
	text-align:right;
	padding-top:30px;
	padding-right:10px;
}
#menuAcco{
	width:520px;
}
#menuAcco ul{
	padding:0px;
	margin:0px;
}
#menuAcco ul li{
	list-style:none;
}
#menuAcco .M .fondBtn{
	background:url(images/pageCarteFondOngletMenuHover.png) no-repeat;
	width:149px;
	height:22px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	margin-left:180px;
	line-height:21px;
	text-align:center;
}
#menuAcco .M .fondBtn a{
	text-decoration:none;
	color:#FFF;
}

/**/
#menuAcco .A .fondBtn{
	background: url(images/pageCarteFondOngletMenu.png) no-repeat;
	width:516px;
	height:22px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height:21px;
	text-align:center;
}
#menuAcco .A .fondBtn a{
	text-decoration:none;
	color:#FFF;
}

/**/
#menuAcco .D .fondBtn{
	background: url(images/pageCarteFondOngletMenu.png) no-repeat;
	width:516px;
	height:22px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height:21px;
	text-align:center;
}
#menuAcco .D .fondBtn a{
	text-decoration:none;
	color:#FFF;
}
#interieurMenuAcco{
	margin-top:15px;
}

.bule{
	background:url(images/menuCarteBuleCom.png) no-repeat;
	width:185px;
	height:115px;
	margin-top:10px;
	margin-left:15px;
	float:left;
}
.boxGris{
	margin-top:10px;
	width:305px;
	margin-left:15px;
	float:right;
}
.boxGrisHaut{
	background:url(images/menuCarteboxHaut.png) no-repeat;
	width:282px;
	height:10px;
}
.boxGrisMilieu{
	background:url(images/menuCarteboxMilieu.png) repeat-y;
	width:282px;
}
.boxGrisMilieu table{
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
}
.boxGrisMilieu .contenuGras{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	margin-top:10px;
}
.boxGrisBas{
	background:url(images/menuCarteboxBas.png) repeat-y;
	width:282px;
	height:10px;
}
/**/

.traitSeparation{
	background:url(images/menuCarteModSousTitre.png) no-repeat bottom;
	width:479px;
	height:30px;
	margin-left:20px;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
}
.listeMenu{
	margin-top:10px;
}
.choix1{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	margin-left:10px;
}
.2mChoix{
	margin-top:10px;
}
.btnStandVertG{ background: url(images/menuCarteBtnVertGauche.gif) no-repeat; width:11px; height:24px; float:left; margin-left:160px;}
.btnStandVertM{ background:url(images/menuCarteBtnVertMilieu.gif) repeat-x; height:24px; float:left; line-height:22px; text-align:center;}
.btnStandVertM a{ text-decoration:none; color:#FFF;}
.btnStandVertD{ background:url(images/menuCarteBtnVertDroit.gif) no-repeat; width:11px; height:24px; float:left;}
/*/////////COL DROITE///////////////*/

#colDroite{
	float:right;
	width:220px;
	margin-top:15px;
}
#panierHaut{
	background:url(images/pageCarteFondHautPanier.png) no-repeat;
	width:220px;
	height:34px;
}
#panierMilieu{
	background:url(images/pageCarteFondMilieuPanier.png) repeat-y;
	width:220px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	text-align:center;
	padding-bottom:10px;
}
#panierBas{
	background:url(images/pageCarteFondBasPanier.png) no-repeat;
	width:220px;
	height:5px;
}
#inconnue{
	background:url(images/pageCarteFondbtnBoxDroit.png) no-repeat center;
	height:32px;
	margin-top:100px;
}

et le html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="screen" type="text/css"  href="styleCarte.css" />

<title>.: Restomalin:.</title>
</head>

<body>
<!--colGauche !-->
<div id="colGauche">
    		<!--Region de France-->
    		<div class="btnRegionFrance">
            	<div class="lienHaut">
                	<a href="">Changer de Région</a>
                </div>
                <div class="lienBas">
                	<a href="">Revenir aux restaurants</a>
                </div>
  			</div>
            
            <!--Fiche-->
<div id="fiche">
            	<div class="ficheHautTitre">
                	
</div>
            	<div class="ficheHaut">
					<img src="images/pageCarteImagelapin.png" width="64" height="64" />
</div>
                <div class="ficheMilieu">
                
               	  <p class="speedPizza">Speed-rabbit-Pizza Strasbourg XV</p>
               	  <p class="speedPizza"><img src="images/pageCarteTraitSeparationBox.png" width="100" height="1" /></p>
                  
                  <p class="ouvert">Ouvert</p>
                  <p class="txtOuvert">Commandes<br/>dès à présent<br/>possibles pour ce soir.</p>
               	  <p class="txtOuvert"><img src="images/pageCarteTraitSeparationBox.png" width="100" height="1" /></p>
                  
                  <p class="miniLogos"><img src="images/pageCarteLogosBox.png" width="152" height="77" /></p>
               	  <p class="miniLogos"><img src="images/pageCarteTraitSeparationBox.png" width="100" height="1" /></p>
                  
                  <p class="txtBas">Horaires d'ouvertures:<br/>lundi au dimanche:<br/><strong>11h-14h15 / 18h-22h45</strong><br/><br/>
                  Délais de livraison :<br/><strong>30 à 45mn</strong><br/><br/>Minimum de commande :<br/><strong>10 &#8364;</strong>
                  </p>
                  <p>&nbsp;</p>
				</div>
                <div class="ficheBas">
                </div>
  </div>
            
</div>

<!--Col milieu-->
<div id="colMilieu">
 
  <div id="miniHeader">
   <p><strong>Choisissez votre menu</strong></p>
  </div>
    <div id="menuAcco">
    	<ul>
        	<li class="M"> 
            <p class="fondBtn"><a href="">Les Menus</a></p>
            </li>
        	
        	<li class="A">
            <p class="fondBtn"><a href="">Les Plats</a></p>
            <p >&nbsp;</p>
            </li>
      </ul> 
          
       		<div class="D">
             <p class="fondBtn"><a href="">Les pizzas</a></p>
      </div>
             
   	    <div id="interieurMenuAcco">  
        				<div class="bule">
        				</div>
                        
        				<div class="boxGris">
       							<div class="boxGrisHaut">
            					</div>
            					<div class="boxGrisMilieu">
            							<table width="270" border="0" cellspacing="0" cellpadding="0" >
  											<tr align="center" valign="top">
    												<td><p class="contenuGras"><strong>MENU DEGUSTATION</strong></p>4 personnes<br/>à 29,90 &#8364;</td>
    												<td><img src="images/menuCarteImg1.png" width="107" height="107" /></td>
 					 						</tr>
										</table>

            					</div>
            					<div class="boxGrisBas">
            					</div>
                 		</div>
                         <br clear="all"/>
                         <p >&nbsp;</p>  
                         <p class="traitSeparation">Les pizzas</p> 
                         
                         <div class="listeMenu">
<table width="520" border="0" cellspacing="5" cellpadding="0">
 			 					<tr>
   				 					<td width="89" align="center" ><img src="images/menuCartePizza1.png" width="57" height="57" /></td>
    							 	<td width="313" valign="middle" >
                							<p class="choix1"><strong>Pizza Hawaienne</strong></p>
                    						<p class="choix1">Sauce tomate, mozzarella-cheddar, jambon, ananas</p>
                    						<p class="choix1">
                    							<select name="choixPateTaille">
                    									<option value="pate1">choisissez votre pate et sa taille</option>
                    							</select>
                    						</p>
                                              <p >&nbsp;</p>  
                 				  </td>
    							  <td width="98">&nbsp;</td>
  							   </tr>
                              
<tr class="2mChoix">
   				 					<td width="89" align="center" ><img src="images/menuCartePizza2.png" width="57" height="57" /></td>
    							 	<td width="313" >
                							<p class="choix1"><strong>Pizza alsacienne</strong></p>
                    						<p class="choix1">Sauce tomate, mozzarella-cheddar, jambon, ananas</p>
                    						<p class="choix1">
                    							<select name="choixPateTaille">
                    									<option value="pate1">choisissez votre pate et sa taille</option>
                                                  <option value="pate2">--> Pâte P an solo :: 9,50&#8364;</option>
                                                  <option value="pate3">--> Pâte P an super :: 14,60&#8364;</option>
                                                  <option value="pate4">--> Pâte P an maxi :: 19,90&#8364;</option>
                                                        <option value="pate5">--> Pâte Fine maxi :: 12;50&#8364;</option>
                    							</select>
                    						</p>
                 				  </td>
    							  <td width="98" align="center"><img src="images/menuCartePrixListe.jpg" width="49" height="49" /></td>
  							   </tr>
            			  </table>
                          <p >&nbsp;</p>
                          <p class="traitSeparation">Les entrées</p>
                          <p >&nbsp;</p>
                          <table width="520" border="0" cellspacing="5" cellpadding="0">
 			 					<tr>
   				 					<td width="89" align="center" ><img src="images/menuCarteJelapanos.png" width="59" height="59" /></td>
    							 	<td width="313" valign="middle" >
                							<p class="choix1"><strong>Jalapenos au cheddar</strong></p>
                    						<p class="choix1">Sauce tomate, mozzarella-cheddar, jambon, ananas</p>
                    						<p class="choix1">
                    							<select name="choixPateTaille">
                    									<option value="pate1">choisissez votre pate et sa taille</option>
                    							</select>
                    						</p>
                                              <p >&nbsp;</p> <p >&nbsp;</p> 
                 				  </td>
    							  <td width="98" align="center"><img src="images/menuCartePrixListe2.jpg" width="49" height="49" /></td>
  							   </tr>
                          </table>
                         </div> 
                         <p >&nbsp;</p> <p >&nbsp;</p> 
          <div class="btnStandVertG">
   		  </div>
                		<div class="btnStandVertM">
                			<a href="">&nbsp;&nbsp;Validez votre commande&nbsp;&nbsp;</a>
                		</div>
   		  <div class="btnStandVertD">
                		</div>
               		 
               	  <p>&nbsp;</p>
               	  <p>&nbsp;</p>
               	  <p>&nbsp;</p>
                	<p><br clear="all"/>
              	  </p>
        </div>   
    </div>
  
</div>

<!--col droite-->
<div id="colDroite">
<!--Panier-->
<div id="panierHaut">
</div>
<div id="panierMilieu">
<p>Total de votre commande : 0&#8364;</p>
</div>
<div id="panierBas">
</div>

<!--!-->

</div>
    <br clear="all"/> 
</body>
</html>

en fait c'est une page appelée en include,

le pb c'est que le fond ne veut plus s'etirer en Y , si on allonge, le contenu vont à droite et aussi si ce n'est pas long, ba il ne veut pas afficher les float:right, il le met en bas.

je n'y comprends vraiment plus rien, je n'ai pas encore dormis depuis hier à cause de cela Smiley biggol

aidez moi SVP

vous pouvez voir une apercue d'une pagequi n'est pas long mais qui ne veut pas contenir dans la largeur , le milieu est pousser en bas. et qui passe au dessus du footer, la total quoi...
http://www.madaweb.fr/francesca/resto/

Merci d'avance

Francess

Laurie-Anne

23 Jul 2009 à 07:34

Bonjour (bjr ? O_o)

Ton code est particulièrement long et personne ne le lira, le lien vers le site était bien suffisant Smiley cligne

Premièrement, ceci :

<div id="container">
<link href="styleListeResto.css" type="text/css" media="screen" rel="stylesheet">
</link>
<div id="colGauche">

est une aberration, un appel à un fichier CSS DOIT se faire entre les balise <head> et </head>.

Ton problème de positionnement de colMilieu vient d'une marge gauche définie dans un autre fichier CSS : style.css (ligne 235)

#colMilieu {
float:left;
height:500px;
margin-left:25px;
margin-top:15px;
width:620px;

Si tu supprime la marge, la colonne du milieu revient à sa place.

Par contre, je ne voit pas de colonne droite.
Modifié par Laurie-Anne (23 Jul 2009 - 07:35)

francess

23 Jul 2009 à 20:02

bjr, j'ai fait ce que tu m'a conseiller mais rien n'y fait, dans la page que l'on voit en su rle lien, il n'y a pas de colonne droite mais dans les autres oui,

en fait, la page veut bien tt affiché si je mets le container à une taolle de

 width:100%

mais malheureusement pour moi le

 height:100%

ne fait quand meme pas s'alonger la page si le contenu est long alors il coupe au niveau du footer.

Francess

Sujet clos

CSS et mise en forme, CSS3

L'affichage est en desordre je n'y comprends plus rien