Premier essai en CSS
Fermé
Jacobéo
Messages postés
304
Date d'inscription
samedi 10 mars 2007
Statut
Membre
Dernière intervention
28 août 2008
-
13 mars 2007 à 19:34
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 - 8 avril 2007 à 14:24
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 - 8 avril 2007 à 14:24
A voir également:
- Premier essai en CSS
- Premier pro - Télécharger - Montage & Édition
- Dans la présentation, sans modifier leur position dans la feuille : passez le rectangle noir en arrière-plan ; passez le rectangle bleu au premier plan ; passez le rectangle hachuré au premier plan. quel mot apparaît ? ✓ - Forum LibreOffice / OpenOffice
- Telecharger idm gratuit 30 jours essai - Télécharger - Téléchargement & Transfert
- Faire un trait en css ✓ - Forum CSS
- Premier bet loto 5/90 resultat du jour rdc ✓ - Forum Excel
8 réponses
Ben au premier coup d'oeil, le site a bizarrement une grosse perte de place à gauche et ne répond pas très bien à IE (problème de positionnement).
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
921
14 mars 2007 à 06:29
14 mars 2007 à 06:29
salut,
réponses et commentaires en vrac...
- fichier css, comme la déjà dit Divx78
- vive l'indentation ! 100 lignes en html, facile ! fois trois ou quatre avec du php...
- le html, je te conseille d'organiser la structure avec header/content multicolonne/footer :
- div#cadre : 'width' en px. si tu veux passer partout tu peux tomber à 770px. et dans moins de 800px on a encore beaucoup de place pour écrire (si, si !!!). ou alors dimensions entièrement variables mais il faut du contenu pour occuper 1200px...
pour ses enfants préfère les tailles relatives ça évite pas mal de ratés dus aux différences d'interprétation.
- 'margin' : haut et bas comme tu veux, gauche et droite à "auto" si tu veux centrer ton cadre.
- div#titre : va venir se placer en haut et te fournit un bloc à l'intérieur duquel tu es libre de composer.
- div#contenu : se place en dessous de #titre et sera le conteneur des colonnes.
- div#texte, div#navigation : 'width' en % et flottants. ça évite d'avoir recours à 'padding' qui est interprété différement.
- div#text : {clear:left;} pour que #pied se recole en dessous à gauche.
- div#pied : le conteneur qui te permet d'afficher la validation où tu veux.
le but du jeu pour moi c'est d'éviter de jouer sur 'margin'/'padding' à droite et à gauche. encore et toujours les broblème d'interprétation. dans la hauteur pas de problème mais dans la largeur ça peut vite devenir une prise de tête. donc je range tout gentillement, quite à ajouter quelques <div> et je laisse faire.
- body{font-style:Arial,Helvetica,sans-serif;}
pour profiter de la cascade et tu peux ajouter color/background-color.
- {background-image: url(file:chemin_relatif);}
- les couleurs en hexadecimal. oui je sais, au début ça fait mal...
- {opacity} : /*CSS3*/ si je ne m'abuse, va falloir hacker...
- {height: auto;} : à priori inutile.
- {position: absolute;} : moi je m'en méfie, du moins pour positionner les conteneurs principaux, c'est trop rigide à mon goût.
- les <h> avant le texte, je trouve ça plus logique et c'est plus accessible.
- pour les 'font-size' je cascade en faisant :
<html> : 100%, on prend la taille navigateur
<body> : 0.8em, taille par défaut de tout le texte
et j'ajuste au cas par cas en essayant d'y toucher le moins possible mais en utilisant toujours les 'em'. ai lu un super article qui explique ce choix, essayerai de le retrouver.
-quand un élément est unique il vaut mieux utiliser un 'id' plutôt qu'une 'class' (qui valent 100 et 10 en priorité si je ne me trompe pas). ça plus les <div> pour séparer chaque partie de la page et tu ne devrais plus avoir besoin de '!important'.
et pour finir la tartine, je remets une couche avec FF.
j'ai commencé les css en testant sous IE, me disant je fais le plus ch**** en premier et le reste coulera de source : tout faux, c'est l'inverse. mieux vaut dabord faire tourner chez Mozzila et Opera qui ont un rendu plus "carré" même s'il n'est pas parfait et ensuite bidouiller pour les masses.
regarde la capture de mon écran. j'y affiche ta page en condition de debug pour css. dans la partie droite je modifie la feuille de style et je vois à gauche ce qui ce passe et tout ça dans le navigateur. en plus j'ai une fenêtre d'info qui me dit tout des éléments de la page. ça plus des dizaines de fonctions indispensables. je peux aussi afficher en utilisant le moteur IE et sans avoir quitté FF. bref, j'en suis assez content...
Firefox, WebDeveloper pour FF, IETab
mais aussi...
WebDeveloper pour Opera
WebDeveloper pour WinIE
désolé pour la longueur...
[ Mathieu ]
savoir rester faignant, c'est progresser en informatique. enfin, j'essaie...
réponses et commentaires en vrac...
- fichier css, comme la déjà dit Divx78
- vive l'indentation ! 100 lignes en html, facile ! fois trois ou quatre avec du php...
- le html, je te conseille d'organiser la structure avec header/content multicolonne/footer :
<body> <div id="cadre"> <div id="titre"> </div> <div id="contenu"> <div id="navigation"> </div> <div id="texte"> </div> </div> <div id ="pied"> </div> </div> </body>
- div#cadre : 'width' en px. si tu veux passer partout tu peux tomber à 770px. et dans moins de 800px on a encore beaucoup de place pour écrire (si, si !!!). ou alors dimensions entièrement variables mais il faut du contenu pour occuper 1200px...
pour ses enfants préfère les tailles relatives ça évite pas mal de ratés dus aux différences d'interprétation.
- 'margin' : haut et bas comme tu veux, gauche et droite à "auto" si tu veux centrer ton cadre.
- div#titre : va venir se placer en haut et te fournit un bloc à l'intérieur duquel tu es libre de composer.
- div#contenu : se place en dessous de #titre et sera le conteneur des colonnes.
- div#texte, div#navigation : 'width' en % et flottants. ça évite d'avoir recours à 'padding' qui est interprété différement.
- div#text : {clear:left;} pour que #pied se recole en dessous à gauche.
- div#pied : le conteneur qui te permet d'afficher la validation où tu veux.
le but du jeu pour moi c'est d'éviter de jouer sur 'margin'/'padding' à droite et à gauche. encore et toujours les broblème d'interprétation. dans la hauteur pas de problème mais dans la largeur ça peut vite devenir une prise de tête. donc je range tout gentillement, quite à ajouter quelques <div> et je laisse faire.
- body{font-style:Arial,Helvetica,sans-serif;}
pour profiter de la cascade et tu peux ajouter color/background-color.
- {background-image: url(file:chemin_relatif);}
- les couleurs en hexadecimal. oui je sais, au début ça fait mal...
- {opacity} : /*CSS3*/ si je ne m'abuse, va falloir hacker...
- {height: auto;} : à priori inutile.
- {position: absolute;} : moi je m'en méfie, du moins pour positionner les conteneurs principaux, c'est trop rigide à mon goût.
- les <h> avant le texte, je trouve ça plus logique et c'est plus accessible.
- pour les 'font-size' je cascade en faisant :
<html> : 100%, on prend la taille navigateur
<body> : 0.8em, taille par défaut de tout le texte
et j'ajuste au cas par cas en essayant d'y toucher le moins possible mais en utilisant toujours les 'em'. ai lu un super article qui explique ce choix, essayerai de le retrouver.
-quand un élément est unique il vaut mieux utiliser un 'id' plutôt qu'une 'class' (qui valent 100 et 10 en priorité si je ne me trompe pas). ça plus les <div> pour séparer chaque partie de la page et tu ne devrais plus avoir besoin de '!important'.
et pour finir la tartine, je remets une couche avec FF.
j'ai commencé les css en testant sous IE, me disant je fais le plus ch**** en premier et le reste coulera de source : tout faux, c'est l'inverse. mieux vaut dabord faire tourner chez Mozzila et Opera qui ont un rendu plus "carré" même s'il n'est pas parfait et ensuite bidouiller pour les masses.
regarde la capture de mon écran. j'y affiche ta page en condition de debug pour css. dans la partie droite je modifie la feuille de style et je vois à gauche ce qui ce passe et tout ça dans le navigateur. en plus j'ai une fenêtre d'info qui me dit tout des éléments de la page. ça plus des dizaines de fonctions indispensables. je peux aussi afficher en utilisant le moteur IE et sans avoir quitté FF. bref, j'en suis assez content...
Firefox, WebDeveloper pour FF, IETab
mais aussi...
WebDeveloper pour Opera
WebDeveloper pour WinIE
désolé pour la longueur...
[ Mathieu ]
savoir rester faignant, c'est progresser en informatique. enfin, j'essaie...
Jacobéo
Messages postés
304
Date d'inscription
samedi 10 mars 2007
Statut
Membre
Dernière intervention
28 août 2008
79
14 mars 2007 à 08:36
14 mars 2007 à 08:36
Bonjour Dalida,
Merci pour ce long .. poème! Dur à apprendre celui-là!
Je vais donc faire pour le mieux et je ne suis pas sûr que cela aille bien vite, vu mon âge )-:
Tout aussi en vrac,
.. le code est en désordre, mais je l'ai tellement trituré toute la journée qu'il n'a plus vraiment figure de CCS,
.. je ne suis pas d'accord pour que le CSS soit dans un conteneur, mais repris dans le <Head>. Pourquoi aller chercher ailleurs ce qui peut être sur place ? Voici un exemple tiré de Eric Meyer
<style type="text/css" title="currentStyle">
body {margin: 0; padding: 0; text-align: center;
color: #000; background: #FFF;}
acronym {border: none;}
a {text-decoration: none;}
a:link {color: rgb(179,63,96);}
a:visited {color: rgb(90,32,48);}
a:hover {text-decoration: underline;}
#container {width: 647px; margin: 75px auto 0; padding: 0;
position: relative; text-align: left;}
#pageHeader {background: url(pageHeader.jpg) 0 0 no-repeat;
height: 157px; width: auto;}
#pageHeader h1 {background: url(ph-flower.gif) 0 0 no-repeat;
height: 330px; width: 250px; position: absolute; z-index: 101;
top: -95px; right: -80px; margin: 0;}
#pageHeader h1 span {visibility: hidden;}
#pageHeader h2 {position: absolute; z-index: 102;
top: 134px; right: 140px; margin: 0; padding: 0;
color: rgb(91,131,104);
text-transform: lowercase; letter-spacing: 0.2em;
font: bold italic 1.1em/1em Times, serif; text-align: right;}
#pageHeader h2 acronym {text-transform: uppercase;}
#quickSummary {font: italic 1em/2 Times, "Times New Roman", serif;
background: rgb(94%,98%,96%) url(quickSummary.jpg) 0 100% no-repeat;
color: rgb(42,92,42);
margin: 1px 0; padding: 1em 180px 1.5em 1.5em;}
#quickSummary p {display: inline;}
#quickSummary p.p2 {margin-left: 0.25em;}
#quickSummary p.p2:after {content: ".";}
#preamble, #supportingText {padding-right: 217px;}
#preamble p, #supportingText p {font-size: 90%; line-height: 1.66em;
margin: 0 1.5em; padding: 0.5em 0;}
#preamble h3, #supportingText h3 {letter-spacing: 0.1em;
font: italic 1.2em Times, "Times New Roman", serif;
color: rgb(107,153,139); margin: 1em 0 0.5em 0.5em;}
#preamble {border-top: 1px solid rgb(184,214,194);
background: url(side.jpg) 100% 100% repeat-y;}
#supportingText {background: url(side.jpg) 100% 0 repeat-y;}
#preamble, #explanation, #participation, #benefits, #requirements {
border-left: 1px solid rgb(184,214,194);
padding-top: 1px; padding-bottom: 1px;}
#requirements {border-bottom: 1px solid rgb(184,214,194);
background: url(main.jpg) 100% 100% no-repeat;
padding-bottom: 100px;}
#footer {margin: 0 -217px 0 0; height: 123px;
background: #FFF url(footer.jpg) 100% 1px no-repeat;
padding: 60px 1em 0 0.5em;}
#footer a {color: rgb(207,216,214); line-height: 1em;
font-size: 1.25em; font-weight: 100;}
#linkList {position: absolute; z-index: 11;
width: 216px; top: 157px; right: 0;
margin-top: 8.6em;}
#linkList ul {margin: 0.5em 1em 0 2em; padding: 0;}
#linkList li {list-style: none;}
#linkList a {color: rgb(99,131,101);
font: italic 1.15em Times, serif;
text-transform: lowercase;}
#linkList h3 {margin: 1em 0 0; width: 216px; height: 35px;
background: url(resources.gif) 10px 50% no-repeat;}
#lselect h3 {background-image: url(design-list.gif);}
#larchives h3 {background-image: url(archives.gif);}
#linkList h3 span {display: none;}
#lselect li {font-size: 85%; margin-bottom: 1.5em;}
#lselect li a {display: block; font-weight: bold;
letter-spacing: 0.2em; text-transform: lowercase;}
#lselect li a.c {display: inline;
font: bold 1em Times, serif;
letter-spacing: 0; text-transform: none;}
</style>
....Pour info ..... source du code http://www.csszengarden.com/
</head>
Bien sûr, j'ai encore du chemin à parcourir..
..pour l'indentation, j'ai constaté que NVU ne voulais pas respecter cele faite sous Notepad++ (je actuellement en panne de Dreamweaver MX) Je vais donc essayer de trailler sous Notepad++ et regarderai le résultat sous FF/IE/Opera.
..pour les WebDevelopper, j'ai téchargé mais dois être trop nul car cela ne me donne rien (ces fichiers de moins de 200 Ko me surprennent et restent innaplicables ou alors il faut les ajouter, mais à quoi ?!)
..à suivre, voilà pour le moment.
Jacques
Merci pour ce long .. poème! Dur à apprendre celui-là!
Je vais donc faire pour le mieux et je ne suis pas sûr que cela aille bien vite, vu mon âge )-:
Tout aussi en vrac,
.. le code est en désordre, mais je l'ai tellement trituré toute la journée qu'il n'a plus vraiment figure de CCS,
.. je ne suis pas d'accord pour que le CSS soit dans un conteneur, mais repris dans le <Head>. Pourquoi aller chercher ailleurs ce qui peut être sur place ? Voici un exemple tiré de Eric Meyer
<style type="text/css" title="currentStyle">
body {margin: 0; padding: 0; text-align: center;
color: #000; background: #FFF;}
acronym {border: none;}
a {text-decoration: none;}
a:link {color: rgb(179,63,96);}
a:visited {color: rgb(90,32,48);}
a:hover {text-decoration: underline;}
#container {width: 647px; margin: 75px auto 0; padding: 0;
position: relative; text-align: left;}
#pageHeader {background: url(pageHeader.jpg) 0 0 no-repeat;
height: 157px; width: auto;}
#pageHeader h1 {background: url(ph-flower.gif) 0 0 no-repeat;
height: 330px; width: 250px; position: absolute; z-index: 101;
top: -95px; right: -80px; margin: 0;}
#pageHeader h1 span {visibility: hidden;}
#pageHeader h2 {position: absolute; z-index: 102;
top: 134px; right: 140px; margin: 0; padding: 0;
color: rgb(91,131,104);
text-transform: lowercase; letter-spacing: 0.2em;
font: bold italic 1.1em/1em Times, serif; text-align: right;}
#pageHeader h2 acronym {text-transform: uppercase;}
#quickSummary {font: italic 1em/2 Times, "Times New Roman", serif;
background: rgb(94%,98%,96%) url(quickSummary.jpg) 0 100% no-repeat;
color: rgb(42,92,42);
margin: 1px 0; padding: 1em 180px 1.5em 1.5em;}
#quickSummary p {display: inline;}
#quickSummary p.p2 {margin-left: 0.25em;}
#quickSummary p.p2:after {content: ".";}
#preamble, #supportingText {padding-right: 217px;}
#preamble p, #supportingText p {font-size: 90%; line-height: 1.66em;
margin: 0 1.5em; padding: 0.5em 0;}
#preamble h3, #supportingText h3 {letter-spacing: 0.1em;
font: italic 1.2em Times, "Times New Roman", serif;
color: rgb(107,153,139); margin: 1em 0 0.5em 0.5em;}
#preamble {border-top: 1px solid rgb(184,214,194);
background: url(side.jpg) 100% 100% repeat-y;}
#supportingText {background: url(side.jpg) 100% 0 repeat-y;}
#preamble, #explanation, #participation, #benefits, #requirements {
border-left: 1px solid rgb(184,214,194);
padding-top: 1px; padding-bottom: 1px;}
#requirements {border-bottom: 1px solid rgb(184,214,194);
background: url(main.jpg) 100% 100% no-repeat;
padding-bottom: 100px;}
#footer {margin: 0 -217px 0 0; height: 123px;
background: #FFF url(footer.jpg) 100% 1px no-repeat;
padding: 60px 1em 0 0.5em;}
#footer a {color: rgb(207,216,214); line-height: 1em;
font-size: 1.25em; font-weight: 100;}
#linkList {position: absolute; z-index: 11;
width: 216px; top: 157px; right: 0;
margin-top: 8.6em;}
#linkList ul {margin: 0.5em 1em 0 2em; padding: 0;}
#linkList li {list-style: none;}
#linkList a {color: rgb(99,131,101);
font: italic 1.15em Times, serif;
text-transform: lowercase;}
#linkList h3 {margin: 1em 0 0; width: 216px; height: 35px;
background: url(resources.gif) 10px 50% no-repeat;}
#lselect h3 {background-image: url(design-list.gif);}
#larchives h3 {background-image: url(archives.gif);}
#linkList h3 span {display: none;}
#lselect li {font-size: 85%; margin-bottom: 1.5em;}
#lselect li a {display: block; font-weight: bold;
letter-spacing: 0.2em; text-transform: lowercase;}
#lselect li a.c {display: inline;
font: bold 1em Times, serif;
letter-spacing: 0; text-transform: none;}
</style>
....Pour info ..... source du code http://www.csszengarden.com/
</head>
Bien sûr, j'ai encore du chemin à parcourir..
..pour l'indentation, j'ai constaté que NVU ne voulais pas respecter cele faite sous Notepad++ (je actuellement en panne de Dreamweaver MX) Je vais donc essayer de trailler sous Notepad++ et regarderai le résultat sous FF/IE/Opera.
..pour les WebDevelopper, j'ai téchargé mais dois être trop nul car cela ne me donne rien (ces fichiers de moins de 200 Ko me surprennent et restent innaplicables ou alors il faut les ajouter, mais à quoi ?!)
..à suivre, voilà pour le moment.
Jacques
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
921
14 mars 2007 à 10:56
14 mars 2007 à 10:56
salut,
on va faire des concours de tartines !
nan ! je rigole...
"que le CSS soit dans un conteneur, mais repris dans le <Head>"
par conteneur tu veux dire quoi ? un fichier séparé ?
dans l'exemple fourni, les styles sont contenus dans un deuxième fichier (001.css). ce fichier est incorporé au fichier html par la machine.
tu en retrouves la trace dans le fichier html :
imagine un site avec seulement 20 pages. tu as utilisé la police Georgia, tu te rends compte qu'elle ne passe pas sur tous les systèmes et décide de la changer. c'est pas un changement, c'est 20... à ce niveau là ça passe encore, après !
quand au code de Eric Meyer, j'ai beau adorer ce qu'il fait et essayer d'appliquer ses préceptes, écrire les coordonnées de couleur avec trois unités différentes c'est quand même pas une idée de génie. quand tu veux changer une couleur dans le code c'est beaucoup plus pratique de faire Edition/Remplacer. que là tu fais quoi ? Edition/Deviner la couleur/Remplacer au jugé...
bref, c'est un detail...
d'un autre côté c'est l'exemple parfait du découpage du html avec des <div>. ils l'ont même poussé à l'extrême pour qu'on puisse jouer avec ! et tu retrouve bien la possiblité de faire header/content/footer comme la plupart des sites avec une infinité de variantes possibles.
depuis Firefox, Outils/Modules complémentaires
depuis là tu pourras ouvrir le fichier que tu as téléchargé. un .xpi si je me souviens bien.
ou alors tu reparts sur le net avec FF, tu réouvres la page et il te proposera de l'installer plutôt que de le télécharger.
après tu redémarre FF puis Affichage/Barre d'outils/Web Developer
on va faire des concours de tartines !
nan ! je rigole...
"que le CSS soit dans un conteneur, mais repris dans le <Head>"
par conteneur tu veux dire quoi ? un fichier séparé ?
dans l'exemple fourni, les styles sont contenus dans un deuxième fichier (001.css). ce fichier est incorporé au fichier html par la machine.
tu en retrouves la trace dans le fichier html :
<style type="text/css" title="currentStyle" media="screen"> @import "/001/001.css"; </style>
imagine un site avec seulement 20 pages. tu as utilisé la police Georgia, tu te rends compte qu'elle ne passe pas sur tous les systèmes et décide de la changer. c'est pas un changement, c'est 20... à ce niveau là ça passe encore, après !
quand au code de Eric Meyer, j'ai beau adorer ce qu'il fait et essayer d'appliquer ses préceptes, écrire les coordonnées de couleur avec trois unités différentes c'est quand même pas une idée de génie. quand tu veux changer une couleur dans le code c'est beaucoup plus pratique de faire Edition/Remplacer. que là tu fais quoi ? Edition/Deviner la couleur/Remplacer au jugé...
bref, c'est un detail...
d'un autre côté c'est l'exemple parfait du découpage du html avec des <div>. ils l'ont même poussé à l'extrême pour qu'on puisse jouer avec ! et tu retrouve bien la possiblité de faire header/content/footer comme la plupart des sites avec une infinité de variantes possibles.
depuis Firefox, Outils/Modules complémentaires
depuis là tu pourras ouvrir le fichier que tu as téléchargé. un .xpi si je me souviens bien.
ou alors tu reparts sur le net avec FF, tu réouvres la page et il te proposera de l'installer plutôt que de le télécharger.
après tu redémarre FF puis Affichage/Barre d'outils/Web Developer
Jacobéo
Messages postés
304
Date d'inscription
samedi 10 mars 2007
Statut
Membre
Dernière intervention
28 août 2008
79
>
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
14 mars 2007 à 11:45
14 mars 2007 à 11:45
Merci Dalida,
J'ai réussi à télécharger Web Developper. Cela s'arrose .. avec un bon café ! Après, j'essaie de dompter "la Bête"
J'ai réussi à télécharger Web Developper. Cela s'arrose .. avec un bon café ! Après, j'essaie de dompter "la Bête"
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 776
15 mars 2007 à 02:55
15 mars 2007 à 02:55
Bonjour,
Vous reprendrez bien une petite tartine (-;
Bonne idée, la reprise de tes pages avec des CSS.
Après avoir suivi votre discussion et parcouru ta page je me permets ces quelques propositions bienveillantes.
Commence par faire le ménage dans la head.
Les <meta> et <link> mal formées, mal fermées.
Puis par ferme correctement les <br /> et <img>.
Et surtout, abandonne tout de suite les styles définis dans les balises alors que tu utilises une feuille de styles assez complète. C'est pénible à lire et à gérer.
Les conseils que te donne Dalida prouvent qu'il a étudié le sujet.
La manière de faire qu'il suggère est classique, simple à comprendre et à mettre en œuvre. Elle n'est accessible qu'une fois qu'on a fait les erreurs que font les débutants (-; (je n'ai plus ma 1re page avec CSS, mais je ne te dis pas…)
“je ne suis pas d'accord pour que le CSS soit dans un conteneur”
Pourtant, E. Meyer dont tu donnes un exemple l'utilise
C'est un bon moyen d'apprendre.
Il existe des tas d'autres manières de faire. Mais pas aussi simple à gérer.
Ça permet aussi d'éviter le positionnement en “absolute” qui est tentant mais est rigide et, je trouve, ne devient accessible au webmestre que lorsqu'il maîtrise quelques rudiments.
Perso., je ne m'en sers, pour l'instant, que lorsque je construis une page avec des dimensions déterminées et où des éléments doivent être fixes (un exemple avec absolute où rien n'est dessiné dans l'image).
De la même manière des blocs “float” (j'adooooooore) suivis d'un autre en “clear” te permettront d'avoir ton pied de page toujours en-dessous et ton contenu s'adaptera en hauteur à ce qu'il contiendra. Si tu as plus de texte à insérer que ne peuvent en contenir les 1108px que tu as prévus que se passera-t-il ?
En 1000px, ça ne passe même pas pour un écran en 1024. Il vaut mieux que tu prévoies un peu plus de marge de manœuvre. Ou au moins, que tu laisses ton contenu à moins de 800px de large pour que ceux qui visiteront tes pages avec cette résolution ne soient pas obligés d'utiliser l'ascenseur horizontal pour lire. Si tu trouves un moyen de lui permettre de s'adapter en largeur, ça sera plus agréable.
Pour voir, dans cet exemple, j'ai repris ta page et l'ai remaniée un peu, après avoir placé les éléments dans un conteneur. Avec le menu gauche et le contenu en float et le pdp en clear.
C'est très facile à acquérir.
+ Un outil pour de l'indentation après coup : http://infohound.net/tidy/ ou http://www.w3.org/People/Raggett/tidy/
La page sur les em : http://www.blog-and-blues.org/weblog/2004/05/24/214-font-size-em
Vous reprendrez bien une petite tartine (-;
Bonne idée, la reprise de tes pages avec des CSS.
Après avoir suivi votre discussion et parcouru ta page je me permets ces quelques propositions bienveillantes.
Commence par faire le ménage dans la head.
Les <meta> et <link> mal formées, mal fermées.
Puis par ferme correctement les <br /> et <img>.
Et surtout, abandonne tout de suite les styles définis dans les balises alors que tu utilises une feuille de styles assez complète. C'est pénible à lire et à gérer.
Les conseils que te donne Dalida prouvent qu'il a étudié le sujet.
La manière de faire qu'il suggère est classique, simple à comprendre et à mettre en œuvre. Elle n'est accessible qu'une fois qu'on a fait les erreurs que font les débutants (-; (je n'ai plus ma 1re page avec CSS, mais je ne te dis pas…)
“je ne suis pas d'accord pour que le CSS soit dans un conteneur”
Pourtant, E. Meyer dont tu donnes un exemple l'utilise
#container {width: 647px; margin: 75px auto 0; padding: 0; position: relative; text-align: left;}Ce “container” là est bien le conteneur dont on parle (on trouve aussi main, principal, global…). Il est très pratique pour regrouper le reste et pour centrer facilement l'ensemble.
C'est un bon moyen d'apprendre.
Il existe des tas d'autres manières de faire. Mais pas aussi simple à gérer.
Ça permet aussi d'éviter le positionnement en “absolute” qui est tentant mais est rigide et, je trouve, ne devient accessible au webmestre que lorsqu'il maîtrise quelques rudiments.
Perso., je ne m'en sers, pour l'instant, que lorsque je construis une page avec des dimensions déterminées et où des éléments doivent être fixes (un exemple avec absolute où rien n'est dessiné dans l'image).
De la même manière des blocs “float” (j'adooooooore) suivis d'un autre en “clear” te permettront d'avoir ton pied de page toujours en-dessous et ton contenu s'adaptera en hauteur à ce qu'il contiendra. Si tu as plus de texte à insérer que ne peuvent en contenir les 1108px que tu as prévus que se passera-t-il ?
En 1000px, ça ne passe même pas pour un écran en 1024. Il vaut mieux que tu prévoies un peu plus de marge de manœuvre. Ou au moins, que tu laisses ton contenu à moins de 800px de large pour que ceux qui visiteront tes pages avec cette résolution ne soient pas obligés d'utiliser l'ascenseur horizontal pour lire. Si tu trouves un moyen de lui permettre de s'adapter en largeur, ça sera plus agréable.
Pour voir, dans cet exemple, j'ai repris ta page et l'ai remaniée un peu, après avoir placé les éléments dans un conteneur. Avec le menu gauche et le contenu en float et le pdp en clear.
C'est très facile à acquérir.
+ Un outil pour de l'indentation après coup : http://infohound.net/tidy/ ou http://www.w3.org/People/Raggett/tidy/
La page sur les em : http://www.blog-and-blues.org/weblog/2004/05/24/214-font-size-em
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
921
15 mars 2007 à 19:37
15 mars 2007 à 19:37
salut !
j'avais même pas lu le html... :o|
voici l'article dont je parlais.
merci Gihef, je ne suis pas cabot en générale mais là ça fait plaisir ! j'ai tout appris tout seul et j'en suis à mes début. je ne croise que des webmasters sur Flash ou ASP et parfois on me prend vraiment pour un rigolo avec mes css et mes convictions sur l'accessibilité...
j'avais même pas lu le html... :o|
voici l'article dont je parlais.
merci Gihef, je ne suis pas cabot en générale mais là ça fait plaisir ! j'ai tout appris tout seul et j'en suis à mes début. je ne croise que des webmasters sur Flash ou ASP et parfois on me prend vraiment pour un rigolo avec mes css et mes convictions sur l'accessibilité...
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 776
15 mars 2007 à 22:10
15 mars 2007 à 22:10
Vraiment, merci de rien.
J'ai aussi appris seul. Et je continue. Doucement.
C'est pour ça que je préfère vivre avec des “ rigolos” (-;
J'ai aussi appris seul. Et je continue. Doucement.
C'est pour ça que je préfère vivre avec des “ rigolos” (-;
Jacobéo
Messages postés
304
Date d'inscription
samedi 10 mars 2007
Statut
Membre
Dernière intervention
28 août 2008
79
7 avril 2007 à 12:00
7 avril 2007 à 12:00
Bonjour Dalida et Gihef,
Les vacances se termminent, mais je profite d'un poste pour vous remercier de votre aide (mème sous le soleil, on oublie pas ceux qui nous aident) J'ai aussi profité d'une occasion pour faire une essais en CSS pour des amis. Voici l'adresse http://www.terradillos-jdmolay.com/ Il reste encore à faire le tableau sous forme de css, mais là, je verrais à mon retour. Merci pour cette aide qui m'a permis d'entrer (légèrement) dans le monde du CSS.
--Internet ne vaut que s'il est partagé ...
Jacques
Les vacances se termminent, mais je profite d'un poste pour vous remercier de votre aide (mème sous le soleil, on oublie pas ceux qui nous aident) J'ai aussi profité d'une occasion pour faire une essais en CSS pour des amis. Voici l'adresse http://www.terradillos-jdmolay.com/ Il reste encore à faire le tableau sous forme de css, mais là, je verrais à mon retour. Merci pour cette aide qui m'a permis d'entrer (légèrement) dans le monde du CSS.
--Internet ne vaut que s'il est partagé ...
Jacques
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
921
8 avril 2007 à 14:24
8 avril 2007 à 14:24
bonjour tout le monde,
mais de rien mon cher Jacobéo !
et prêt à t'aider pour la suite (car il reste encore pas mal de boulot...)
;o)
bonne crise de foie à tous !!!
mais de rien mon cher Jacobéo !
et prêt à t'aider pour la suite (car il reste encore pas mal de boulot...)
;o)
bonne crise de foie à tous !!!
C'est amusant car le premier lien donné à un souci IE et le dernier c'est l'inverse, firefox semble battre la campagne?
Reste à faire un compromis entre les 2 ;-)
Y a aussi un div "conteneur" qui bizarrement ne semble pas très utile dans ce cas, or comme son nom l'indique, il devrait contenir!
C'est pourtant une solution simple pour organiser la page car les autres "div" vont se régler sur lui, ce qui évite beaucoup de déconnades d'autres contenus qui vont se ballader n'importe où.
De plus le système sataisfait aussi bien IE que Firefox ou Opera.
Reste à faire un compromis entre les 2 ;-)
Y a aussi un div "conteneur" qui bizarrement ne semble pas très utile dans ce cas, or comme son nom l'indique, il devrait contenir!
C'est pourtant une solution simple pour organiser la page car les autres "div" vont se régler sur lui, ce qui évite beaucoup de déconnades d'autres contenus qui vont se ballader n'importe où.
De plus le système sataisfait aussi bien IE que Firefox ou Opera.
Jacobéo
Messages postés
304
Date d'inscription
samedi 10 mars 2007
Statut
Membre
Dernière intervention
28 août 2008
79
8 avril 2007 à 13:44
8 avril 2007 à 13:44
Bonjour King
....C'est amusant car le .... je ne comprends ce que tu me dis, désolé. Je travaille sur IE 7 uniquement. Je sais que ce navigateur ne remporte pas que des féliciations, mais il me semble reprendre ce que fait Firefox, sans les soucis de ce dernier, dû moins chez moi.
Pour la div "conteneur", elle contient bien tout l'ensemble. Sans doute l'incrémentation n'est-elle pas correcte !
....C'est amusant car le .... je ne comprends ce que tu me dis, désolé. Je travaille sur IE 7 uniquement. Je sais que ce navigateur ne remporte pas que des féliciations, mais il me semble reprendre ce que fait Firefox, sans les soucis de ce dernier, dû moins chez moi.
Pour la div "conteneur", elle contient bien tout l'ensemble. Sans doute l'incrémentation n'est-elle pas correcte !
Utilisateur anonyme
8 avril 2007 à 14:01
8 avril 2007 à 14:01
vi en fait, j'ai pas regardé à fond, ça vient probablement des infos du ou des css, car c'est bordélique sous Firefox (pour le lien 2).
Donc ça donne la même apparence que sans le div conteneur, soit le contenu qui se ballade un peu n'importe où.
Donc ça donne la même apparence que sans le div conteneur, soit le contenu qui se ballade un peu n'importe où.
13 mars 2007 à 22:37
Merci de ta remarque,
Mon écran est en 1440x900 et j'ai voulu diminuer la taille pour 1000x .... afin qu'il soit visible par un plus grand nombre; il semble que ce ne soit pas gagné ! Il est donc centré chez moi mais pas ailleurs ! Il faut que je trouve le moyen de lui permettre de s'ajuster en jouant avec les valeurs en % (enfin je crois que c'est cela ...
Jacques