Passage en css--->postion du texte des cellules d'un tabl

Grantome · 3 Février 2004

Bonjour,
Je m'explique
Avant j'avais ça avec un tableau et des cellules, tout bien centré...

Code:

maison    cours    chant    canaux    mal
  bac     maux      la        toi      a

Je passe en css sans tableau et je n'arrive plus à avoir les mot du haut centré avec ceux du bas
Genre, j'ai ceci, toujour un décalage au bout.

Code:

maison    cours    chant    canaux    mal
  bac  maux  la  toi  a

Le premier est centré, mais pas les autres
En fait, j'aimerais jouer avec l'espace entre chaque mot, mais comment faire.

Pour infos, j'utilise ce type de langage:

Code:

<div class="ligne1">
<span class="lien">maison</span>
<span class="lien">cours</span>
<span class="lien">chant</span>
<span class="lien">canaux</span>
<span class="lien">mal</span>
</div>
<div class="ligne2">
<span class="lien">bac</span>
<span class="lien">maux</span>
<span class="lien">la</span>
<span class="lien">toi</span>
<span class="lien">a</span>
</div>

Merci beaucoup si vous savez. :wink:

Au fait, je tente du XHTML strict, donc, evitez les réponse qui ne sont pas du strict.

lafosca · 3 Février 2004

T'aurrais dû faire un exemple avec d'autre lettre que xxxxxxxx car on s'en mèle fort les pinceau ...

Grantome · 3 Février 2004

...

Héhéhhé

Voilà, c'est rectifié

Mies Van der Rohe · 3 Février 2004

ben dis nous ce que tu as mis dans la feuille de style, qu'on regarde !

Grantome · 3 Février 2004

...

Bon, je viens de mettre en ligne pour plus de précision...

la visu web: http://60gp.ovh.net/~raikkone/indexaaaa.html

vous pouvez comparer avec le menu de la page index.html, à la même adresse.

Le contenue du centre n'est pas aux normes, c'est juste pour donner le ton.

Et je ne parle pas du fait que je n'arrive pas à centrer tout cela comme sur l'original en html.

le css

Code:

html,body
{
scrollbar-face-color:#7e7e7e; scrollbar-shadow-color:#000000; scrollbar-highlight-color:#ffffff; scrollbar-3dlight-color:#000000;
scrollbar-darkshadow-color:#000000; scrollbar-track-color:#000000; scrollbar-arrow-color:#000000;
background-color:#000000; font-family:Time New Roman; font-size:13; margin-left:0; margin-right:0; margin-top:0; margin-bottom:0;
 }

.menu
{
background-image:url('./images/menu1.jpg');
width:1000;
height:80;
}

.logo1
{
float:left;
margin-left:10;
margin-top:18;
border:0;
}

.gauche
{
position:absolute;
top:100;
left:0;
background-image:url('./images/menu2.jpg');
width:170;
height:700;
}

.centre
{
position:absolute;
top:100;
left:170;
width:660;
height:700;
text-align:center;
}

.droit
{
position:absolute;
top:100;
left:830;
background-image:url('./images/menu2.jpg');
width:170;
height:700;
}

.menuhaut1
{
float:left;
margin-left:45;
margin-top:21;
}

.menuhaut2
{
float:left;
margin-left:15;
margin-top:6;
}

.liens
{
font-size:13;
color:#aabbcc;
margin-left:0;
}

.crochets
{
font-size:13;
color:#578495;
}

Mies Van der Rohe · 4 Février 2004

En fait il faut que tu penses comme s'il s'agissait d'un tableau, donc tu mets

un truc du genre

Code:

<div class="colonne1">
<ul>
<li>maison
<li>bac
</ul>

<div class="colonne1">
<ul>
<li>cours
<li>maux
</ul>

etc...

et dans ta feuille de style tu fais un truc du genre

Code:

colonne1{
   width:200px;
   float:left;
}

si tu veux assurer tu fais une style aussi pour <li>

a plus, be aROOTS !

Grantome · 4 Février 2004

...

Pas mal comme idée...

Avec quelques ajout, ça marche impec. :wink:

Code:

.colonnesmenu
{
float:left;
margin-left:0;
margin-top:19;
line-height:20px;
text-indent:-24;
text-align:center;
}

un line-height pour ecarter un peu les lignes.
un text-indent pour donner un espace entre les mots
et un petit center.

Grantome · 4 Février 2004

...

Bon, en fait, j'ai trouvé plus simple, et en plus je me prend plus la tête pour supprimer les puces.

XHTML

Code:

				<div class="colonnesmenu">
					<span class="crochets">-[ <span class="liens"><a href="./news/news.html">Actualités</a></span> ]-<br />
					-[ <span class="liens"><a href="./ilsontdit/ilsontdit.html">"Ils ont dits"</a></span> ]-</span>
				</div>
				<div class="colonnesmenu">
					<span class="crochets">-[ <span class="liens"><a href="./courses/courses.html">Formule 1</a></span> ]-<br />
					-[ <span class="liens"><a href="./fanclub/fanclub.html">Fan Club</a></span> ]-</span>
				</div>
				<div class="colonnesmenu">
					<span class="crochets">-[ <span class="liens"><a href="./statistiques/statistiques.html">Statistiques</a></span> ]-<br />
					-[ <span class="liens"><a href="./forum/forum.html">Forum</a></span> ]-</span>
				</div>
				<div class="colonnesmenu">
					<span class="crochets">-[ <span class="liens"><a href="./biographie/biographie.html">Biographie</a></span> ]-<br />
					-[ <span class="liens"><a href="./quizz/quizz.html">Kimi Quizz</a></span> ]-</span>
				</div>
				<div class="colonnesmenu">
					<span class="crochets">-[ <span class="liens"><a href="./palmares/palmares.html">Palmarès</a></span> ]-<br />
					-[ <span class="liens"><a href="./souvenirs/souvenirs.html">Souvenirs</a></span> ]-</span>
				</div>
				<div class="colonnesmenu">
					<span class="crochets">-[ <span class="liens"><a href="./photos/photos.html">Photos/Vidéos</a></span> ]-<br />
					-[ <span class="liens"><a href="./liens/liens.html">Liens</a></span> ]-</span>
				</div>

CSS

Code:

.colonnesmenu
{
float:left;
margin-left:0;
margin-top:19;
width:102;
line-height:20px;
text-align:center;
font-size:13;
}

:roll: :roll: :roll: :roll: :roll: :roll: :roll:
Euuhhhhhhh, j'ai un autre soucis....
j'ai ceci

Code:

<div class="...">
Blablabla
</div>
<div class="...">
Blablabla
</div>
<div class="...">
Blablabla
</div>

Ces 3 div représente les trois colonnes d'un tableau.
Pour le séparer de la suite, je veux mettre un hr, mais, il me le met à la suite du dernier div (dans une 4e colonne), et non en dessous des trois. :roll:

nikoshr · 4 Février 2004

Code:

HR { clear:both;}

Grantome · 4 Février 2004

...

nan, marche pas... :? [/code]

Eservice · 4 Février 2004

Bonsoir,

nikoshr a donné la bonne piste, essaye ça en respectant la casse

Code:

.hr { clear:both; }

Tu peux faire maigrir ton code en remplaçant

Code:

<span class="liens"><a href="./liens/liens.html">Liens</a></span>

par

Code:

<a href="./liens/liens.html" class="liens">Liens</a>

Monique · 4 Février 2004

Bonjour,

Un exemple dont tu peux t'inspirer http://www.fu2k.org/alex/css/layouts/3Col_NN4_FMFM.mhtml.
La feuille de style est dans le code source de la page.

Amicalement,
Monique

Grantome · 4 Février 2004

...

Merci :wink: , je me demandais justement si on pouvait mettre plusieurs class dans une <>

Euh Monique, merci, mais j'utilise IE6, je ne vois donc pas pourquoi la méthode pour NN4 m'arrangerait, pourtant..............

Ca marche, bon, le hr est à 100%, et j'arrive pas à le diminuer, mais là, j'hallucine. :roll:
Thx