Geckozone

Rapide et efficace

bravo

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

C'est très utile !
Un grand merci, en attendant la super-extension.

Déjà avec ces 2 exemples simples, j'ai enfin compris certaines choses..... en lisant des docs aussi pour compléter...

Kaze a écrit : 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.

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 !

Donc un grand merci Kaze, j'ai enfin fait une découpe de mes pages en bloc d'une maniere plus rigoureuse et plus structurée.

Sinon, c'est un peu la galere pour une mise en page qui marche sous safari/netscape et IE....
j'ai pas compris les nuances d'interprétation entre IE et le reste du monde.... donc pour une mise en page au poil pres entre des blocs et des paragraphes.... meme en donnant des positions absolutes IE ne veut pas interpréter les dimensions comme les autres....

et j'ai toujours du mal a lui faire une mise en page "liquide" surtout en hauteur, y a toujours un bloc qui dépasse....

par exemple si on imbrique des blocs comme ceci

Code : Tout sélectionner

<div> <p> <p></p> </p> </div>

les espacements entre div et p et p ne sont pas identique entre IE et les autres et impossible (pour moi) de les maitriser (???? donc si quelqu'un sait comment faire)

et si on essaye de coller des blocs entre eux dans le sens de la largeur.... IE ne comprend pas (??? ou l'interprete différement ?) les positions absolute

donc si je fais un résumé de ce que j'essaye de faire...

Code : Tout sélectionner

<div id="pageentiere">
    <div id="bloc1"> </div>
    <div id="bloc2"> </div>
    <div id="bloc3"> </div>
</div>

avec des positions absolute :

Code : Tout sélectionner

#pageentiere {
position:absolute;
top 0,
left :0;
width: 1024px;
height: 768px:
}

#bloc1 {
position:absolute;
top 100px,
left :0;
width: 130px;
}

#bloc2 {
position:absolute;
top 100px,
left :130px;
width: 500px;
}

#bloc3 {
position:absolute;
top 100px,
left :630px;
width: 150px;
}

marche bien sous safari/netscape
ne marche pas sous IE ?????

il y a du texte dans chaque bloc, avec un style défini par une class

Code : Tout sélectionner

.texte {
    texte-align:justify;
    font-size: 12pt;
    color: #3366ff;
}

si quelqu'un à une explication

normal que ça ne marche pas:
la feuille de style

aïe,aïe,aïe!
absence de : après top, absence d'unité px, mauvaise ponctuation.etc...
Tu n'as pas fait ça avec l'éditeur css? je sais qu'il n'est pas parfait, mais il ne m'a jamais fait ça!

Va dans l'éditeur css onglet boite et entres les coordonnées qui te conviennent, il y a de grandes chances pour que ça marche!!!

chinon37 a écrit :absence d'unité

Il me semble que dans le cas où l'on indique 0, les unités ne sont pas nécessaires (bien que Cascades les ajoute).

oups! ben oui, 0 c'est toujours 0, que ce soit des px ou des frites... Autant pour moi!

mimi64_mac a écrit : #pageentiere {
position:absolute;
top 0,
left :0;
width: 1024px;
height: 768px:
}

#bloc1 {
position:absolute;
top 100px,
left :0;
width: 130px;
}
"
#bloc2 {
position:absolute;
top 100px,
left :130px;
width: 500px;
}

#bloc3 {
position:absolute;
top 100px,
left :630px;
width: 150px;
}

Il y a une faute de syntaxe sur chaque ligne en rouge.
La bonne syntaxe est :
"élément" suivi de ":" (sans espace) puis une espace puis "argument" et enfin ";" pour clore...
ex :

Code : Tout sélectionner

top: 100px;

mimi64_mac a écrit :j'ai pas compris les nuances d'interprétation entre IE et le reste du monde...

Moi non plus ! Je ne suis pas très compétent en CSS. Où est calimo ?

C'est aussi pour ça que j'ai fait ces modèles de mise en page, pour avoir une base de travail fiable qui passe bien sous Firefox et IE.

Ce que je sais, c'est que le "box model" d'IE est différent de celui du W3C (qui est implémenté par les autres navigateurs). Ca devrait expliquer les différences que tu vois en imbriquant des blocs dans des <div> !
Avec IE6, tu devrais pouvoir obtenir une interprétation correcte du "box-model" par IE, à condition d'avoir le bon DOCTYPE dans ton document... je n'ai pas vraiment testé ça (j'essaierai de le faire), mais je crois que c'est fonctionnel.

Dans le code source de ton message, il y a pas mal d'erreurs, notamment pour les CSS (absence de ":" entre la propriété et la valeur, "," au lieu de ";" en fin de ligne, ...). Erreur de copier / coller ou erreur dans le code CSS de ta page ?
Peut-être que tu gagnerais à publier ta page pour qu'on puisse y jeter un coup d'oeil plus précis ?

[edit] Je viens de voir que Flore a déjà relevé tes erreurs de CSS [/edit]

Je reviens à la charge car, malgré vos explications et l'analyse des exemples, je n'arrive pas à positionner un DIV à droite
Si, avec l'éditeur CSS onglet boîte, je définis une règle avec largeur fixe, avec flottante droite, pourquoi mon calque rest t'il à gauche sur ma page.
Je reste très basique, désolé.

Poste-nous l'adresse de ta page (ou son code source) STP

Kaze a écrit :Poste-nous l'adresse de ta page (ou son code source) STP

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>float</title>
<link title="float" rel="stylesheet" href="file:///C:/Documents%20and%20Settings/Administrateur/Mes%20documents/V%20B%20L/Tests/PageLayout/float.css" type="text/css">
</head>
<body>
<br>
<div id="menu-droit" style="position: absolute; left: 8px; top: 8px;">Lorem ipsum
dolor
sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.</div>
</body>
</html>

Feuille externe :

/* Generated by CaScadeS, a stylesheet editor for Mozilla Composer */
#conteneur { position: absolute;
width: 100%;
}
#menu-droit { background-color: #ffffcc;
color: #000066;
width: 150px;
float: right;
}

Je n'ai rien mis en ligne vu le résultat. Merci de ta patience.

Quelques remarques...

Code : Tout sélectionner

<div id="menu-droit" style="position: absolute; left: 8px; top: 8px;">

L'attribut style="position: absolute; left: 8px; top: 8px;" prend le pas sur la règle que tu définis dans la feuille de style. En l'occurence, ça te place donc ton menu en haut à gauche. Supprime cet attribut, tout devrait rentrer dans l'ordre.

PS: Nvu crée cet attribut "style" avec le positionnement absolu quand on clique sur l'épingle dans la barre d'outils.

Code : Tout sélectionner

<link title="float" rel="stylesheet" href="file:///C:/Documents%20and%20Settings/Administrateur/Mes%20documents/V%20B%20L/Tests/PageLayout/float.css" type="text/css">

Ta feuille de style externe est liée avec une adresse absolue. Tant que la page est sur ton disque ça ne pose pas de problème, par contre tu ne pourras pas mettre ta page en ligne comme ça.
URL Cleaner te permettra de corriger ça.

Code : Tout sélectionner

#conteneur { position: absolute;
width: 100%;
}

Il n'y a aucun élément avec l'id "conteneur" dans ta page. Cette règle ne sert à rien dans ton cas.

C'était bien ça ! Mille mercis.
Il s'agissait d'un test rapide et je n'avais pas "relativisé" mes liens avec la remarquable extension adhoc.

Par contre, comment éviter que Nvu me mette systématiquement cette foutue ligne de style ? Je trouve bien pratique d'épingler, mais ça me casse les pieds de devoir supprimer ça à la main ensuite.

Il n'y a pas vraiment de moyen actuellement.

Si tu veux utiliser la fonction "épingle", il te faudra supprimer l'attribut "style" à la main, par exemple avec un clic droit sur le <div> dans la barre d'état, puis "propriétés avancées" : clic sur "style", "supprimer".

Sinon, tu peux créer un conteneur générique (vide) et le remplir avec ton menu, puis lui attribuer un identifiant ("id") qui corresponde à ta feuille de style.

Punaise, c'est une punaise...
*Grand rire hystérique*

Geckozone

tableau, DIV, 800*600, IE, lassitude