Sujets similaires

Bien le bonjour, bonsoir
Vu l'heure 'tardive' à laquelle arrive mon post vous comprendrez que j'ai un peu saturé sur les problèmes que je vais vous soumettre :-) Surtout que je suis prête à mettre ma main à couper que les solutions sont sous mon nez TçT
Je ne suis pas une grande lumière en codage (un jour peut-être ! o/), veuillez donc m'excuser s'il y a des fautes grossières.

Je remercie d'avance le ou les personnes qui vont se pencher sur ma demande =D

Débutons donc...

Nous avons d'une part ma maquette, toute jolie, toute mignonne, et d'autre part la... chose que j'ai obtenu.

css correspondant:

Code:: <div id="cadre">
<div id="identite">Nom ♚ Prénom</div>
<div id="details">(âge) (sexe) (poids) (taille) (orientation) (groupe)</div>
<img src="http://img15.hostingpics.net/pics/569358Base55.png"> <img src="http://img15.hostingpics.net/pics/487815Base56.png"> <img src="http://img15.hostingpics.net/pics/629573Base87.png"> <img src="http://img15.hostingpics.net/pics/867298Base57.png">

<table id="cadre_tableau"><tr><td class="td1">Personnalité</td><td class="td1">Physique</td></tr><tr>
<td class="td2"> Décrivez ici la personnalité de votre personnage de votre personnage.
ientis vero limes in longum protentus et rectum ab Euphratis fluminis ripis ad usque supercilia porrigitur Nili, laeva Saracenis conterminans gentibus, dextra pelagi fragoribus patens, quam plagam Nicator Seleucus occupatam auxit magnum in modum, cum post Alexandri Macedonis obitum successorio iure teneret regna Persidis, efficaciae inpetrabilis rex, ut indicat cognomentum.

Quo cognito Constantius ultra mortalem modum exarsit ac nequo casu idem Gallus de futuris incertus agitare quaedam conducentia saluti suae per itinera conaretur, remoti sunt omnes de industria milites agentes in civitatibus perviis.

Fuerit toto in consulatu sine provincia, cui fuerit, antequam designatus est, decreta provincia. Sortietur an non? Nam et non sortiri absurdum est, et, quod sortitus sis, non habere. Proficiscetur paludatus? Quo? Quo pervenire ante certam diem non licebit. ianuario, Februario, provinciam non habebit; Kalendis ei denique Martiis nascetur repente provincia.</td>
<td class="td2"> Décrivez ici le physique de votre personnage</td>
</tr></table>

<table id="cadre_tableau"><tr><td class="td3">Si j'étais... Je serais...</td></tr>
<tr><td id="td4">[b]Une saison[/b] :
[b]Une couleur[/b] :
[b]Un mot[/b] :
</td>
</tr></table>

<table id="cadre_tableau"><tr><td class="td3">Histoire</td></tr>
<tr><td id="td5"></td>
</tr></table>

<table id="cadre_tableau"><tr><td class="td3">OOC</td></tr>
<tr><td id="td6">►► manga/anime - personnage.</td></tr></table></div>

Je rencontre 2 problèmes (outre la bande blanche dont je suis résolue à trouver le pépin seule vu qu'avant que je commence à bidouiller dans tous les sens elle était à sa place TçT)

1- L’alignement; je n'arrive pas à centrer les tableaux, pourtant ils sont inclus dans une div qui impose que les éléments soient centrés, non ?

2 - Dans le css j'ai prévu la fonction "overflow" dans la description de la personnalité, du physique et l'histoire... Cependant elle ne fonctionne pas...

Salut salut!

Bon, pour centrer ton tableau, le problème se résout assez facilement. Tu n'as qu'à encadrer ton tableau par des balises

Code:: <center> TABLEAU </center>

Ensuite, pour que ton overflow:auto fonctionne, le plus facile est de tout simplement inclure des balises div dans tes td et de leur donner une classe, à laquelle tu attribueras les dimensions et l'overflow.

Bref, je l'ai testé de cette façon et ça fonctionne pour moi!

Code:: <div id="cadre">
<div id="identite">Nom ♚ Prénom</div>
<div id="details">(âge) (sexe) (poids) (taille) (orientation) (groupe)</div>
<img src="http://img15.hostingpics.net/pics/569358Base55.png"> <img src="http://img15.hostingpics.net/pics/487815Base56.png"> <img src="http://img15.hostingpics.net/pics/629573Base87.png"> <img src="http://img15.hostingpics.net/pics/867298Base57.png">

<center><table id="cadre_tableau"><tr><td class="td1">Personnalité</td><td class="td1">Physique</td></tr><tr>
<td class="td2"><div class="contenu_perso_phys"> Décrivez ici la personnalité de votre personnage de votre personnage.
ientis vero limes in longum protentus et rectum ab Euphratis fluminis ripis ad usque supercilia porrigitur Nili, laeva Saracenis conterminans gentibus, dextra pelagi fragoribus patens, quam plagam Nicator Seleucus occupatam auxit magnum in modum, cum post Alexandri Macedonis obitum successorio iure teneret regna Persidis, efficaciae inpetrabilis rex, ut indicat cognomentum.

Quo cognito Constantius ultra mortalem modum exarsit ac nequo casu idem Gallus de futuris incertus agitare quaedam conducentia saluti suae per itinera conaretur, remoti sunt omnes de industria milites agentes in civitatibus perviis.

Fuerit toto in consulatu sine provincia, cui fuerit, antequam designatus est, decreta provincia. Sortietur an non? Nam et non sortiri absurdum est, et, quod sortitus sis, non habere. Proficiscetur paludatus? Quo? Quo pervenire ante certam diem non licebit. ianuario, Februario, provinciam non habebit; Kalendis ei denique Martiis nascetur repente provincia.</div></td>
<td class="td2"><div class="contenu_perso_phys"> Décrivez ici le physique de votre personnage</div></td>
</tr></table>

<table id="cadre_tableau"><tr><td class="td3">Si j'étais... Je serais...</td></tr>
<tr><td id="td4">[b]Une saison[/b] :
[b]Une couleur[/b] :
[b]Un mot[/b] :
</td>
</tr></table>

<table id="cadre_tableau"><tr><td class="td3">Histoire</td></tr>
<tr><td id="td5"></td>
</tr></table>

<table id="cadre_tableau"><tr><td class="td3">OOC</td></tr>
<tr><td id="td6">►► manga/anime - personnage.</td></tr></table></center>

</div>

et pour le CSS (je n'ai rajouté qu'un code pour l'overflow):

Code:: /* debut fiche de presentation */

#cadre
{
text-align: center;
}

#identite
{
font-size: 25px;
font-family: georgia;
letter-spacing: 2px;
color: rgb(185, 46, 67);
text-transform: uppercase;
}

#details
{
font-family: georgia;
color: rgb(185, 46, 67);
font-size: 15px;
line-height: 8px;
margin-bottom: 5px;
background-color: #f2f7f7;
padding: 2px;
border-width: 2px 0px;
border-style: solid dashed;
border-color: #ecf1f1;
}

#cadre_tableau
{
background-color: rgb(236, 241, 241);
width: 458px;
height: px; /* 230 */
padding-left: 5px;
}

.td1 /* titres "personnalité" "physique" */
{
background-color: rgb(242, 247, 247);
width: 220px;
height: 17px;
font-family: georgia;
font-size: 13px;
text-align: center;
letter-spacing: 2px;
color: rgb(94, 65, 47);
border-bottom: 1px solid rgb(94, 65, 47);
text-transform: uppercase;
}

.td2 /* contenu champs "personnalité" "physique" */
{
background-color: rgb(242, 247, 247);
display: ;
font-size: 11px;
font-family: arial;
text-align: justify;
line-height: 10px;
text-transform: lowercase;
color: rgb(136, 126, 127);
padding: 5px;
}

.contenu_perso_phys {
width: 210px;
height: 240px;
overflow: auto;
}

.td3 /* titres "si j etais je serais" "histoire" "ooc" */
{
background-color: rgb(242, 247, 247);
height: 17px;
font-family: georgia;
font-size: 13px;
letter-spacing: 2px;
color: rgb(94, 65, 47);
border-bottom: 1px solid rgb(94, 65, 47);
text-transform: uppercase;
}

#td4 /* contenu champ "si j etais je serais" */
{
background-color: rgb(242, 247, 247);
width: px;
height: 50px;
overflow: auto;
font-size: 11px;
font-family: arial;
text-align: justify;
line-height: 10px;
text-transform: lowercase;
color: rgb(136, 126, 127);
padding: 5px;
}

#td5 /* contenu champ "histoire" */
{
background-color: rgb(242, 247, 247);
width: px;
height: 200px;
overflow: auto;
font-size: 11px;
font-family: arial;
text-align: justify;
line-height: 10px;
text-transform: lowercase;
color: rgb(136, 126, 127);
padding: 5px;
}

#td6 /* contenu champ "ooc" */
{
width: 432px;
height: 14px;
overflow: auto;
font-size: 10px;
font-family: arial;
text-align: justify;
line-height: 10px;
text-transform: lowercase;
color: rgb(136, 126, 127);
background-color: rgb(242, 247, 247);
padding: 5px;
}

/* FIN fiche de presentation */

Dit moi si ça fonctionne Wink

Bonjouuuuur *vient de se lever*

Non non non pas de centeeeer '_' (cf mon tuto sur les bonnes pratiques des codeurs). En plus, ya déjà un center sur toute la zone. Je te conseille plutôt de limiter en largeur toute la fiche, et d'y rajouter un "margin:auto;" (sur #cadre et #cadre-tableau). A propos, tu devrais éviter de mettre autant d'identifiants, utilise plutôt des classes, et "factorise" ton CSS. Genre par exemple toutes les cellules ont le même fond, tu peux créer une classe .cellulle-tableau avec le fond commun à toutes les cellules (et tous les autres éléments communs) et rajouter une classe spécifique à chaque cellule. On peut associer des classes sans problème, comme ça :

Code:: <div class="cellule-tableau cellule-1">

Ça marche, ENFIN ! o/ Merci beaucoup à toutes deux !

@Christa: du coup j'en ai profité pour lire ton tuto. Je vais travailler sur le fractionnement, j'avais jamais fais attention au fait qu'on pouvait associer les classes, c'est bien pratique ça °° Au moins si je change de thème ça ira encore plus vite

édit: seul pépin certains sont des id non pas des class :s

C'est bien pour ça que je te dis d'utiliser des classes et non des identifiants. Dans ton cas, ça ne se justifie pas vraiment d'utiliser des id, et les règles de priorité CSS sont assez chiantes là dessus.

*Désolée, j'avais pas compris que ça s'appliquait au < center >, j'ai déjà lu le tuto (fini) overflow et center 186756

*

Mais bref, sinon pour ce qui est de l'arrière-plan (j'ignore s'il y a des restrictions là-dessus), tu pourrais simplement l'indiquer dans ta balise table, de cette façon:

Code:: <table bgcolor="#XXXXXX"> ...... </table>

C'est simplement une autre option si tu veux alléger son CSS, mais c'est pas obligatoire!

@Christa': effectivement j'avais mal tu -.-". Je vais faire ça alors, se sera bien utile, merci de l'info Wink

@Fire-Fly: en fait je préfère en mettre un maximum dans la feuille css quitte à l'allonger, ça m'évite de courir dans tous les sujets pour faire des modifs si besoin^^ Ah et je ne l'avais peut être pas dit clairement mais ta retouche dans le css marche à merveille

J'ai réussi à régler le problème de la ligne blanche (toute bête, comme le reste....), du coup je crois que j'ai tout ce qu'il faut, merci encore !

(fini) overflow et center

(fini) overflow et center

Sujets similaires

Sujets similaires

Partenaires Or