methodologie pour créer des blocs ombrés et espacés?

Oui, ton aide est bien precieuse et je pense que ce layout va effectivement etre etudier par beaucoup d'apprenti en web:up:

Donc de mon cote ca avance, la structure est là; des images liens commencent a apparaitre ici et la, meme de la video; mais j'ai un souci que je n'arrive pas a corriger malgre des recherches sur internet:
mes accents et apostrophe sont remplace par des points d'interrogation. J'ai bien compris que le probleme venait de la saisie se faisant en mac latin roman alors que j'indique utf-8 en charset. J'ai changer les preferences d'encodage dans Jedit pour passer en utf-8 (j'ai fait un copier coller de ce que j'avais fait dans ma page Jedit saisie en latin roman) mais la, ca me fait des signe encore plus bizarre.
J'ai vu sur internet que certains par de "incov" dans le terminal qui permet une conversion automatique, mais je ne comprends pas du tout ou, comment on l'utilise.

Petit idee de ce que je dois faire avant de continuer???:rose:



Ah oui aussi, dans ton layout tu precises <html lang="fr">
cela indique-t-il :html pour la partie francaise (concernant les sites multi-langue)?
Merci d'avance pour le temps a me repondre:D :zen:


Nb: mes textes sont des bout de tetes que je copie a partir de documents illustrator relatif a mes documents imprimes. (je precise car peut etre que l'une des solution est de retaper le texte dans le bonne endroit au bon format)
 
Dernière édition:
Effectivement, il ne suffit pas d'indiquer l'encodage dans la partie <head> du document, il faut aussi s'assurer que le logiciel est configuré pour sauvegarder dans cet encodage, comme tu le précises.

Ça m'étonne que tu aies ce problème car les fichiers que j'ai mis à disposition sont normalement corrects de ce point de vue. :confused:

Si tu as changé les préférences de Jedit après avoir commencé ton document, il est probable que celui-ci soit encore en Mac Roman. Méthode la plus simple : créer un nouveau document (s'assurer qu'il est en UTF-8), et copier-coller dedans. Les encodages est un sujet extrêmement complexe si on s'y intéresse, moi aussi il y a des choses qui m'échappent. Mais aujourd'hui, pour les langues romanes en tout cas, on recommande de laisser en UTF-8 car c'est un encodage relativement universel qui est compatible avec les glyphes spéciaux de nombreuses langues (comme notre "c" cédille). Et puis, pas de prise de tête, que diable :D

Personnellement, je ne comprends pas comment il est encore possible que des logiciels soient réglés sur "Mac Roman" par défaut ! Un autre truc que tu peux essayer (sans avoir à jongler avec tous les menus compliqués qu'on peut trouver dans un soft ad-hoc), c'est de lancer TextEdit et de coller ton texte dedans en t'assurant que tu le sauvegardes en UTF-8 (au format Texte, pas RTF !).

Sinon, en ce qui concerne <html lang=fr>, il s'agit juste d'indiquer la langue dans laquelle la page est écrite pour faciliter notamment le référencement (les moteurs de recherche classeront donc cette page dans les résultats en français). Ça permet également aux systèmes de synthèse vocale pour les personnes à handicap de savoir quelle langue utiliser, etc. On pourrait mettre lang="en" (english) et écrire en français, ça fonctionnerait visuellement parlant mais ce ne serait pas très logique (ni très recommandé). À noter qu'ici on met l'attribut lang dans la balise html puisque cela s'applique à tout le document, mais il peut y avoir des occasions plus rares où on le retrouve dans d'autres balises (par exemple, un paragraphe montrant un extrait dans une langue autre que celle de la globalité de la page)... Exemple :

Bloc de code: 
<p lang="en">This text is written in English. God Save the Queen!</p>

En clair, on peut avoir un document globalement en français grâce à <html lang="fr">, et "débrayer" occasionnellement en changeant la langue dans une balise précise.
 
[MGZ] Shralldam;12109452 a dit:
Ah, ben je vois qu'il sert à d'autres personnes ce layout :D

Comme je l'ai dit, c'est du très vite fait et pas optimisé (je n'ai pas anticipé tous ces petits trucs quand j'ai codé à l'origine). Cependant, pour le problème avec le menu déroulant et z-index, il y a une solution assez simple.

En fait, la propriété z-index ne fonctionne qu'avec des blocs dont la propriété position est définie (absolute ou relative). Voici la solution :

Bloc de code: 
#header, #main {
    position: relative;
}

#header {
    z-index: 1;
}

#main {
    z-index: -1;
}

Voilà, ça devrait marcher :)
Cliquez pour agrandir...

Encore merci,
Je vais essayer cela ce soir et vous tiendrai au courant (suis à 2040 m altitude).
Effectivement je n'avais pas pensé à la position relative.
Merci bien Shralldam et bonne fin de journée
 
:D:D:D encore merci!

J'ai effectivement du faire un truc pas bien en debutant avec Jedit, j'ai donc repris repris ton layout en utf-8 et ai re-rempli les case avec mes elements, et maintenant j'ai mes accents partout partout:up: (bon d'accord: sauf dans ce texte, mais j'ai une excuse: mon clavier est japonais:siffle:)

A bientot ... jusqu'a la prochaine question:D
 
[MGZ] Shralldam;12109452 a dit:
Ah, ben je vois qu'il sert à d'autres personnes ce layout :D

Comme je l'ai dit, c'est du très vite fait et pas optimisé (je n'ai pas anticipé tous ces petits trucs quand j'ai codé à l'origine). Cependant, pour le problème avec le menu déroulant et z-index, il y a une solution assez simple.

En fait, la propriété z-index ne fonctionne qu'avec des blocs dont la propriété position est définie (absolute ou relative). Voici la solution :

Bloc de code: 
#header, #main {
    position: relative;
}

#header {
    z-index: 1;
}

#main {
    z-index: -1;
}

Voilà, ça devrait marcher :)
Cliquez pour agrandir...

Bonsoir,
Je l'ai essayé et cela fonctionne.
Merci beaucoup Shralldam pour le fichier et l'astuce.
Très bonne soirée :)
 
la, je pense que c'est une question toute simple, en general, dans le cas de site multi-langue, 3 dans mon cas, quel est l'identifiant generallement utilise? est-ce par exemple: index_french.html, index_english.html, index_japanese...?
Ou y a-t-il une facon ou une extension classique de faire ca?:rolleyes:

onegaishimasu:zen:
 
[MGZ] Shralldam;12109452 a dit:
Ah, ben je vois qu'il sert à d'autres personnes ce layout :D

Comme je l'ai dit, c'est du très vite fait et pas optimisé (je n'ai pas anticipé tous ces petits trucs quand j'ai codé à l'origine). Cependant, pour le problème avec le menu déroulant et z-index, il y a une solution assez simple.

En fait, la propriété z-index ne fonctionne qu'avec des blocs dont la propriété position est définie (absolute ou relative). Voici la solution :

Bloc de code: 
#header, #main {
    position: relative;
}

#header {
    z-index: 1;
}

#main {
    z-index: -1;
}

Voilà, ça devrait marcher :)
Cliquez pour agrandir...

seulement sur des browsers recents vu que le code original est cramé du kuk, merci les bibis qui essayent de faire fonctionner des crottes en barre, si tu n'aimes pas la critique je peux rajouter 4000 couches, at your option jacky.
 
tatouille a dit:
seulement sur des browsers recents vu que le code original est cramé du kuk, merci les bibis qui essayent de faire fonctionner des crottes en barre, si tu n'aimes pas la critique je peux rajouter 4000 couches, at your option jacky.
Cliquez pour agrandir...

Il me semble avoir précisé que mes fichiers sont incomplets et pas optimisés. J'ai juste répondu à la question d'iknabes, à savoir les ombres derrière les blocs, et une présentation 3 colonnes. Mon objectif était seulement de ne pas faire trop compliqué avec le peu de temps que j'y ai consacré.

Non, il n'y a pas de commentaires conditionnels IE. Oui, le layout n'est pas responsive. Oui, le markup pourrait être meilleur. Oui, la feuille de style CSS n'est pas impeccable, y a des redondances et oh, pardon, j'ai pas fait une jolie pile avec préfixes vendeurs pour box-shadow ! Pardon pardon pardon !

J'accepte volontiers la critique, et visiblement tu t'y connais. Par contre, avec un ton aussi expéditif et désagréable (alors qu'on ne se connait même pas, bravo la courtoisie), la critique peut aller se faire voir.

Au lieu d'être aussi hautain, pourquoi ne pas prendre un peu de temps (comme je l'ai fait) pour donner un coup de main à l'auteur de ce sujet ? Je n'ai jamais prétendu être un as du développement, si tu peux faire profiter les lecteurs de ton expertise, toute contribution est la bienvenue.

Mais bon apparemment il est plus simple, du haut de son perchoir, de taxer les autres de bidouilleurs du dimanche ou de jacky… Belle mentalité.
 
iknabes a dit:
la, je pense que c'est une question toute simple, en general, dans le cas de site multi-langue, 3 dans mon cas, quel est l'identifiant generallement utilise? est-ce par exemple: index_french.html, index_english.html, index_japanese...?
Ou y a-t-il une facon ou une extension classique de faire ca?:rolleyes:

onegaishimasu:zen:
Cliquez pour agrandir...

Apparemment tu travailles sur un site statique, dont tu vas gérer manuellement chaque page. Tu peux nommer chaque fichier comme tu veux, mais ce sera peut-être un peu plus court d'écrire index_fr.html, index_en.html et index_ja.html. La manière dont tu écris le nom de la page n'a aucune incidence sur la langue qui est à l'intérieur. Par contre, dans le code, tu peux utiliser l'attribut lang dans la balise <html> et mettre fr, en et ja comme valeurs pour chaque page.

Par contre, pour gérer du multilingue, travailler comme tu le fais risque de présenter pas mal d'inconvénients par la suite : dès que tu feras un changement sur le modèle, tu devras le répercuter sur chaque fichier HTML manuellement. S'il n'y a pas souvent de mise à jour ou que le site est petit, c'est gérable. Sinon, une solution impliquant du PHP est à considérer.
 
Bon, pas de commentaire a ce que je viens de lire plus haut...
Dans tous les cas, ton layout et tes explications telles qu'elles sont m'aident beaucoup et je t'en remercie une nouvelle fois.

Donc, j'ai bien noté ton petit conseil concernant l'intitule des langues, ce sera adopte;)
Concernant la gestion des mise a jour du site, je comprends qu'il va falloir aussi que je me mette au PHP:rolleyes: car il a des parties, en particuliers dans les "aside", où de nouveaux articles seront regulierement ajoutes.:rose:

Bon allez, je suis motive: je m'accroche!:D

Mata ne!:zen:
 
tatouille a dit:
seulement sur des browsers recents vu que le code original est cramé du kuk, merci les bibis qui essayent de faire fonctionner des crottes en barre, si tu n'aimes pas la critique je peux rajouter 4000 couches, at your option jacky.
Cliquez pour agrandir...

Bonsoir,
Citations : Un critique ne doit jamais hésiter à se rendre ridicule. Paulhan
La critique est superficielle dès qu'elle n'est pas doublement créatrice. Amiel

Sic Shralldam :
Il me semble avoir précisé que mes fichiers sont incomplets et pas optimisés. J'ai juste répondu à la question d'iknabes, à savoir les ombres derrière les blocs, et une présentation 3 colonnes. Mon objectif était seulement de ne pas faire trop compliqué avec le peu de temps que j'y ai consacré.

Non, il n'y a pas de commentaires conditionnels IE. Oui, le layout n'est pas responsive. Oui, le markup pourrait être meilleur. Oui, la feuille de style CSS n'est pas impeccable, y a des redondances et oh, pardon, j'ai pas fait une jolie pile avec préfixes vendeurs pour box-shadow ! Pardon pardon pardon !

J'accepte volontiers la critique, et visiblement tu t'y connais. Par contre, avec un ton aussi expéditif et désagréable (alors qu'on ne se connait même pas, bravo la courtoisie), la critique peut aller se faire voir.

Au lieu d'être aussi hautain, pourquoi ne pas prendre un peu de temps (comme je l'ai fait) pour donner un coup de main à l'auteur de ce sujet ? Je n'ai jamais prétendu être un as du développement, si tu peux faire profiter les lecteurs de ton expertise, toute contribution est la bienvenue.

Mais bon apparemment il est plus simple, du haut de son perchoir, de taxer les autres de bidouilleurs du dimanche ou de jacky… Belle mentalité.

Bonne réponse:)
 
Encore moi:D

Bon, ma.. premiere page avance, je fais des tests sur les differents navigateurs, ca marche a peu pres, mis a part quelques detail a voir, comme la largeur du menu qui passe a la ligne dans certains cas. Evidemment IE, la, ca va pas du tout, mais je n'ai pas encore integrer les "patchs" qui devraient permettre de regler ca.

J'ai une petite question esthetique, quelle astuce pour que les 3 blocs blancs en bas se terminent sur la meme ligne quitte a ce qu'il y ai des gros blanc en fin de <div>. Sur safari toute, ca va, mais les autres me font des blocs aux longueurs variees.

Oui, je sais, suis casse pieds avec mes questions:p

_____

Ah oui, aussi:
la, un peu pour le fun: est ce qu'il est possible, pour une section tres large ( hauteur d'ecran) dans laquelle sont disposer horinzontalement l'une a cote de l'autre des images avec leurs commentaires; la question est ici: est que que l'on peu modifier le mode de defilement de la molette souris afin, qu'au lieu de faire defiler de haut en bas comme habituellement, la molette fasse defiler les images horizontalement?

Comment ca j'aime faire compliqué??:D:D
 
Dernière édition:
Euh..finalement le coup de la section tres large, c est tres moche:rateau:. Oublier ma question sur le coup de la molette a defilement horizontal;)

Sur ce, bonne nuit!:)
 
iknabes a dit:
J'ai une petite question esthetique, quelle astuce pour que les 3 blocs blancs en bas se terminent sur la meme ligne quitte a ce qu'il y ai des gros blanc en fin de <div>. Sur safari toute, ca va, mais les autres me font des blocs aux longueurs variees.

Oui, je sais, suis casse pieds avec mes questions:p

_____

:D:D
Cliquez pour agrandir...

Bonjour,
J'avais déjà remarqué cela : si une div a une hauteur trop importante il y a décalage sur certains navigateurs. Texte en dehors de la div ou trop haut.
Pour remédier à cela si tu as un header, une colonne gauche et droite puis un pied de page il faut mettre tout cela dans une div que tu peux appeler "site".

Donc si la hauteur du header est de 150 px plus espace de 20 px entre colonne gauche dont sa hauteur est de 800 px plus espace de 20 px entre colonne gauche et pied de page dont sa hauteur est de 30 px le tout sur une largeur de 900 px.
La div site qui englobera les autres div devra avoir une hauteur totale est de 1020 px x 900 px.

<div id="site">

<div id="header">
</div>

<div id="colonnegauche">
</div>

<div id="pieddepage">
</div>

</div>

J'espère que c'est clair. :)
 
Dernière édition:
Merci pb88081:)
La solution etait assez simple mais il fallait y penser;)
Mais juste une question, dans mon initiation a l' apprentissage du code, j'avais cru comprendre qu'il etait bon de ne pas mettre de hauteur fixe afin que l affichage s'adapte au contenu ou au navigateur.
N'y a t il pas une solution "automatisé" qui permettrait automatiquement d'adapter les blocs en fonction du plus long, sans avoir a 'figer' une taille( ici 1200 px)?

Peut etre me repondras tu que je veux le beurre et son argent:D
 
iknabes a dit:
Merci pb88081:)
La solution etait assez simple mais il fallait y penser;)
Mais juste une question, dans mon initiation a l' apprentissage du code, j'avais cru comprendre qu'il etait bon de ne pas mettre de hauteur fixe afin que l affichage s'adapte au contenu ou au navigateur.
N'y a t il pas une solution "automatisé" qui permettrait automatiquement d'adapter les blocs en fonction du plus long, sans avoir a 'figer' une taille( ici 1200 px)?

Peut etre me repondras tu que je veux le beurre et son argent:D
Cliquez pour agrandir...

Bonsoir,
J'ai plusieurs fois testé la solution donnée au poste #35 et cela marche sur IE, Safari, Firefox et Google Chrome.
<div id="site">

<div id="header">
</div>

<div id="colonnegauche">
</div>

<div id="pieddepage">
</div>

</div>
Code CSS de div site : #site {
width:960px;
margin:10px auto;
}

Tandis que l'autre solution si la div est trop haute il y aura décalage.
J'ai remarqué qu'il fallait limiter la hauteur de la div à 800 px ou 1000 px (à vérifier) pour un codage de div comme ceci :
<div id="header">
</div>

<div id="blocmilieu">
</div>

<div id="pieddepage">
</div>

Les testes que j'ai effectué ont été réalisés sur ce site : http://browsershots.org

Par ailleurs je ne suis pas un pro en codage donc une recherche approfondie peut être utile pour "automatiser" une hauteur.

Bonne soirée :)
 
Désolé de ne pas avoir répondu plus tôt, je n'ai pas trop eu le temps cette semaine...

Pour ce qui est d'étirer la barre latérale jusqu'au pied de la page (#footer), il y a des solutions mais encore une fois ça dépend des navigateurs. Une des méthodes les plus simples (fonctionne dans les navigateurs récents) consiste à écrire ceci :

Bloc de code: 
#sidebar {
    position: absolute;
    float: left;
    top: 0;
    bottom: 0;
}

Attention, pour que cela fonctionne, il faut que le conteneur parent (#main) ait sa propriété position réglée sur relative.

La propriété position: absolute permet de fixer précisément la position de la boîte. En mettant 0 pour top et bottom, cela force la DIV #sidebar à s'étirer sur toute la hauteur du conteneur parent (#main), qui lui-même s'agrandit au fur et à mesure qu'on ajoute des articles dans le conteneur #content.

Bémol : ça ne fonctionne pas sous IE6 (pas testé avec les autres). Il existe des hacks CSS qui peuvent potentiellement régler le problème, ou alors utiliser un framework JavaScript qui corrige les mauvais comportements d'IE, mais si l'utilisateur a désactivé JS c'est balot :p

Je n'ai pas trop le temps de développer plus mon post ce matin mais je reviens dès que possible, promis ! ;)
 
Haut Bas
Back