28220 sujets

CSS et mise en forme, CSS3

lo all Smiley smile

Bon jvais essayer d'etre clair! Smiley langue

le code génèré :

div id='total-tarif'>
<div id='titre-tarif'>ANIMAL(nuitee)</div>
<div id='datetotal-tarif'>
<div id='date-tarif'>du 01/01/2004<br>au 18/06/2004</div>
<div id='date-tarif'>du 19/06/2004<br>au 13/07/2004</div>
<div id='date-tarif'>du 14/07/2004<br>au 21/08/2004</div>
<div id='date-tarif'>du 22/08/2004<br>au 05/09/2004</div>
<div id='date-tarif'>du 06/09/2004<br>au 31/12/2004</div>
</div>
<div id='prixtotal-tarif'>
<div id='typeprix-tarif'>La nuitée(s) <span class='prix-tarif'>1.50€</span></div>
<div id='typeprix-tarif'>La nuitée(s) <span class='prix-tarif'>2.50€</span></div>
<div id='typeprix-tarif'>La nuitée(s) <span class='prix-tarif'>3.00€</span></div>
<div id='typeprix-tarif'>La nuitée(s) <span class='prix-tarif'>2.50€</span></div>
<div id='typeprix-tarif'>La nuitée(s) <span class='prix-tarif'>1.50€</span></div>
</div></div><br>

Mon porbléme concerne le DIV id='total-tarif' (le conteneur global).

Mise en page :

DIV id='total-tarif'
DIV TOTAL-DATE (qui contient toutes les dates)
DIV DATE avec un float:left;
/DIV
DIV TOTAL-PRIX (qui contient tous les prix)
DIV PRIX avec un float:left; (qui se positionne parfaitement en dessous de la date conrespondante).
/DIV
/DIV

Certaines de mes boucles peuvent contenir jusqu'a 10 tarif! et en 1024x768 par ex, le DIV id='total-tarif' ne va pas s'agrandir (il reste a 100% de la frame donc fais passer le superflux de DIV DATE à la ligne ... ce qui me génére un bug de mise en page !

Si vous connaissez un style css qui pourrai bloqué le retour a la ligne dite le moi ! Smiley smile

MERCI D'AVANCE !

DesT - Try to dodge my skill
Modifié par DesT (04 Jul 2005 - 15:53)
Bonjour et bienvenue DesT Smiley smile

Apparemment, tu n'es pas passé par la case Règles du forum et tu ne toucheras pas... Smiley cligne

Plus sérieusement, peux-tu "éditer" ton post et placer ton code dans la balise "Code" ? stp ! Ceci afin de rendre la lecture des échanges plus rapide et plus confortable Smiley smile

Merci d'avance !
Modifié par dominique (04 Jul 2005 - 16:09)
Aie aie aie aie aie...

je fais vite fait (désolé, un peu pressé là) :
* il y a autre chose que <div> en HTML
* id est unique, 2 valeurs identique (et 50 encore plus) ne sont pas valides, c'est class qu'il faut ici utiliser

Sans une base propre du code HTML on ne peut rien faire.
heu mon code php? heu il est bien gros ! jpense pas que tu y verra plus clair ... j'en suis meme sur!

c'est pas dur, il ne fais pas d'acsenceur en X don cfait passer a la ligne les DIV superflux et casse ma mise en page!

il me faut juste une propriétée qui bloque le DIV de façon qu'il ne fasse rien passer à ligne son contenu et crée un acsenceur en X (ma version en TABLE fonctionne impec) mais la DIV m'en fait voir lol

MERCI
Modifié par DesT (04 Jul 2005 - 16:25)
Tu es sûr qu'un tableau ne serait pas plus adapté à la situation ? De ce que j'en comprends, ça ressemble fichtrement à des données tabulaires.
djfeat a écrit :

Tu es sûr qu'un tableau ne serait pas plus adapté à la situation ? De ce que j'en comprends, ça ressemble fichtrement à des données tabulaires.


Laurent Denis a écrit :
Un tableau ! Un tableau ! Un tableau !

Smiley lol



En effet, en tout cas, c'est certainement pas les <div> qu'il faut utiliser Smiley smile

J'étais passé rapido sans regarder le contenu, et au delà du fait que utiliser des <div> ainsi est à proscrire, ne pas utiliser un tableau pour ce cas l'est aussi Smiley smile
Je suis d accord, le truc c est que c'est un module qu'on vend a nos client, et je voudrai qu'il soit entierement parametrable! donc en DIV mais bon a la limite jpeut laisser sa en TABLE

Merci all bye Smiley cligne
Le problème de tes divs, c'est que le résultat est totalement imbittable dès qu'on perd le support CSS (navigateurs graphiques anciens, navigateurs textes, lecteurs d'écran, éventuellement mobiles, etc.) :

a écrit :
ANIMAL(nuitee)
du 01/01/2004
au 18/06/2004
du 19/06/2004
au 13/07/2004
du 14/07/2004
au 21/08/2004
du 22/08/2004
au 05/09/2004
du 06/09/2004
au 31/12/2004
La nuitée(s) 1.50&#8364;
La nuitée(s) 2.50&#8364;
La nuitée(s) 3.00&#8364;
La nuitée(s) 2.50&#8364;
La nuitée(s) 1.50&#8364;


D'autre part, si jamais tes clients ont accès au code, je ne suis pas sûr que tu leur simplifies vraiment les choses avec un code aussi peu intuitif.

Il me semble, si tu ne veux pas utiliser le tableau, que la vie sera beaucoup plus facile pour toi (et peut-être pour le client) en passant à l'altenative normale à ce type de tableau, c'est à dire une liste :

<li><span class="date-tarif">Du 01/01/2004<br>au 18/06/2004</span> La nuitée: <span class='prix-tarif'>1.50&#8364;</span></li>


Que tu peux styler à ta guise, et qui conservera la cohérence du contenu quelque-soit le type de rendu...
Le tableau est le plus logique, pourquoi s'en priver ?

NB : Profites-en, c'est pas tous les jours que tu verras les membres de ce forum plébisciter l'usage de tableaux Smiley cligne

Non, sérieusement, tu n'as aucune raison de t'interdire l'usage de tableaux, et ils sont très personnalisables en css (fonds, bordures, couleurs, espacements). C'est la mise en page en tableaux qui est plutôt déconseillée dans le coin, mais ici tu parles de données qui sont tabulaires; il serait absurde de chercher à les présenter autrement.