[iknabes]

Bonjour, bonjour

Je me lance doucement sur dreamweaver en suivant doucement differents tutoriaux. Je pense que je commence a comprendre la construction globale avec ccs, entete bloc, marge, lien...
mais je n'arrive pas a me figurer la methodologie pour creer ce genre de body, voir l'image (un fond gris tres pale avec des rectangles blancs ombrés dans lesquels se trouveront texte image , voir les 2 en meme temps) que j'aimerai pour mon site

Si vous pouviez m'indiquer la methodologie, les etapes (meme en bref) pour construire cette base. Dois je integrer ces rectangles en image fond puis placer des blocs texte dessus?

Merci d'avance pour toutes vos lumieres

[pb88081]

Envoyé par iknabes

Bonjour, bonjour

Je me lance doucement sur dreamweaver en suivant doucement differents tutoriaux. Je pense que je commence a comprendre la construction globale avec ccs, entete bloc, marge, lien...
mais je n'arrive pas a me figurer la methodologie pour creer ce genre de body, voir l'image (un fond gris tres pale avec des rectangles blancs ombrés dans lesquels se trouveront texte image , voir les 2 en meme temps) que j'aimerai pour mon site

Si vous pouviez m'indiquer la methodologie, les etapes (meme en bref) pour construire cette base. Dois je integrer ces rectangles en image fond puis placer des blocs texte dessus?

Merci d'avance pour toutes vos lumieres

Bonjour,
Avez l'adresse du site ?
Cela serait plus facile pour vous aider.

[momo-fr]

C'est plutôt vaste à décrire, la base d'un squelette HTML/CSS c'est un structure de contenants, du plus grand au plus petit, avec les parentés CSS qui y sont jointes.
On utilise des <div> et leur classes respectives (ou ID si besoin de ciblage)… mais le HTML5 est là et pas mal de choses sont à revoir, par exemple ici : le site du Zéro

Je pense que c'est le mieux aujourd'hui, laisser tomber le HTML4 ou XHTML.

Pour l'ombrage c'est un attribut CSS à ajouter aux descriptions CSS des classes de tes éléments.

Courage : le bout n'est pas le but, le but c'est d'aller au bout…

[iknabes]

Merci Momo-fr et pb 88081, je prends bonne note .
J'ai cree les div mais n avait pas trouve que l on pouvait ajouter une ombre en css; mais de toute facon, effectivement je crois que je vais jeter un oeil du cote de ce html 5 dont on entend de plus en plus parle

oui, oui, je vais prendre le temps d'aller jusqu'au bout

[pb88081]

Bonjour,
Je parlais de l'adresse du site pour étudier le code. Le développement Web sous Mac est très utile pour cela.
Bon courage

[momo-fr]

Envoyé par iknabes

J'ai cree les div mais n avait pas trouve que l on pouvait ajouter une ombre en css.

L'ombrage en CSS c'est comme bien des fonctions CSS sujet à version et support des navigateurs, c'est à dire un peu aléatoire… ça s'améliore, on est presque au bout du tunnel (encore trop d'IE8 dans la nature à mon goût).

[iknabes]

pb88081, tu voulais parlé du code source du site web que je veux creer?! Euh, si c&ets ca, il n'existe pas encore
Concernant lesiteduzero, tres bon conseil, je viens de passer l'apres midi (de mon cote du globe) sur le tutorial html 5 et cc3, tres clair, et j'aime beaucoup le ton utilise
J'ai donc telecharger Jedit (c'est bien?)pour effectuer les manip en suivant, pour le moment ca va
effectivement il montre plein de croix rouges pour IE

又ね！

[pb88081]

Envoyé par iknabes

pb88081, tu voulais parlé du code source du site web que je veux creer?! Euh, si c&ets ca, il n'existe pas encore
Concernant lesiteduzero, tres bon conseil, je viens de passer l'apres midi (de mon cote du globe) sur le tutorial html 5 et cc3, tres clair, et j'aime beaucoup le ton utilise
J'ai donc telecharger Jedit (c'est bien?)pour effectuer les manip en suivant, pour le moment ca va
effectivement il montre plein de croix rouges pour IE

又ね！

Je voulais parler du code source du site ou vous avez trouvé l'image.
Sinon j'ai trouvé ceci : http://www.alsacreations.com/tuto/li...xt-shadow.html
http://www.html5-css3.fr/css3/ombre-css3-box-shadow
http://www.siteduzero.com/tutoriel-3...es-ombres.html
http://www.creativejuiz.fr/blog/tuto...-et-box-shadow
car cela m'intéresse aussi.
J'ai juste survolé les sites mais si vous en avez trouvé qui marche avec tous les navigateurs, cela m'intéresse.
Merci

[iknabes]

ah oui, je comprends maintenant. En fait l'image vient de l'ebauche-preparation que j'ai fait sous illustrator.
Merci beaucoup pour les liens pb88081, je regarderai ça. Pour le moment je continue le fil du tutorial site du zero et j'arrive justement a la partie bordure et ombre. Ca semble d'embléne pas etre un probleme au final

Je m'essaye a tout cela et vous tiens au courant

[iknabes]

Je suis mon apprentissage du codage ccs33 html5 en suivant le site du zero; mais j'ai un petit souci avec la div <nav> qui ne donne aucun effet; d'ailleurs celle-ci reste a chaque fois noire dans mon code, j'imagine que cela veut dire qu'elle n'est pas interpretee.
question: ets ce que cela peut venir du fait que je suis sur un vieux powerbook pc (en attendant prochain achat) et que je ne peux donc installer la derniere version java 1.6? Ou est-ce quelquechose a voir du cote du logiciel Jedit?

Merci encore pour vos eclaircissements

[pb88081]

Envoyé par iknabes

Je suis mon apprentissage du codage ccs33 html5 en suivant le site du zero; mais j'ai un petit souci avec la div <nav> qui ne donne aucun effet; d'ailleurs celle-ci reste a chaque fois noire dans mon code, j'imagine que cela veut dire qu'elle n'est pas interpretee.
question: ets ce que cela peut venir du fait que je suis sur un vieux powerbook pc (en attendant prochain achat) et que je ne peux donc installer la derniere version java 1.6? Ou est-ce quelquechose a voir du cote du logiciel Jedit?

Merci encore pour vos eclaircissements

Bonjour,
Peux tu mettre le code afin de tester.

[[MGZ] Shralldam]

Envoyé par iknabes

Je suis mon apprentissage du codage ccs33 html5 en suivant le site du zero; mais j'ai un petit souci avec la div <nav> qui ne donne aucun effet; d'ailleurs celle-ci reste a chaque fois noire dans mon code, j'imagine que cela veut dire qu'elle n'est pas interpretee.
question: ets ce que cela peut venir du fait que je suis sur un vieux powerbook pc (en attendant prochain achat) et que je ne peux donc installer la derniere version java 1.6? Ou est-ce quelquechose a voir du cote du logiciel Jedit?

Merci encore pour vos eclaircissements

Je t'ai fait un layout qui reprend plus ou moins l'aspect que tu cherches :

https://dl.dropbox.com/u/5373816/misc/layoutbs.zip

Attention, c'est du très vite fait, c'est incomplet et probablement pas optimisé. Cependant ça peut te servir de base. Vu qu'on utilise le HTML5, on devrait en principe utiliser les balises natives (au lieu des div) et utiliser un script comme modernizr pour les vieux navigateurs, mais vu que tu as commencé comme ça (et qu'utiliser des div ça permet au moins la compatibilité avec les anciens navigateurs sans passer par un script - le layout que je te propose fonctionne sous IE6 mais sans les ombres forcément)…

[iknabes]

ooooh, quelle surprise!!
Merci Shralldam, alors la je te fais des bisous!
Apres 2 semaines a m'entrainer code, je commence a comprendre et connaitre la logique de construction d'un site web; mais bon... les bloc ne se mettent pas encore exactement comme je voudrais
donc je regarde ton layout, ca va surement m'aider a comprendre mes erreurs.

En tout cas 1000 merci, c'est vraiment super de tomber sur des gens qui prennent du temps comme ca.
Je vous tiens au courant

---------- Nouveau message ajouté à 20h33 ---------- Le message précédent a été envoyé à 20h14 ----------

Shralldam, je ne comprends pas, je n'arrive pas a ouvrir ton document, j'essaie de le dezipper mais rien a faire. Quel est le format du document? apres des recherches je vois que quelquefois lors de transfert, l'ordi ajoute une extention .zip qui n'est pas forcement la a l'origine.
En plus precis, quand je dezippe cela me creer un fichier .cpgz

[[MGZ] Shralldam]

Ah bon ? Bizarre, je l'ai pourtant compressé depuis le Finder... Je vais voir ce qui se passe, mais pas de suite car mon Mac est en pleine restau Time Machine et il y en a pour 45 minutes encore :-)

[iknabes]

wouaaou, ta reponse est rapide.
ok, j attends j'attends
de mon cote je continue doucement

[[MGZ] Shralldam]

Voilà, cette fois-ci ça devrait être bon :

https://dl.dropbox.com/u/5373816/misc/layoutbs.zip

[iknabes]

alors la, vraiment plein de bisous
je crois que j'ai vraiment tout ce qu'il faut pour apprendre et continuer; je n'en attendais pas tant. Je peux maintenant me coucher; j'imprimerai tout ca tout a l heure pour apprendre en allant au travail . J'aurai surement des petites questions genre, a quoi correspond "blockquote" ou "place", mais ferai de mon mieux pour me debrouiller

encore mille merci pour ce sérieux coup de main!!

[[MGZ] Shralldam]

S'il faut expliquer demande toujours, si j'ai le temps je répondrai

[pb88081]

Envoyé par [MGZ] Shralldam

S'il faut expliquer demande toujours, si j'ai le temps je répondrai

Bonjour,
Merci beaucoup pour le fichier zip.
J'ai voulu utiliser un menu horizontal déroulant placé sur le header mais le déroulant se glisse sous les div situées dessous même en utilisant z-index. Si il y a une astuce et que vous avez le temps je suis preneur.
Bonne journée et encore merci

[[MGZ] Shralldam]

Envoyé par pb88081

Bonjour,
Merci beaucoup pour le fichier zip.
J'ai voulu utiliser un menu horizontal déroulant placé sur le header mais le déroulant se glisse sous les div situées dessous même en utilisant z-index. Si il y a une astuce et que vous avez le temps je suis preneur.
Bonne journée et encore merci

Ah, ben je vois qu'il sert à d'autres personnes ce layout

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 :

#header, #main {
    position: relative;
}

#header {
    z-index: 1;
}

#main {
    z-index: -1;
}

Voilà, ça devrait marcher