Aller au contenu

djodjo64

Actif
 Afficher le profil  Parcourir son contenu

  • Compteur de contenus

    23

  • Inscrit(e) le

  • Dernière visite

 Type de contenu 

Tout ce qui a été posté par djodjo64

  1. djodjo64
    Merci beaucoup, mais je n'arrive pas à saisir la méthode clearfix, pouvez-vous éclairer ma lanterne ?
  2. djodjo64
    Salut, Kezako la méthode "clearfix" ? Merci.
  3. djodjo64
    Bonsoir, J'ai découper et intégrer pour la première fois un template et voici le résultat : http://djodjo640.free.fr/ Pouvez-vous me donner votre avis sur le travail rendu ? J'ai 2 soucis que je n'arrive pas a résoudre : * le texte dépasse du bloc * le footer est décoller Merci pour votre aide.
  4. djodjo64
    yes! merci beaucoup !
  5. djodjo64
    Bonjour, J'ai un soucis que je n'arrive pas à régler depuis ce matin : le corps ne veut pas se mettre à droite du menu. J'ai pourtant mis le float:left, mais rien n'y fait. Pouvez-vous me donner un petit coup de pouce, car j'ai beau tourner et retourner le problème, je ne vois pas d'où cela vient. Je vous en remercie par avance. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Glory-hole.fr</title> <link rel="stylesheet" media="screen" type="text/css" title="" href="style.css" /> </head> <body> <div id="header"><h1>mon site</h1></div> <div id="menu_horizontal"><ul> <li><a href="#1"><img src="images/puce.gif"/>titre1</a></li> <li><a href="#2"><img src="images/puce.gif"/>titre2</a></li> <li><a href="#3"><img src="images/puce.gif"/> titre3</a></li> <li><a href="#4"><img src="images/puce.gif"/> titre4</a></li> </ul> <br style="clear:right"/> </div> <div id="conteneur"> <div id="sidebar"> <div class="menu"> <h3>MENU</h3> <ul> <li><a href="#">Accueil</a></li> <li><a href="#">Photos</a></li> <li><a href="#">titre1</a></li> <li><a href="#">titre2</a></li> <li><a href="#">titre3</a></li> </ul> <div class="menu_bas"></div> </div> </div> <div class="menu"> <h3>MENU</h3> <ul> <li><a href="#">Accueil</a></li> <li><a href="#">titre1</a></li> <li><a href="#">titre2</a></li> <li><a href="#">titre3</a></li> <li><a href="#">titre4</a></li> </ul> <div class="menu_bas"></div> </div> <div id="corps"> <div class="bloc_corps"> <h3>BIENVENU SUR MON SITE</h3> <p>texte<br /> texte<br /> texte</p> <div class="bloc_corps_bas"></div> </div> </div> </div> </body> </html> * { margin:0px; padding:0px; } body { font-family: Verdana, Arial, "Times New Roman", Times, sans-serif; background: url("images/fond.gif"); } #header { background: url("images/header.gif"); width: 850px; height: 129px; margin-left:auto; margin-right:auto; } h1 { text-indent: -50000px; } #menu_horizontal { background: url("images/menu_horizontal.gif"); width: 850px; height: 26px; margin-left:auto; margin-right:auto; } #menu_horizontal ul { margin: 0; padding: 0; float: right; margin-right: 15px; } #menu_horizontal ul li { display: inline; } #menu_horizontal ul li a { float: left; text-decoration: none; color: #F92BAB; font-weight:bold; padding: 6px 20px; font-size: 13px; } a img { border: none; } #conteneur { background: url("images/contenu.gif"); width: 850px; margin-left:auto; margin-right:auto; } #sidebar { width: 169px; float: left; } .menu h3 { background:url("images/menu_haut.gif") no-repeat; width: 169px; height: 66px; font-size:13px; text-align:center; font-weight:bold; color:#FFF; line-height:29px; } .menu ul { background:url("images/menu_centre.gif"); width: 169px; background-repeat: repeat-y; list-style-type: none; padding-left: 40px; font-size:13px; font-weight:bold; } .menu ul li a { color: #F92BAB; } .menu_bas { background:url("images/menu_bas.gif"); width: 169px; height: 71px; } #corps { width: 643px; } .bloc_corps h3 { background:url("images/corps_haut.gif")no-repeat; width: 643px; height: 30px; color:#FFF; font-size:13px; } .bloc_corps p { background:url("images/corps_centre.gif"); width: 643px; } .bloc_corps_bas { background:url("images/corps_bas.gif"); width: 643px; height: 85px; }
  6. djodjo64
    Merci, tout a tres bien fonctionné avec ton petit morceau de code !
  7. djodjo64
    J'ai finalement mis un "margin-top:-8px;" et mon header est bien collé en haut. Je reste comme ca si vous n'y voyez pas d'inconvénients. Merci et bonne journée.
  8. djodjo64
    Je viens de faire la modif, mais rien ne bouge
  9. djodjo64
    Bonsoir, Je commence à coder et première impasse : j'ai mis un fond, puis le header et un espace se crée entre le haut de la page et le header. J'ai essayé un margin-top à 0 du header mais rien n'y fait ; pourtant le code est vraiment tres simple : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" media="screen" type="text/css" title="Design glory hole" href="style.css" /> </head> <body> <div id="header"></div> </body> </html> body { font-family: Verdana, Arial, "Times New Roman", Times, sans-serif; background: url("images/fond.gif"); } #header { background: url("images/header.jpg"); width: 850px; height: 129px; margin-left:auto; margin-right:auto; } Merci pour votre aide.
  10. djodjo64
    En fait, je l'avais enregisté en jpeg qualité supérieur, mais c'est bon j'ai trouvé la manip. Merci pour vos explications.
  11. djodjo64
    Justement, quelle est la bonne extension par rapport à la découpe d'un élément particulier ? Quel poids doit faire une image (header, menu_haut, etc...)? Là, par exemple, la taille du header fait 548K, je pense que c'est trop, non ? Merci. 548K... en jpg !
  12. djodjo64

    Decoupage site

    djodjo64 a ajouté un sujet dans Le Webdesign

    Bonsoir, Je dois découper ce site afin de l'optimiser au mieux (je n'ai jamais fait ca), et 2 soucis se posent : 1 - J'ai réussi a tout découper, avec photoshop, mais la qualité est médiocre (j'ai pourtant selectionné "enregistrer pour le web). Y a t'il quelque chose de particulier à faire pour avoir une image optimisée? 2 - Concernant la découpe, je pense faire ceci : * fond : un morceau du fond bleu * header : header+menu * corps : 1px sur toute la largeur du site (extensible) * menu : menu_haut, menu_centre 1px (extensible), menu_bas * contenu : contenu_haut, contenu_centre 1px (extensible), contenu bas * footer Est-ce un bon découpage ? Par avance, je vous en remercie.
  13. djodjo64

    Découpe design

    djodjo64 a ajouté un sujet dans (X)HTML et CSS

    Bonjour et joyeux noel à tous ! Je possède un design que je doit découper avec photoshop. Ce design est composé d'un header, d'un menu horizontal en dessous du header, ensuite les menus et corps qui viennent en dessous. J'ai une photo sur la gauche du design qui part du haut du header jusqu'au menu gauche. Faut il que j'intègre cette photo dans la decoupe ou alors prevoir de la mettre par dessus les elements avec le css ? Merci pour vos conseils.
  14. djodjo64
    Effectivement, je n'avais pas remplacer les div par li... encore merci. Les photos sont bien horizontale, néamoins, 2 soucis se posent pour moi : - les légendes sont trop décalées vers le bas par rapport aux photos - les photos sont trop collées les unes aux autres Si vous pouvez m'aider une derniere fois sur ce coup là, ce serait tres sympas ; après, promis, je ne vous embette plus ! Merci beaucoup.
  15. djodjo64
    Merci beaucoup pour vos conseils, mais avec ce code, les vignettes sont alignées verticalement, alors que je souhaiterais que celles ci soient alignées horizontalement.
  16. djodjo64
    J'ai du mal à trouver le bon code ; pouvez-vous me donner un petit coup de main ? merci.
  17. djodjo64
    Au debut, j'avais mis les 3 photos dans un tableau, avec les legendes (=3 colonnes + 2 lignes). Mais les legendes etaient trop decalées vers le bas par rapport aux photos et je n'avais pas trouver de solution pour les remonter. C'est pour cela que j'ai opté pour une mise en place sans tableau. Je vais essayer des les placer selon les indication de yuston ; je vous tiens au courant. Merci encore.
  18. djodjo64
    Bonsoir à tous, Je souhaite aligner horizontalement 3 photos, qui auront chacune un titre centré juste en dessous. Mon HTML : <div class="vignettes"> <a href="#"><img class="images" src="images/photos1.jpg" /></a> <a href="#"><img class="images" src="images/photos2.jpg" /></a> <a href="#"><img class="images" src="images/photos3.jpg" /></a> </div> CSS : .vignettes { text-align:center; } Les photos sont bien centrées et alignées, mais je n'arrive pas à y placer mes titres pour chaque photos. Auriez-vous un tuyau ? Par avance, merci.
  19. djodjo64

    Taille du texte

    djodjo64 a ajouté un sujet dans (X)HTML et CSS

    Bonsoir, Quelle est la bonne taille, en pixels, des textes et des titres des menus ? Merci pour votre aide.
  20. djodjo64
    C'est nickel ! Merci beaucoup pour vos conseils.
  21. djodjo64
    Merci beaucoup ! Si je souhaite placer ce menu au centre, je n'ai qu'a mettre "center" à la place de "right", comme tu m'as indiqué ?
  22. djodjo64
    Voici le html : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Mon site</title> <link rel="stylesheet" media="screen" type="text/css" title="Design" href="style.css" /> </head> <body> <div id="container"> <div id="logo"></div> <div id="en_tete"><h1>www.glory-hole.fr</h1></div> <div id="banniere1"></div> <div id="menu_horizontal"> <ul> <li><a href="#">Lien 1</a></li> <li><a href="#">Lien 2</a></li> <li><a href="#">Lien 3</a></li> <li><a href="#">Lien 4</a></li> </ul> <br style="clear:left"/> </div> <div id="leftnav"> <div class="menu"> <h3>Menu</h3> <ul> <li><a href="#">Photos</a></li> <li><a href="#">Vidéos</a></li> <li><a href="#">Liens 1</a></li> <li><a href="#">Lien 2</a></li> </ul> </div> <div id="pub"> </div> <div class="menu"> <h3>Sites</h3> <ul> <li><a href="#">Essai</a></li> <li><a href="#">Essai</a></li> <li><a href="#">Essai</a></li> <li><a href="#">Essai</a></li> </ul> </div> <div class="menu"> <h3>Bons plans</h3> <ul> <li><a href="#">Essai</a></li> <li><a href="#">Essai</a></li> <li><a href="#">Essai</a></li> <li><a href="#">Essai</a></li> </ul> </div> </div> <div id="rightnav"> <div id="contribution"> </div> <div class="menu"> <h3>Sites</h3> <ul> <li><a href="#">Essai</a></li> <li><a href="#">Essai</a></li> <li><a href="#">Essai</a></li> <li><a href="#">Essai</a></li> </ul> </div> <div id="banniere2"> </div> <div class="menu"> <h3>Partenaires</h3> <ul> <li><a href="#">Essai</a></li> <li><a href="#">Essai</a></li> <li><a href="#">Essai</a></li> <li><a href="#">Essai</a></li> </ul> </div> </div> <div id="content"> <div class="bloc_corps"> <h3>BIENVENUE</h3> <p>Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum biben</p> <p>Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum biben</p> </div> <div class="bloc_corps"> <h3>VOS CONTRIBUTIONS</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementumultrices Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</p> </div> <div class="bloc_corps"> <h3>DERNIERES PHOTOS</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</p> </div> <div class="bloc_corps"> <h3>DERNIERES VIDEOS</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</p> </div> </div> <div id="footer"><p>Footer</p></div> </div> </body> </html>
  23. djodjo64
    Bonjour, Je debute en creation de site et je bloque a mon menu horizontal : tout est nickel, sauf que j'aimerais deplacer mon menu a droite (de maniere a ce que tous les titres des menus soit à droite de ma feuille) ; là, pas moyen d'y arriver, il reste coller à gauche. Avez-vous une solution ? Merci. Mon CSS : body { background-color: #b1d2fb; } #container { width: 900px; margin: 10px auto; background-color: #ffffff; color: #333; line-height: 130%; border : 1px solid; border-color: #d5d5d5; } a:link, a:visited { color:#c02976; } a:hover { color:#ff0082; } h1 { text-indent: -50000px; } #logo { background: url("images/logo.png") no-repeat; position: absolute; width: 234px; height: 146px; } #en_tete { border-bottom: 1px solid gray; padding: .5em; background: url("images/banniere.jpg") no-repeat; width: 884px; height: 130px; } #en_tete h1 { margin: 0; padding: 0; } #banniere1 { position: absolute; top: 40px; left: 790px; } #menu_horizontal { width: 100%; background-color: #424242; } #menu_horizontal ul { margin: 0; padding: 0; float: left; } #menu_horizontal ul li { display: inline; } #menu_horizontal ul li a { float: left; text-decoration: none; color: white; padding: 8.5px 9px; background-color: #424242; } #menu_horizontal ul li a:visited { color: white; } #menu_horizontal ul li a:hover, .menu ul li .current { color: #fff; background-color:#c756a4; } #leftnav { float: left; width: 160px; margin: 0; padding: 5px; } #rightnav { float: right; width: 160px; margin: 0; padding: 5px; } .menu { background-color: #f7f7f7; border-style: solid; border-width: 1px; border-color: #d5d5d5; margin-bottom: 5px; } .menu h3 { margin: 2px; height:29px; background:url("images/menu.png") no-repeat; line-height:29px; color:#FFF; font-size:16px; text-transform:uppercase; text-align:center; } .menu ul { padding-left: 18px; list-style-type: none; } #content { margin-left: 165px; margin-right: 165px; padding: 5px; } .bloc_corps { background-color: #f7f7f7; border-style: solid; border-width: 1px; border-color: #d5d5d5; margin-bottom: 5px; } #footer { background: url("images/pied.jpg") no-repeat; clear: both; margin: 0; padding: .5em; color: #333; background-color: #fdc3eb; border-top: 1px solid gray; } #leftnav p, #rightnav p { margin: 0 0 1em 0; } #content h2, #footer p { margin: 0 0 .5em 0; }
×
×
  • Créer...