tableau, DIV, 800*600, IE, lassitude
Modérateur : chinon37
C'est très utile !Kaze a écrit : http://fabiwan.kenobi.free.fr/zip/PageLayout.zip
En espérant que ça devienne utile pour quelqu'un !
Un grand merci, en attendant la super-extension.
-
- Arias
- Messages : 5
- Inscription : 27 nov. 2005, 11:34
Déjà avec ces 2 exemples simples, j'ai enfin compris certaines choses..... en lisant des docs aussi pour compléter...
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
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...
avec des positions absolute :
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
si quelqu'un à une explication
Kaze a écrit : 1. Structure HTML
La page utilise la structure suivante :Le conteneur principal "page" n'est peut-être pas indispensable, mais je le trouve pratique dans certains cas.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>
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 :J'ai donc scindé les feuilles de style ; par exemple, on obtient la disposition "float left, liquid" en important deux feuilles :
- menus : haut + gauche, haut + droite, ou trois colonnes ;
- positionnement : absolu ou flottant ;
- largeur : fixe (750px) ou liquide (ajustée à la taille de l'écran).
Ca revient à créer une feuille de style interne du type :
- 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.
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.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>
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>
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>
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;
}
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;
}
Mes premiers pas sous NVU (et autres outils modernes)
http://perso.wanadoo.fr/mimi64-essai
http://perso.wanadoo.fr/mimi64-essai
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!!!
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!!!
oups! ben oui, 0 c'est toujours 0, que ce soit des px ou des frites... Autant pour moi!
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Il y a une faute de syntaxe sur chaque ligne en rouge.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;
}
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;
Flore
Mac OSX + Nightly / Laptop Linux Mint + Nightly / Nightly sur Android
Mac OSX + Nightly / Laptop Linux Mint + Nightly / Nightly sur Android
Moi non plus ! Je ne suis pas très compétent en CSS. Où est calimo ?mimi64_mac a écrit :j'ai pas compris les nuances d'interprétation entre IE et le reste du monde...
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]
KompoZer lead dev
Ubuntu 10.04 Lucid Lynx — « L'erreur est humaine, mais vraiment foutre la merde nécessite le mot de passe root. »
Ubuntu 10.04 Lucid Lynx — « L'erreur est humaine, mais vraiment foutre la merde nécessite le mot de passe root. »
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é.
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é.
Kaze a écrit :Poste-nous l'adresse de ta page (ou son code source) STP
Feuille externe :<!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>
Je n'ai rien mis en ligne vu le résultat. Merci de ta patience./* 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;
}
Quelques remarques...
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.
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.
Il n'y a aucun élément avec l'id "conteneur" dans ta page. Cette règle ne sert à rien dans ton cas.
Code : Tout sélectionner
<div id="menu-droit" style="position: absolute; left: 8px; top: 8px;">
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">
URL Cleaner te permettra de corriger ça.
Code : Tout sélectionner
#conteneur { position: absolute;
width: 100%;
}
KompoZer lead dev
Ubuntu 10.04 Lucid Lynx — « L'erreur est humaine, mais vraiment foutre la merde nécessite le mot de passe root. »
Ubuntu 10.04 Lucid Lynx — « L'erreur est humaine, mais vraiment foutre la merde nécessite le mot de passe root. »
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 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.
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.
KompoZer lead dev
Ubuntu 10.04 Lucid Lynx — « L'erreur est humaine, mais vraiment foutre la merde nécessite le mot de passe root. »
Ubuntu 10.04 Lucid Lynx — « L'erreur est humaine, mais vraiment foutre la merde nécessite le mot de passe root. »
Qui est en ligne ?
Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité