Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2450 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  tableau avec 3 colonnes dont celle du milieu toujours centrée

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

tableau avec 3 colonnes dont celle du milieu toujours centrée

n°1893628
redah75
Posté le 10-06-2009 à 14:43:08  profilanswer
 

Bonjour,
 
j'ai un tableau a 100% avec 3 colonnes:
 

Code :
  1. <table width="100%" background="bg.png" ...>
  2. <tr>
  3. <td>&nbsp;</td>
  4. <td width="1000"></td>
  5. <td>&nbsp;</td>
  6. </tr>
  7. </table>


 
la 1ere colonne est toujours vide,
la 2eme contiendra le contenu du site sur une largeur de 1000px
et la 3eme colonne est toujours vide
 
je suis oblige d'avoir 3 colonnes car j'ai un graphisme (bg-png) qui depasse les 1000px!
 
ma question est:
est ce que la colonne du milieu sera TOUJOURS centree?
y a t il une autre solution que vous proposez?
 
En vous remerciant
Reda

mood
Publicité
Posté le 10-06-2009 à 14:43:08  profilanswer
 

n°1893637
flo850
moi je
Posté le 10-06-2009 à 14:56:43  profilanswer
 

ne pas utiliser un tableau ?  
 
<div STYLE="background ...."></div>


---------------

n°1893644
redah75
Posté le 10-06-2009 à 15:05:43  profilanswer
 

ah oui! ca marche,
j'ai fait ceci:

Code :
  1. <body>
  2. <div class="bg">
  3. <table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
  4.   <tr>
  5.     <td height="840">&nbsp;</td>
  6.   </tr>
  7. </table>
  8. </div>
  9. </body>


pense tu que c'est une bonne solution?
 
Merci


Message édité par redah75 le 10-06-2009 à 15:06:15
n°1893646
flo850
moi je
Posté le 10-06-2009 à 15:07:12  profilanswer
 

a quoi sert le tableau ?  
tu mets ta hauteur et ta largeur  directement sur le div , et  ça roule


---------------

n°1893669
redah75
Posté le 10-06-2009 à 15:41:48  profilanswer
 

ben, je suis quand meme oblige de mettre un tableau pour reserver une ligne pour le logo, une 2e ligne pour le menu et une 3e pour le contenu...
 
y a t il une meilleure maniere de faire ceci?


Message édité par redah75 le 10-06-2009 à 15:42:17
n°1893673
flo850
moi je
Posté le 10-06-2009 à 15:44:52  profilanswer
 

non  
<div id="contener">
    <div id="logo"> mon logo , avec eventuellement  du contenu </div>
    <div id="menu"> mon menu,</div>
    <div id="contenu"> mon contenu</div>
    <div id="piedDePage"> pied de paeg</div>
</div>


---------------

n°1893679
redah75
Posté le 10-06-2009 à 15:50:19  profilanswer
 

ok, je peux mettre ca mais mon site contient 2 colonnes, comme sur notre site actuel: www.iifiir.org/fr/index.php
comment diviser le site en 2?


Message édité par redah75 le 10-06-2009 à 15:54:23
n°1893912
Pascal le ​nain
Posté le 11-06-2009 à 00:26:55  profilanswer
 

oh mon dieu, ce site est entièrement en < table > O_o
Le css ca existe ! C'est plus simple, plus léger, plus joli,.....
 
http://openweb.eu.org/articles/initiation_flux/

n°1893952
flo850
moi je
Posté le 11-06-2009 à 08:42:12  profilanswer
 

tu peux utiliser un framework css pour te simplifier la vie , tout en ayant quelque chose de portable et de maintenable
http://960.gs/
http://developer.yahoo.com/yui/grids/


Message édité par flo850 le 11-06-2009 à 08:42:21

---------------

n°1894048
redah75
Posté le 11-06-2009 à 11:23:33  profilanswer
 

OK, merci bien.
je vais oublier les tableau et mettre en place que des div ;)
 
j'ai une derniere question stp:
quelle est la meilleure facon d'afficher par exemple un catalogue? cad 3 vignettes par ligne
un tableau? des <ul> ? ou des <div>??
 
Merci infiniment

mood
Publicité
Posté le 11-06-2009 à 11:23:33  profilanswer
 

n°1894057
flo850
moi je
Posté le 11-06-2009 à 11:44:28  profilanswer
 

personnelement, je ferai une liste avec les styles suivants  
<li STYLE="flaot:left; width=150px">
si le conteneur est de largeur fixe, tu aura toujours le même nombre d'item par ligne
si ton conteneur s'elargi, tu aura moins de lignes


---------------

n°1894237
redah75
Posté le 11-06-2009 à 17:38:15  profilanswer
 

flo850 a écrit :

personnelement, je ferai une liste avec les styles suivants  
<li STYLE="flaot:left; width=150px">
si le conteneur est de largeur fixe, tu aura toujours le même nombre d'item par ligne
si ton conteneur s'elargi, tu aura moins de lignes


 
je suis entrain d'adopter la technique des div et ca l'air pa mal ;)
 
j'aurais par contre une petite question:
comment devrais je faire pour afficher 2 elements sur LA MEME ligne, 1 a droite, et l'autre a gauche???
je pense que tu vas me conseiller de mettre 2 div, le 1er en float left et l'autre right.
dans ce cas la, est ce que float est bien compatible avec les navigateurs??
 
Merci

n°1894304
Pascal le ​nain
Posté le 11-06-2009 à 23:07:27  profilanswer
 

Bien sûr. Le float est compris par tous les navigateur.
Après les deux <div>, je te conseille d'ajouter un <div style="clear:both"></div> Pour faire passer les éléments suivants à la ligne.

n°1894319
redah75
Posté le 11-06-2009 à 23:58:05  profilanswer
 

ok, merci ;)
c'est juste que j'ai lu qlq part que le float: left ou right etait mal interprete par IE!!
 
me conseilles tu alors de TOUJOURS mettre un clear:both quand je veux afficher un div dans une nouvelle ligne?

n°1894351
Pascal le ​nain
Posté le 12-06-2009 à 09:55:53  profilanswer
 

Non. Seulement quand tu as une liste de div que tu veux mettre cote-à-cote, le float est pratique (float:left; ).
Mais souvent avec le float, les div que tu déclares après ta liste s'affichent mal. Pour cela, tu dois rajouter entre un div clear:both pour "casser" le float.


Message édité par Pascal le nain le 12-06-2009 à 09:56:04
n°1894387
redah75
Posté le 12-06-2009 à 11:03:36  profilanswer
 

oh lala, j'ai un peu de mal a comprendre!
tu veux dire que si j'ai 2 div 1 gauche et l'autre droite, le 3e doit avoir le clear:both??
 
<div float:left><div flot:right>
<div clear:both>
 
bien entendu les float et clear sont ds une feuille css :)
 
une derniere question stp :)
si je veux mettre 2 calques 1 sur l'autre, comment devrais je faire?
 
Merci de votre aide et vous etes entrain de faire changer ma conception de site web en une merveille... ;)

n°1894736
Pascal le ​nain
Posté le 13-06-2009 à 12:59:05  profilanswer
 

Le <div clear:both> est invisible car il ne contient rien, donc il fait 0x0 pixels. On s'en sert ici juste pour casser le float.
 
J'imagine que tu appelle calque les div. Tu peux utiliser le "position:absolute" sur l'un des calques.
 
<div> Un grand div qui contient les deux calques
 <div> Le premier div
 </div>
 <div style="position:absolute;"> Le second div.
 </div>
</div>
 
Tu peux positionner le deuxieme div avec des margin-left, margin-right, margin-up, margin-right.


Message édité par Pascal le nain le 13-06-2009 à 12:59:29
n°1895094
redah75
Posté le 15-06-2009 à 11:27:48  profilanswer
 

eh ben, j'apprends des choses :)
j'ai reussi a mettre en place tout une page entiere rien qu'avec des div, AUCUN tableau, mais j'avoue que c'est un peu galere, je n'ai pas encore eu le malheure de devoir mettre 4 ou 5 colonnes, car je ne saurai comment le faire!!
 
pour superposer 2 div, j'ai par hasard essaye ceci:
<div float:left>img new</div>
<div>contenu</div>
et l'image "new" se met bien sur le 2eme div :D
devrais je garder cette solution ou plutot celle que tu me proposes?
 
encore une autre question (desole, ca n'en fini pas, je sais :))
j'ai cherche mais g pas trouve comment avec les css changer une image en survolant un lien:
par ex.
"ici mon lien" "ici une image"
au survol de "ici mon lien", j'aimerai pouvoir channger "ici une image"
 
Merci bien encore une fois


Message édité par redah75 le 15-06-2009 à 11:33:12
n°1896695
Pascal le ​nain
Posté le 18-06-2009 à 17:59:05  profilanswer
 

Pour ta superposition, si tu obtiens la même chose avec toutes les versions de tous les navigateurs, tu peux laisse comme ça :p
 
Pour ton image survolée :
 

Code :
  1. <script language="Javascript">
  2. function changer_img() {
  3. document.getElementById('monimage').src = "image_2.jpg";
  4. }
  5. </script>
  6. <!-- Ton image ici -->
  7. <img id="monimage" src="image_1.jpg" />
  8. <!-- Ton lien ici -->
  9. <a onmouseover="changer_img();">Passez la souris ici</a>


 
 ;)


Message édité par Pascal le nain le 19-06-2009 à 21:05:47

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  tableau avec 3 colonnes dont celle du milieu toujours centrée

 

Sujets relatifs
[ Language C ] Copie du contenu d'un fichier dans un tableau.Trier un tableau d'entier avec ARRAYS.SORT();
probleme d'organisation d'un tableau php (array)Bug sur Tableau croisy dynamique
[PERL] Tableau de hashTableau qui ne s'affiche pas
Algorithme tableau v.négatifs à gauche et positifs à droiteRecherche dans tableau multi dimension Excel
SQl: affichage de colonnes virtuellesTri d'un tableau par indexation
Plus de sujets relatifs à : tableau avec 3 colonnes dont celle du milieu toujours centrée


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR