Mise en forme

[twinshaadow]

Bonjour,

Je viens de faire l'acquisition de Dreamweaver CS3 et je me suis alors lancé dans la création d'un site. Cependant, je me retrouve confronté à un problème assez contraignant... Voici une illustration pour mieux vous expliquer ce que je voudrais obtenir et ainsi vous exposer mon (mes ?) problème :

image => http://www.servimg.com/image_preview.ph ... u=11488582

En fait, la partie 1 (en noir) c'est juste le fond qui sera en noir, jusque là pas de soucis. C'est là que ça commence (vous me direz, "déjà ???" heu oui déjà^^). La partie 2 (en gris) est en fait une image de fond qui servira juste à illustrer. Et la partie 3 (en blanc) est la partie où sera écrit le texte. En fait, je voudrais que les parties supérieures et inférieures des parties "texte" et "fond" soient statiques, alors que la partie du milieu (partie 4 en rouge très clair qui le montre) sera extensible. Je pense que le principe est bon pour obtenir ce genre d'effet mais je ne sais pas comment le créer. J'ai déjà créé les images avec Photoshop. Donc voilà, je ne vous demande pas de créer mon site (enfin...^^) mais si possible de me donner des liens vers divers tutoriels qui expliquent ce que je cherche à faire serait d'une aide très précieuse. Cela fait déjà pas mal de temps que je cherche sur le net et pas moyen de trouver... Ils expliquent toujours comment créer des DIV qui sont côtes à côtes et tout et tout, mais pas superposés.
Autre chose, quand je mets des DIV l'un après l'autre, il y a un espace comme si j'avais sauté une ligne...

En vous remerciant d'avance.

[twinshaadow]

Toute mes félicitations pour ton site Rad, je viens de découvrir qu'il était vraiment bien fourni
J'ai téléchargé les vidéos qui expliquent comment créer son site mais... Je n'ai toujours pas vu comment faire pour obtenir ce que je désire... :'(

[RAD]

SALUT
twinshaadow

comme je n avais pas trops le temp Je t ai prepare un petit dossier avec une template

et plus important !!

je te fais cadeaux d un soft pro pour le CSS ( payant normalement , mais c est mon jour de bonte , et j ai meme mis une petite video pour la prise en main ) etudie ce soft car il as de nombreuses possibilite , comme par exemple d etre l editeur css de dreamweaver , dans les option third party integration

le dossier


ton probleme vient que tu ne connais pas et ne visualise pas avant coup les modif a effectuer sur le CSS

c est normal tu debute en CSS mais avec le soft , la template + ce tuto ca devrais aller !

si tu as toujour des problemes revient poser tes questions

[twinshaadow]

HAN !! En plus d'être très patient (j'ai pu voir quelques unes de tes "interventions" sur divers forum et franchement, GRAND bravo à toi !!) tu es "bon" ^^
Je vais voir tout ça et je te tiens au courant
Grand merci à toi RAD^^

[twinshaadow]

Ah oui et merci pour la rapidité et l'efficacité de ta réponse^^
Ca change de certains forum...

[twinshaadow]

Re

Malheureusement, la template que tu m'as envoyé ne correspond pas à ce que je voudrais faire. Cependant, je n'ai pas encore touché au logiciel que tu m'as envoyé et je vais aller voir ça de suite. En attendant, tu peux voir ce que j'ai pu faire pour le moment :



Bon, évidement, mon problème d'extension n'est toujours pas réglé x) J'ai juste pu superposer les calques que je voulais, mais après... Je sais toujours pas comment créer ce que j'ai expliqué dans mon premier message et... J'ai trouvé ce petit truc sympa, cet espace qu'il y a entre mes deux calques :s Comment le supprimer ?

Enfin, chaque chose en son temps tu me diras, pour le moment j'aimerais déjà pouvoir créer le parchemin que tu peux voir sur l'image mais extensible au milieu (l'image qui sera en bas de ce parchemin sera exactement pareil que celui pour le haut mais inversé^^). Pour le fond en fait, j'aimerais qu'il soit statique. On verra ensuite le soucis de l'espace.

++ RAD (et les autres s'il y a^^)

[twinshaadow]

Mouarf, j'avais pas fait attention au tutoriel... (je serrais fouetté pour la peine) j'vais lire tout ça

[RAD]

lool

oui regarde les tuto alsacreations et aprend a utiliser le soft , la template est la pour t aider a comprendre et a travailler avec le soft , ce n est pas un modele pour ton site !! tu verras que si tu comprend css il ni as pas de limite ou presque !!

un exemple ,
sur le site ci dessous , a droite de la page tu peu changer de style de page !! mais ou c est fort , c est que le CSS uniquement a ete change !!! rien n a ete touche dans le code de la page ZEN GARDEN

et voila les 18 pages de desing de zen garden fait avec le meme html , SEUL LA CSS CHANGE

.

[twinshaadow]

Bonsoir RAD,

Bon le site de ZEN GARDEN est tout bonnement "abusé" Oo Sérieux le type il maîtrise la CSS comme personne et qui plus est, je ne comprend pas comment l'HTML suis sans qu'il y est touché...
Sinon je suis en train de parcourir Alsacréation qui est, il faut le dire, bien fourni mais... Il y a toujours un "mais" avec moi, je ne sais toujours pas comment régler mon soucis d'espace comme je l'ai montré plus haut :/ J'ai cru comprendre qu'il fallait imbriquer les deux DIV mais je t'avouerais que je ne trouve pas (ou alors j'ai pas lu les bonnes lignes dans Alsacréation...) j'ai cherché sur le net mais rien de rien. Puis-je espérer un coup de pouce encore une fois de ta part RAD ?^^
Ceci dit, je découvre petit à petit Dreamweaver et le logiciel que tu m'as passé^^

[RAD]

SALUT

le probleme que tu as est assez frequent ! il y as des techniques pour le corriger mais il faut revoir le css

et tu risque de galerer a cause des regles herites que tu ne maitrise pas !

le plus simple pour toi est de faire comme sur cet Exemple

telecharge l exemple ICI

et regarde comment j ai fais

[twinshaadow]

Salut

Ok donc si j'ai bien compris, tu as mis une DIV toute noire par dessous afin de combler cet espace en fait... Hummmmm... Donc je devrais faire pareil mais avec mon "parchemin" avec une taille de 550x2 pixel (550 = la largeur du parchemin où le texte sera écrit pour mon site^^) qui se multipliera ?!
J'espère avoir bien compris le principe

[twinshaadow]

Ah mais !! C'est du .gif ?? Oo Pourquoi choisir un tel format ?

[RAD]

Ok donc si j'ai bien compris, tu as mis une DIV toute noire par dessous afin de combler cet espace en fait... Hummmmm... Donc je devrais faire pareil mais avec mon "parchemin" avec une taille de 550x2 pixel (550 = la largeur du parchemin où le texte sera écrit pour mon site^^) qui se multipliera ?!

pas du tout

regarde bien !!

tu as une div "page" qui dans mon exemple represente le cadre de ton parchemin avec une image bg

dans cette div tu as la div "header" qui est le haut de ton parchemin avec une image bg

et la div text qui elle represente le texte mais tu n est pas oblige de mettre le texte dans une div tu peux faire comme tu veux


alors le gif vas parfaitement bien pour des graphiques les photo sont mieux en png ou jpg mais tu peux utiliser un des 3 sans probleme

[twinshaadow]

pas du tout

Bon... Ca va venir Twin, ça va venir^^ Cependant, ça rejoint un poil ce que je disais :p
Bref, je vais foutre le bordel dans le code que tu viens de m'envoyer histoire de voir comment tout ça fonctionne^^
Je te tiens au courant de l'avancement (ou pas...) de mon site Je pense qu'avec tout ça, je devrais certainement pouvoir continuer un peu.
En te remerciant une fois de plus

Ah et oui, pendant que j'y pense, connais-tu un site qui propose un tutoriel pour faire cet effet ?
http://www.cyberformateur.com/support/d ... index.htm# (Diaporama interactif)
Sur se site, ils proposent d'expliquer comment créer certaines choses en DHTML mais pas pour cet effet

PS : On peut pas éditer nos précédents messages ?! Ca éviterai la "pollution" ^^

[RAD]

bon si tu ni arrive pas je vais te donner un truc

si tu regarde bien tu verras que en haut de mon exemple entre la div "page" et son "enfant" la div "header" il y as toujours cet espace , le probleme est encore la!
!!

ajoute simplement une "border-top" de 1px sur la div "header" et hop plus d espace ) tu donne ensuite la meme couleur ou une couleur le plus proche
de ton image de fond a la bordure