emplacement de mes trois colonnes

emplacement de mes trois colonnes - HTML/CSS - Programmation

Marsh Posté le 31-08-2006 à 17:25:08    

Bonjour,
 
Je désire mettre trois colonnes de noms sur ma page qui est est centrée.
 
Comment je fais pour m'assurer que la colonne de gauche est à 10px du bors de ma page centrée ?
 
De plus, j'aimerais que mes trois colonnes soient identiques.
 
Code css:
 
#corps{
background:#ffffff url(images/i_tuiles/f_600.jpg) no-repeat center center;
border-bottom:1px solid #808080;
border-left:1px solid #808080;
border-right:1px solid #808080;
clear:both;
padding:5;
width:728px;
min-height:560px;
}
 
#colgauche{
  background:lightgrey;
   border:2px dotted black;
   position: absolute;
   left:100px;
   width:200px;
}
 
#colcentrale{
 background:lightgrey;
  border:5px dotted black;
  margin-left: 199px;
  margin-right:199px;
  voice-family: "\"}\"";
  voice-family: inherit;
  margin-left: 201px;
  margin-right:201px;
}
 
#coldroite{
 background:lightgrey;
   border:2px dotted black;
  position: absolute;
  right:10px;
  width:200px;
}

Message cité 1 fois
Message édité par fourniey le 31-08-2006 à 17:28:30
Reply

Marsh Posté le 31-08-2006 à 17:25:08   

Reply

Marsh Posté le 31-08-2006 à 17:44:37    

fourniey a écrit :

Bonjour,
 
Je désire mettre trois colonnes de noms sur ma page qui est est centrée.
 
Comment je fais pour m'assurer que la colonne de gauche est à 10px du bors de ma page centrée ?
 
De plus, j'aimerais que mes trois colonnes soient identiques.



 
Rien compris [:mlc]  
 
Pour ce qui est des 10px ... avec un margin-left non ? [:spamafote]  
 
QUand à la deuxième partie de ta demande ... ben ça veut pas dire grand chose ... identique dans quel sens ?


---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 31-08-2006 à 17:46:51    

Je voudrais trois colonnes identiques, pareil, même grandeure, même largeur peut importe le texte.

Reply

Marsh Posté le 31-08-2006 à 17:50:24    

ben tu les définis dans ta CSS :
 
width: xxx px;
height: xxx px;


---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 31-08-2006 à 17:56:29    

+1... padding dans le corps de 10px
 + définition des largeurs/hauteurs.... 33% pour la largeur... comme ça chaque colonne fera 1/3 de ton conteneur

Reply

Marsh Posté le 31-08-2006 à 18:05:13    

Si tu connais la hauteur et la largeur exacte que tu veux (disons par exemple 900 en largeur et 500 en hauteur, au pif)
 

Code :
  1. <div id="container">
  2.    <div id="left"></div>
  3.    <div id="middle"></div>
  4.    <div id="right"></div>
  5. </div>


 
 
Et dans ta classe :
 

Code :
  1. div#left,
  2. div#middle,
  3. div#right{
  4.    width: 300px;
  5.    height: 500px
  6. }
  7.  
  8. div#left{
  9.    position: absolute;
  10.    left: 10px;
  11. }
  12.  
  13. div#middle{
  14.    position: absolute;
  15.    left: 310px;
  16. }
  17.  
  18. div#right{
  19.    position: absolute;
  20.    left: 610px;
  21. }


---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 31-08-2006 à 19:24:06    

Ok, merci!.
 
Je dois maintenant ajuster cela pour ça fite dans ma page actuelle qui elle est centrée dans l'écran.

Reply

Marsh Posté le 31-08-2006 à 19:34:23    

Hmm pas vraiment non, là le positionement est absolu, tu ne peux pas le centrer comme ça.
 
Si tu veux un truc centré, il faut utiliser un DIV conteneur, qui lui sera centré, et mettre dedans tes 3 div, avec ceux de gauche et de droite en float (celui du milieu viendra s'insérer entre les 2)


---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 31-08-2006 à 20:22:58    

J'ai placé les trois colonnes avec left, par contre, je pense que de cette façon, les résultats ne seront pas identiques d'un ordinateur à l'autre.
 
Si je veux ajouter deux colonnes en-dessous au lieu de trois. Présentement, le texte apprait au-dessus des mes trois colonnes.

Reply

Marsh Posté le 31-08-2006 à 20:27:26    

fourniey a écrit :

J'ai placé les trois colonnes avec left, par contre, je pense que de cette façon, les résultats ne seront pas identiques d'un ordinateur à l'autre.
 
Si je veux ajouter deux colonnes en-dessous au lieu de trois. Présentement, le texte apprait au-dessus des mes trois colonnes.


 
J'ai encore une fois du mal à te comprendre ...


---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 31-08-2006 à 20:27:26   

Reply

Marsh Posté le 31-08-2006 à 20:32:32    

dans ma page, je mets trois colonnes et en-dessous, j'ai besoin de deux colonnes.

Reply

Marsh Posté le 31-08-2006 à 20:34:18    

Alors juste après les 3 colonnes, mets un DIV avec un "clear: both;"  en CSS. Et fait tes colones en dessous.
 
C'est peut être pas exactement ça, mais j'ai du mal à saisir à quoi ça doit ressembler au final, quels sont les dimensions fixes et les dimensions variables etc...
 
Mais ça devrait marcher.


---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 31-08-2006 à 20:55:01    

je ne comprends pas pourquoi le texte de mes deux nouvelles colonnes embarque par-dessus les trois colonnes actuellement en place.

Reply

Marsh Posté le 31-08-2006 à 20:55:32    

Tu a mis un div en clear:both ?
 
Edit: Et puis avec un bout de code ce serait plus simple de t'aider ;)


Message édité par Dj YeLL le 31-08-2006 à 20:55:55

---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 31-08-2006 à 21:03:52    

voici le div que j'ai mis dans ma page.
 
div#contdouble{
 clear: both;
 text-align: center;
}
 
http://www.uqtr.ca/fondation/Nf_ca.php

Message cité 1 fois
Message édité par fourniey le 31-08-2006 à 21:05:51
Reply

Marsh Posté le 31-08-2006 à 21:05:01    

fourniey a écrit :

voici le div que j'ai mis dans ma page.
 
div#contdouble{
 clear: both;
 text-align: center;
}


 
:??: ... et c'est quoi ça ? il se trouve où ? Et pourquoi un text-align ? Alors que c'est censé être un séparateur, il n'y a pas de texte dedans ...


---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 31-08-2006 à 21:06:49    

ça, c'est le CSS
 
la page:
 
     <div id="contdouble">
      <div id="colcentrale">
      sadfasdf
      </div>
     </div>

Reply

Marsh Posté le 31-08-2006 à 21:15:35    

Euh ... ben je vois pas ce que le clear both vient faire dans ce div alors :D


---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 31-08-2006 à 21:39:59    

Je viens de regarder ma page sur un autre ordinateur et ça ne va pas du tout. C'est pour ça que j'utilise des table au lieu du CSS pour ce genre d'affichage, c'est pas long et ça fait le travail.

Reply

Marsh Posté le 05-09-2006 à 15:51:16    

Dj YeLL a écrit :

Si tu connais la hauteur et la largeur exacte que tu veux (disons par exemple 900 en largeur et 500 en hauteur, au pif)
 

Code :
  1. <div id="container">
  2.    <div id="left"></div>
  3.    <div id="middle"></div>
  4.    <div id="right"></div>
  5. </div>


 
 
Et dans ta classe :
 

Code :
  1. div#left,
  2. div#middle,
  3. div#right{
  4.    width: 300px;
  5.    height: 500px
  6. }
  7.  
  8. div#left{
  9.    position: absolute;
  10.    left: 10px;
  11. }
  12.  
  13. div#middle{
  14.    position: absolute;
  15.    left: 310px;
  16. }
  17.  
  18. div#right{
  19.    position: absolute;
  20.    left: 610px;
  21. }



 Nannnnnnnnnnnnn pas les position:absolute  [:alexrow]

Reply

Marsh Posté le 05-09-2006 à 15:57:31    

est-ce que ce sera toujours centré peu importe la résolution de l'écran ?
 
Voilà le résultat: http://www.uqtr.ca/fondation/Nf_ca.php


Message édité par fourniey le 05-09-2006 à 16:05:16
Reply

Marsh Posté le 05-09-2006 à 20:30:24    

ça va très mal mon affaire et en plus, je viens de constater que c'est affreux sous IE.

Reply

Marsh Posté le 06-09-2006 à 10:31:14    

Peux tu recapituler clairement la mise en page desirée.
 
- Un conteneur centré sur la page de lageure fixe ? (qu'elle dimension ?)
- Trois blocs dans le conteneur. Doivent-ils etre centré dans le conteneur ou à une distance précise des bords du conteneur?
 

Reply

Marsh Posté le 06-09-2006 à 13:00:46    

Dans cette page, je veux trois colonnes centrées sur la largeur de la page soit 742.
 
En-dessous, je veux 2 colonnes centrées sur la largeur aussi.
 
De plus, peu importe le navigateur et la résolution de l'écran, il faut une certaine stabilité.

Reply

Marsh Posté le 06-09-2006 à 13:05:01    

Le positionnement absolu c'est de la merde en barre de caca, il ne doit pas être utilisé dans des cas comme le tiens.
Le mieux est d'utiliser le positionnement flottant, mais malheureusement j'ai pas le temps de te faire ton truc :/

Reply

Marsh Posté le 06-09-2006 à 13:22:32    

gatsu35 a écrit :

Le positionnement absolu c'est de la merde en barre de caca, il ne doit pas être utilisé dans des cas comme le tiens.
Le mieux est d'utiliser le positionnement flottant, mais malheureusement j'ai pas le temps de te faire ton truc :/


 
Je n'ai jamais eu de pb avec le positionnement absolu  [:spamafote] Que ce soit sous IE, FF, Opera etc...


---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 06-09-2006 à 13:27:13    

pour ma part, le résultat sous ie est affreux.

Reply

Marsh Posté le 06-09-2006 à 13:29:36    

Dj YeLL a écrit :

Je n'ai jamais eu de pb avec le positionnement absolu  [:spamafote] Que ce soit sous IE, FF, Opera etc...


 
Sortir les éléments de leur flux normal, oblige à gérer les hauteurs et autres choses.
De la manière dont tu lui as fait construire sa page on est pas sorti de l'auberge.

Reply

Marsh Posté le 06-09-2006 à 13:35:51    

gatsu35 a écrit :

Sortir les éléments de leur flux normal, oblige à gérer les hauteurs et autres choses.
De la manière dont tu lui as fait construire sa page on est pas sorti de l'auberge.


 
Oui c'est sûr, mais le problème a mal été énnoncé à la base je trouve. Là il veut integrer 3 colonnes à l'intérieur de son "cadre" déjà dessiné (enfin je me comprends)
 
Moi je croyais qu'il voulait simplement 3 cadres un à côté de l'autre, et rien d'autre....
 
Bon je suis peut-être pas très clair, mais je vois pas comment expliquer ça.


---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 06-09-2006 à 14:11:32    

t'inkiète, ya aucun soucis de ce coté là.
 
Mais il y a une règle d'or que je respecte.
 
Il ne faut jamais figer les hauteurs dans une page, sauf dans des cas déterminés à l'avance.
 
Dans son cas aucune utilité de fixer des hauteurs, le contenu pouvant changer du jour au lendemain

Reply

Marsh Posté le 06-09-2006 à 14:13:01    

Exact :jap:


---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 06-09-2006 à 14:28:09    

Pour l'instant, j'abandonne pour mes trois colonnes.
 
Je vais démarrer un nouveau sujet pour m'assurer que mon cadre général est ok.
 
Je dois m'assurer que mon cadre fonctionne avec IE et firefox avant d'aller plus loin.

Reply

Marsh Posté le 06-09-2006 à 14:30:40    

en gros il te faut ton cadre gauche en float: left; ton cadre droit en float: right; et le reste sans float, qui viendra se mettre entre les 2.
 
Et pour que ton cadre exterieur grandisse avec le reste, il faut (en dessous de tes 3 cadres interieurs) mettre un calque en clear: both;
 
Tu trouveras plus d'infos un peu partout sur le net. Notamment sur css.alsacreations.com
 
a+


---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 07-09-2006 à 15:27:28    

Comment je peux mettre une ligne entre mes colonnes du haut et du bas ?

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed