Site extensible via image

Site extensible via image - HTML/CSS - Programmation

Marsh Posté le 09-09-2009 à 10:21:19    

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 !  
 
 :)

Reply

Marsh Posté le 09-09-2009 à 10:21:19   

Reply

Marsh Posté le 10-09-2009 à 10:26:45    

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.
Reply

Marsh Posté le 11-09-2009 à 19:34:55    

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

Reply

Marsh Posté le 11-09-2009 à 21:12:44    

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.
Reply

Marsh Posté le 12-09-2009 à 08:54:10    

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.

Reply

Marsh Posté le 14-09-2009 à 13:32:15    

Up ! =)

Reply

Marsh Posté le 14-09-2009 à 13:33:55    

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.
Reply

Marsh Posté le 14-09-2009 à 14:01:27    

Reply

Marsh Posté le 14-09-2009 à 14:18:49    

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.
Reply

Marsh Posté le 14-09-2009 à 14:30:52    

Ok, je viens de modifier ! =)

Reply

Marsh Posté le 14-09-2009 à 14:30:52   

Reply

Marsh Posté le 14-09-2009 à 14:37:37    

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.
Reply

Marsh Posté le 14-09-2009 à 14:45:46    

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.
Reply

Marsh Posté le 14-09-2009 à 14:48:14    

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

Reply

Marsh Posté le 14-09-2009 à 15:14:08    

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.
Reply

Marsh Posté le 14-09-2009 à 19:41:55    

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 ?

Reply

Marsh Posté le 14-09-2009 à 19:48:24    

1680*1050


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 14-09-2009 à 20:03:41    

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
Reply

Marsh Posté le 14-09-2009 à 21:36:24    

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.
Reply

Marsh Posté le 14-09-2009 à 21:41:59    

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.
Reply

Marsh Posté le 15-09-2009 à 15:00:39    

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...." ?

Reply

Marsh Posté le 16-09-2009 à 15:05:40    

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.

Reply

Marsh Posté le 16-09-2009 à 16:39:28    

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.
Reply

Marsh Posté le 16-09-2009 à 20:34:57    

je poste pas souvent mais je lurke pas mal :D

Reply

Marsh Posté le 04-10-2009 à 19:12:37    

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 !

Reply

Marsh Posté le 04-10-2009 à 19:44:27    

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.
Reply

Marsh Posté le 04-10-2009 à 20:07:48    

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..."

Reply

Marsh Posté le 04-10-2009 à 22:02:59    

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.
Reply

Marsh Posté le 05-10-2009 à 07:09:02    

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

Reply

Marsh Posté le 05-10-2009 à 09:44:23    

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.
Reply

Marsh Posté le 05-10-2009 à 12:11:15    

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 ?

Reply

Marsh Posté le 05-10-2009 à 12:36:41    

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.
Reply

Marsh Posté le 05-10-2009 à 12:50:53    

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.
Reply

Marsh Posté le 05-10-2009 à 13:03:10    

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
Reply

Marsh Posté le 05-10-2009 à 13:25:21    

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.
Reply

Marsh Posté le 05-10-2009 à 13:29:39    

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...  

Reply

Marsh Posté le 05-10-2009 à 15:40:46    

#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.
Reply

Marsh Posté le 05-10-2009 à 19:09:18    

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
Reply

Marsh Posté le 05-10-2009 à 19:11:14    

Pourquoi donc flash ?


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 05-10-2009 à 19:19:42    

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
Reply

Marsh Posté le 05-10-2009 à 20:55:30    

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.
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed