Discussion :

[redah75]

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

[laurentSc]

Non, par défaut, cette colonne est ajustée à gauche. Pour qu'elle soit centrée, il faut mettre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 <td align="center" width="1000">

[Neroptik]

Bonjour,

Bonjour,
je suis oblige d'avoir 3 colonnes car j'ai un graphisme (bg-png) qui depasse les 1000px!

Pourquoi cela ? je vois pas trop le rapport

ma question est:
est ce que la colonne du milieu sera TOUJOURS centree?

Ben la colonne du milieu sera toujours au milieu oui
Bon d'accord blague à part tu parle du fait que l'image de fond est centrée en largeur dans la colonne du milieu ? Si c'est le cas il te suffit de rajouter une propriété CSS pour la colonne du tableau :

html:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<td class="colMilieu">Plop</td>

css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
//backgroud-position:top/bottom/right/left/middle;
// Genre par exemple :
.colMilieu {
 backgroud-position:top right;
}

y a t il une autre solution que vous proposez?

Eh bien si le tableau a pour but de déterminer la structure de ton site et qu'il n'est pas seulement là pour accueillir du contenu alors il vaux mieux utiliser les div se sera moins fouillis (et moins carré) pour la suite.

[redah75]

Merci de vos reponses...

au fait le site fait 1000px de largeur et est toujours centré.
comme arriere plan, j'ai une image (carte du monde) qui fait a peu pres 1300px, ca depasse donc des 2 cotes du site de 150px
et en plus de tout cela, j'ai un degrade definit dans le body

[ledisciple]

Merci de vos reponses...

au fait le site fait 1000px de largeur et est toujours centré.
comme arriere plan, j'ai une image (carte du monde) qui fait a peu pres 1300px, ca depasse donc des 2 cotes du site de 150px
et en plus de tout cela, j'ai un degrade definit dans le body

j'ai un conseil : branche ton pc sur un grand écran comme ça tu pourras avoir toute la carte sur la colonne du milieu avec le nombre de pixel que tu veux ... lol !!!

[12monkeys]

Bonsoir

Pourquoi utiliser des tableaux ? Prends deux divs qui sont l'une dans l'autre, la première ferra 1300 px de large et sera centrée grâce à ce code : http://xhtml.developpez.com/faq/?pag...orizontalement ; la seconde div ferra 1000 px de large et sera centrée également.

Tu laisses le dégradé dans le body, ta carte de 1300 px sur le le premier div, et le contenu du site dans la seconde div...

Ca me parait correspondre à ce que tu veux...

[redah75]

Merci "12monkeys" pour ta reponse.
c'est exactement ce que j'ai fait et j'attendais une confirmation. chose faite!
pour realiser ceci, j'ai utiliser des div avec des float left & right, est ce mieux que d'utiliser position: absolute ou relative??

j'avoue que je galere un peu car j'ai toujours eu l'habitude de mettre des tableaux, la maintenant j'utilise QUE des div mais comment devrais je faire si je dois mettre en place 4 ou 5 colonnes??

tres bientot je serai amene a afficher l'alphabet, devrais je l'afficher sous forme de liste <li> plutot qu'en tableau ??

MErci bien

[12monkeys]

Utiliser des float ? Dans l'exemple que j'ai en tête je ne vois pas à quoi ça sert ! Peut tu montrer ton code pour voir ce que tu as fait ?

Entre float et absolute ? Il n'y a jamais de réponse tranchée. Tout dépend de ce qu'il faut faire dans le site, une chose est sure faire du tout absolute dans tous les cas n'est pas une bonne idée...

Pour l'alphabet, encore une fois ça dépend du contexte, comme ça je dirais d'utiliser une liste...

Voici l'exemple qui me trottait en tête :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Titre</title>
<style type="text/css">
body { background:green;text-align: center; }
#ext { width:1300px;margin:auto;background:red;text-align: left; }
#int { width:1000px;margin:auto;background:blue;text-align: left; }
</style>
</head>
 
<body>
 
<div id="ext">
 
  <div id="int">
Contenu
  </div>
 
</div>
 
</body>
</html>

Attention aux couleurs, faut mettre des lunettes de soleil

[FoxLeRenard]

Attention aux couleurs, faut mettre des lunettes de soleil

Heureusement que tu as prévenu

Mais ça m'intéresse SUPER SIMPLE ET EFFICACE

En plus je l'ais rempli, ca marche tout seul en hauteur

[12monkeys]

Merci

Les couleurs c'est pour bien distinguer j'aime les couleurs

[redah75]

Oh lala, en regardant ton code, tu me fais penser a quelques choses:
- quel est le meilleur DOCTYPE a mettre? j'utilise <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> est ce bon?
- le xmlns="http://www.w3.org/ de la balise <html> sert a quoi? est il important a mettre?

dans le div id="int", je vais devoir mettre 2 colonnes, mon code serai alors comme ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
...
<style type="text/css">
body { background:green;text-align: center; }
#ext { width:1300px;margin:auto;background:red;text-align: left; }
#int { width:1000px;margin:auto;background:blue;text-align: left; }
#col-gauche { ... width:600px; padding: 10px; float: left; }
#col-droite { ... padding: 10px; float: right; }
#footer { padding: 10px; clear: both; }
</style>
</head>
 
<body>
 
<div id="ext">
  <div id="int">
     <div id="col-gauche">contenu principal</div>
     <div id="col-droite">contene colonne droite</div>
     <div id="footer">contenu du footer</div>
  </div> 
</div>
</body>
</html>

le div #ext m'affiche parfaitement mon arriere plan de 1300px, mais par contre si l'ecran est plus petit, on scroll horizontalement. y a til un moyen qu'on affiche pas la totalite dee la largeur (1300px) si l'ecran est plus petit?

Merci infiniment de ton aide

[12monkeys]

Oh lala, en regardant ton code, tu me fais penser a quelques choses:
- quel est le meilleur DOCTYPE a mettre? j'utilise <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> est ce bon?

C'est toi qui choisis, il n'y a pas de mauvais DOCTYPE, celui que tu as choisi est plus permissif, c'est tout...

- le xmlns="http://www.w3.org/ de la balise <html> sert a quoi? est il important a mettre?

Il sert pour les documents XHTML : http://www.w3.org/TR/xhtml1/#normative

le div #ext m'affiche parfaitement mon arriere plan de 1300px, mais par contre si l'ecran est plus petit, on scroll horizontalement. y a til un moyen qu'on affiche pas la totalite dee la largeur (1300px) si l'ecran est plus petit?

Ah zut j'avais pas pensé à ça ! Alors il faut supprimer la largeur fixe et centrer l'image d'arrière plan :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#ext {
       margin:auto;
       background: url(img10.jpg) repeat-y top center;
}

J'ai mis repeat-y mais tu peut aussi mettre no-repeat dans le cas où ton image ne dois pas se répéter verticalement...

Pour info j'ai mis ces informations parce que tu signale que tu as en plus une image en arrière plan sur le body, dans le cas contraire le div#ext ne serait pas nécessaire

[redah75]

MErci encore une fois pour ces reponses tres completes
merci!

sinon concernant le float: left & right que j'ai mis dans le code, cela te parait il correct?
ca m'effraye de ne plus utiliser de tableaux.
comment devrais je faire si je dois mettre en place 4 ou 5 colonnes?

[12monkeys]

Si tu ne veux pas particulièrement que ton #col-droite soit absolument collé à droite tu peut aussi utiliser float:left sur celui ci...

Et faire de même avec plusieurs colonnes : mettre un float:left sur chacun.

Pour progresser tu peut lire ce tutoriel : http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/

A noter qu'en mettant tout en float, la boite conteneur ne sera plus apparente (sauf IE mais c'est un bug), pour corriger ça il faut créer un contexte de formatage, un peut de lecture la aussi : http://css4design.developpez.com/tut...flux-partie-2/.

[redah75]

hehe merci encore une fois pour ta reponse a une heure si tardive..

Et faire de même avec plusieurs colonnes : mettre un float:left sur chacun.

Ah oui, j'avais pas pense a ca.

je ne vois pas trop ce que tu veux dire par "la boite conteneur ne sera plus apparente", qu'est ce que c'est concretement?

OK, je vais lire les liens que tu m'as donnes

[12monkeys]

Ca veut dire qu'un conteneur (une div contenant d'autres) dont les enfants sont en float, aura une hauteur nulle... Sauf sur IE, mais comme dit c'est un comportement incorrect.

[redah75]

Ah d'accord, OK merci

[redah75]

Ah zut j'avais pas pensé à ça ! Alors il faut supprimer la largeur fixe et centrer l'image d'arrière plan :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#ext {
       margin:auto;
       background: url(img10.jpg) repeat-y top center;
}

j'ai enlevé le width, ca marche mais ca me cree un petit problème: mon menu est décalé de 1px vers la gauche: www.iifiir.org/new/index1.php
et aussi lorsqu'on redimensionne, tout le fond se décale avec.

y a moyen d'y remedier??

j'ai une autre petite question s'il te plait :
est ce possible de changer une image de fond en survolant un lien en css ?
si tu survoles le lien "English", la barre a droite devrait être remplacée par une autre mais j'y arrive pas...

Merci infiniment

[12monkeys]

j'ai enlevé le width, ca marche mais ca me cree un petit problème: mon menu est décalé de 1px vers la gauche: www.iifiir.org/new/index1.php

Je ne vois pas où.

et aussi lorsqu'on redimensionne, tout le fond se décale avec.

C'est normal, non ? Là le fond, donc la carte de la terre, est centré... Si tu le positionne à gauche ou à droite il ne sera plus positionné en rapport avec ton site, c'est ce que tu veux ? De même en redimensionnant le site la carte suis le site, c'est ce qui me parait le plus logique, sinon la carte et le site ne seront pas en concordance.

Ou alors j'ai rien compris à ce que tu voulais obtenir...

j'ai une autre petite question s'il te plait :
est ce possible de changer une image de fond en survolant un lien en css ?
si tu survoles le lien "English", la barre a droite devrait être remplacée par une autre mais j'y arrive pas...

Merci infiniment

Regarde ici : tu as diverses méthodes à adapter, si j'ai bien compris ce que tu demande...

[redah75]

Je ne vois pas où.

miraculeusement là c'est bien aligné, mais au bureau ca l'etait pas, je dois reverifier encore. mais sinon c'etait juste a droite du moteur de recherche et de la date qu'on voyait un pixel blanc car toute la ligne bleue etait decalée d'1px vers la gauche....!

C'est normal, non ? Là le fond, donc la carte de la terre, est centré... Si tu le positionne à gauche ou à droite il ne sera plus positionné en rapport avec ton site, c'est ce que tu veux ? De même en redimensionnant le site la carte suis le site, c'est ce qui me parait le plus logique, sinon la carte et le site ne seront pas en concordance.

Ou alors j'ai rien compris à ce que tu voulais obtenir...

non, c'est bien ce que je voulais, la seule chose qui me derange est si tu retrecis la page a moins de 1000px soit la largeur de la page web, le fond commence a se decaler vers la gauche, et etant donne que le logo fait partie du fond, je suis mal barre. fais un test et tu verras

Regarde ici : tu as diverses méthodes à adapter, si j'ai bien compris ce que tu demande...

au fait ce que je veux faire est simple a faire en js mais je souhaite le faire en css:
quand tu vas sur la page que je t'es donnee http://iifiir.org/new/index1.php, la fleche est pointee vers "Francais" car on est sur le liste fr, "English" est un lien, et j'aimerai qu'au moment du survol changer l'image pour que la fleche pointe vers "english"
je precise que cette image est en background top right

MErci