Aller au contenu
  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

Créer une page internet assez complexe


ricou33

Messages recommandés

  • Modérateurs

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... :P

Lien vers le commentaire
Partager sur d’autres sites

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. :P

Lien vers le commentaire
Partager sur d’autres sites

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 :P . 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é par ricou33
Lien vers le commentaire
Partager sur d’autres sites

  • Modérateurs
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...

Lien vers le commentaire
Partager sur d’autres sites

  • 2 semaines après...
  • Modérateurs

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... :P

Lien vers le commentaire
Partager sur d’autres sites

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 :P

 

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... :P

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é par ricou33
Lien vers le commentaire
Partager sur d’autres sites

  • Modérateurs
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.

Lien vers le commentaire
Partager sur d’autres sites

  • 2 semaines après...

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 ?

Lien vers le commentaire
Partager sur d’autres sites

  • Modérateurs

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) :P

Lien vers le commentaire
Partager sur d’autres sites

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...