begin process at 2012 05 31 07:10:56
  Trouver un code source :
 
dans
 
Accueil > Forum > 

PHP

 > 

Web 2.0

 > 

CSS

 > 

probléme placement collone droite css


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

probléme placement collone droite css

vendredi 28 juillet 2006 à 12:24:25 | probléme placement collone droite css

speedylol

bonjour voic le probléme que j'ai le positionement de la colone droite n'est pas bonne , je vois mon erreur car je debut en css voici le code ci contre merci de votre aide.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script language=JavaScript src="js_divers.js"></script>
<title></title>
<style type="text/css">
<!--
 /*  Partie conteneur du site */
 
BODY {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 0.8em; BACKGROUND-IMAGE: url(../images/principal/arriereplan.gif); PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TOP: 0px; BACKGROUND-COLOR: #606060

 
.conteneur {
  width:767px;
  margin-left:auto;
  margin-right:auto;
  border:0px solid #000000;
  margin-top:20px;
  margin-bottom:20px;
  background-color:#FFFFFF;
}
 
/*  Partie en-tête du site */
 
.header {
 
  width:800px;
  height:102px;
        background-color: #ffffff;
        background-image:url(entete.jpg);
  background-repeat:no-repeat;
}
 
.flash {
 
  width:800px;
  height:46px;
        background-color: #ffffff;
}
 
/*  Partie principal du site */
 
.centre {
  margin-bottom: 0px;
  margin-left:2px;
  float:left;
  width:500px;
  padding:0px;
  background-color:#FFFFFF;
}
 
/*  Partie menu de gauche */
 
.gauche {
         display:block;
         width: 150px;
         float:left;
         margin-left:0px;
         min-height: 500px;
         BACKGROUND-IMAGE: url(../images/principal/fondmenu.gif);
}
 
/*  Partie menu de droite */
 
.droite {
  
        width:150px;  
        right:8px;
        margin-right:0px;
        min-height: 500px;
        padding:0px;
        BACKGROUND-IMAGE: url(../images/principal/borduredroite.gif);
}
 
/*  Partie pied du site */
 
.pied {
        BACKGROUND-IMAGE: url(../images/principal/bas.gif);
        padding-top:0px;
        padding-bottom:0px;
       clear:both;
        width:800px;
        height:26px;
        text-align:right;
}
-->
</style></head>
<body>
<!-- Div qui permet de contenir le site  -->
<div  class="conteneur">
  <!-- Div qui permet de contenir toute l'en-tête et le menu horizontal par onglets  -->
  <div  class="header">
  </div>
   <div class="flash">
   <script type="text/javascript">Flash("../images/principal/ban.swf", "767", "46", "", "banniere", "$mavariable" );</script>
  </div>
  <!-- Div qui permet de contenir le menu de gauche et divers modules  -->
  <div>
    <div  class="gauche">
    gauche
    </div>
    <div  class="centre">
    <div align="center">centre
  <br />
     <br />
     <br />
     <br />
     <br />
     <br />
     <br />
     <br />
     <br />
     <br />
     <br />
     <br />
     <br />
     <br />
     <br />
     <br />
     </div>
 </div>
 <div  class="droite">
  
  </div>
  </div>
  <!--  Div qui permet de contenir page principal et les principaux modules  -->
  <!--  Div qui permet de contenir le pied de page et le second menu horizontal  -->
  <div  class="pied">
  </div>
</div>
</body>
</html>
vendredi 28 juillet 2006 à 17:02:37 | Re : probléme placement collone droite css

oga

Membre Club
Réponse acceptée !
Bonjour,
il manquait une ligne :
float: left;
dans la définition de la classe "droite" !
J'ai modifié ton code pour pouvoir le visualiser en interne chez moi et pour le rendre un peu plus "propre" et léger au niveau CSS, meme si je ne suis pas encore un "senior" (je ne me suis pas trop occupé du HTML qui n'est pas normalisé non plus, et il y avait un div en trop !).
Globalement, évite d'utiliser des majuscules !
Je t'ai mis mes commentaires dans le code.
Voici le résultat, tu n'as plus qu'a remplacer la couleur du fond par tes url(image) dans les propriétés background :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">

 /*  Partie conteneur du site */
body {
    padding: 0;
    margin: 0;
    background: #fdd;
    font: 0.8em Verdana, Arial, Helvetica, sans-serif;
}
.conteneur {
  width: 800px; /* La somme des largeurs des composants contenus (gauche, centre et droite) doit ètre inférieure ou égale à cette valeur */
  margin: 20px auto;
    background: #999;
}

/*  Partie en-tête du site */
.header {
    width:800px;
    height:102px;
    background: #aaf;
}
.flash {
    width:800px;
    height:46px;
    background: #fff;
}

/*  Partie principal du site */
.centre {
    float: left;
    margin: 0 2px;
    width: 496px; /* 500px - 2*2px de marges */
    background: #faa;
}
 
/*  Partie menu de gauche */
.gauche {
    float: left;
    width: 150px;
    min-height: 500px;
    background: #afa;
}
 
/*  Partie menu de droite */
.droite {
    float: left;
    width: 150px; 
    min-height: 500px;
    background: #afa;
}
 
/*  Partie pied du site */
.pied {
    clear: both;
    width: 800px;
    height: 26px;
    text-align: right;
    background: #aaf;
}
</style>
</head>
<body>
<!-- Div qui permet de contenir le site  -->
<div  class="conteneur">
    <!-- Div qui permet de contenir toute l'en-tête et le menu horizontal par onglets  -->
    <div  class="header">
    </div>
    <div class="flash">
        FLASH
    </div>
    <!-- Div qui permet de contenir le menu de gauche et divers modules  -->
    <div  class="gauche">
        gauche
    </div>
    <!--  Div qui permet de contenir page principal et les principaux modules  -->
    <div  class="centre">
        <div align="center">centre
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
        </div>
    </div>
    <!-- Div qui permet de contenir le menu de droite  -->  
    <div  class="droite">
        droite
    </div>
    <!--  Div qui permet de contenir le pied de page et le second menu horizontal  -->
    <div  class="pied">
    </div>
</div>
</body>
</html>

Voilà, j'espere que ca t'aidera . Moi je parts en vacances ce soir au soleil
Bonne chance.
Oga


Cette discussion est classée dans : width, background, margin, 0px, padding


Répondre à ce message

Sujets en rapport avec ce message

[AIDE]Problémes de CSS avec un template ??? [ par masta64 ] Bonjour à tous, je débute en php et pour débuter facilement on m'as conseiller Joomla !!! Donc je l'ai installer depuis une semaine et depuis deux jou Pas de couleur de fond sur IE : background [ par kataVB ] boujour tout le mondemon problème est le suivant : sur internet explorer je ne vois pas la couleur de fond ( c'est blanc) alors que sur Firefox n'y a aligner 2 calque [ par ahlemlo ] bonjourje veus bien aligner le calque de contenu1 avec le calque de contenu2j'arrive pa à faire ça malgré j'ai mis aider moi svp<br taille du site [ par loblobloblob ] Bonjour,Je voudrais changer la taille de mon site qui est en 1024 par du 980 de large, mais lorsque je change l'attribu width de 1024 a 980 de ma page Click sur une image pour ouvrir un video flv [ par issam250d ] Click sur une image pour ouvrir un video flv Au fait je possède une page ou il ya les actualités de mon petite site web sous forme d'image, et d'un le Compatibilité avec firefox et google chrome [ par rahhalmahassen ] Bonjour, J'ai un probléme d'affichage du contenue de [url=http://www.juridique-enligne.com/avocat-gratuit/aide-juridique]ma page web[/url].En effet,el système de news + page automatique [ par alan3005 ] Bonjour, je souhaite en faite faire un sytème de news (déjà fait) et y mettre tant de news par page (en faite j'ai modifier un peux le truc de news c compatibilité du site web avec la résolution des écrans [ par hamzvb ] Bonjour; j'ai terminer récemment la création d'un site web pour une association, mais le problème c'est que le site n'est pas compatible avec toutes l Problème css sous mozilla [ par boninou ] Bonjour à tous, J'ai un petit souci de mise en page sous Mozilla que je n'ai pas sous IE et Chrome. Mon code est le suivant : [code=html] #pro Si quelqu'un à l'explication je suis preneur ... [ par Mo11 ] Bonjour à tous,J'ai une étrangité à partager avec la communeauté. Voici deja le code : <br /


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,343 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales