28172 sujets

CSS et mise en forme, CSS3

Bonjour, Smiley biggrin
j' ai une page avec un tableau de 3 cellules par ligne.
Je souhaiterais fixer la largeur de la première cellule afin que la deuxième où il y a marqué "plus d' infos" puisse se décaler vers la gauche mais je n' y parviens pas.
j' ai mis un width à la première cellule, les modification sont invisibles sous FF mais apparaissent sous IE. Pour autant, la première cellule (cellulea ) est bien limité dans sa largeur mais la deuxième cellule ne se décale pas vers la gauche. Smiley decu
le nom des deux premières cellules est:
cellulea
celluleb et se sont des class
voici la page:
Page test
merci. Smiley cligne
.cellulea
{
background-image:url("photos/fondcellulea.png");
background-repeat:no-repeat;
padding-left:40px;
font-size:110%;
height:48px;
width:250px;
}
.celluleb
{
background-image:url("photos/fondcelluleb.png");
background-repeat:repeat-x;
font-size: 105%;
color: white;
width:100px;
}

coté html voici ce que ça donne pour une ligne:

					<tr id="synchroniser-audio-video" class="lignea">
						<td class="cellulea"><a href="decalage-son-video.html" title="Accéder au tutoriel">Synchroniser son et vidéo</a></td>
						<td class="celluleb"></td>
						<td class="logovdub">Virtualdub</td>
					</tr>

Modifié par krsytof (27 Feb 2008 - 21:12)
essay de mettre ca au debut de ton tableau:

<table style="width: 100%;table-layout:fixed;">

et dans tes cellules vides: &nbsp;
Modifié par Anakal (27 Feb 2008 - 09:50)
Je rajoute un petit plus:

- Je ne sais pas si tu voulais utiliser le point dans ton fond de cellule comme symbole de debut de ligne mais si c'est le cas ca marche po chez moi (last firefox). un petit <ul><li> me semble plus approprie. Ca te permettra de diminue la taille de ton image et dc un affichage plus rapide.
- pour ton image celluleb.png, fait la de largeur 1px et de la hauteur exact de ta cellule. Si j'ai raison dans ma premiere partie, cellulea et celluleb seront identique dc tu pourra appeller une seule image (c'est toujours pour de la rapidite d'execution)

- Autre chose, pourquoi 3 colonnes quand 2 suffiraient. A la fin de ton titre met <a etc><small>-Plus d' infos</small></a>, ca simplifiera ton code.

ca donnerai dans ta premiere cellule:

<ul><li><a href="decalage-son-video.html" title="Accéder au tutoriel">Synchroniser son et vidéo</a><a etc><small>-Plus d' infos</small></a></li></ul>

dans ton css tu peu meme def l'image de ton point blanc.

---------------------------
comme j'ai le courage:
tu pourrai meme faire sans tableau avec nos amis les div

<div style="bg-image:url("photos/fondcellule.png");bg-repeat:repeat-x;padding-left:40px;font-size:110%;height:48px;width:100%;">

    <ul>
     <li class="li avec img qui va bien">
          <a href="decalage-son-video.html" title="Accéder au tutoriel">Synchroniser son et vidéo</a><a etc><small>-Plus d' infos</small></a>
     </li>
     </ul>

<div class="au fond en haut"> <a etc>virtualbub<img etc></a><div>

</div>


ATTENTION:
- code taper a l'arrache dc le copier coller ne marchera pas.
- 3 class a definir: le premier div (mm chose que ton cellulea en gros), le li si l'image par default te convient pas., et le dernier div qu'il faudra def en haut a droite style:

.au fond en haut {
	position:absolute;
	right: 0px;
	top: 0px;
	height: 30px;
	text-align: right;
	font-size: 12px;
	}


Et voila de quoi passer de bonne nuits blanches, ne me remercie pas Smiley lol


Serieusement j'aurai tendance a utiliser la seconde solution, j'aime le css. Mais ta version marche aussi.

Anakal