[Question] Pas facile les PA

Date d'inscription: 16/06/2011 Distinctions: Déléguée de classe d'Août 2011

Voilà, j'essais

j'ai monté ma structure de mon tableau : ça, ça va

puis j'ai monté l'entourage : ça, facile

mais ça recommence nocomputer

je n'arrive pas à centrer verticalement mon tableau dans ma division :83620:

j'ai essayé line-height et ça ne veut pas

si je mets

Code:

line-height: auto;

ça ne donne rien
et si je mets dans la div la même hauteur

Code:

line-height: 455px;

mon tableau sort complètement de ma division et devient looooooooooong :322680:

Je bloque déjà là :83620:

deuxième soucis : poour enlever les bordures dans le tableau partenaires lol!

je mets les code en hide lol!

Date d'inscription: 28/09/2010

Pour ce qui est du "tableau des partenaires" c'est pas un tableau mais plusieurs images.

Code:

http://img11.hostingpics.net/pics/975465PartenariatsBase.png

_________________

Spoiler:

Date d'inscription: 16/06/2011 Distinctions: Déléguée de classe d'Août 2011

perso j'ai mis un tableau, donc ça ne me change pas mon problème même si le fait de mettre une image le simplifie.
Je pars du principe où logiquement, c'est fait pour mettre les logos des partenaires

Date d'inscription: 28/09/2010

Ca aide quand meme pas mal pour ton 2nd problème (celui de la bordure du tableau des partenaires, vu que là, il n'y a plus de tableau en fait. Juste des logos les uns sur les autres.

_________________

Spoiler:

Date d'inscription: 16/06/2011 Distinctions: Déléguée de classe d'Août 2011

oui, j'en suis consciente.
mais ça ne m'aidera pas si je n'ai pas la solution la prochaine fois que j'aurais ce soucis

quoique le positionnement centrage, j'ai TOUJOURS le soucis lol!

Coucou demoiselle Smile

Citation:

je n'arrive pas à centrer verticalement mon tableau dans ma division

Voici donc une astuce :

1/ On va donner une position relative au div contenant ton tableau

2/ On va donner au tableau une position absolute, puis dans le CSS, on va
* le centrer horizontalement

Code:

left:50%;
margin-left:-Npx; /* N = largeur/2 */

* le centrer verticalement

Code:

top:50%;
margin-top:-Mpx; /* M = hauteur /2 */

Donc pour le moment, on a :

Code:

div {
width: 820px;
height: 455px;
background-color: #d8f778;
border: 2px solid green;
border-radius : 10px;
margin: auto;
padding: auto;
position : relative;
}

table {
width: 755px;
height: 400px;
position:absolute;
top: 50%;
margin-top:-200px;
left: 50%;
margin-left:-377px;
#padding: auto;
#border-spacing: 10px;
#border-padding: 5px;
#text-align: center;
}

(à chaque fois qu'il y a # devant une propriété CSS, c'est que je l'ai mise en commentaire, donc non pris en compte par le navigateur).

Ici, petit problème : tu as du remplissage entre tes cellules. Il faut donc prendre ça en compte. En hauteur, on a 3 espaces, donc 3*10px = 30px. La hauteur du tableau fait donc 400px + 30 = 430px. Notre M fait donc 215px. Et en largeur, on a aussi 3 espaces, donc la largeur fait 755 + 30 = 785px. Notre N fait donc 392px.

On a donc ça

Code:

table {
width: 755px;
height: 400px;
position:absolute;
top: 50%;
margin-top:-215px;
left: 50%;
margin-left:-392px;
#padding: auto;
border-spacing: 10px;
#border-padding: 5px;
#text-align: center;
}

Si tu regardes bien, c'est pas super centrer horizontalement, et c'est normal : les overflow prennent de la place. On va donc ajouter quelques px et faire passer le N à 400px.

Cette fois c'est bon mais ce style s'applique aussi au tableau "partenaire". On va donc donner un nom à notre tableau de base et n'appliquer ce style qu'à ce tableau.

Code:

<table id="mon_tableau">
<tr>
<td height="26" colspan="4" scope="col" >Bienvenue sur le test codage </td>
</tr>

Code:

table#mon_tableau {
width: 755px;
height: 400px;
position:absolute;
top: 50%;
margin-top:-215px;
left: 50%;
margin-left:-400px;
#padding: auto;
border-spacing: 10px;
#border-padding: 5px;
#text-align: center;
}

Citation:

poour enlever les bordures dans le tableau partenaires

Tu as ça dans ton CSS

Code:

table#partenaires {
width: 85px;
height: 125px;
margin: auto;
padding: auto;
border : 1px solid black;
border-spacing: 0px;
border-padding: 0px;
text-align: center;
}

Il suffit de remplacer cette ligne

Code:

border : 1px solid black;

par

Code:

border:0;

Et pour supprimer les pointillés, on va travailler les TD

Code:

table#partenaires td{
border:0;
}

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 16/06/2011 Distinctions: Déléguée de classe d'Août 2011

okiiiiiii

bon ben quand tu m'aura tout fourni les milles solutions, ça ira mieux mdr
plus qu'à me créper les cheveux là dessus lol!

je vais essayé de jouer sur les marges pour l'exo mais je vais tester ça

Pour les bordures, je me doutais que c'était un truc dans ce genre quelque part mais comme je ne voyais pas où
ça viendra

merci

à vous deux

Coucou Madame Smile

Est ce que tu as encore besoin de ce sujet ?

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 16/06/2011 Distinctions: Déléguée de classe d'Août 2011

c'est tout bon pour l'exercice
j'avoue ne pas avoir tout compris pour le centrage mais j'y reviendrais en temps et en heure dès que j'aurais un neurone de libre

Hello,

J'archive donc Smile

TotOmM*