28172 sujets

CSS et mise en forme, CSS3

[Résolu]Besoin d'aide pour mise en forme d'une liste ...

Bonsoir,

j'ai un soucis de mise en forme,

pour être plus performant je vous montre ce que j'ai et ce que je recherche a avoir :

ce que j'ai :
upload/14472-alsa1.gif

ce que je cherche a obtenir :
upload/14472-alsa2.gif


je cherche a avoir les notes (a droite) allignée,
voici mon code :

          <div style="width:150px;">
            <ul><li>
              <div style="width:130px;"><a href="#" title="Information"  >Premier : 8,5/10</a></div>
            <li>
              <div style="width:130px;"><a href="#" title="Information"  >Second : 8,5/10</a></div>
            <li>
              <div style="width:130px;"><a href="#" title="Information"  >troisieme : 8,5/10</a></div>
            <li>
              <div style="width:130px;"><a href="#" title="Information"  >quatrieme : 8,5/10</a></div>
            <li>
              <div style="width:130px;"><a href="#" title="Information "  >Cinquieme 2 : 8,5/10</a></div>
            </ul>			
          </div>


j'ai essayer plusieurs choses, sans succès et je n'ai pas envie de faire un tableau (solution de facilité mais c'est pas comme ca qu'il faut travailler .... )

Une idée ?? un indice ??
Modifié par mims1664 (25 Jun 2008 - 17:06)
Hello mims1664 Smiley cligne ,
mims1664 a écrit :
...et je n'ai pas envie de faire un tableau (solution de facilité mais c'est pas comme ca qu'il faut travailler .... )
En l'occurrence ça ressemble bien à des données tabulaires Smiley murf !

Sinon 2 petites remarques :
- les balises <li> doivent être fermées avec des </li>
- il est inutile de répéter le style sur chacune des balises : le CSS pourrait être regroupé dans une balise <style> au niveau du <head> ou externalisé dans une feuille de style.

Quoi qu'il en soit, tu pourrais faire quelque chose comme 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
<style type="text/css" media="screen,projection"><!--
ul.toto {
	margin: 0;
	padding: 0 0 0 25px;
	width: 200px;
}

ul.toto li {
	width: 180px;
}

ul.toto li a {
	text-align:right;
	display: block;
}

ul.toto li a span {
	float: left;
}
--></style>
</head>
<body>
<ul class="toto">
	<li><a href="#" title="Information"><span>Premier : </span>8,5/10</a></li>
	<li><a href="#" title="Information"><span>Second : </span>8,5/10</a></li>
	<li><a href="#" title="Information"><span>Troisième : </span>8,5/10</a></li>
	<li><a href="#" title="Information"><span>Quatrième : </span>8,5/10</a></li>
	<li><a href="#" title="Information "><span>Cinquieme : </span>8,5/10</a></li>
</ul>			
</body>
</html>

A+
Super génial c'est exactement ce que je recherchais ....

pour le </li> (fermeture des balises j'avais mal recopier mon code)

Merci tout plein !
Arf malheure non je ne le considère pas encore comme résolu, alors regarde j'ai un soucis j'ai essayé d'adapter ce que tu m'as proposé (l'astuce du span) dans mon site mais l'intégration n'est pas bonnne,

je te laisse regarder :
http://[...]/index.php

sur la droite,
en faite j'ai repris la partie droite sur du wordpress et j'ai un peu adapté mais c'est pas jojo, j'ai un décallage,

la css est la :
http://[...]/sidebar.css

tu as un conseil ?


merci
Modifié par mims1664 (25 Jun 2008 - 17:07)
C'est normal : tu as mis les notes dans les <span> en float:right; mais il sont placés après les titres alors que les éléments en float doivent toujours être placés en premier dans le flux. Ce qui devrait donner quelque chose comme :
<a ...><span>5.0 / 5</span>Les Accros 2 : </a>
Comme ce n'est pas très logique et que le rendu sera étrange si on désactive les css je t'avais donné l'exemple inverse : titres dans les <span> en float:left; et placés en premier et contenu (donc les notes) cadrés à droite à l'aide de :
ul.toto li a {
	text-align:right;
	display: block;
}

A toi de choisir Smiley cligne !
Ok ok je commence a comprendre ....

hé ben il fallait le savoir pour le float ! merci pour toutes ces explications ...

bonne soirée a toi ! Smiley cligne
Sujet clos
Aller à