Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1991 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Site extensible via image

 



 Mot :   Pseudo :  
 
 Page :   1  2
Page Précédente
Auteur Sujet :

Site extensible via image

n°1922444
SouthParkN​ews
Posté le 09-09-2009 à 10:21:19  profilanswer
 

Bonjour,
 
Je souhaite faire une page de garde pour mon site en développement.
J'ai mis une image en ligne et j'aimerais qu'elle puisse prendre tout l'écran et ça peut importe la résolution des Internaute.
J'ai réussi à faire ce procédé sur l'axe des x mais je n'y parviens pas sur celui des y.
 
Mon site : www.aurelienhamel.com
 
Je dois dire que la programmation n'est pas réellement mon fort mais j'ai envie d'apprendre.
Merci de votre aide qui me sera très précieuse !  
 
 :)

mood
Publicité
Posté le 09-09-2009 à 10:21:19  profilanswer
 

n°1922855
abais
Posté le 10-09-2009 à 10:26:45  profilanswer
 

Il faudrait (si j'ai bien compris que :
-La banderole noir et ses bordure verte prenne toute la longueur, et qu'elle soit centrée verticalement
- "This site is not yet online" positionner entre le milieu et le bas verticalement ( environ 75% de l'axe y)
-La signature/footer positionné en bas.
 
Si c'est ça, il te faudra 3 <div> et une autre découpe de ton image...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1923410
SouthParkN​ews
Posté le 11-09-2009 à 19:34:55  profilanswer
 

Ouai c'est ça je pense.  
Si c'était possible de me faire une capture d'écran de ce que tu vois !
 
Merci ! ^^

n°1923477
abais
Posté le 11-09-2009 à 21:12:44  profilanswer
 

Ton code doit donc avoir cette structure grossomerdo...
Bon, j'avais pas tes images, j'ai donc mis des fond de couleur...
Remplace <div id="monImage"></div> par ton <img...></img>
Tu doit mettre ton degradé en repeat-x en guise de background du body, et les images correspondante ou tu devineras...
 
Voila :)
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Aurélien HAMEL</title>
  6.  
  7. <style type="text/css">
  8. <!--
  9. BODY{
  10. margin:0;
  11. }
  12. #banderolle{
  13. position:absolute;
  14. background-color:#000000;
  15. height:250px;
  16. top:50%;
  17. margin-top:-125px;
  18. width:100%;
  19. text-align::center;
  20. }
  21. #monImage{
  22. margin:auto;
  23. background-color:#333333;
  24. width:400px;
  25. height:250px;
  26. }
  27. #construct{
  28. position:absolute;
  29. width:100%;
  30. bottom:15%;
  31. color:#FF0000;
  32. text-align:center;
  33. font-size:20px;
  34. font-weight:bold;
  35. }
  36. #footer{
  37. position:absolute;
  38. width:100%;
  39. bottom:0px;
  40. color:#000;
  41. text-align:center;
  42. font-size:15px;
  43. }
  44. -->
  45. </style>
  46.  
  47. </head>
  48.  
  49. <body>
  50. <div id="banderolle"><div id="monImage"></div></div>
  51. <div id="construct">Texte blabla</div>
  52. <div id="footer">Ici ma signature - blabla bla blablabla</div>
  53. </body>
  54. </html>


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1923542
SouthParkN​ews
Posté le 12-09-2009 à 08:54:10  profilanswer
 

Merci pour ton aide, j'ai essayer de remettre le tout en ordre mais ça donne pas le résultat voulu. J'ai quelques problèmes de positionnement.

n°1923894
SouthParkN​ews
Posté le 14-09-2009 à 13:32:15  profilanswer
 

Up ! =)

n°1923895
abais
Posté le 14-09-2009 à 13:33:55  profilanswer
 

bah, ça marche très bien chez moi... fais un screenshot de mon code (sans mettre tes images)


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1923903
SouthParkN​ews
Posté le 14-09-2009 à 14:01:27  profilanswer
 
n°1923917
abais
Posté le 14-09-2009 à 14:18:49  profilanswer
 

met la doctrine STRICT...
Le transitionnal, c'est has been ...
Autrement dit, remplace ça :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

par:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

Pour le reste, je regarde ça...


Message édité par abais le 14-09-2009 à 14:19:53

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1923926
SouthParkN​ews
Posté le 14-09-2009 à 14:30:52  profilanswer
 

Ok, je viens de modifier ! =)

mood
Publicité
Posté le 14-09-2009 à 14:30:52  profilanswer
 

n°1923930
abais
Posté le 14-09-2009 à 14:37:37  profilanswer
 

Bon, on vois que tu n'as pas repris mon CSS...
C'est pas sympa de ne pas reprendre le travail qu'un forumeur te consacre !
J'ai l'altruisme d'aider les autres, mais si je vois que ça sert à ça, pas la peine de continuer à t'aider...

 

Bon, au final, remplace ton CSS par :

 
Code :
  1. HTML{
  2. height:100%;
  3. }
  4. BODY{
  5. background:url(images/fond.jpg) repeat-x bottom;
  6. margin:0;
  7. }
  8.  
  9. #banniere{
  10. position:absolute;
  11. margin-top:-179px;
  12. top:50%;
  13. width:100%;
  14. height:258px;
  15. text-align:center;
  16. }
  17.  
  18. #construct{
  19. position:absolute;
  20. width:100%;
  21. bottom:15%;
  22. color:#FF0000;
  23. text-align:center;
  24. font-family:Microsoft Sans Serif;
  25. font-size:20px;
  26. font-weight:bold;
  27. }
  28.  
  29. #footer{
  30. position:absolute;
  31. width:100%;
  32. bottom:0px;
  33. color:#000;
  34. text-align:center;
  35. font-family:"Myriad Pro", Arial, Serif;
  36. font-size:14px;
  37. font-weight:bold;
  38. }
 

Tu n'a plus qu'à mettre une image de background à #banniere (le motif repeat-x du centre, vert/blanc/noir...

 

Sinon, pour ton dégradé de fond, tu économiserai du poid si tu diminue la largeur de l'image à 1px...


Message édité par abais le 14-09-2009 à 14:44:54

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1923936
abais
Posté le 14-09-2009 à 14:45:46  profilanswer
 

J'ai rajouté le height:100% à HTML, indispensable pour aligner le fond du body en bas...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1923937
SouthParkN​ews
Posté le 14-09-2009 à 14:48:14  profilanswer
 

Ok, je vais essayer merci !
J'avais juste remis ton CSS sur une page dédiée à ça, désolé ! =)

n°1923949
abais
Posté le 14-09-2009 à 15:14:08  profilanswer
 

Oui non mais...
Bien sure, tu a externalisé le CSS (je l'ai mis dans le HTML par flemme)
Le truc c'est que tu n'as pas (à mon goût) étudié le code que je t'ai pondu...
Bien sûre, ça n'avait pas encore l'apparence finale que tu souhaitait, mais quasiment tout le necessaire était la...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1924033
SouthParkN​ews
Posté le 14-09-2009 à 19:41:55  profilanswer
 

Oui, mais n'empêche que j'ai tout de même la volonté de regarder ta solution pour comprendre ! =)
 
Tes en quelle résolution d'écran ?

n°1924039
abais
Posté le 14-09-2009 à 19:48:24  profilanswer
 

1680*1050


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1924044
SouthParkN​ews
Posté le 14-09-2009 à 20:03:41  profilanswer
 

Ok, donc t'as un rectangle au centre avec le dégradé autour.

 

Edit : Voila j'ai mis en place tes recommandations ! =) Merci

 

Edit 2 : Et comment faire le code des 3 boutons sur cette page qui seront prochainement accessible ?
           


Message édité par SouthParkNews le 14-09-2009 à 20:14:02
n°1924088
abais
Posté le 14-09-2009 à 21:36:24  profilanswer
 

Et bien au lieu de mettre ton graphisme du milieu dans une balise image, tu le met en background, dans une div de taille équivalente... (en margin:auto pour être centrée)...
Retire les 3 boutons de l'image, puis recréés les en HTML dans des balise <a> pour faire les lien...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1924090
abais
Posté le 14-09-2009 à 21:41:59  profilanswer
 

Par ailleurs, tu économiserais du poids si tu tronquais ton image centrale, parce que là, y a des marges qui n'ont pas lieu d'être...
De l'optimisation mon gars, c'est comme ça !
Par ailleurs,lis tout ce tuto et tu n'aura plus besoin de moi :
http://www.siteduzero.com/tutoriel [...] e-web.html


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1924249
SouthParkN​ews
Posté le 15-09-2009 à 15:00:39  profilanswer
 

J'aimerais bien optimisé, mais je ne vois pas comment faire.
Je sais que mon image centrale je peu lui couper les deux bordures à gauche et à droite mais après comment faire pour les positionner au deux côts de l'image centrale "Aurélien...." ?

n°1924517
Skopos
Titilleur de nombrils...
Posté le 16-09-2009 à 15:05:40  profilanswer
 

Il te suffit d'une image de 1px de large sur une taille suffisante en hauteur, que tu met en background de body avec un repeat-x.


---------------
userstyles HFR : alléger l'accueil du forum; réduire les img https des quotes. Script AHK ImageFloodHFR
n°1924550
abais
Posté le 16-09-2009 à 16:39:28  profilanswer
 

Skopos, vous ici... !
Pour les motif il a compris vu que je vois que le background du fond et de la ligne sont des images d'1px de large...
 
Ce que je disais SPN, c'est que tu peux tronqué la partie droite et gauche de ton image... je ne vois pas pourquoi il serait question de positionnement...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1924631
Skopos
Titilleur de nombrils...
Posté le 16-09-2009 à 20:34:57  profilanswer
 

je poste pas souvent mais je lurke pas mal :D


---------------
userstyles HFR : alléger l'accueil du forum; réduire les img https des quotes. Script AHK ImageFloodHFR
n°1928814
SouthParkN​ews
Posté le 04-10-2009 à 19:12:37  profilanswer
 

Bonjour de nouveau à vous,
 
Je suis beaucoup pris avec un déménagement à l'autre bout du monde donc j'ai pas vraiment eu le temps de voir vos réponses. Merci pour votre aide.
 
Cependant, j'aimerais pouvoir faire des écarts un peu plus grands entre les trois catégories présent sur la page d'accueil.  
 
J'avais également réussi avec un site projet en terminal mais je dois dire que je trouve plus comment faire...
 
Merci beaucoup à vous !

n°1928819
abais
Posté le 04-10-2009 à 19:44:27  profilanswer
 

Que tu sois en plein déménagement, on s'en fiche un peu, ça n'est pas une excuse pour ne pas chercher toi même, surtout que la réponse est dans le tuto cité plus haut... C'est très simple en plus...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1928820
SouthParkN​ews
Posté le 04-10-2009 à 20:07:48  profilanswer
 

C'est pas seulement le fait de déménager, c'est aussi le fait que je suis dans les papiers administratifs pour pleins de raisons, création d'entreprise,... et tout le blabla !  
 
C'est pas du tout de la fainéantise pour autant c'est juste que je peux pas m'investir à fond sur cette partie pour le moment. Dans 1 mois je pense avoir pris assez de recul pour m'y intéressé à 200% mais pour le moment c'est vrai que ce n'est pas le cas mais j'aimerais bien avancé un minimum sur ce plan là aussi.
 
Alors bon, si la réponse est dans le "tuto", tuto que j'ai d'ailleurs déjà consulter mais pas pour autant trouver la réponse voulue, c'est sur que c'est pas la peine de me donner la réponse que tu possède déjà.  
 
Je pense pas que le forum soit non plus un lieu où ceux qui savent doivent laisser les autres chercher des informations aussi peu importantes. Quand c'est de la découverte pure et dure je suis d'accord, ça sert à rien de mâcher le travail, mais quand c'est une petite ligne de code comme celle-là pour faire un malheureux espace entre deux catégories... je trouve ça quand même pas chier (excusez moi le terme).
 
Enfin bon, tant pis pour moi, au final : "On s'en fiche un peu..."

n°1928838
abais
Posté le 04-10-2009 à 22:02:59  profilanswer
 

C'est sûre que je ne t'ai pas bcp aider depuis le début...
Si je te laisse chercher (et encore, je t'ai bien pisté), c'est que j'ai jugé que tu profitais des autres dans ta démarches, un forum c'est là pour aider LES gens (pour tous ceux qui consultent le topic), pas pour éviter à une personne de lire un tuto... Surtout que j'ai cru comprendre que le webdesign t'interessait...
Il est possible que je me trompe et que mes fausses leçons de morales te bourdent, mais je ne me suis jamais engagé...
 
L'attribut CSS que tu cherche est "margin".


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1928885
SouthParkN​ews
Posté le 05-10-2009 à 07:09:02  profilanswer
 

Je remet pas en doute ton aide envers moi, loin de là et Dieu sait que tu m'as énormément fais avancer.  
D'ailleurs tu vois que la motivation ça paye puisque je me suis replongé dans mes anciennes productions et en ajoutant "padding" l'écart est effectué.  
Après est-ce que ça respecte les standards du W3C... c'est une autre histoire.
 
Merci

n°1928900
abais
Posté le 05-10-2009 à 09:44:23  profilanswer
 

padding rajoute une marge à l'intérieur de l'élément et non à l'extérieur, c'est pas tout à fait la même chose, mais c'est pas mal non plus.
 
Il n'y a pas de pb vis à vis du W3C...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1928944
SouthParkN​ews
Posté le 05-10-2009 à 12:11:15  profilanswer
 

Et donc si j'ai envie de changer ce petit menu en faisant changer sa couleur quand la souris passe dessus, je dois modifier mon fichier html en supprimant les images, en les remplaçants par du texte, et dans mon fichier CSS je modifier leur propriétés ?

n°1928952
abais
Posté le 05-10-2009 à 12:36:41  profilanswer
 

Tu peux faire ça en effet en passant par JS, mais c'est pas bien pour des raisons sémantiques...
En CSS tu peux créer un style qui s'applique au survol, mais là c'est pas ton CSS qui "skin" ton bouton mais une image...
D'ailleurs, le fait de mettre une image plutôt qu'un texte, c'est pas bien, toujours pour une raison sémantique ^^ (Référencement, ...)
Met du texte plutôt que des images, comme ça tu pourras aussi maitriser le survol via CSS...


Message édité par abais le 05-10-2009 à 12:37:22

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1928957
abais
Posté le 05-10-2009 à 12:50:53  profilanswer
 

Je viens de faire un essai avec firebug, pour un resultat similaire,
 
J'ai donc mis en HTML :

Code :
  1. ...
  2. <a href="/portfolio/"><strong>Portfolio</strong></a>
  3. <a href="/wordpress/"><strong>Blog</strong></a>
  4. <a href="#"><strong>Contact</strong></a>
  5. ...


 
Et en CSS :
 

Code :
  1. #menu a {
  2.  color:white;
  3.  font-family:"arial narrow"; /* Je met la police Arial narrow... */
  4.  padding :0 15px;
  5.  text-decoration:none; /*  Pour ne pas avoir le soulignement qu'on a par défaut sur les liens*/
  6.  text-transform:uppercase; /* Je capitalize le texte... */


ça, c'est le style de ton lien (<a> ) normal... mais tu peux changer le CSS au survol grace au pseudo-élément :hover, :visited ...
Hover => survole.
Visited => Lien qui à deja été cliqué/visité.
 
On a donc au final :

Code :
  1. #menu a,  #menu a:visited{ /* Le style "visité" est le meme que le "normal" ... */
  2.  color:white;
  3.  font-family:"arial narrow";
  4.  padding :0 15px;
  5.  text-decoration:none;
  6.  text-transform:uppercase;
  7.  
  8. #menu a:hover{ /* Le style au survol ... */
  9.  color:#ff0000; /* Je met la couleur rouge ... moche, mais c'est pour voir... */
  10.  text-decoration:none; /*  toujours pour ne pas avoir le soulignement qu'on a par défaut sur les liens*/



---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1928961
SouthParkN​ews
Posté le 05-10-2009 à 13:03:10  profilanswer
 

Ok, ok, je vois le truc. Merci.
Par contre pourquoi mettre "strong" dans le code et pas "bold" dans le CSS à la place ?


Message édité par SouthParkNews le 05-10-2009 à 13:03:30
n°1928964
abais
Posté le 05-10-2009 à 13:25:21  profilanswer
 

C'est une habitude personnelle, en référencement, les <strong> sont mis en valeur par rapport au reste, mais la c'est un peu inutile par rapport au CSS vu qu'il n'y a pas grand chose d'autre dans la page...
A toi de choisir !


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1928966
SouthParkN​ews
Posté le 05-10-2009 à 13:29:39  profilanswer
 

Ce qui est plutôt gênant, mais ça on n'y peu pas grand chose, c'est que la qualité de la police d'écriture en prend un coup entre l'image du début (logiciel graphique) et son intégration par la suite avec le code. J'arrive pas à obtenir le même rendu, le "bold" rend l'écriture vraiment trop - pâteuse -
 
En plus je me bat pour que le texte revienne à sa place initiale mais puisque y'a plus les balises "img" elles me boudent...  

n°1929034
abais
Posté le 05-10-2009 à 15:40:46  profilanswer
 

#menu {
  position:relative;
  top:200px;
}
ça le place à 200px (vers le bas) par rapport à son conteneur...
Le position "relative" l'oblige à se placer dans le référentiel de son "père" (normalement, c'est à son grand-frère, mais vu qu'il n'en a pas...)


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1929089
SouthParkN​ews
Posté le 05-10-2009 à 19:09:18  profilanswer
 

Le pire c'est que je sais grosso modo ce qu'il faut modifier mais quand je le fais j'ai jamais le résultat voulu...
 
Bon, pour le moment c'est parfait, juste falloir me mettre à flash pour la page contact... ça va pas être du gâteau ! oO
 
J'ai juste une petite question, par exemple, encore avec la souris, c'est possible de transformer mon nom et prénom avec juste une petite lueur externe blanche quand la souris passe dessus ?
Mais pour ça j'aimerais garder le graphisme de mon texte ... je sais pas si tu vois ce que je veux dire.
 
Merci


Message édité par SouthParkNews le 05-10-2009 à 19:13:23
n°1929091
abais
Posté le 05-10-2009 à 19:11:14  profilanswer
 

Pourquoi donc flash ?


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1929092
SouthParkN​ews
Posté le 05-10-2009 à 19:19:42  profilanswer
 

NB :
 
J'ai juste une petite question, par exemple, encore avec la souris, c'est possible de transformer mon nom et prénom avec juste une petite lueur externe blanche quand la souris passe dessus ?
Mais pour ça j'aimerais garder le graphisme de mon texte ... je sais pas si tu vois ce que je veux dire.  
 
Pour le flash, j'aimerais que lorsque je clique sur "Contact", la page ce mette en mouvement pour donner le résultat suivant (fais rapidement) :
 
http://img384.imageshack.us/img384/2466/97696568.jpg
 
Avec en dessous mes coordonnées postales, mail, etc... avec le lien vers le CV,...
 
C'est une idée pour le moment, j'aimerais bien toucher un peu au logiciel pour me forger quelques connaissances de bases. Ici c'est juste des éléments qui se déplacent, je pense que c'est pas trop complexe par rapport à des projets plus ambitieux.


Message édité par SouthParkNews le 05-10-2009 à 19:20:34
n°1929120
abais
Posté le 05-10-2009 à 20:55:30  profilanswer
 

Oui mais là t'as commencer avec HTML, tu ne peut pas animer vie Flash du coup, en tout cas pas ce contenu actuel, ou alors faut passer par JS, mais là ce sont des bibles que tu vas devoir lire pour apprendre à faire ça.
 
Sinon, oui c'est possible de changer l'image de fond d'une div au survol d'un autre élément, par JS notement...
Il faut donc que tu apprene JavaScript...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
mood
Publicité
Posté le   profilanswer
 

 Page :   1  2
Page Précédente

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Site extensible via image

 

Sujets relatifs
Avec quoi tourne ce site ? CMS ?Site internet manque d'idée !
Remplacer texte par image avec str_replaceProbleme de poistionement site et apparence
[Php/OpenLaszlo] conception de site/ transmission client/serveurCherche a faire un défillement d'image
Rendre invisible une imageMoteur de recherche site perso pour images taguees
AJAX et effet sur image style Thickboxeffacement image
Plus de sujets relatifs à : Site extensible via image


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR