Créer une page internet assez complexe

Dylav · le 28 janvier 2007

Bonjour,

Me revoici avec une solution classique, de bloc <div> flottants s'adossant les uns aux autres.

Tout d'abord, tu crées un bloc conteneur global "tout", rien de nouveau. Il va être constitué de 3 blocs contigüs, respectivement "texte" pour la citation elle-même, "notauteur" pour l'auteur, la note moyenne et la proposition de notation, et enfin "theme" pour le thème. Ces 3 blocs <div> sont tous en float:left.

Le bloc central est constitué de 3 blocs <p>, empilés verticalement, "auteur", "moyenne" et "noter".

Reste à procéder aux encadrements, de telle sorte qu'aucun trait ne soit doublé,

- le bloc "tout" se voit attribuer une bordure sur ses 4 côtés,

- le bloc "notauteur" a des bordures gauche et droite seulement (haut et bas sont déjà tracés avec "tout"),

- le bloc "moyenne" a des bordures haute et basse seulement,

- et du coup tous les traits sont tracés (vérifie en faisant un petit dessin).

Le problème qui persiste, c'est que les bords de la colonne "notauteur" ne descendent pas jusqu'en bas si l'une des deux autres colonnes ("texte" ou "theme") est plus haute qu'elle.

J'avais le souvenir d'une solution lue dans pompage.net. Je l'ai retrouvée, mais elle ne convient pas vraiment si tu laisses flotter tes colonnes en % de la largeur de l'écran. Regarde l'article Les colonnes factices qui parle de ça.

Voici le code HTML simplifié, avec des colonnes de largeurs fixes. Mais j'ai aussi essayé avec des pourcentages, ça marche aussi. Il reste à peaufiner (margin, padding).

<!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">
<head><title>Liste des news</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
font-family: Verdana;
font-size: 1em;
margin: 0 0 0 160px;
}
img {
height: 110px;
text-align: center;
}
#menu {
float: left;
width: 157px;
height: 520px;
margin-left: -160px;
overflow: hidden;
border: 1px solid red;
}
.tout {
float: left;
border: 1px solid black;
margin-bottom: 5px;
}
.texte {
float: left;
width: 460px;
}
.notauteur {
float: left;
width: 240px;
border-left: 1px solid black;
border-right: 1px solid black;
}
.auteur, .moyenne, .noter {
width: 100%;
margin:0;
}
.moyenne {
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.theme {
float: left;
width: 140px;
}
</style></head>
<body>
<div id="menu">
Menu<br>Menu<br>Menu<br>Menu<br>Menu<br>Menu<br>Menu<br>Menu<br>
Menu<br>Menu<br>Menu<br>Menu<br>Menu<br>Menu<br>Menu<br>Menu<br>
Menu<br>Menu<br>Menu<br>Menu<br>Menu<br>Menu<br>Menu<br>Menu<br>
Menu<br>Menu<br>Menu<br>Menu<br>Menu<br>Menu<br>Menu<br>Menu<br>
</div>
<div class="tout"><div class="texte">1. Un tableau, c'est une énumération, c'est une liste colonnée de résultats. Son utilisation serait donc tout à fait appropriée si les 6 cases de tes citations étaient 6 colonnes d'un tableau. Tu aurais ainsi une ligne par citation, plus une ligne d'entêtes de colonnes, et il n'y aurait rien à redire. Mais ce n'est pas le cas... </div><div class="notauteur"><p class="auteur">Auteur : Edmond et Jules De Goncourt</p><p class="moyenne">Note moyenne : 9.9 sur 203 inscrites</p><p class="noter">Notez cette citation</p></div><div class="theme">Les thèmes<br>Sur plusieurs lignes<br>Intelligence bêtise<br>ou autre</div></div>
<div class="tout"><div class="texte">2. Un tableau, c'est une énumération, c'est une liste colonnée de résultats. Son utilisation serait donc tout à fait appropriée si les 6 cases de tes citations étaient 6 colonnes d'un tableau. Tu aurais ainsi une ligne par citation, plus une ligne d'entêtes de colonnes, et il n'y aurait rien à redire. Mais ce n'est pas le cas... Alors de en % du conteneur précédent, ce qui permet l'expansion du bloc dans la page en fonction de la résolution d'écran de ton visiteur.</div><div class="notauteur"><p class="auteur">Auteur : Edmond et Jules De Goncourt</p><p class="moyenne">Note moyenne : 9.9 sur 203 inscrites</p><p class="noter">Notez cette citation</p></div><div class="theme">Les thèmes<br>Sur plusieurs lignes<br>Intelligence bêtise<br>ou autre</div></div>
<div class="tout"><div class="texte">3. Un tableau, c'est une énumération, c'est une liste colonnée de résultats. Son utilisation serait donc tout à fait appropriée si les 6 cases de tes citations étaient 6 colonnes d'un tableau. Tu aurais ainsi une ligne par citation, plus une ligne d'entêtes de colonnes, et il n'y aurait rien à redire. Mais ce n'est pas le cas... Alors de en % du conteneur précédent, ce qui permet l'expansion du bloc dans la page en fonction de la résolution d'écran de ton visiteur.</div><div class="notauteur"><p class="auteur">Auteur : Edmond et Jules De Goncourt</p><p class="moyenne">Note moyenne : 9.9 sur 203 inscrites</p><p class="noter">Notez cette citation</p></div><div class="theme">Les thèmes<br>Sur plusieurs lignes<br>Intelligence bêtise<br>ou autre</div></div>
<div class="tout"><div class="texte">4. Un tableau, c'est une énumération, c'est une liste colonnée de résultats. Son utilisation serait donc tout à fait appropriée si les 6 cases de tes citations étaient 6 colonnes d'un tableau. Tu aurais ainsi une ligne par citation, plus une ligne d'entêtes de colonnes, et il n'y aurait rien à redire. Mais ce n'est pas le cas... Alors de en % du conteneur précédent, ce qui permet l'expansion du bloc dans la page en fonction de la résolution d'écran de ton visiteur.</div><div class="notauteur"><p class="auteur">Auteur : Edmond et Jules De Goncourt</p><p class="moyenne">Note moyenne : 9.9 sur 203 inscrites</p><p class="noter">Notez cette citation</p></div><div class="theme">Les thèmes<br>Sur plusieurs lignes<br>Intelligence bêtise<br>ou autre</div></div>
<div class="tout"><div class="texte">5. Un tableau, c'est une énumération, c'est une liste colonnée de résultats. Son utilisation serait donc tout à fait appropriée si les 6 cases de tes citations étaient 6 colonnes d'un tableau. Tu aurais ainsi une ligne par citation, plus une ligne d'entêtes de colonnes, et il n'y aurait rien à redire. Mais ce n'est pas le cas... Alors de en % du conteneur précédent, ce qui permet l'expansion du bloc dans la page en fonction de la résolution d'écran de ton visiteur.</div><div class="notauteur"><p class="auteur">Auteur : Edmond et Jules De Goncourt</p><p class="moyenne">Note moyenne : 9.9 sur 203 inscrites</p><p class="noter">Notez cette citation</p></div><div class="theme">Les thèmes<br>Sur plusieurs lignes<br>Intelligence bêtise<br>ou autre</div></div>
<div class="tout"><div class="texte">6. Un tableau, c'est une énumération, c'est une liste colonnée de résultats. Son utilisation serait donc tout à fait appropriée si les 6 cases de tes citations étaient 6 colonnes d'un tableau. Tu aurais ainsi une ligne par citation, plus une ligne d'entêtes de colonnes, et il n'y aurait rien à redire. Mais ce n'est pas le cas... Alors de en % du conteneur précédent, ce qui permet l'expansion du bloc dans la page en fonction de la résolution d'écran de ton visiteur.</div><div class="notauteur"><p class="auteur">Auteur : Edmond et Jules De Goncourt</p><p class="moyenne">Note moyenne : 9.9 sur 203 inscrites</p><p class="noter">Notez cette citation</p></div><div class="theme">Les thèmes<br>Sur plusieurs lignes<br>Intelligence bêtise<br>ou autre</div></div>
<div class="tout"><div class="texte">7. Un tableau, c'est une énumération, c'est une liste colonnée de résultats. Son utilisation serait donc tout à fait appropriée si les 6 cases de tes citations étaient 6 colonnes d'un tableau. Tu aurais ainsi une ligne par citation, plus une ligne d'entêtes de colonnes, et il n'y aurait rien à redire. Mais ce n'est pas le cas... Alors de en % du conteneur précédent, ce qui permet l'expansion du bloc dans la page en fonction de la résolution d'écran de ton visiteur.</div><div class="notauteur"><p class="auteur">Auteur : Edmond et Jules De Goncourt</p><p class="moyenne">Note moyenne : 9.9 sur 203 inscrites</p><p class="noter">Notez cette citation</p></div><div class="theme">Les thèmes<br>Sur plusieurs lignes<br>Intelligence bêtise<br>ou autre</div></div>
<div class="tout"><div class="texte">8. Un tableau, c'est une énumération, c'est une liste colonnée de résultats. Son utilisation serait donc tout à fait appropriée si les 6 cases de tes citations étaient 6 colonnes d'un tableau. Tu aurais ainsi une ligne par citation, plus une ligne d'entêtes de colonnes, et il n'y aurait rien à redire. Mais ce n'est pas le cas... Alors de en % du conteneur précédent, ce qui permet l'expansion du bloc dans la page en fonction de la résolution d'écran de ton visiteur.</div><div class="notauteur"><p class="auteur">Auteur : Edmond et Jules De Goncourt</p><p class="moyenne">Note moyenne : 9.9 sur 203 inscrites</p><p class="noter">Notez cette citation</p></div><div class="theme">Les thèmes<br>Sur plusieurs lignes<br>Intelligence bêtise<br>ou autre</div></div>
</body></html>

Pour résoudre ce problème de traits partiels, j'ai bien une suggestion de contournement : tu remplaces la notion de quadrillage intérieur par une séparation par des couleurs de fond. Tu laisses "tout" en blanc, mais tu attribues une couleur différente à "auteur" et "noter", et une seconde couleur à "moyenne". Ainsi, toutes tes cases sont différenciées les unes des autres. Bon, ça vaut ce que ça vaut...

ricou33 · le 29 janvier 2007

Ok

J'ai compris le principe, j'ai réussi sur la page html, y'a plus qu'à l'adapter sur la page finale avec le php.

Pour l'instant, je suis en train de revoir toute l'organisation du site (c'est l"inconvénient d'apprendre au fur et à mesure, après il faut réparer ses erreurs de jeunesse) ainsi que le css qui était trop fouillis à mon gout.

Je te dirai quand j'aurai finit ça et que j'aurai uploadé ces pages pour que tu vois le résultat.

ricou33 · le 1 février 2007

Salut,

Je vois le bout de mes peines de la base du site.

Il est entièrement opérationnel, sauf bug que je n'ai pas vu. Il y aurait bien encore quelques améliorations au niveau du design à faire mais c'est déjà c'est tout de même présentable. Et surtout je pense qu'il serait encore possible d'épurer le code mais c'est au-delà de mes compétences, il faudrait quelqu'un qui accepte de passer du temps pour voir tout le code, enfin ça ne l'empêche pas de fonctionner.

J'ai fait le site sous Firefox 2.0, j'ai regardé sous IE7 mais le menu n'est pas collé au bord gauche . Je n'ai pas d'autre navigateur, si des personnes passent par là et pouvaient essayer et me dire le rendu avec d'autres navigateurs ce serait sympa.

Par contre, j'ai utilisé ta méthode Dylav pour afficher les résultats et ça ne fait tout de même pas des cases comme un tableau, pour l'instant je laisse comme ça mais je me demande si je ne vais pas reprendre le tableau, désolé.

A part ça, ça m'arrange que ce soit finit car à partir de demain je n'aurais plus tellement de temps à passer à programmer.

J'ai commencé de remplir la base de donnée aujourd'hui mais elle est loin d'être pleine. J'espère pouvoir faire ça tout de même cette fin de semaine et ce week-end.

Modifié le 1 février 2007 par ricou33

Dylav · le 1 février 2007

J'ai utilisé ta méthode Dylav pour afficher les résultats et ça ne fait tout de même pas des cases comme un tableau, pour l'instant je laisse comme ça mais je me demande si je ne vais pas reprendre le tableau, désolé

Ma méthode, ma méthode, n'exagérons rien. Je n'ai fait que te citer ce qu'on trouve dans la « littérature » orthodoxe ! Je n'ose pas insister à nouveau sur les fameuses colonnes factices, parce que cette méthode sous-entend une image de fond fixe, donc un formatage de largeur fixe, difficile à confronter à la diversité actuelle des tailles, formats (4/3, 16/10) et résolutions d'écrans.

Il ne faut pas non plus être sectaire. Ta page énumère des citations, et qui dit énumération peut entendre tableau... Tu n'as donc pas à être désolé d'en passer par là si tu tiens à l'effet ordonné des cases d'un tableau. Si tu voulais pousser jusqu'à permettre à un aveugle de consulter ta page, la description systématique du colonnage ne le dérouterait pas, même si la répétition semble fastidieuse. De toute manière, la description d'une succession d'ensembles de blocs accolés n'échapperait pas à ce défaut...

Dylav · le 12 février 2007

Bonsoir Ricou,

J'ai eu ce week-end l'occasion de conseiller à un autre Zébulonien d'aller consulter ton site des citations, pour y découvrir la magie de la <div> de gauche fixe. Y retournant moi-même pour m'en remémorer le principe, quelque chose m'a traversé l'esprit, juste un peu trop vite pour que je m'en souvienne. J'ignore si la nuit porte conseil, mais j'ai retrouvé !

Dans tes images de fond juxtaposées, plusieurs remarques,

si tu élargissais ta <div> de gauche d'une dizaine de pixels (à vue de nez), la bordure rouge coïnciderait avec une limite verticale de carreau du <body>,
du coup, le fond de la <div> "entete" et celui du <body> s'aligneraient verticalement,
horizontalement, le lignage du <body> et celui de la <div> de gauche sont pile poil face à face. Si alors tu spécifiais que l'image de fond du <body> est fixe (voir ci-dessous), la totalité du quadrillage ne bougerait plus, et c'est le contenu de ta page qui défilerait dessus. Ce serait (à mon goût) plus élégant, et créerait un défilement plus original.

body {background:url(presentation/fond_cahier.gif) fixed;
  ...
 }

Essaie, tu m'en diras des nouvelles...

ricou33 · le 14 février 2007

Bonsoir Ricou,

J'ai eu ce week-end l'occasion de conseiller à un autre Zébulonien d'aller consulter ton site des citations, pour y découvrir la magie de la <div> de gauche fixe. Y retournant moi-même pour m'en remémorer le principe, quelque chose m'a traversé l'esprit, juste un peu trop vite pour que je m'en souvienne. J'ignore si la nuit porte conseil, mais j'ai retrouvé !

Très bien, merci, n'hésite pas à envoyer du monde, le serveur est loin d'être saturé par mon site

Dans tes images de fond juxtaposées, plusieurs remarques,
si tu élargissais ta <div> de gauche d'une dizaine de pixels (à vue de nez), la bordure rouge coïnciderait avec une limite verticale de carreau du <body>,

En faite chez moi c'est déjà aligné pour toute les pages, sauf pour l'affichage des résultats lors d'une recherche par thème ou par auteur et je ne sais pas d'où ça vient vu que c'est la même page pour toutes les résultats et la même feuille de style.

du coup, le fond de la <div> "entete" et celui du <body> s'aligneraient verticalement,
horizontalement, le lignage du <body> et celui de la <div> de gauche sont pile poil face à face. Si alors tu spécifiais que l'image de fond du <body> est fixe (voir ci-dessous), la totalité du quadrillage ne bougerait plus, et c'est le contenu de ta page qui défilerait dessus. Ce serait (à mon goût) plus élégant, et créerait un défilement plus original.
body {background:url(presentation/fond_cahier.gif) fixed;
  ...
 }
Essaie, tu m'en diras des nouvelles...

Pour l'alignement horizontal c'est pas un hasard, mais ton idée d'image de fond fixe est bonne, voilà c'est fait, merci.

Modifié le 14 février 2007 par ricou33

Dylav · le 15 février 2007

En fait chez moi c'est déjà aligné pour toute les pages, sauf pour l'affichage des résultats lors d'une recherche par thème ou par auteur et je ne sais pas d'où ça vient vu que c'est la même page pour tous les résultats et la même feuille de style.

Soudain, je ne comprends pas trop non plus. As-tu modifié quelque chose depuis ton message ? En effet, à un poil près (1 ou 2px), la bordure rouge tombe effectivement en limite de carreau, et ceci pour toutes tes pages, MAIS à condition d'être effectivement plein écran 1024px. Dès que tu redimensionnes la fenêtre de ton navigateur à la baisse, il se produit un décalage (qui apparaîtra donc en résolution 800x600, par exemple). Je ne comprends pas pourquoi, dans la mesure où ton quadrillage commence en haut à gauche, et que ta <div> de gauche reste fixe, tant en position (en haut à gauche) qu'en largeur !

Pour pallier élégamment le problème (et simplifier ta gestion de trois images de fond), tu te construis une image de fond filiforme pour le <body>, de hauteur un carreau, et de grande largeur (1600px par exemple, ou même 2000px, pour s'étendre y compris sur des définitions d'écran élevées*), avec la marge préétablie (pas de quadrillage vertical à gauche de la barre rouge, et un quadrillage vertical à droite pour le corps de la page). Il n'est même pas nécessaire de spécifier le repeat-y, ce sera implicite. Ta <div> de gauche n'aura alors plus besoin ni d'image de fond, ni de marge de droite. Plus d'image de fond spécifique non plus pour ta <div> d'entête (elle risquerait de mal se superposer). Et, bien sûr, tu spécifies que l'image de fond ne bouge pas (background:... fixed;).

__________

* pas de problème pour les largeurs inférieures, l'image de fond ne déclenche pas de scrolling quand elle déborde : elle est tout simplement visuellement tronquée.

ricou33 · le 23 février 2007

Salut,

Ca y est Dylav c'est fait, j'ai donc fait une image de 2048X1536 avec une marge de 150px de large et des carreaux sur tout le reste. J'ai juste gardé un deuxième fond pour le titre en haut, qui doit monter avec la page. Verdict sans compter le titre : avant 524 octets d'image de fond ; maintenant : 58 020 octets d'image de fond.

T'en penses quoi ?

Dylav · le 23 février 2007

Bonsoir Ricou,

Tu as oublié la possibilité de l'attribut background-repeat:repeat-y !

Il te suffit de faire une image de 1 carreau de hauteur, donnant une image beaucoup moins lourde, de 2048px de largeur certes, mais de 20 ou 30 de hauteur seulement ! L'image devrait devenir 50 ou 60 fois moins lourde (certes plus lourde que tes 524 octets d'origine, mais très raisonnable)

ricou33 · le 23 février 2007

Ce n'est pas possible à cause du carré blanc en haut à gauche, sous la photo, ou alors il faudrait que je supprime ce carré.

Connexion

Pas encore inscrit ?

Créer une page internet assez complexe

Messages recommandés

Dylav

ricou33

ricou33

Dylav

Dylav

ricou33

Dylav

ricou33

Dylav

ricou33

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer