28173 sujets

CSS et mise en forme, CSS3

[réglé]Problème pour laisser tomber les <table>

Bonjour,
Je cherche depuis plusieurs jours à remplacer le code html suivant en code css:
<table width="100%">
	<tr>
		<td width=10>sdfsd</td>
		<td align="center">jgfjhghjgjhg</td>
		<td width=10 align="right">ujytguyg</td>
	</tr>
</table>

J'ai essayé plusieurs combinaison utilisant de float sans réussir à obtenir ce que je désirais. Smiley decu Smiley decu
Quelqu'un pourrait-il m'aider svp
Modifié par sousoulebarbu (04 Jul 2006 - 22:56)
Salutations ^^
Tu devrais trouver ton bonheur en lisant la partie "tutoriels".
Sinon par exemple:
Pour le html
<html>
<body>
<div id=contenu>
<div id=droite>
blablabla...
</div>
<h1>titre de la partiz du milieu</h1>
<p>blablablllllllllllllllllllllllllllllaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<div id=gauche>
blablablabla...
</div>
</div>
</body>
</html>

et pour le css

#contenu
...
...
#droite
...
...
#gauche
...
...

A toi d'ajuster les elements comme tu le souhaiterais.
Mais le meilleur conseil que je puisse te donner, serait d'investir dans du papier ^^
comme par exemple CSS2
Bonne chance Smiley cligne
Tout d'abord, merci d'avoir pris le temps de répondre.
Mais j'avais déja testé un code qui correspont à peu près à celui-ci:
<div style="width:100%">
	<div style="width:100">
		blablabla...
	</div>
	<div style="align:center">
		blablablaba
	</div>
	<div style="width:100;align:right">
		blablablabla...
	</div>
</div>


Cependant, il y a un retour à la ligne entre chaque div, ce que je souhaiterais éviter. Quelqu'un saurait-il le faire?
Je vais aller faire un tour dans la partie tuto en espérant trouver ce que je désir.
Après quelques recherches, j'ai trouvé qu'il fallait utiliser la balise span:
<div style="width:100%">
	<SPAN style="width:10">
		blablabla...
	</SPAN>
	<SPAN style="align:center">
		blablablaba
	</SPAN>
	<SPAN style="width:10;align:right">
		blablablabla...
	</SPAN>
</div>

Cependant, le "span" du milieu ne prend pas toute la place possible, quelqu'un aurait une idée?
Je viens de trouver la solution sur le site:
<div style="width: 100%;">
	  <div style="position:absolute;left:0;width:150px;">menu		
	  </div>
	  <div style="position:absolute;right:0;width:150px;text-align:right">droite
	  </div>
	  
  	<div style="margin-left:150px;margin-right:150px;text-align:center">
  	  partie centrale qui &quot;pousse&quot; les colones vers le bas.
  	  partie avec du contenu occupant le reste de la largeur
  	  partie avec du contenu occupant le reste de la largeur

  	</div>
</div>
mpop a écrit :
L'utilisation de flottants aurait aussi pu faire l'affaire, à vrai dire.

Pourrais-tu me dire comment car javais essayé mais je n'avais pas réussi.
NB: C'est juste pour apprendre un peu plus, don si tu as la flemme, c'est pas grave
sousoulebarbu a écrit :
Pourrais-tu me dire comment car javais essayé mais je n'avais pas réussi.

C'est le principe de la création de « colonnes » avec des flottants. Le système que je trouve le plus souple, c'est d'avoir un code avec trois éléments comme ceci :
<div id="gauche">Bla bla de gauche…</div>
<div id="droite">Bla bla de droite…</div>
<div id="centre">Lorem ipsum dolor sit amet, centerum divus est…</div>

On note au passage l'ordre un peu singulier des éléments.
Et voilà le CSS :
div#gauche {
	width: 150px;
	float: left;
}
div#droite {
	width: 150px;
	float: right;
}
div#centre {
	margin-left: 160px;
	margin-right: 160px;
	/* Note : on fait bien attention à ne pas donner à ce bloc
	de dimmensiont (largeur ou hauteur) fixe… rapport à un bug
	de HasLayout avec Internet Explorer Windows */
}

Si tu n'as que quelques mots à chaque fois, on peut utiliser des paragraphes plutôt que des div. S'il y a des éléments en quantité, les div sont bien indiquées.

Voilà, c'est une technique surtout utilisée pour faire des grandes colonnes de contenu. Dans ton cas, ça n'était pas forcément le plus simple à mettre en place, mais c'est utile à savoir.
Sujet clos
Aller à