Accueil
Rechercher
Publications
Dernières images
Connexion
S'enregistrer
Flow57Ange discret
Nombre de messages : 20
Réputation : 0
Points : 0
Date d'inscription : 30/06/2008
Découpe
Sam 30 Aoû 2008, 02:10
Bonjour,
Est ce que quelqu'un saurait faire des découpes de design, pour les adapter en HTML/CSS ensuite ? :$
C'est urgent, car j'ai le design de ma newsletter à découper justement, pour l'utiliser dans quelques jours ...
Si quelqu'un peut m'aider je lui enverrai le design par MP :)
Merci d'avance ... Et bonne nuit =)
Est ce que quelqu'un saurait faire des découpes de design, pour les adapter en HTML/CSS ensuite ? :$
C'est urgent, car j'ai le design de ma newsletter à découper justement, pour l'utiliser dans quelques jours ...
Si quelqu'un peut m'aider je lui enverrai le design par MP :)
Merci d'avance ... Et bonne nuit =)
NororeAdmin
Nombre de messages : 2606
Logiciel : Gimp - Inkscape
Réputation : 49
Points : 1010
Date d'inscription : 23/11/2007
Détails sur le membre
Logiciel principal: Gimp
Ma disponibilité: Dispo pour surveiller, pour grapher, faudra patienter...
Spécialités graphiques: Codeur
Re: Découpe
Sam 30 Aoû 2008, 10:21
Salut, tout dépend de la façon dont tu veux qu'elle soit découpée, mais sans l'image, on aura du mal à te guider :) !
- Flow57Ange discret
Nombre de messages : 20
Réputation : 0
Points : 0
Date d'inscription : 30/06/2008
Re: Découpe
Sam 30 Aoû 2008, 12:15
Sorry ^^'
Donc le voici :
http://flow.jesuisopen.fr/images/newletter(1).jpg avec texte
et
http://flow.jesuisopen.fr/images/newletterst.jpg sans texte
:)
Edit : Je viens de voir que vous aviez une partie spéciale découpe / réalisation de kit, mais elle est fermée alors qu'elle est vide ... ce serai possible de déplacer le topic afin qu'éventuellement quelqu'un puisse m'apporter son aide ? :$
Donc le voici :
http://flow.jesuisopen.fr/images/newletter(1).jpg avec texte
et
http://flow.jesuisopen.fr/images/newletterst.jpg sans texte
:)
Edit : Je viens de voir que vous aviez une partie spéciale découpe / réalisation de kit, mais elle est fermée alors qu'elle est vide ... ce serai possible de déplacer le topic afin qu'éventuellement quelqu'un puisse m'apporter son aide ? :$
- Flow57Ange discret
Nombre de messages : 20
Réputation : 0
Points : 0
Date d'inscription : 30/06/2008
Re: Découpe
Dim 31 Aoû 2008, 00:49
Je me permet d'upper, car c'est urgent et que vous êtes mon dernier recours, malgré mon edit qui était fait pour éviter le up ... =/
- NororeAdmin
Nombre de messages : 2606
Logiciel : Gimp - Inkscape
Réputation : 49
Points : 1010
Date d'inscription : 23/11/2007
Détails sur le membre
Logiciel principal: Gimp
Ma disponibilité: Dispo pour surveiller, pour grapher, faudra patienter...
Spécialités graphiques: Codeur
Re: Découpe
Dim 31 Aoû 2008, 10:15
Mozilla Firefox me dit que ton site est un site contrefait, et même si je lui demande de faire une exception, je tombe sur lycos -_-' !
Edit : j'ai rien dit :languue: !
Pour ta découpe, il suffit de le couper en trois parties distinctes : l'en-tête, soit les crocos et ce qui ressemble à une barre de menu ; le corps, pour ça il te suffit de couper uniquement une hauteur d'1 pixel mais avec toute la largeuer ; et le bas, en prenant soin de bien prendre le croco qui est en transparence :^^: !
Edit : j'ai rien dit :languue: !
Pour ta découpe, il suffit de le couper en trois parties distinctes : l'en-tête, soit les crocos et ce qui ressemble à une barre de menu ; le corps, pour ça il te suffit de couper uniquement une hauteur d'1 pixel mais avec toute la largeuer ; et le bas, en prenant soin de bien prendre le croco qui est en transparence :^^: !
- Flow57Ange discret
Nombre de messages : 20
Réputation : 0
Points : 0
Date d'inscription : 30/06/2008
Re: Découpe
Dim 31 Aoû 2008, 23:14
C'est presque ce que j'avais déjà fait, mais niveau CSS, je suis encore une daube =/
-> http://www.walymag.com/divers/newsletter
:larmes:
-> http://www.walymag.com/divers/newsletter
:larmes:
- NororeAdmin
Nombre de messages : 2606
Logiciel : Gimp - Inkscape
Réputation : 49
Points : 1010
Date d'inscription : 23/11/2007
Détails sur le membre
Logiciel principal: Gimp
Ma disponibilité: Dispo pour surveiller, pour grapher, faudra patienter...
Spécialités graphiques: Codeur
Re: Découpe
Lun 01 Sep 2008, 09:22
Tu peux aussi couper le header en deux, afin de mettre les deux textes sur la même ligne et te servir de la commande float: (non|right|left); et faire ensuite un clear: both; pour l'image du corps :) !
- Flow57Ange discret
Nombre de messages : 20
Réputation : 0
Points : 0
Date d'inscription : 30/06/2008
Re: Découpe
Lun 01 Sep 2008, 11:44
Pour l'image du corps, la mascotte ou le fond ?
Est ce que tu pourrais me le faire, si tu as un petit moment, ça ne devrait pas être trop compliqué pour toi ? :$ Car je dois m'en servir dans les jours qui viennent normalement ... =/
Et d'ici là que j'y arrive pas moi même ... =(
( Edit : Le premier lien marche, mais il faut le copier / coller dans la barre d'adresse, la parenthèse coupant le lien :bloancolere: )
Est ce que tu pourrais me le faire, si tu as un petit moment, ça ne devrait pas être trop compliqué pour toi ? :$ Car je dois m'en servir dans les jours qui viennent normalement ... =/
Et d'ici là que j'y arrive pas moi même ... =(
( Edit : Le premier lien marche, mais il faut le copier / coller dans la barre d'adresse, la parenthèse coupant le lien :bloancolere: )
- NororeAdmin
Nombre de messages : 2606
Logiciel : Gimp - Inkscape
Réputation : 49
Points : 1010
Date d'inscription : 23/11/2007
Détails sur le membre
Logiciel principal: Gimp
Ma disponibilité: Dispo pour surveiller, pour grapher, faudra patienter...
Spécialités graphiques: Codeur
Re: Découpe
Lun 01 Sep 2008, 20:25
L'image du corps = le fond.
Pour l'ensemble, voici un début de code de la façon dont je procéderais :
Avec cette architecture HTML :
Bon, c'est une ébauche rapide, mais je pense que ça pourra te servir de base :Oeil: !
Pour l'ensemble, voici un début de code de la façon dont je procéderais :
- Code:
/* Définition de l'ensemble global de la page du contenu contenant les blocs */
#contenu
{background : /* le fond que tu veux (couleur ou image ou autre) */
width: /* largeur en pixel */;
height: auto;
margin: auto;}
/* Définition du bloc du haut qui devra contenir les deux images de l'en-tête collées l'une contre l'autre sur la même hauteur */
#bloc_haut
{width: /* largeur en pixel */;
height: /* hauteur en pixel */;
/* Le bloc de gauche de l'en-tête */
.bloc_haut_gauche
{background: url(/* le lien de ton morceau gauche d'en-tête */) no-repeat /* avec une couleur pour remplacer l'image si le lien est mort*/;
float: left;
margin: auto;}
/* Le bloc de droite de l'en-tête */
.bloc_haut_droit
{background: url(/* le lien de ton morceau droit d'en-tête */) no-repeat /* avec une couleur pour remplacer l'image si le lien est mort*/;
float: right;
margin: auto;}
/* Le bloc du contenu, l'image de fond qui fait 1 pixel de hauteur */
.bloc_milieu
{background: url(/* le lien de ton image de fond */) repeat-y /* avec une couleur pour remplacer l'image si le lien est mort*/;
clear: both;
margin: auto;}
/* Le bloc du pied de page */
.bloc_bas
{background: url(/* le lien de ton pied de page */) no-repeat /* avec une couleur pour remplacer l'image si le lien est mort*/;
margin : auto}
Avec cette architecture HTML :
- Code:
<html>
<head><title>Titre</title></head>
<body>
<div id="contenu">
<div id="bloc_haut">
<div class="bloc_haut_gauche">
<!-- Ici le titre de ta newsletter -->
</div>
<div id="bloc_haut_droit">
<!-- Ici la date de parution de ta newsletter -->
</div>
</div>
<div class="bloc_milieu">
<!-- Ici tu peux mettre tout le contenu de ta newsletter avec la mise en page de ton choix -->
</div>
<div class="bloc_bas">
<!-- le pied de page de ta newsletter, si tu souhaites rajouter des copyrights, tu pourras le faire ici -->
</div>
</div>
</body>
</html>
Bon, c'est une ébauche rapide, mais je pense que ça pourra te servir de base :Oeil: !
- Flow57Ange discret
Nombre de messages : 20
Réputation : 0
Points : 0
Date d'inscription : 30/06/2008
Re: Découpe
Lun 01 Sep 2008, 23:01
Merci beaucoup :)
Voilà donc avec quelques petites modifications :
index.html
style.css
Le résultat : http://www.walymag.com/divers/newsletter/
Comme tu peux le voir je n'ai pas arrivé à mettre le texte sur la barre et cette mascotte entièrement visible en bas à gauche ... =/ Tu pourrais modifier mes erreurs ?
Voilà donc avec quelques petites modifications :
index.html
- Code:
<html>
<head><title>Waly'Mag - Newsletter N°1</title>
<link rel="stylesheet" type="text/css" href="http://www.walymag.com/divers/newsletter/style.css" />
</head>
<body bgcolor="#8FCC2C">
<div id="contenu">
<div id="bloc_haut">
<img src="http://www.walymag.com/divers/newsletter/img/header.jpg"><br />
<img src="http://www.walymag.com/divers/newsletter/img/barre.jpg">
<div class="bloc_haut_gauche">
Newsletter N°1<!-- Ici le titre de ta newsletter -->
</div>
<div id="bloc_haut_droit">
1er Septembre 2008<!-- Ici la date de parution de ta newsletter -->
</div>
</div>
<div class="bloc_milieu">
TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE <!-- Ici tu peux mettre tout le contenu de ta newsletter avec la mise en page de ton choix -->
</div>
<div class="bloc_bas">
© Copyright 2008 Walymag.com - Walygator Parc<!-- le pied de page de ta newsletter, si tu souhaites rajouter des copyrights, tu pourras le faire ici -->
</div>
</div>
style.css
- Code:
/* Définition de l'ensemble global de la page du contenu contenant les blocs */
#contenu
{background: http://www.walymag.com/divers/newsletter/img/background.jpg; /* le fond que tu veux (couleur ou image ou autre) */
width: 500 /* largeur en pixel */;
height: auto;
margin: auto;}
/* Définition du bloc du haut qui devra contenir les deux images de l'en-tête collées l'une contre l'autre sur la même hauteur */
#bloc_haut
{width: 500 /* largeur en pixel */;
height: 169 /* hauteur en pixel */; }
/* Le bloc de gauche de l'en-tête */
.bloc_haut_gauche
{background: url(http://www.walymag.com/divers/newsletter/img/background.jpg) no-repeat #7AB815 /* avec une couleur pour remplacer l'image si le lien est mort*/;
float: left;
margin: auto;
width: 500;}
/* Le bloc de droite de l'en-tête */
.bloc_haut_droit
{background: url(/* le lien de ton morceau droit d'en-tête */) no-repeat #7AB815 /* avec une couleur pour remplacer l'image si le lien est mort*/;
float: right;
margin: auto;
width: 500;}
/* Le bloc du contenu, l'image de fond qui fait 1 pixel de hauteur */
.bloc_milieu
{background: url(http://www.walymag.com/divers/newsletter/img/background.jpg) repeat-y #7AB815 /* avec une couleur pour remplacer l'image si le lien est mort*/;
clear: both;
margin: auto;
width: 500}
/* Le bloc du pied de page */
.bloc_bas
{background: url(http://www.walymag.com/divers/newsletter/img/basgauche.jpg) no-repeat #7AB815 /* avec une couleur pour remplacer l'image si le lien est mort*/;
margin : auto;
float: left;
text-align: center;
font-family: Bookman Antiqua, sans-serif;
font-size: 10px;
width: 500;}
Le résultat : http://www.walymag.com/divers/newsletter/
Comme tu peux le voir je n'ai pas arrivé à mettre le texte sur la barre et cette mascotte entièrement visible en bas à gauche ... =/ Tu pourrais modifier mes erreurs ?
- NororeAdmin
Nombre de messages : 2606
Logiciel : Gimp - Inkscape
Réputation : 49
Points : 1010
Date d'inscription : 23/11/2007
Détails sur le membre
Logiciel principal: Gimp
Ma disponibilité: Dispo pour surveiller, pour grapher, faudra patienter...
Spécialités graphiques: Codeur
Re: Découpe
Lun 01 Sep 2008, 23:09
L'en-tête, il fallait plutôt le couper en deux, dans le sens de la hauteur :konten: !
Et le bas, c'est tout le bas en prenant bien le croco :Oeil: !
Et le bas, c'est tout le bas en prenant bien le croco :Oeil: !
- Flow57Ange discret
Nombre de messages : 20
Réputation : 0
Points : 0
Date d'inscription : 30/06/2008
Re: Découpe
Lun 01 Sep 2008, 23:15
L'entête ... la barre ...
Et tout le bas c'est à dire ? De cette façon :
Et tout le bas c'est à dire ? De cette façon :
- NororeAdmin
Nombre de messages : 2606
Logiciel : Gimp - Inkscape
Réputation : 49
Points : 1010
Date d'inscription : 23/11/2007
Détails sur le membre
Logiciel principal: Gimp
Ma disponibilité: Dispo pour surveiller, pour grapher, faudra patienter...
Spécialités graphiques: Codeur
Re: Découpe
Mar 02 Sep 2008, 18:40
Essai plutôt avec ces images découpées :
- Flow57Ange discret
Nombre de messages : 20
Réputation : 0
Points : 0
Date d'inscription : 30/06/2008
Re: Découpe
Mar 02 Sep 2008, 19:00
http://newsletter.walymag.com/
:bouche cousu:
Serait il possible de te contacter par MSN / Skype / Gtalk, ne serais-ce qu'un instant, le temps de terminer cette petite chose ? :)
:bouche cousu:
Serait il possible de te contacter par MSN / Skype / Gtalk, ne serais-ce qu'un instant, le temps de terminer cette petite chose ? :)
- NororeAdmin
Nombre de messages : 2606
Logiciel : Gimp - Inkscape
Réputation : 49
Points : 1010
Date d'inscription : 23/11/2007
Détails sur le membre
Logiciel principal: Gimp
Ma disponibilité: Dispo pour surveiller, pour grapher, faudra patienter...
Spécialités graphiques: Codeur
Re: Découpe
Mar 02 Sep 2008, 19:25
Voici ce que ça donne chez moi sous Firefox (version 3) :
Et sous Internet Explorer (version 7) :
Si ça te convient, je t'envoie un lien pour télécharger mes archives :Oeil: !
PS : je n'arrive pas à mieux dans l'urgence, désolée :mimi:: !
Et sous Internet Explorer (version 7) :
Si ça te convient, je t'envoie un lien pour télécharger mes archives :Oeil: !
PS : je n'arrive pas à mieux dans l'urgence, désolée :mimi:: !
- Flow57Ange discret
Nombre de messages : 20
Réputation : 0
Points : 0
Date d'inscription : 30/06/2008
Re: Découpe
Mar 02 Sep 2008, 19:30
Arf pourquoi le texte est si loin du header sous Firefox ? :o C'est ce que je trouve de plus gênant ... enfin je ferai avec pour cette fois, la prochaine newsletter etant dans un mois normalement, j'ai le temps de revoir ca :) donc je veux bien l'archive oui. :)
- NororeAdmin
Nombre de messages : 2606
Logiciel : Gimp - Inkscape
Réputation : 49
Points : 1010
Date d'inscription : 23/11/2007
Détails sur le membre
Logiciel principal: Gimp
Ma disponibilité: Dispo pour surveiller, pour grapher, faudra patienter...
Spécialités graphiques: Codeur
Re: Découpe
Mar 02 Sep 2008, 19:34
je t'avouerais que je n'en ai aucune idée :Gné: ! Mais si tu trouves la solution, ce serait gentil de me le dire :Oeil: !Flow57 a écrit:Arf pourquoi le texte est si loin du header sous Firefox ? :o C'est ce que je trouve de plus gênant ... enfin je ferai avec pour cette fois, la prochaine newsletter etant dans un mois normalement, j'ai le temps de revoir ca :) donc je veux bien l'archive oui. :)
Surveille ta boîte de messagerie privée :Oeil: !
- Flow57Ange discret
Nombre de messages : 20
Réputation : 0
Points : 0
Date d'inscription : 30/06/2008
Re: Découpe
Mar 02 Sep 2008, 19:35
Ca marche. Merci. Oui je te préviendrai ;) En attendant je vais me passer de l'image du bas je pense :)
- NororeAdmin
Nombre de messages : 2606
Logiciel : Gimp - Inkscape
Réputation : 49
Points : 1010
Date d'inscription : 23/11/2007
Détails sur le membre
Logiciel principal: Gimp
Ma disponibilité: Dispo pour surveiller, pour grapher, faudra patienter...
Spécialités graphiques: Codeur
Re: Découpe
Mar 02 Sep 2008, 19:36
Attend de voir mon code source avant ^^ !Flow57 a écrit:En attendant je vais me passer de l'image du bas je pense :)
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum|
|
|