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

WRInaute passionné
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.
 
WRInaute passionné
...

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;
}
 
WRInaute passionné
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 !
 
WRInaute passionné
...

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.
 
WRInaute passionné
...

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:
 
WRInaute passionné
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>
 
WRInaute passionné
...

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
 
Discussions similaires
C
Réponses
4
Affichages
1K
christele2
C
Haut