18041 sujets

Questions générales et questions de débutants

[Résolu] Div en tableau, donnez moi votre avis

Comment faire mieux que l'exemple ci-dessous. Quelles critiques peut-on y apporter ?

<html>
<body>
<script type="text/javascript">
var lg0 = screen.availWidth-35;
var ht0 = screen.availHeight-80;
var lg1 = Math.ceil(lg0/2)-15;
var ht1 = Math.ceil(ht0/4);
document.write("<div style='width:"+lg0+";height:"+ht0+";border:1px solid black;padding:5px;'>");
document.write("<div style='width:"+lg1+";height:"+ht1+";border:1px solid black;padding:5px;float:left;'>");
</script>
<p>On est dans la div de gauche</p>
<p>On ferme la div de gauche</p>
</div>
<script type="text/javascript">
document.write("<div id='dv0' style='width:"+lg1+";height:"+ht1+";border:1px solid black;padding:5px;float:left;'>");
</script>
<p>On est dans la div de droite</p>
<p>On ferme la div de droite</p>
</div>
<script type="text/javascript">
document.write("<div style='width:"+lg1+";height:"+ht1+";border:1px solid black;padding:5px;clear:left;float:left;'>");
</script>
<p>On est dans la div de gauche</p>
<p>On ferme la div de gauche</p>
</div>
<script type="text/javascript">
document.write("<div style='width:"+lg1+";height:"+ht1+";border:1px solid black;padding:5px;float:left;'>");
</script>
<p>On est dans la div de droite</p>
<p>On clique <a href="#" onClick="document.getElementById('dv0').style.backgroundColor='red';">ici</a></p>
</div>
</div>
</body>
</html>

Modifié par Deny (04 Oct 2006 - 14:03)
Bonjour Deny !

a écrit :
Comment faire mieux que l'exemple ci-dessous. Quelles critiques peut-on y apporter ?


Commencer par dire bonjour ... Smiley cligne

Indenter le code serait un vrai bonheur pour commencer.
Smiley smile
Heu... c'est normal que la moitié du contenu soit écrit via Javascript ?

Tu demandes comment faire mieux, mais question serait plutôt : « peut-on faire mieux ceci qu'avec le code suivant ? ». Le ceci restant à définir :
- objectifs ?
- contraintes ?
Avec mes humbles excuses, Bonjour Véro et à tous.

Et l'objectif est justement de ne pas se servir de la commande table.
Ce qui amène comme contrainte d'écrire répétivement des lignes en javascript, uniquement pour être dans la largeur de la fenêtre.
Je sais que rien n'empêche de se servir des tables, mais on peut faire avec des div des choses infaisables avec des cellules de tables.
Salut,

ce serait bien si tu pouvais décrire un peu plus précisemment le rendu que tu souhaites. Pour cela il n'est pas utile dans un premier temps de faire référence à un balisage ou un langage quelconque, juste une explicitation du rendu souhaité.

Par ailleurs il faut bien comprendre que ce rendu devra être obtenu avec comme support un document html réel. Pour l'instant celui ci n'existe pas.

. Pas de Déclaration de Type de Document (DTD).

. Pas de <head>

. balisage très pauvre et peu structurant, pas de <hn> notamment.

on manque donc vraiment de support pour t'aider.

PS :

Evidemment construire un document html réel n'interdit pas de produire un contenu factice (lorem ipsum)
Modifié par clb56 (27 Sep 2006 - 13:19)
Salut,

En fait je n'ai rien de précis à faire avec ça Smiley smile Smiley confus
Il y a simplement que ça fait déjà quelque temps que j'écris de la prog, et maintenant les régles sont beaucoup plus strictes.
Je ne m'y suis pas encore bien mis et j'ai toujours tendance à avoir des idées dont je me demande si elle sont conformes.
L'exemple est dans cette table de css ci-dessous, passée dans une publication d'allhtml(.com), écrite en javascript (!) Pourquoi faire ? Pour des variables et largeur d'écran. Est-ce que ça sert vraiment à quelque chose ?
<html>
<head>
<script type="text/javascript">
/* ----- taille écran ------------ */
lrgec = screen.availWidth;
htec = screen.availHeight;
/* ----------- taille de la div ------- */
lrg0 = 600;ht0 = 350;
/* ------------- position ------------ */
poshrt = (lrgec - lrg0)/2;
/* ------------------ Je remonte ci-dessous la div de 50 pour la mettre au milieu, sinon c'est correct en fullscreen --------------*/
posvrt = (htec - ht0)/2 -50;
/*------------------------- écriture de la table --------------------------- */
document.write("<style id='st0' type='text/css'>");
/* -------------------- on écrit les variables js par "+ variable +"--------------------*/
document.write("#div0 {position:absolute; top:"+ posvrt +"px; left:"+ poshrt +"px;padding:5px;width:"+ lrg0 +"px;height:"+ ht0 +";border:3px solid darkblue;font-size:14px;color: darkblue;}");
/* --------je modifie les valeurs des positions et tailles ----------*/
posvrt= posvrt+30;
ht0 = ht0-60;
poshrt = poshrt+30;
lrg0 = lrg0-60;
document.write("#div1 {position:absolute; top:"+ posvrt +"px; left:"+ poshrt +"px;padding:5px;width:"+ lrg0 +"px;height:"+ ht0 +";border:3px solid darkblue;font-size:14px;color: darkblue;}");
document.write("</style>");
</script>
</head>
<body>
<div id="div0">Exemple de div paramétrée en table de css écrite en javascript.</div>
<div id="div1">Exemple de 2ème div dont les position ont été augmentées de 30px et les dimentions diminuées de 60px.</div>
</body>
</html>
Pour l'adaptation à la largeur d'écran, on peut aussi exploiter le fait qu'un élément de type bloc prend naturellement toute la largeur disponible dans son bloc parent ?

C'est souvent assez efficace.

a écrit :
L'exemple est dans cette table de css ci-dessous, passée dans une publication d'allhtml(.com), écrite en javascript (!) Pourquoi faire ? Pour des variables et largeur d'écran. Est-ce que ça sert vraiment à quelque chose ?

Mode traducteur Klingon > Français ON.
Erreur.
Mode traducteur Klingon > Français Off.

Euh... je suis pas sûr d'avoir bien compris.

Et si, comme le proposait clb56, on laissait de côté Javascript, CSS, les tables et compagnie, pour se pencher d'abord sur la question de base : qu'est-ce que l'on veut faire ?

Parce que balancer un bout de code et demander « est-ce que ça peut servir ? » n'amènera qu'une seule réponse : oui, dans l'absolu ça peut servir. Maintenant, ça ne sera peut-être pas efficace/robuste/conforme aux besoins.

Est-ce que je me répète si je dis : « Mais euh, c'est pour faire quoi ? »
Smiley lol
Deny a écrit :
Comment faire mieux que l'exemple ci-dessous. Quelles critiques peut-on y apporter ?


Critiques en vrac :
- la démonstration de l'invalidité de la doctrine de la Prédestination telle que prêchée par Calvin me semble peu convaincante dans cet exemple ;
- les qualités littéraires et stylistiques de cet exemple laissent à désirer ;
- cet exemple ne fait pas la cuisine ;
- ça ne soigne pas le cancer.


Désolé d'être un peu lourd (pardon pardon, faut pas le prendre mal Smiley cligne ), mais c'est encore une manière de souligner que tu as oublié l'essentiel : contextualiser ta demande. Smiley smile
a écrit :
Exemple de div paramétrée en table de css écrite en javascript.

Cette phrase ne veut rien dire. Il semblerait qu'il y ait dans cet exemple (trouvé sur AllHTML, donc) une confusion entre div et table, ou div+css serait un équivalent moderne et donc plus mieux des mises en page en tableaux.

Sinon, j'ai du mal à lire le code, malgré les commentaires.
Le script teste les dimmensions de la fenêtre du navigateur, et dimmensionne un conteneur global en fonction des résultats ?

Sauf à vouloir prévoir deux mises en page pour deux résolutions différentes, l'intérêt me semble limité. Mais je ne suis pas sûr d'y comprendre grand chose, à vrai dire. Smiley sweatdrop
Bonjour,

C'est moi qui parle de table de css. Pourquoi au juste ? A force de consulter ça sur des sites français et américains et de voir la table à coté du css dans les recherche sur google, j'ai fini pas parler de la table de css. Parce que c'est vrai que quand on en déclare une, c'est un peu comme une table sur Excel, que j'utilise souvent.
Modifié par Deny (29 Sep 2006 - 14:43)
Deny a écrit :
C'est moi qui parle de table de css. Pourquoi au juste ? A force de consulter ça sur des sites français et américains et de voir la table à coté du css dans les recherche sur google, j'ai fini pas parler de la table de css. Parce que c'est vrai que quand on en déclare une, c'est un peu comme une table sur Excel, que j'utilise souvent.


Pas certain que cela soit plus clair Smiley confuse Smiley lol
A par ça, c'est moi aussi qui ai écrit cette déclaration de css en javascript.
Je l'ai déposée dans les publications sur le site http://www.allhtml.com
Personne n'y a trouvé à redire, et ce qui m'étonne encore plus maintenant, c'est que ça fait plusieurs fois qu'ils remettent un lien vers cette publication en première page.
C'est pourquoi je vous demande ce que vous en pensez.
Pour moi, c'est intéressant pour déclarer des positions qui tiennent compte de la largeur d'écran en css (quasiment uniquement). Vous pouvez le voir avec l'exemple que j'ai mis en premier.
Modifié par Deny (29 Sep 2006 - 15:15)
On oppose toujours le fait de faire des pages en table avec le fait de les faire en div avec l'utilisation du CSS.
C'est pourquoi dans les recherches, recherche CSS, on voit souvent table et css.
Modifié par Deny (29 Sep 2006 - 14:58)
Bonjour,

Bon, pour une fois je vais être un peux caustique, ceux qui me connaissent me pardonneront et j'espère que Deny lui aussi me pardonnera.

a écrit :

On oppose toujours le fait de faire des pages en table avec le fait de les faire en div avec l'utilisation du CSS.


Ceux qui disent ça :
- Ne connaissent rien aux CSS, aux Tableaux et plus généralement au Html et au design Web.
- Exception faite des néophytes et de ceux pour qui le Html se résume à tracer des rectangles dans Dreaweaver
Ha ben si au fait car ils ne connaissent rien aux CSS, aux Tableaux...

Concernant ton "script" : Il n'y à rien à en dire, si ce n'est que, malheureusement, c'est une immense "bétise" sans intérêt, même pas "théorique"

C'est dur mais c'est la vérité.

Bon, pour y trouver un intérêt :

Ce pourrait être un bon exemple de ce qu'il ne fait jamais faire :

- Utiliser javascript pour écrire du Html
- Confondre une cellule de tableau avec un div
- Calculer la taille de l'écran
- Rendre d'une complexité effrayante un objectif simple et limpide.

Donc ce que j'en penses :

- Tu devrais demander que ce truc soit retiré au plus tôt de allhtml qui n'est pas un site "formidable" mais qui ne mérite pas ça...

- Tu devrais tenter de faire la même chose en Html/CSS, tu verras c'est assez facile...

- Et si tu à des difficultés je suis sur qu'on voudras bien t'aider

Jean-pierre
Bonjour jpv,

Excuse moi de répondre tard, mais je suis absent le week-end.
En gros je suis d'accord avec toi et il s'agit bien d'un essai que j'ai fait.
C'est pourquoi je demandais un avis. C'est dur à lire quand même et merci pour ton offre d'aide mais ça pourra aller.
Ceci dit je ne vois pas pourquoi on ne pourrait pas calculer la taille de l'écran, et c'était là le but premier de l'opération, l'entrer en css.

Bref, tout ça est à mettre à la poubelle et je n'en ai de toute façon rien à faire pour le moment.
Merci pour vos avis et conseils.
Salut tout le monde.

Tu sais que grace aux css, tu peux mettre des dimensions relative ? 50% de la largeur de l'écran ou autre ...

Ca serais dix fois plus simple qu'en javascript, en plus n'importe quel navigateur le fais aisément.
Super_baloo8 a écrit :
Tu sais que grace aux css, tu peux mettre des dimensions relative ? 50% de la largeur de l'écran ou autre ...

Ca serais dix fois plus simple qu'en javascript, en plus n'importe quel navigateur le fais aisément.

Reste à savoir ce que l'on veut faire des valeurs récupérées une fois qu'on a calculé la taille de l'écran, ou celle de la fenêtre du navigateur...

Pour une chose aussi simple que dimmensionner un bloc en fonction d'un pourcentage de la largeur de la fenêtre du navigateur, on utilisera effectivement les CSS.
Sujet clos
Aller à