IPB

Bienvenue invité ( Connexion | Inscription )

 
Reply to this topicStart new topic
> [Résolu] Besoin d'aide pour une page de site en HTML avec CSS, le div pied de page pose problème
Options
Andrea
posté 31 Mar 2010, 14:19
Message #1


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 759
Inscrit : 30 Nov 2003
Lieu : 91
Membre no 12 101



Bonjour à tous,

Je suis en train de refaire le site d'une association où je suis membre. J'ai bâti une page index et une page de base, vec une feuille de CSS. J'ai fait les différents div de la page, notamment un pour le pied page. La page tient, mais le pied page, (appDiv6renomé) soit il monte en haut de toute la page, soit, comme actuellement, ne bouge pas avec le div de texte page qui précède, selon le taille de ce dernier.

Qui peut m'aider pour résoudre ça?? Je dois, par la suite, transformer cette page en Modèle et l'appliquer aux autres pages.

Je travaille sur Dreamweaver CS4. La page est… adresse supprimée, devenue inutile.

Merci à vous,

Andréa

Ce message a été modifié par Andrea - 22 Apr 2010, 19:28.


--------------------
Site perso
iMac 27 pouces i5 + un écran Dell 26 pouces. OS: Maverick (10.9.4). Scan: Epson perfection V600 Photo. Imprimante laser couleur : Konica-Minolta 2550 DN, en réseau Ethernet, avec un iMac 27 i5. iPhone 5, iPad 4 retina.
Go to the top of the page
 
+Quote Post
No6
posté 31 Mar 2010, 14:54
Message #2


Oui ?
*****

Groupe : Membres
Messages : 3 877
Inscrit : 24 Jun 2003
Lieu : BZH
Membre no 8 224



http://www.cssplay.co.uk/layouts/layout.html


--------------------
"Je sais que vous croyez comprendre ce que vous pensez que j'ai dit, mais je ne suis pas sûr que vous réalisiez que ce que vous avez entendu n'est pas ce que je pense."
(Alan Greenspan)
Go to the top of the page
 
+Quote Post
-eliot-
posté 31 Mar 2010, 14:58
Message #3


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 11 108
Inscrit : 25 Oct 2003
Membre no 10 802



j'ai eu droit à un "Safari ne parvient pas à ouvrir la page." ...

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
sleep.gif je reste zen ... et clic ...


--------------------
même une horloge cassée donne l'heure "exacte" deux fois par jour ...
Go to the top of the page
 
+Quote Post
Nicosa
posté 31 Mar 2010, 14:59
Message #4


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 2 966
Inscrit : 2 May 2007
Lieu : Région Parisienne (91)
Membre no 85 838



Hello,
Citation (Andrea @ 31 Mar 2010, 15:19) *
La page est à cette adresse.
Ton lien ne marche pas.

C'est celle là ta page ?


--------------------
Whoever fights monsters should see to it that in the process he does not become a monster;
And when you look long into an abyss, the abyss also looks into you.
- Friedrich Nietzsche -
(issue de la préface de la novélisation "The Abyss" d'Orson Scott Card depuis le film eponyme)
-------------------------------------------------------------------------------------------------------------------------------
MacBook Pro 15"(mid2007) , Core2Duo 2.2GHz, 2x2Go de RAM, SSD Crucial M225 256Go, sous OSX 10.6.7 Snow Leopard
[refurb] MacMini Core2Duo 2.0GHz, 1Go de RAM, DD 120Go 5400rpm, sous OSX 10.6.3 Snow Lepard + Mighty Mouse BT + Clavier BT "Alu"
Go to the top of the page
 
+Quote Post
Andrea
posté 31 Mar 2010, 15:12
Message #5


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 759
Inscrit : 30 Nov 2003
Lieu : 91
Membre no 12 101



Excusez-moi, mes doigts ont fouchés ! C'est réparé voici la page.

Andréa

PS, Merci pour No 6 et son lien !

Citation (Nicosa @ 31 Mar 2010, 15:59) *
Hello,
C'est celle là ta page ?


Oui, merci, tu es perspicace ! smile.gif

Andréa

Mode edit: j'ai suprimé le lien vers la page, devenu inutile.

Ce message a été modifié par Andrea - 22 Apr 2010, 19:30.


--------------------
Site perso
iMac 27 pouces i5 + un écran Dell 26 pouces. OS: Maverick (10.9.4). Scan: Epson perfection V600 Photo. Imprimante laser couleur : Konica-Minolta 2550 DN, en réseau Ethernet, avec un iMac 27 i5. iPhone 5, iPad 4 retina.
Go to the top of the page
 
+Quote Post
No6
posté 31 Mar 2010, 18:35
Message #6


Oui ?
*****

Groupe : Membres
Messages : 3 877
Inscrit : 24 Jun 2003
Lieu : BZH
Membre no 8 224



Salut Andréa,

j'ai pas eu trop de temps tout à l'heure, et j'ai pas vraiment compris ton pb.

Effectivement ça cloche au niveau du pied de page, mais quel résultat vise tu ?

Tu veux qu'il se retrouve a la suite de tout ce qu'il y a sur la page (classiquement comme pour le site de macbidouille) ?
ou qu'il soit obligatoirement placé en bas de la fenêtre, comme sur l'exemple que je t'ai fourni ? ( http://www.cssplay.co.uk/layouts/layout.html )
ou quelque chose comme ça : http://www.cssplay.co.uk/layouts/body2.html ?
ou autre ???

petite remarque, il y a un target="blanc" au lieu de target="blank", avec un K

Sinon tu utilise le javascript pour faire des menus déroulants ???





--------------------
"Je sais que vous croyez comprendre ce que vous pensez que j'ai dit, mais je ne suis pas sûr que vous réalisiez que ce que vous avez entendu n'est pas ce que je pense."
(Alan Greenspan)
Go to the top of the page
 
+Quote Post
Andrea
posté 1 Apr 2010, 08:25
Message #7


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 759
Inscrit : 30 Nov 2003
Lieu : 91
Membre no 12 101



Salut No6 wink.gif
Merci pour tes réponses. Hier soir je n'ai pas pu écrire pour dire ce que je veux, j'ai dû partir à une réunion.

Alors: pour le pied page, je veux ce que tu me montres dans le CSSPlay. C’est-à-dire qu'il soit juste au-dessous du texte (dont la longueur change sur chaque page). J'ai regardé en vitesse le site CSSPlay (ton lien) mais je n'ai pas bien compris ce que je dois faire (mon anglais n'est pas très riche). J'ai compris que je peux utiliser ces codes, si je demande. Mais j'ai également vu que dans ce cas je dois réadapter les codes (couleurs, emplacements) à ma sauce. Ce qui est un gros boulot. Par contre, vous me dites si j'ai raison ou pas, il y a un attribut "clair" qui doit entrer en jeux. Sauf que je ne sais pas où le mettre dans ma page…

Pour la faute de frappe "blanc" ou "blank", merci de me prévenir, je vais corriger.

Les menus sont effectivement les éléments spry (qui utilise je java script). Ça marche, sauf que les éléments du menu horizontal restent ouverts, même si on clique ailleurs, je ne sais pas pourquoi…

Merci pour vos aides, j'attends vos conseils pour finir cette page de base et aller plus loin.

Bonne journée à vous,

Andréa


--------------------
Site perso
iMac 27 pouces i5 + un écran Dell 26 pouces. OS: Maverick (10.9.4). Scan: Epson perfection V600 Photo. Imprimante laser couleur : Konica-Minolta 2550 DN, en réseau Ethernet, avec un iMac 27 i5. iPhone 5, iPad 4 retina.
Go to the top of the page
 
+Quote Post
No6
posté 1 Apr 2010, 15:58
Message #8


Oui ?
*****

Groupe : Membres
Messages : 3 877
Inscrit : 24 Jun 2003
Lieu : BZH
Membre no 8 224



heu..

Dans CSS play le "pied de page" n'est pas seulement en bas du texte, il est surtout collé en bas de la fenêtre du navigateur.

J'ai pas trop le temps de regarder ton code, mais à priori tu doit avoir le div du "pied de page" placé à l'intérieur du div du "corps de texte, et c'est ça qui coince.

Sinon pour t'aider tout de même ut devrai utiliser un template de page déjà tout pensé bien comme ceux de CSS play ou autre.

Pour le site de STU (css play) l'anglais n'est pas indispensable, perso je regarde surtout le code de la page en HTML et fait mes propres analyses.

Pour t'aider à faire du code HTML propre ne néglige pas d'utiliser FireBug, ca fait gagner pas mal de temps, je te passe aussi les test de validations du W3C.
https://addons.mozilla.org/fr/firefox/addon/1843
http://extensions.geckozone.org/FireBug

pour les templates :
ironmyers : http://layouts.ironmyers.com/ ( en hommage à eric Meyer ?) qui te permet de tester en ligne
sinon tu a tout un choix de sites : http://icp.ge.ch/sem/cms-spip/spip.php?article636

L'un des derniers, intéressant car il est orienté compatibilité iPhone : http://matthewjamestaylor.com/blog/perfect...-liquid-layouts

Pour finir, pour les menu je n'utilise pas de Javascript, il y a un choix impressionnant de menu fait en css,
celui-ci est proche de ton site : http://www.cssplay.co.uk/menus/dd_valid.html

Et dernière remarque utilise plutôt des noms classiques pour les ID de tes divs, comme par exemple "menu", sauf si tu veux compliquer la vie des moteurs de recherche wink.gif


--------------------
"Je sais que vous croyez comprendre ce que vous pensez que j'ai dit, mais je ne suis pas sûr que vous réalisiez que ce que vous avez entendu n'est pas ce que je pense."
(Alan Greenspan)
Go to the top of the page
 
+Quote Post
Andrea
posté 1 Apr 2010, 16:32
Message #9


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 759
Inscrit : 30 Nov 2003
Lieu : 91
Membre no 12 101



Merci bien pour les liens et pour les conseils. Je vais explorer tout ça. En réalité, j'ai révé de pouvoir rafistoler mon travail déjà fait et ne pas tout recommencer. ohmy.gif

Il me faudrait quelqu'un qui a un peu de temps à travailler avec moi. Un stagiaire ? Mais je n'aime pas exploiter les stagiaires. sad.gif

A bientôt !

Andréa


--------------------
Site perso
iMac 27 pouces i5 + un écran Dell 26 pouces. OS: Maverick (10.9.4). Scan: Epson perfection V600 Photo. Imprimante laser couleur : Konica-Minolta 2550 DN, en réseau Ethernet, avec un iMac 27 i5. iPhone 5, iPad 4 retina.
Go to the top of the page
 
+Quote Post
No6
posté 1 Apr 2010, 18:32
Message #10


Oui ?
*****

Groupe : Membres
Messages : 3 877
Inscrit : 24 Jun 2003
Lieu : BZH
Membre no 8 224



Un stagiaire pourquoi pas, mais il va galérer si tu reste aussi imprécise... ( alors, ce pied de page, en bas de la fenetre ou non ?)

sinon, j'ai vu qu'il y avait pas mal de liens morts, alors j'ai retrouvé l'une des maquettes possible ici : http://www.savio.no/artikler/a/336/the-onl...layout-you-need
soit encore: http://www.savio.no/examples/three-column-layout-2.asp

je l'ai remanié pour toi :
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>test1 </title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<style type="text/css">

* /*Set's border, padding and margin to 0 for all values*/
{ padding: 0; margin: 0; border: 0; }

body, html {
color: #000;
font-family: Verdana, Arial, Tahoma, sans-serif;
background-color: #eee;
text-align: center; /*** Centers the design in old IE versions ***/
}
body { font-size: 70%; }

p {padding: 7px 0 7px 0;}

a { color: #000099; }
a:hover { color: #0000FF; text-decoration: none; }

h1, h2, h3, h4, h5 {
font-weight: bold;
padding-bottom: 5px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.3em;
}
h1 a, #header h2{
color: #fff;
}
.clear { clear: both; }
#mainContainer {
width: 760px;
margin: 0 auto; /*** Centers the design ***/
min-height: 300px;
background: #add8e6;
text-align: left; /*** Because we centered the text in body we have to move the text back to left aligning ***/
}
* html #mainContainer {
height: 300px; /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/
}
/**************************
HEADER
**************************/
#header {
background: #000099;
padding: 10px
}
/**************************
CONTENT AND COLUMNS
**************************/
.outer {
margin-top: 50px; /*** Make som space for our top menu ***/
padding-left: 165px;
}
* html .outer {
/*** No need for hacking IE on this layout ***/
}
.inner {
width: 595px; /*** This width is for non-IE browsers. Mozilla makes this necessary. Be sure to check your layout in different browsers if you changes this value. Especially IE7 seems to create a horisontal scroll if this value is set too large ***/
}
* html .inner {
width: 100%;
}
/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout.
***/
.float-wrap {
float: left;
width: 760px;
margin-left: -165px; /*** Same length as .outer padding-left but with negative value ***/
}
* html .float-wrap {
/*** No need for hacking IE on this layout ***/
}
#content {
float: right;
width: 600px;
background: #fff;
}
* html #content {
position: relative; /*** IE needs this ***/
}
.contentWrap {
padding: 5px;
}
.contentWrap ol, .contentWrap ul {
margin: 3px 0 5px 35px;
}
.contentWrap li {
padding-bottom: 2px;
}
/**************************
LEFT COLUMN
**************************/
/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left,
div.left is carried over into the proper position.
***/
#left {
float: left;
width: 150px;
background: #fcc;
min-height: 250px;
padding: 5px;
}
* html #left {
position: relative; /*** IE needs this ***/
height: 250px;
}
#left ul {
list-style: none;
padding-bottom: 4px;
}
#left li {
padding-bottom: 2px;
}
/*************************
RIGHT COLUMN
**************************/
#right {
margin: -50px 0 0 -760px; /*** Move the right column so it takes the positon as a top menu ***/
float: left;
width: 750px;
background: #cfc;
padding: 5px;
height: 40px;
}
* html #right {
position: relative; /*** IE needs this ***/
}
#right ul {
list-style: none;
}
#right li {
display: inline;
padding-right: 15px;
}
/**************************
FOOTER
**************************/
#footer {
width: 760px;
margin: 0 auto;
text-align: center;
background-color: yellow;
}
</style>
</head>
<body>

<div id="mainContainer">

<div id="header">
<h1>entete H1</h1>
<h2>entete H2</h2>
</div>

<div class="outer">

<div class="inner">

<div class="float-wrap">

<div id="content">

<div class="contentWrap">

<h2>1er élément h2</h2>
<p>paragraphe 1</p>
<p>paragraphe 2</p>
<p>paragraphe 3</p>

<h3>1er élément h3</h3>
<p>paragraphe 1</p>
<p>paragraphe 2</p>
<p>paragraphe 3</p>

<h3>2eme élément h3</h3>
<p>paragraphe 1</p>
<p>paragraphe 2</p>
<p>paragraphe 3</p>

</div> <!-- end contentWrap div -->

</div> <!-- end content div -->

<div id="left">
<h3>partie gauche H3</h3>
<ul>
<li><a href="#">Left menu 1</a></li>
<li><a href="#">Left menu 2</a></li>
<li><a href="#">Left menu 3</a></li>
</ul>
</div> <!-- end left div -->

<div class="clear"></div>

</div> <!-- end float-wrap div -->

<div id="right">
<h3>partie menu suppérieur</h3>
<ul>
<li><a href="#">Right menu 1</a></li>
<li><a href="#">Right menu 2</a></li>
<li><a href="#">Right menu 3</a></li>
</ul>
</div> <!-- end right div -->

<div class="clear"></div>

</div> <!-- end inner div -->

</div> <!-- end float-wrap div -->

</div> <!-- end outer div -->

<div id="footer">
<p>VOICI LE PIED DE PAGE</p>
</div>

</body>
</html>


tu remarquera que le contenu texte et le menu de gauche sont dans un même div.


--------------------
"Je sais que vous croyez comprendre ce que vous pensez que j'ai dit, mais je ne suis pas sûr que vous réalisiez que ce que vous avez entendu n'est pas ce que je pense."
(Alan Greenspan)
Go to the top of the page
 
+Quote Post
Andrea
posté 1 Apr 2010, 20:02
Message #11


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 759
Inscrit : 30 Nov 2003
Lieu : 91
Membre no 12 101



Salut,

Citation
Un stagiaire pourquoi pas, mais il va galérer si tu reste aussi imprécise... ( alors, ce pied de page, en bas de la fenetre ou non ?)


J'ai peut-être mal répondu à la question, mais je ne suis pas indécise du tout. Imprécise, peut-être?: Je vais essayer d'être plus précise, probablement c'est le vocabulaire qui me manque?:

je veux que le pied de page soit à la suite du texte de la page, "collé" à celui-ci. il ne doit pas être visible (persistant) en bas de l'écran tous les temps. Donc il doit prendre sa place à la suite du div "texte page". Si celui-ci fait 50 lignes il doit être en 51ème ligne, si le texte fait 250 lignes, alors en 251ème ligne, (un peu comme ici, dans le forum : pour voir le pied de page on doit descendre, avec l'acenseur. Mais il doit être indépendant du div texte de la page. Il doit avoir la même couleur de fond que la page, (vert) et encadré par le beige des textes avec 2px, solide.

Il doit être indépendant du div textes de la page, car il va enter dans le Modèle qui va être appliqué à toutes les pages à venir. Le but est que la personne qui "actualise" régulièrement le site de l'association puisse modifier le menu accordéon (infos générales) et le pied de page dans le Modèle et ça répercute sur toutes les autres pages.

Je conserverais le menus spy, surtout le menu accordéon à gauche qui permet de visualiser ce que le visiteur veut.

Voici en gros le projet. Je dois finaliser cette page de base et ensuite créer le modèle.

Suis-je assez explicite, là??

Je reviens à un de tes conseil sur le nom des div. Oui, je vais leur donner les noms "corrects". Là c'est juste pour que je me retrouve que j'ai créé ses noms. Pense-bête en quelque sorte.

Citation
sinon, j'ai vu qu'il y avait pas mal de liens morts, alors j'ai retrouvé l'une des maquettes possible ici : http://www.savio.no/artikler/a/336/the-onl...layout-you-need
soit encore?: http://www.savio.no/examples/three-column-layout-2.asp

je l'ai remanié pour toi :


Merci bien, je vais regarder ça demain à tête reposée.

Merci encore et bonne nuit !

Andréa


--------------------
Site perso
iMac 27 pouces i5 + un écran Dell 26 pouces. OS: Maverick (10.9.4). Scan: Epson perfection V600 Photo. Imprimante laser couleur : Konica-Minolta 2550 DN, en réseau Ethernet, avec un iMac 27 i5. iPhone 5, iPad 4 retina.
Go to the top of the page
 
+Quote Post
Andrea
posté 4 Apr 2010, 14:14
Message #12


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 759
Inscrit : 30 Nov 2003
Lieu : 91
Membre no 12 101



Bonjour,

Je reviens un peu plus tard que je ne l'ai pensé.

Merci No6 pour les codes. C'est très gentil de ta part ! Je les ai examinés, ainsi que les différents modèles proposés et d'autres, trouvés par moi-même. J'ai compilé une page avec tout ça. Pour le moment ça l'air d'être ce que je veux.

J'ai appris pas mal de choses et je vous en remercie. Notamment l'utilisation d'un élément "clair". Je ne sais pas vraiment comment ça marche, mais il force le div pied page à rester à sa place. (Si j'ai bien compris wink.gif)

Il me reste l'étape suivant : transformer la page de base obtenue en "modèle" et l'appliquer aux autres pages. Espérons que je vais réussir à le faire.

Merci à vous !

Andréa

Ce message a été modifié par Andrea - 4 Apr 2010, 21:09.


--------------------
Site perso
iMac 27 pouces i5 + un écran Dell 26 pouces. OS: Maverick (10.9.4). Scan: Epson perfection V600 Photo. Imprimante laser couleur : Konica-Minolta 2550 DN, en réseau Ethernet, avec un iMac 27 i5. iPhone 5, iPad 4 retina.
Go to the top of the page
 
+Quote Post
No6
posté 5 Apr 2010, 13:27
Message #13


Oui ?
*****

Groupe : Membres
Messages : 3 877
Inscrit : 24 Jun 2003
Lieu : BZH
Membre no 8 224



Citation (Andrea @ 4 Apr 2010, 15:14) *
J'ai appris pas mal de choses et je vous en remercie. Notamment l'utilisation d'un élément "clair" "clear". Je ne sais pas vraiment comment ça marche, mais il force le div pied page à rester à sa place. (Si j'ai bien compris wink.gif)



Salut Andréa,

le « clear: both; », c'est un peu le Graal du CSS.

Pour en arriver à inventer cet élément syntaxique qui peut sembler étrange, il faut penser aux blocs « div ». et à la manière de les arranger ensemble sur un affichage.

Par défaut ils se placent les un sous les autres.
En « float », il se placent cote à cote, un peu comme les mots; à la différence qu'ils peuvent avoir des hauteurs différentes.

- les mots se placent cote à cote en suivant une ligne de base pour les lettres;
- les blocs eux se placent cote à cote par leurs sommets.
==> Auquel cas le retour automatique « à la ligne » ne peut se faire correctement, un bloc plus grand en hauteur et placé au milieu de ta « ligne » pouvant faire obstruction à un "retour complet".

Pour résoudre le problème du « retour jusqu'à la marge en dessous de tous les blocs (donc du plus haut), on appose la propriété « clear » au bloc désiré.

« clear : left » si on utilise un empilement par la gauche, ( float : left )
ou
« clear : right » si l'empilement se fait par la droite ( float : right  )

Ou encore « clear : both » pour les deux, si ta page comporte des empilements à droite et à gauche, ou si tu à la flème de savoir comment sont fichus les empilements sur ta page.

Avoir un bloc vide, avec juste la propriété « clear:both » est une commodité souvent utilisée.


Pour la petite histoire, le terme « div » est une invention M$, pour rendre les sites incompatibles avec Netscape; qui lui utilisait le terme «  layout » bien avant que M$ ne s'intéresse au Web.

De guerre lasse Netscape à renommé sont LAYOUT en DIV, et M$, n'arrivant pas par ce moyen à faire disparaître ses concurrents, commence à respecter un peu mieux la syntaxe du W3C.

Juste retour des choses, LAYOUT est un bon terme clé sur Google pour retrouver toutes les maquettes CCS de mise en page pour les sites internet. cool.gif




--------------------
"Je sais que vous croyez comprendre ce que vous pensez que j'ai dit, mais je ne suis pas sûr que vous réalisiez que ce que vous avez entendu n'est pas ce que je pense."
(Alan Greenspan)
Go to the top of the page
 
+Quote Post
Andrea
posté 5 Apr 2010, 16:07
Message #14


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 759
Inscrit : 30 Nov 2003
Lieu : 91
Membre no 12 101



Salut?!

Merci pour tes explications. Je vais archiver ton texte dans mes tutos, parce que je le trouve très compréhensible et bien dit. Tu es prof??

Maintenant, la nouvelle page est sur le serveur test. (Il ne faut pas regarder la page index, je vais le refaire.) Dans cette nouvelle page tout va bien, je dois juste allonger le menu horizontal pour avoir la même largeur que le cadre au dessus.

Mon interrogation du jour?: si on veut utiliser des puces dans une liste (li), autres que le rond et le carré, prévus par Dreamweaver, comment faire?? Est-ce possible d'utiliser un caractère spécial? d'une police ?

Je cherche, je cherche…

Andréa


--------------------
Site perso
iMac 27 pouces i5 + un écran Dell 26 pouces. OS: Maverick (10.9.4). Scan: Epson perfection V600 Photo. Imprimante laser couleur : Konica-Minolta 2550 DN, en réseau Ethernet, avec un iMac 27 i5. iPhone 5, iPad 4 retina.
Go to the top of the page
 
+Quote Post
audionuma
posté 5 Apr 2010, 18:25
Message #15


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 1 942
Inscrit : 27 Apr 2004
Membre no 18 176



Il y a un exemple ici :
http://css.mammouthland.net/liste-a-puces-...e-ul-li-css.php


--------------------
Membre du club des AIPBP (Anciens Inscrits Pas Beaucoup de Posts) Voir la liste
Go to the top of the page
 
+Quote Post
Andrea
posté 6 Apr 2010, 08:41
Message #16


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 759
Inscrit : 30 Nov 2003
Lieu : 91
Membre no 12 101



Merci pour le lien.

En cherchant hier, j'ai trouvé le même, mais mon interrogation reste en partie valable. Dans nos documents (de mon association) nous utilisons des puces de la police Wingdings, par exemple. C'est très simple dans Word de les mettre. Dans un des sites, j'ai lu qu'il est possible de les utiliser en HTML, à condition de mettre son code Hex. (?) Il y avait même une liste de code, mais pas la flèche que je cherche. Je ne trouve pas ses codes dans l'affichage des polices dans le Mac, non plus. Dans Livre de polices, peut-être?? Je vais voir.

Et autre chose que nous lisons dans ton lien?: "list-style-image : url(puce.gif);" Je comprends la démarche, mais comment préparer ça?? Car si j'ai bien compris, il faut disposer d'une puce.gif. Mais quelle est sa provenance??

Voilà, voilou où j'en suis de mes recherches wink.gif Je continue.

Andréa


--------------------
Site perso
iMac 27 pouces i5 + un écran Dell 26 pouces. OS: Maverick (10.9.4). Scan: Epson perfection V600 Photo. Imprimante laser couleur : Konica-Minolta 2550 DN, en réseau Ethernet, avec un iMac 27 i5. iPhone 5, iPad 4 retina.
Go to the top of the page
 
+Quote Post
audionuma
posté 6 Apr 2010, 11:57
Message #17


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 1 942
Inscrit : 27 Apr 2004
Membre no 18 176



Bonjour,
le lien que je t'ai indiqué présente une solution à base d'images (puce.gif est une image).
Une possibilité est de créer un fichier gif représentant la flèche qui te plaît dans ta police.
Il faut juste un logiciel graphique de base, insérer la flèche en mode texte, recadrer à ton goût et exporter en gif.
Cela me paraît plus simple que d'essayer d'inclure une police dans ta page web (je ne sais même pas si c'est possible).

Bon courage,


--------------------
Membre du club des AIPBP (Anciens Inscrits Pas Beaucoup de Posts) Voir la liste
Go to the top of the page
 
+Quote Post
No6
posté 6 Apr 2010, 18:10
Message #18


Oui ?
*****

Groupe : Membres
Messages : 3 877
Inscrit : 24 Jun 2003
Lieu : BZH
Membre no 8 224



Sur internet, chaque « butineur Internet » compose avec les polices présentes sur sa machine hôte.

Si la police Wingdings est bien présente sur ton Mac, ce n'est pas forcément le cas d'un visiteur lambda de ton site, qui risque lui, à plus de 90% être sous Windows avec IE.

Ceci dit Windings est une police suffisamment courante pour avoir une chance de la retrouver sur à peu près n'importe quelle système.

Avec les puces pour les listes tu risque de rencontrer des problèmes pénibles.
Non seulement les approches des caractères peuvent être différentes pour la même police sur 2 systèmes différents, mais l'interpréteur CSS peu donner des différences catastrophiques ( entre Safari et FireFox par exemple).

Une certaine harmonisation commence à voir le jour, mais je me souviens de problèmes pénibles avec les listes et leurs puces.
Prendre une solution éprouvée comme celle que te propose audionuma évite bien des déboires.

Bref, vérifie le résultat sur les différents « butineurs » ( le mot commence à me courir sur le haricot); au besoin utilise BrowserShot

Puisqu'on est dans les liens, une bonne pratique est de vérifier avant que ton site est syntaxiquement correct avec le validateur du w3C :

Dernier point existentiel, d'où viennent les puces ???
Plus sérieusement, en utilisant google image avec l'option petites images, tu devrais te faire une importante collection de puce en tout genre ( un simple drag & drop de l'image choisie et tu la télécharge sur ton poste wink.gif )

PS: depuis l'avènement du CSS 3, il est maintenant possible de joindre une police avec un page internet, un début d'explication ici : http://forum.macbidouille.com/index.php?sh...=323380&hl=

Ce message a été modifié par No6 - 6 Apr 2010, 18:18.


--------------------
"Je sais que vous croyez comprendre ce que vous pensez que j'ai dit, mais je ne suis pas sûr que vous réalisiez que ce que vous avez entendu n'est pas ce que je pense."
(Alan Greenspan)
Go to the top of the page
 
+Quote Post
Andrea
posté 6 Apr 2010, 19:55
Message #19


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 759
Inscrit : 30 Nov 2003
Lieu : 91
Membre no 12 101



Merci encore pour toutes ces explications. Oui, je n'ignore pas que les polices utilisées doivent être présentes sur l'ordi des visiteurs. La validation des codes ne m'est pas inconnue, non plus. Chaque page de mon site perso est validée par W3C. J'en étais assez fière à l'époque de sa construction, car c'était la première fois que je me suis aventurée dans ce domaine de faire un site. Avec vidéos, photos, récits en plus…

Merci également pour les liens vers ces nombreuses puces dans Google image. Je suis impressionnée. Pour le moment, je ne vais pas compliquer ma vie, je vais utiliser les cercles et rond lambda… dans nos listes.

Et un grand merci pour le lien pour savoir d'où viennent les puces?! biggrin.gif biggrin.gif biggrin.gif

Par contre, si je peux, j'ai une petite question (encore rolleyes.gif). J'ai créé un div "menu horizontal" après le div "header" à l'intérieur du div "contenair", idem en largeur. Le menu spray horizontal est là dans. Il a 5 onglets. J'aimerais centrer cette suite d'onglets horizontalement dans le div et je n'arrive pas. Une idée comment faire?? C'est compliqué, car il y a une feuille de CSS pour la page et pour le menu spry.

Merci à vous, j'arrive au bout petit à petit?!

Andréa


--------------------
Site perso
iMac 27 pouces i5 + un écran Dell 26 pouces. OS: Maverick (10.9.4). Scan: Epson perfection V600 Photo. Imprimante laser couleur : Konica-Minolta 2550 DN, en réseau Ethernet, avec un iMac 27 i5. iPhone 5, iPad 4 retina.
Go to the top of the page
 
+Quote Post
No6
posté 7 Apr 2010, 10:51
Message #20


Oui ?
*****

Groupe : Membres
Messages : 3 877
Inscrit : 24 Jun 2003
Lieu : BZH
Membre no 8 224



IL y a des "milliers"de menu sur le site de Stu cité plus haut, et au moins une 50-taine de menus drop down, centrés, justifiés à droite, à gauche, etc...
Tous en CSS et testés sur tout les navigateurs. les sources sont tous accessibles, il n'a qu'a changer les couleurs ou les polices, ou les images de fond ou de construction....

http://www.cssplay.co.uk/menus/


--------------------
"Je sais que vous croyez comprendre ce que vous pensez que j'ai dit, mais je ne suis pas sûr que vous réalisiez que ce que vous avez entendu n'est pas ce que je pense."
(Alan Greenspan)
Go to the top of the page
 
+Quote Post
Andrea
posté 16 Apr 2010, 09:12
Message #21


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 759
Inscrit : 30 Nov 2003
Lieu : 91
Membre no 12 101



Bonjour à tous,

Je reviens pour dire que j'ai (presque) fini le site de mon association. Ça l'air de marcher et j'ai passé à la vérification des pages. W3C détecte un problème et refuse de valider la page. La partie incriminée, dans le menu Accordéon Spry, est?:

<div class="AccordionPanelContent">
<div height="250px" padding="5px">
<p class="AccordionPanelContent">Adresse postale&nbsp;:<br>

La raison que dans un div, on ne peut pas utiliser ni "height", ni "padding".

J'ai demandé à corriger les codes avec Tildy (utilitaire chez W3C). Le résultat marche, sauf que si je refais la même correction dans mon document à moi, le menu accordéon ne marche plus?! Tous les éléments restent ouverts.

J'ai mis en PJ les deux codes. Que dois-je faire pour rester dans le respect des règles et ne pas abimer mon menu??

Fichier joint  codes_div_menu.rtf ( 7.81 Ko ) Nombre de téléchargements : 1


Autre petite chose que Tidy a corrigé, ce sont les liens vers des fichiers comme les CSS externes. Dans Dreamveawer, quand je les attache au document, il met?: href="../nomdefichier"> Tidy a enlevé les points et le slash. Mais si je les enlève dans mon document à moi, le fichier CSS n'est plus connecté. Et curieusement, dans le fichier fait par Tidy, il l'est?! Incompréhensible pour moi?!

Au secours?! Merci,

Andréa


--------------------
Site perso
iMac 27 pouces i5 + un écran Dell 26 pouces. OS: Maverick (10.9.4). Scan: Epson perfection V600 Photo. Imprimante laser couleur : Konica-Minolta 2550 DN, en réseau Ethernet, avec un iMac 27 i5. iPhone 5, iPad 4 retina.
Go to the top of the page
 
+Quote Post
No6
posté 16 Apr 2010, 09:49
Message #22


Oui ?
*****

Groupe : Membres
Messages : 3 877
Inscrit : 24 Jun 2003
Lieu : BZH
Membre no 8 224



Salut Andrea, smile.gif

effectivement;
si mes souvenirs sont bons, depuis html4, le seul attribut qui puisse subsister dans une balise html est style.

soit dans ton cas :
Code
<div style="height:250px; padding:5px">


mais l'idée principale ce sera toujours de séparer la couche présentation d'une page de la couche "données" d'une page.

comme ça, le moteur du navigateur compose d'abord sa mise en page avant de placer les informations dedans. si il trouve des info de mise en page au milieu de la partie "données", cela peu l'obliger à reconsidérer l'ensemble de sa mise en page, et parfois "f**tre le b*rdel".

(et c'est aussi pour ça que Dreamveawer est qualifié de dinosaure)

Donc le mieux, ce serait tout de même les infos de style dans le header de ta page...

Quand à Tidy, les corrections qu'il fait sont des plus sommaires, voir erronées, il y a peut-être une version améliorée par un codeur quelque part sur la toile, mais j'en doute...

Ce message a été modifié par No6 - 16 Apr 2010, 09:51.


--------------------
"Je sais que vous croyez comprendre ce que vous pensez que j'ai dit, mais je ne suis pas sûr que vous réalisiez que ce que vous avez entendu n'est pas ce que je pense."
(Alan Greenspan)
Go to the top of the page
 
+Quote Post
Andrea
posté 16 Apr 2010, 10:19
Message #23


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 759
Inscrit : 30 Nov 2003
Lieu : 91
Membre no 12 101



Merci, mais malheureusement le style n'est pas admis non plus. Le vérificateur dit que "style n'est pas admis dans un div".

Définir le style dans le header de la page, je suis d'accord. La chose qui me pose problème, comment appliquer ce style juste là?? Car là il y a un div (sans nom) dans un div, un des deux définis dans le CSS de Menu Spry. Comprends-moi bien?: ce que je ne sais pas, comment rédiger ses quelques lignes… Dès que la hauteur de ce contenu n'est pas définie là, le menu ne marche plus, malgré que dans le CSS Spry, la hauteur du "contenu" soit définie.

Si tu me rédigeais, juste ces 4 lignes, je serais très heureuse?! Parce que là je casse la tête depuis plusieurs jours…

Merci,

Andréa


--------------------
Site perso
iMac 27 pouces i5 + un écran Dell 26 pouces. OS: Maverick (10.9.4). Scan: Epson perfection V600 Photo. Imprimante laser couleur : Konica-Minolta 2550 DN, en réseau Ethernet, avec un iMac 27 i5. iPhone 5, iPad 4 retina.
Go to the top of the page
 
+Quote Post
No6
posté 16 Apr 2010, 10:49
Message #24


Oui ?
*****

Groupe : Membres
Messages : 3 877
Inscrit : 24 Jun 2003
Lieu : BZH
Membre no 8 224



comprend pas, par le header [du HTML] ça passe pas ???

Code
<head>

/../
<style type="text/css">

#bidule {
height:250px;
padding:5px;
}

</style>

</head>


puis dans le body :
Code
<div id="sidebar1">
/../
            <div id="bidule">


Ce message a été modifié par No6 - 16 Apr 2010, 10:50.


--------------------
"Je sais que vous croyez comprendre ce que vous pensez que j'ai dit, mais je ne suis pas sûr que vous réalisiez que ce que vous avez entendu n'est pas ce que je pense."
(Alan Greenspan)
Go to the top of the page
 
+Quote Post
Andrea
posté 16 Apr 2010, 12:08
Message #25


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 759
Inscrit : 30 Nov 2003
Lieu : 91
Membre no 12 101



Merci, je vais essayer et je te dis…

Andréa

Je reviens pour dire que ça marche ! Merci. Finalement c'était simple, j'y ai pensé moi-même, mais je n'ai pas osé de le faire. C'est bien d'âtre rassurée wink.gif

Merci encore !

Andréa

Ce message a été modifié par Andrea - 16 Apr 2010, 15:46.


--------------------
Site perso
iMac 27 pouces i5 + un écran Dell 26 pouces. OS: Maverick (10.9.4). Scan: Epson perfection V600 Photo. Imprimante laser couleur : Konica-Minolta 2550 DN, en réseau Ethernet, avec un iMac 27 i5. iPhone 5, iPad 4 retina.
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :

 



Nous sommes le : 25th March 2019 - 11:25