Geckozone

Bonjour à tous. Il s'agit plus d'une remarque que d'une question.
Cela fait quelques semaines que j'ai installé Nvu, que je parcours cette partie du forum, que je visite les liens qui s'y trouvent, en particulier Alsacréations sans parler du tutoriel de Framasoft, que j’utilise les extensions recommandées pour Nvu et Webdevelopper pour FF, et j'en reviens toujours à une phrase que j'ai lu à plusieurs reprises : le CSS c'est génial, mais pas évident pour les débutants.
Ayant lu, ici et là, et compris pourquoi il fallait éviter de faire des tableaux, je suis passé aux blocs.
Faire un tableau, c'est l'enfance de l'art. Passer aux blocs et optimiser leur positionnement, c'est une autre paire de manche, surtout les colonnes situées à droite de l'écran. Et quand en plus, on essaie de ne pas oublier les malheureux qui surfent en 800*600 et encore moins ceux qui utilisent IE, cela devient vite pénible.
En fait, je n'ai pas trouvé d'explications exhaustives et en français sur l'utilisation de la partie "boîte" de l'éditeur de CSS, remarquable par ailleurs.
J'ai essayé d'importer des feuilles de style glanées sur différents sites, et à chaque fois j'ai des superpositions des colonnes de gauche et de droite.
A ma grande honte, et faute de temps et de résidu de neurones opérationnels, je n'ai pas le courage de me plonger dans la syntaxe su CSS. J'étais parti sur Nvu, ayant lu que tout était WYSIWYG, et aussi parce que je suis accro à FF et TB. Il est bien WYSIWYG, avec FF, pas avec IE. Même si IE est en faute, il reste incontournable.
Pour m’en sortir, et ça marche, j’ai fait des blocs à taille et positionnement fixes en px, en m’arrangeant pour que la largeur de l’ensemble ne dépasse pas 770px. Mais je n’en suis pas fier. Quand je me balade sur Geckozone, je me dis que cela a une autre classe

Et en plus, j'oublie de me connecter...
Je pense que je vais laisser tout cela à des plus jeunes.

Bonjour
Que penses-tu de ceci?
Les couleurs sont... exotiques. La structure est simple, mais ça fonctionne tant sous IE que sous FF; pour toutes les résolutions. D'autres mises en forme immédiates du même document sont visibles à l'adresse http://sio2.be/wikini/wakka.php?wiki=MpCss

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta name="generator"
 content="HTML Tidy for Windows (vers 12 April 2005), see www.w3.org"><meta
 content="text/html; charset=ISO-8859-1"
 http-equiv="content-type"><title>Mise en forme CSS</title>
<style type="text/css">
#conteneur { border: 1px solid #6633ff;
width: 90%;
margin-left: 5%;
}
#entete { border: 1px dotted #9999ff;
width: 100%;
background-color: #ffffcc;
}
#menu { border: 1px solid #ff99ff;
float: left;
width: 150px;
background-color: #ccccff;
}
#corps { border: 1px solid #33cc00;
background-color: #ccffff;
margin-left: 150px;
margin-top: 0pt;
}
#pied { border: 1px dotted #3366ff;
width: 90%;
margin-left: 5%;
clear: left;
font-size: 8pt;
}
#entete h1 { font-size: 18pt;
text-align: center;
color: #ff0000;
width: 100%;
margin-top: 0pt;
margin-bottom: 0pt;
background-color: transparent;
}
body { margin: 0pt;
font-family: Arial,Helvetica,sans-serif;
color: #330099;
text-align: justify;
}
#menu h1 { margin: 0pt;
font-size: 14pt;
color: #3333ff;
text-align: center;
background-color: #ff0000;
}
#menu li { list-style-type: none;
}
#corps h1 { margin: 0pt;
left: 0pt;
border-bottom: 1px dotted #000099;
}
#corps h2 { margin: 0pt;
width: 100%;
}
</style>
</head>
 <body> 
<div id="conteneur">
<div id="entete"> <h1> Ent&ecirc;te </h1></div> 
<div id="menu"> <h1>D&eacute;tails</h1> 
<ul> <li>item 1 </li>
<li>item 2 </li> <li>item 3 </li> </ul>
</div> 
<div id="corps"> 
<h1>Le titre</h1>
<h2>Le sous-titre</h2>
Le texte 
</div> 
</div> 
<div id="pied"> Pied </div> 
</body>
</html>

Ne te décourages pas, les css, c'est de la manipulation avant tout si tu utilises l'éditeur du menu outils (même s'il est loin d'être parfait)
Evites la position "fixe" qui n'est pas reconnue par IE; préfères lui la position "absolue"
les tailles en % permettent que la page s'adapte à la résolution d'écran, mais attention tout de même, ça peut modifier la présentation de textes...
On a tous commencé comme toi, et beaucoup y sont arrivés

Pour te motiver, voilà une petite démo de mise en page CSS : http://fabiwan.kenobi.free.fr/css/PageLayout.html
Cette démo devait servir à quelqu'un pour qu'il développe une extension Nvu, afin de créer des modèles de mise en page CSS "à la souris" (j'ai oublié qui). Je m'y collerai peut-être personnellement un jour...

Passé le cap de l'apprentissage, la mise en page CSS n'a que des avantages sur les tableaux. C'est plus simple, plus rapide, plus accessible.

Kaze a écrit :Pour te motiver, voilà une petite démo de mise en page CSS : http://fabiwan.kenobi.free.fr/css/PageLayout.html

Le probleme, Kazé, c'est qu'on n'a pas accés directement aux feuilles de style puisque tes feuilles de style renvoient à alsacréations.
en gros, on a des feuilles en cascades, la tienne puis alsacréations

Si, les feuilles de style sont là : http://fabiwan.kenobi.free.fr/css/layout/

Elles sont inspirées d'Alsacréations (d'où la référence), mais adaptées pour pouvoir être intégrées dans une extension. Ca permet de choisir chaque paramètre indépendamment : liquide / solide, 2 ou 3 colonnes, menu à gauche ou à droite...

Merci de vos encouragements et de votre aide.
Je souhaite effectivement passer par l'éditeur du menu outils. Le problème reste que je ne comprends pas bien la signification de certains éléments de l'onglet "boîte". Le reste, ça va, et même plutôt bien. D'où mon agacement...
J'avais essayé les gabarits d'Alsacréations sans réussir à le faire fonctionner.
Je vais tester un par un les éléments de la liste fournie par KAZE. Ce que je veux, c'est comprendre une bonne fois ! Après, ça ira...
Question subsidiaire : j'utilise un portable avec un écran 16/10. Est-ce que cela n'impacte pas sur les problèmes que je rencontre ?
Bon WE.

je ne suis pas très doué en ccs (à part mes feuilles), mais quand j'ouvre celles de "layout", en dehors d'une (page-alsa.css), j'ai @import toto.css pour les autres.... où sont les toto(s).css? excuses l'inculte que je suis, mais j'ai un bug dans le cerveau et je crains que ceux qui ne connaissent déja pas beaucoup le css soient déroutés

Les toto.css sont là : http://fabiwan.kenobi.free.fr/css/layout/
Le style de base "page-alsa.css" ne contient que les couleurs de fond utilisées par Alsacréations, sans aucun style relatif à la mise en page.

Je sais bien que c'est du travail "ni fait, ni à faire" ; ça suffit à mon usage personnel, mais pour en faire quelque chose d'utilisable par des "débutants", il faudrait aller plus loin :

soit en faisant une extension Nvu ;
soit en faisant un script PHP qui fasse un modèle de page.

Je vais quand même me risquer à un début d'explication... qui finira peut-être dans la FAQ.

1. Structure HTML
La page utilise la structure suivante :

Code : Tout sélectionner

<html>
    <head> [...] </head>
    <body>
        <div id="page">
            <div id="header">  [     en-tête     ] </div>
            <div id="menu1">   [ menu principal  ] </div>
            <div id="menu2">   [ menu secondaire ] </div>
            <div id="content"> [     contenu     ] </div>
            <div id="footer">  [  pied de page   ] </div>
        </div>
    </body>
</html>

Le conteneur principal "page" n'est peut-être pas indispensable, mais je le trouve pratique dans certains cas.
En plaçant les conteneurs "header", "menu1", "menu2", "content" et "footer" dans cet ordre, on peut faire toutes les combinaisons possibles de mise en page.

C'est une structure que je recommande à tous : si vous démarrez un site, utilisez ce genre de structure, ça vous permettra de refaire votre mise en page sans toucher au code HTML.

Une dernière précision : pour les menus, je vous recommande vivement de n'utiliser que des listes simples (<ul>), c'est ce qu'il y a de plus souple.

2. Structure CSS
Pour les besoins de la démo, j'utilise toute une série de feuille de styles alternatives ; le menu déroulant permet d'en choisir une. Chaque feuille de style alternative importe deux feuilles de style dans ce répertoire.

Pourquoi ? Tout simplement parce qu'il y a trop de combinaisons possibles :

menus : haut + gauche, haut + droite, ou trois colonnes ;
positionnement : absolu ou flottant ;
largeur : fixe (750px) ou liquide (ajustée à la taille de l'écran).

J'ai donc scindé les feuilles de style ; par exemple, on obtient la disposition "float left, liquid" en important deux feuilles :

float-left.css, qui positionne le menu à gauche ;
page-liquid2.css, qui définit une mise en page "fluide" occupant 95% de la largeur de l'écran.

Ca revient à créer une feuille de style interne du type :

Code : Tout sélectionner

<style>
#page { /* conteneur "liquide" */
	width: 95%;
	margin-left: auto;
	margin-right: auto;
}
/* Mise en page : 2 colonnes (menu flottant) */
#header {
	height: 100px;
}
#content {
	margin-left: 150px;
}
#menu1 {
	position: absolute;
	top: 50px;
	left: 50px;
}
#menu2 {
	float: left;
	width: 150px;
}
/* Menus de navigation */
#menu1 li {
	display: inline;
}
</style>

Les textes entre les /* ... */ ne sont que des commentaires, ils ne sont là que pour clarifier la feuille de style mais ne sont pas interprétés par Nvu ni Firefox.
En dissociant les styles, c'était plus facile à programmer pour une éventuelle extension...
A vous de combiner les feuilles de style selon vos souhaits de mise en page !

Et maintenant on fait quoi ?
Faire un tuto, ce n'est pas mon truc, d'autant plus que je ne suis pas vraiment compétent en CSS ; Yves en fait un, mais sur une autre structure de base... Bref, j'ai fait cette démo il y a déjà longtemps, et je la ressors de temps en temps sur ce forum, mais il est bien possible qu'elle ne serve à rien d'autre qu'à montrer l'intérêt du CSS.

Si mon post n'est pas clair, je peux essayer de fournir des explications plus détaillées (bien que quelqu'un comme calimo serait bien plus compétent pour répondre). S'il y a suffisamment de gens intéressés par une extension qui fasse un modèle de mise en page sur le même principe, je m'y collerai peut-être un jour.

[edit] ajout de portions de code [/edit]

J'ai oublié de répondre au nostalgique de l'Oric Atmos (moi j'avais l'Oric-1 à l'époque... j'avais 12 ans !)

vbl a écrit :Question subsidiaire : j'utilise un portable avec un écran 16/10. Est-ce que cela n'impacte pas sur les problèmes que je rencontre ?

Non, ça n'a pas de rapport. Faire une mise en page "liquide" 100% CSS, compatible IE et Firefox, n'est pas si simple (en tout cas, il m'a fallu une journée entière pour faire cette démo).
Tu peux (essayer de) t'inspirer de ma démo pour ta mise en page, elle fonctionne sous FF et IE. Il m'arrive souvent de faire des gabarits de mise en page qui fonctionnent mal sous IE, auquel cas je reviens toujours à cette structure de base...

autant pour moi, je n'avais pas vu les fichiers css d'import à l'adresse http://fabiwan.kenobi.free.fr/css/layout/

J'avais enregistré ta page d'exemple et seuls ces fichiers ne sont pas enregistrés avec... Maintenant tout va bien

Donc, si notre ami veut s'inspirer de tes exemples, il faut qu'il récupére également ces fichiers css:
absolute-3col.css, absolute-left.css ,absolute-right.css ,float-3col.css ,float-left.css ,float-right.css

ça mériterait peut-être une archive Zip à télécharger

Qui sait

oui, sans doute, car l'intérêt de ton exemple (si,si, il y a un intérêt

), c'est que la personne puisse disposer de tous les fichiers pour les décortiquer..., les modifier etc...

http://fabiwan.kenobi.free.fr/zip/PageLayout.zip
En espérant que ça devienne utile pour quelqu'un !

Geckozone

tableau, DIV, 800*600, IE, lassitude

tableau, DIV, 800*600, IE, lassitude