Forum SELFHTML Archives du forum 2003 décembre| Forum SELFHTML Archives du forum 2003 décembre |
 |
Forum SELFHTML: Archives: |
 |
|
 |
|
Le message suivant est de: Steph, 
horvaths@wanadoo.fr, 15. 12. 2003, 10:50
Bonjour à toutes et tous.
J'ai fait une arborescence en utilisant des <table> pour la mise en forme. Dans ce cas tout marche très bien.
Mais j'aimerais passer par des <div> (ou autres balises me permettant de remplacer le tableau) pour cette mise en forme.
Le problème viens que j'utilise des images qui ressemblent un peu à ça : |- . Ces images sont placées devant un texte, dans le genre :
|- du texte
|- encore du texte
|- toujour du texte
Jusque là tout va bien.
Le hic vient d'un espace entre chaque trait vertical que je n'arrive pas à enlever. C'est important car il faut que j'obtienne une impression de ligne verticale tout le long de l'arbo et pas d'un pointillé.
Dans la version <table> j'ai résolu le problème en séparant l'image du texte dans des cellules différentes.
Mais là avec les div je ne trouve pas. J'ai fait des div imbriqués avec des float:right et left. Bref j'ai joué à l'apprentis sorcier un bon moment sans aucun résultat.
Le vice et que tant qu'il n'y a que des images ça marche très bien, mais dès que je rajoute du texte l'espace apparaît.
Voilà.
Merci pour votre attention et votre aide.
Steph
 |
Le message suivant est de: David, moi@moi.com, 15. 12. 2003, 14:13
bonjour!
les balises <div> c'est comme les balises <p> a chaque nouvelle balise il y a un espace qui la separe de la precedente balise, cet espace c'est le margin-top (voir http://selfhtml.selfhtml.com.fr/css/proprietes/marge.htm#margin_top) et le margin-bottom. En les mettant a zero pixel ca devrait marcher je pense, encore que ca depende avec quel navigateur tu visualises ta page, et je te parle meme pas de l'impression...
essai qd mm et dsi nous si ca marche.
David.
| |
Le message suivant est de: Steph, idem@idem.ide, 15. 12. 2003, 18:30
Bonjour david,
Ben j'y ai déjà pensé, mais ça ne marche pas.
Un schéma valant mieux qu'un grand discourt, je mets mon code qui n'est pas très long.
Pour le css voici les 2 class que j'utilise :
.ClArbo{
font-size:10px;
font-family:arial;
padding-top:0px;
padding-bottom:0px;
margin-top:0px;
margin-bottom:0px
}
.Ligne{
float:left;
margin-top:0px;
margin-bottom:0px;
padding-top:0px;
padding-bottom:0px
}
Et voici la fonction javascript pour faire mes tests :
function FcArbo(){
var Arbo="<div class=\"ClArbo\">";
for(var i=0;i<10;i++){
Arbo+="<div><div><img src=\"images/traitt_14px.gif\" />toto</div></div>";
}
/*si on enlève toto, ça marche très bien. J'ai essayé en mettant toto dans un autre div mais faut bricoler d'où la class Ligne appliquée au div qui contient l'image.
La chose qui a marché et qui se raproche le plus de ce que je cherche à été cette ligne :
Arbo+="<div><div class=\"Ligne\">toto</div><div><img src=\"images/traitt_14px.gif\" /></div></div>";
Sauf que moi, j'ai besoin de l'image à la place de toto :-( .
*/
Arbo+="</div>";
document.getElementById("DivArbo").innerHTML=Arbo;
}
et finamelement le div dans la partie body :
<div id="DivArbo"></div>
ben voilà.
Quoiqu'il en soit merci pour votre aide.
Steph
| |
Le message suivant est de: David, moi@moi.com, 15. 12. 2003, 19:20
Oula ya des trucs pas clair ds ton javascript.
pq tu ouvres tes balise <div> 2 fois de suite?
essai plutot
Arbo += "<div class='Ligne'>toto</div><div><img src='images/traitt_14px.gif'></div>";
bon courage
David
| |
Le message suivant est de: Steph, idem@idem.ide, 15. 12. 2003, 20:11
Je n'avais pas fait gaffe aus double <div>, à ce copier-coller ;-) .
David, ta ligne fonctionne, mais j'ai besoin de l'inverse : l'image avant le texte soit la ligne :
Arbo += "<div class='Ligne'><img src='images/traitt_14px.gif'></div><div>toto</div>";
qui elle malheureusement ne fonctionne pas :-( :-( :-( :-( , j'obtiens un escalier :
|-toto
|-toto
|-toto
ect...
L'origine du double div vient que j'ai mis le div de l'image et celui du texte dans un 3ème div, l'équivalant d'un <tr> en quelque sorte.
Je commence à croire que c'est sans espoir, et ça m'ennuie bcp. J'aimerai tellment me débarrasser des ces tableaux.
| |
Le message suivant est de: David, moi@moi.com, 16. 12. 2003, 10:49
Pq tu tiens tellement a te debarraser de tes tableaux? Personellemetn des que je peux je les utilise c'est bien pratique...
David.
| |
Le message suivant est de: Steph, idem@idem.ide, 16. 12. 2003, 12:10
Disons que j'ai vu la lumière le jour où j'ai découvert ce site ;-) : http://openweb.eu.org/ .
Tout est expliqué dedans, mais pour résumer, je veux séparer le fond de la forme et alléger mon arborescence (qui est en fait un menu dynamique portant sur des animaux (famille, genre, esp,etc..)) qui une fois complètement ouverte (en javascript) pointe sur 1200 individus. Bref, ce sont des tableaux imbriqués avec au total 2000 cellules (au moins).
A l'heure actuelle, pour tout ouvrir, il faut 20 secondes avec un athlon 1.3GHz et 256 Mo SDRAM. C'est beaucoup trop long. C'est pourquoi j'espère gagner en rapidité en supprimant ces tableaux.
Bon appétit
| |
Le message suivant est de: Patrick Andrieu, nospam@nospam.no, 16. 12. 2003, 01:35
http://www.selfhtml.com.fr/equipe/patrick.htm
Salut David et Steph!
»» les balises <div> c'est comme les balises <p> a chaque nouvelle balise il y a un espace qui la separe de la precedente balise
On les appelle les éléments bloc (Block Level Elements). On peut forcer l'affichage d'un élément bloc "en ligne" (inline elements) avec la propriété CSS display:inline.
Sinon Steph, tu peux aussi positionner tes éléments.
David: il est possible d'imbriquer des DIVs. Je ne fais que ça dans mon nouveau Atomic Eggs (pas officiel encore, donc pas de lien *g*).
MS de Francfort sur le Main,
Patrick
| |
Le message suivant est de: Steph, idem@idem.ide, 16. 12. 2003, 15:32
Hello Patrick,
j'ai essayé display:inline qui marche mieux que le float:left : je n'ai plus d'escalier.
Par contre j'ai toujours un espace entre les div.
Du coup display:inline n'est pas plus efficace que cette ligne :
Arbo += "<div><img src='images/traitt_14px.gif'>toto</div>";
|
| Forum SELFHTML Archives du forum 2003 décembre |
© 1998-2004 selfhtml@fr.selfhtml.org
(HTML)