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

iknabes

Membre confirmé
2 Octobre 2006
181
1
Bonjour, bonjour:zen:

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?:nailbiting:

Merci d'avance pour toutes vos lumieres:)
 

pb88081

Membre confirmé
9 Novembre 2011
183
1
www.restaurationdemeubles.com
Bonjour, bonjour:zen:

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?:nailbiting:

Merci d'avance pour toutes vos lumieres:)
Bonjour,
Avez l'adresse du site ?
Cela serait plus facile pour vous aider.
 

momo-fr

Ancien Aveyronnais
Club MacG
4 Octobre 2004
4 706
1 820
58
Bordeaux (33)
www.momofr.net
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… :D :cool:
 

iknabes

Membre confirmé
2 Octobre 2006
181
1
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 :)
 

momo-fr

Ancien Aveyronnais
Club MacG
4 Octobre 2004
4 706
1 820
58
Bordeaux (33)
www.momofr.net
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

Membre confirmé
2 Octobre 2006
181
1
pb88081, tu voulais parlé du code source du site web que je veux creer?! Euh, si c&ets ca, il n'existe pas encore:rateau:
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 :D
J'ai donc telecharger Jedit (c'est bien?)pour effectuer les manip en suivant, pour le moment ca va:rolleyes:
effectivement il montre plein de croix rouges pour IE:D

&#21448;&#12397;&#65281;:zen:
 
Dernière édition:

pb88081

Membre confirmé
9 Novembre 2011
183
1
www.restaurationdemeubles.com
pb88081, tu voulais parlé du code source du site web que je veux creer?! Euh, si c&ets ca, il n'existe pas encore:rateau:
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 :D
J'ai donc telecharger Jedit (c'est bien?)pour effectuer les manip en suivant, pour le moment ca va:rolleyes:
effectivement il montre plein de croix rouges pour IE:D

&#21448;&#12397;&#65281;:zen:
Je voulais parler du code source du site ou vous avez trouvé l'image.
Sinon j'ai trouvé ceci : http://www.alsacreations.com/tuto/lire/910-creer-des-ombrages-ombres-css-box-shadow-text-shadow.html
http://www.html5-css3.fr/css3/ombre-css3-box-shadow
http://www.siteduzero.com/tutoriel-3-561853-les-bordures-et-les-ombres.html
http://www.creativejuiz.fr/blog/tutoriels/ombre-avancees-avec-css3-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

Membre confirmé
2 Octobre 2006
181
1
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:up:

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

iknabes

Membre confirmé
2 Octobre 2006
181
1
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:zen:
 

pb88081

Membre confirmé
9 Novembre 2011
183
1
www.restaurationdemeubles.com
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:zen:
Bonjour,
Peux tu mettre le code afin de tester.
 

[MGZ] Shralldam

Gendarmette déchue
Modérateur
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:zen:
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

Membre confirmé
2 Octobre 2006
181
1
ooooh, quelle surprise!!:up:
Merci Shralldam, alors la je te fais des bisous!:D:D
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:siffle:
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:zen:

---------- 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:rose:
 

iknabes

Membre confirmé
2 Octobre 2006
181
1
alors la, vraiment plein de bisous:love:
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:D; 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!!:zen:
 

pb88081

Membre confirmé
9 Novembre 2011
183
1
www.restaurationdemeubles.com
[MGZ] Shralldam;12067412 a dit:
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

Gendarmette déchue
Modérateur
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 :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 :)