créer un site


comment faire pour avoir une colonne a droite et deux blocs?

Poster un nouveau sujet sur css   Répondre au sujet à css:comment faire pour avoir une colonne a droite et deux blocs?    Accueil Forum -> css
Voir le sujet précédent :: Voir le sujet suivant  
Auteur Message
spawn
html mioche
html mioche
Messagecomment faire pour avoir une colonne a droite et deux blocs? , Posté le: 21-06-2006 14:33

bonjour tout le monde,
voila je debute dans la conception de design en css et j'aimerais avoir votre avis sur la modelisation de cette disposition :

ce que je cherche a avoir c'est :
un header avec en dessous un corps et sur la droite une colonne (la colonne etant sur la droite du header et du corps) ...

Pour realiser cela, je pensais faire :
une div header, une div corps et une div colonne avec une position absolue pour la colonne et un margin-right pour le header et le corps ..

mais je pourrais egalement fixer le width du header et du corps a la place des margin ...

ou je pourrai egalement utiliser une postion float:right pour la colonne .. ?

Enfin voila comment savoir quelle solution appliquée ? laquelle est la plus recommandée ?

merci par avance
albedo0
supermioche
supermioche
Messagecomment faire pour avoir une colonne a droite et deux blocs? , Posté le: 21-06-2006 16:15

perso je prefere un positionnement dans le flux, faut donc la largeur de l'header et du menu et un float pour le contenu...
spawn
html mioche
html mioche
Messagecomment faire pour avoir une colonne a droite et deux blocs? , Posté le: 21-06-2006 17:22

Voila en fait j'ai opté pour l'utilisation du float sauf que maintenant jai un pb avec le pied de page que je n'arrive pas a resoudre et que je ne comprend pas :

le pied de page remonte et se place donc en dessous de la colonne de droite ...

VOici mon code
Code:

#global {
   position: relative; /* on positionne le conteneur */
   margin-left: auto;
   margin-right: auto;
   width:760px; /* largeur obligatoire pour être centré */
   text-align: left; /* on rétablit l'alignement normal du texte */
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:10px;
   border: 3px solid #B7B7B7;   
}


#colonneGauche {
   width:560px;
   border:1px solid #000000;
}


#colonneDroite {
   float:right;
   width:200px;
   border:1px solid #000000;
}


#piedPage {
   position:relative;
   border:1px solid #000000;
}



et pour le code la page :
Code:

   <div id="global">

      <div id="colonneDroite">
       
        <div id="log">
          <p>log</p>
        </div>
       
        <div id="menu">
          <p>menu</p>
        </div>
         
        <div id="tchat">
           <p>chat room</p>
         </div>
      
      </div>
            
            
      <div id="colonneGauche">
         
         <div id="header">
              <p>header</p>
         </div>
         
         <div id="corps">
           <p>corps<br />.</p>
          </div>
         
      </div>
      
      <div id="piedPage"><p>pied de page</p></div>
   
   </div>



merciii encore
declique
frontpage mioche
frontpage mioche
Messagecomment faire pour avoir une colonne a droite et deux blocs? , Posté le: 31-07-2006 11:19

Bonjour,

En jonglant avec les deux propriétés Float et Clear, tu devrais résoudre ton problème.

Vois les exemples ici:
http://stylescss.free.fr/float.html [http://stylescss.free.fr/float.html]
http://stylescss.free.fr/clear.html [http://stylescss.free.fr/clear.html]

bon courage.
La Gerance
dreamweaver mioche
dreamweaver mioche
Messagecomment faire pour avoir une colonne a droite et deux blocs? , Posté le: 01-09-2006 16:48

C'est normal il faut que tu fasses un bloc général, un bloc contenant les deux blocs float left et float right et ensuite un bloc footer qui viendra automatiquement se mettre en bas des deux "colonnes"
Montrer les messages depuis:   
Poster un nouveau sujet sur css   Répondre au sujet à css:comment faire pour avoir une colonne a droite et deux blocs?    Accueil Forum -> css Toutes les heures sont au format GMT + 1 Heure
Page 1 sur 1

 
Sauter vers:  
S'enregistrerS'enregistrer
ProfilProfil
Se connecter pour vérifier ses messages privésSe connecter pour vérifier ses messages privés
RechercherRechercher
Liste des MembresMembres
FAQFAQ
ConnexionConnexion 


© Mentions Légales