[AVIS] Webdesign

Discussion dans 'Web, design' créé par L_S_, 19 Novembre 2007.

Statut de la discussion:
Fermée.
  1. Offline
    Maleki Pain in the ass !
    Personnellement, je n'aime pas trop les pages d'accueil sauf quand il s'agit d'une bonne intro dynamique.
    Ce logo doit être clair et simple. Il n'y a aucun besoin d'appliquer de filtres Photoshop dessus.
    La première chose à faire serait de supprimer tout ce qu'il a autour du logo (càd l'espèce de fumée et la partie rouge-rose avec halo).
    Ensuite, choisir une couleur unie pour le logo et adoucir quelques contours trop pointus.
    Avec cette forme et cette couleur rose, je crois qu'il a moyen de faire un logo potable façon lapin de Playboy.
    Et puis supprimer les remerciements en bas...
    Maleki, 11 Décembre 2007
    #41
  2. Offline
    Xou I ♥ rien
    Sans oublier que c'est un peu bête de perdre un potentiel de référencement avec une simple "intro" comme celle-ci.

    Ne pas oublier de mettre le même "logo" sur ta page d'accueuil que sur tous le site pour garder une cohérence graphique.
    Xou, 11 Décembre 2007
    #42
  3. Offline
    L_S_ ex membre
    C'est un dessin a la main scanné et photoshopé ;) juste ajout de couleur
    L_S_, 12 Décembre 2007
    #43
  4. Offline
    Maleki Pain in the ass !
    Mais sinon as-tu pris en compte les avis donnés ou non ?
    En résumé, essaie juste de reprendre le logo avec une seule couleur rose sur fond uni de couleur noir et de rétrécir un peu le tout (nom compris).
    La page d'accueil, c'est bien aussi pour le choix de langue mais dans ton cas, elle n'est pas nécessaire.
    Maleki, 12 Décembre 2007
    #44
  5. Offline
    ze-toto Elite
    Waw je suis impressioné
    Le jours ou je serais faire ça :-(
    ze-toto, 12 Décembre 2007
    #45
  6. Offline
    L_S_ ex membre
    Le choix de la langue je reservais cela a plus tard eventuellement ;)

    Le logo sera refait, mais pour le moment je me concentre sur le codage du site d'ailleurs j'ai quelques soucis avec mon menu :[]

    Quelqu'un pourrait regarder à ça ?
    L_S_, 12 Décembre 2007
    #46
  7. Offline
    Fx07s ex membre
    Hello, pour ton menu, je pense qu'il serait plus facile a géré avec des tables + css bien sur ;)

    Sinon niveau design, j’ai bien aimé les screen du début de thread, moins celui qui est actuellement en ligne, je trouve ca un peu trop sombre, mais ca reste sympa ! :)
    Fx07s, 12 Décembre 2007
    #47
  8. Offline
    ozilrit Touriste
    Une liste plutôt.

    Code:
    <ul>
      <li>Accueil</li>
      <li>Catégorie</li>
      <li>Catégorie</li>
      <li>
        <ul>
          <li>Sous-catégorie</li>
          <li>Sous-catégorie</li>
        </ul>
      </li>
      <li>Catégorie</li>
    </ul>
    ozilrit, 12 Décembre 2007
    #48
  9. Offline
    L_S_ ex membre
    Je vais tester ca ozilrit, grand merci

    Une petite question, comment faire pour le menu ? Je m'explique, chaque bouton séparement mais le tout imbriqué ? (désolé je débute)

    J'ai bien essayé, ils s'emboittaient tous sauf 1 et j'ai du abandonner :baille:
    L_S_, 13 Décembre 2007
    #49
  10. Offline
    ozilrit Touriste
    Code:
    <ul>
      <li class="titre"><a href="#">Général</a></li>
      <li><a href="#">Créations</a></li>
      <li><a href="#">Tutoriaux</a></li>
      <li><a href="#">Coups de Coeur</a></li>
      <li class="titre"><a href="#">Autres</a></li>
      <li><a href="#">Téléchargements</a></li>
      <li><a href="#">Forum</a></li>
    </ul>
    ou mieux :

    Code:
    <ul>
      <li class="title"><a href="#">Général</a></li>
      <li>
        <ul>
          <li><a href="#">Créations</a></li>
          <li><a href="#">Tutoriaux</a></li>
          <li><a href="#">Coups de Coeur</a></li>
        </ul>
      </li>
      <li class="title"><a href="#">Autres</a></li>
      <li>
         <ul>
          <li><a href="#">Téléchargements</a></li>
          <li><a href="#">Forum</a></li>
        </ul>
      </li>
    </ul>
    ozilrit, 13 Décembre 2007
    #50
  11. Offline
    L_S_ ex membre
    Ouep vla reste qu'à mette le "Autres" aligner en bas et c'est "bon" pour le moment
    Merci
    L_S_, 13 Décembre 2007
    #51
  12. Offline
    L_S_ ex membre
    http://www.lilium-studio.be/enter.html

    encore un petit truc

    j'ai fais un tableau dans mon menu pour center nom,... et j'ai rajouté un lien aux tableau, maintenant j'aimerais que lorsque quelqu'un passe sa souris sur le tableau

    le bouton change

    seulement voila j'ai des doutes qu'avec un a:hover ca passe ais-je tords ?
    L_S_, 14 Décembre 2007
    #52
  13. Offline
    Xou I ♥ rien
    Pourtant, avec un hover, ça passe. www.xyo.be en est un exemple.
    Xou, 14 Décembre 2007
    #53
  14. Offline
    L_S_ ex membre
    Code:
    .creation
    {width: 185px;
    height: 35px;
    background-image: url(creation.png);
    font-family: Tahoma,sans-serif;
        font-size: 12px;
    
    
    }
    
    .creation:hover{
    width: 185px;
    height: 35px;
    background-image: url(creation.png);
        
    }

    Voilà mon code css

    et voilà mon code xhtml

    Code:
     <div id="menu">
    <ul>
      <li class="accueil">Géneral
      <div id="bouton">
      <a href="creation.html">
      <TR>Créations
      </table>
      <a href="tutoriaux.html">
      <TR>Tutoriaux
      </table>
      <a href="coupsdecoeur.html">
      <TR>Coups de Coeur
      </table>
      </div>
      <div id="bouton2">
      <table border="0" cellspacing="0"cellspacing="0">
      <TD VALIGN="bottom" class="autres" align="center">Autres
      </table>
      <a href="telechargements.html">
     <TR>Telechargement
     </table>
     <a href="forum.html">
      <TR>forum
      </table>
      <id>
    Un problème :-s car quand je passe sur ma table, donc sur mon bouton "création" le bouton ne change pas
    L_S_, 14 Décembre 2007
    #54
  15. Offline
    Xou I ♥ rien
    Euh, tu appelles à chaques fois le fichier creation.png

    Je ne sais pas si tu as fait une image de ce type
    [IMG]

    Si c'est le cas, dans ta CSS faudra que tu rajoutes background-position:top ou bottom par exemple.

    Et puis chose qui ne sert à rien, tu répètes les attributs width et height déja déclarés auparavant ;)
    Xou, 14 Décembre 2007
    #55
  16. Offline
    L_S_ ex membre
    ouep j'ai renomé creation (j'avais creation et creation 2) marche tjrs pas

    Code:
    .creation
    {width: 185px;
    height: 35px;
    background-image: url(creation.png);
    font-family: Tahoma,sans-serif;
    	font-size: 12px;
    
    
    }
    
    .creation:hover{
    width: 185px;
    height: 35px;
    background-image: url(ki.png);
    background-position:top
    	
    }
    L_S_, 14 Décembre 2007
    #56
  17. Offline
    Xou I ♥ rien
    Et pourquoi tu as ce genre de code bizarre aussi

    Code:
      <div id="bouton">
      <a href="creation.html">
      <TR>Créations
      </table>
    T'étais pas parti sur une liste d'ailleurs avant, surtout d'après les conseils des autres gamerziens ? D'ailleurs cette liste te simplifierait la vie, surtout si tu veux faire un site en XHTML
    Xou, 14 Décembre 2007
    #57
  18. Offline
    L_S_ ex membre
    J'avais faits 3 "bloc" un l'ensemble du menu tout compris et 1 avec 3 boutons et chaque boutons sont séparer en div "bouton1" "bouton2" "bouton3" et un autre avec 3 boutons "bouton1" "bouton2" "bouton3" en div pour déplacer le tout via le css

    ensuite pour réussir a centrer les écritures j'ai rajouté des tables (pour centré en haut, au centre et en bas à l'intérieur des boutons) et j'ai rajouté un liens aux tables vers mes autres pages.

    Maintenant ce que je voudrais faire c'est au passage sur la table, on aurait une image qui se superpose.

    Grand merci pour ton aide .Xyo

    Ps : en ce qui concerne mon "milieu" càd l'endroit ou se concentre les news,menu, header, ... doit je faire un tableau ou alors simplement un div ?

    Ps² : les news et le copyright aussi en tableau ou en div ? :-D
    L_S_, 14 Décembre 2007
    #58
  19. Offline
    L_S_ ex membre
    En gros ça donne :

    Code:
    <html>
    
    <head>
    <meta http-equiv="Content-Type"
    content="text/html; charset=iso-8859-1">
    <META NAME="DESCRIPTION" CONTENT="Un site polyvalent autour du thème du graphisme -Lilium Créations-">
    <META NAME="ABSTRACT" CONTENT="Un site polyvalent autour du thème du graphisme -Lilium Créations-">
    <META NAME="KEYWORDS" CONTENT="création,photo,graphisme,webdesign,retouche,conception,portfolio,lilium,forum,entraide">
    <META NAME="REVISIT-AFTER" CONTENT="20 Days">
    <META NAME="ROBOT" CONTENT="Index,Follow">
    <META NAME="RATING" CONTENT="general">
    <title>Lilium-Studio.be </title>
    <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
       </head>
    </head>
    
    <body  text="#808080">
    
    
    <div id="middle">
    <img class="header" align="center" src="header.png" width="734" height="280" border="0">
    
    <div id="menu">
    <ul>
      <li class="accueil">Géneral</li>
      <div id="bouton">
      <a href="creation.html"><table border="0"cellspacing="0">
      <TR><TD ALIGN="center" class="creation">Créations</TD>
      </table></a>
      <a href="tutoriaux.html"><table border="0" cellspacing="0"cellspacing="0">
      <TR><TD ALIGN="center" class="tutoriaux">Tutoriaux</TD>
      </table></a>
      <a href="coupsdecoeur.html"><table border="0" cellspacing="0"cellspacing="0">
      <TR><TD ALIGN="center" class="coupdecoeur">Coups de Coeur</TD>
      </table></a>
      </div>
      <div id="bouton2">
      <table border="0" cellspacing="0"cellspacing="0">
      <TD VALIGN="bottom" class="autres" align="center">Autres</TD></TR>
      </table>
      <a href="telechargements.html"><table border="0"cellspacing="0"cellspacing="0">
     <TR><TD ALIGN="center" class="telechargement">Telechargement</TD>
     </table></a>
     <a href="forum.html"><table border="0"cellspacing="0"cellspacing="0">
      <TR><TD ALIGN="center" class="forum">forum</TD>
      </table></a>
      <id>
    </ul>
    </id>
    
    <div id="news">
    <p align="center"><a href="http://www.Lilium-Studio.be"><font
    face="Verdana">http://www.Lilium-Studio.be</font></a></p>
    
    <p align="center"><font face="Verdana"><strong>En Construction</strong></font></p>
    
    <p align="center"><font face="Verdana"><strong>Pour me contacter
    : Lilium@live.be</strong></font></p>
    
    <p align="center"><a href="projet.html">Notre Projet</a></p>
    
    <p align="center"><a href="prout.html">Projet Halakon Pour L'école
    en XHTML/CSS</a></p>
    <p align="center"><a href="merci.html">Remerciements</a></p>
    <p align="center">Je vous invite à visiter ces quelques sites</p> 
    <p align="center"><a href="http://www.gamerz.be">GamerZ.be</a>
    <p align="center"><a href="http://www.clubic.com">Clubic</a>
    <p align="center"><a href="http://www.matbe.com">Matbe</a></center></p>
    <p></p> 
    </div>
    </div>
    </div>
    
    <div id="copyr" align="center"><br/>
    	<p align="right">xhtml/css par <a href="http://Lilium-Studio.be">Florio Anthony</a><br />
    		<a href="#">Me contacter</a> | <a href="#">Condition générale d'utilisation</a> | <a href="#">Qui suis-je ?</a> | <a href="#">Nos partenaires</a><br />
    		© 2007 Lilium "Florio Anthony" tous droits réservés <br /></p></div>
    </body>
    </html>
    
    et le CSS

    Code:
    body
    {
    	background-image: url(fond.jpg);
    	background-position: center;
    	background-repeat:repeat;
    	font-family: Tahoma,sans-serif;
    	font-size: 0.7em;
    }
    #middle 
    {
    margin: 0 auto;
    	background: url(middle.png);
    	background-position: center;
    	background-repeat:repeat;
    	border: 1px solid #390527;
    width: 760px;
    	height:768x;
    	padding: 12px;
    }
    #copyr {
    margin: 0 auto;
    background-position: center;
    	width: 760px;
    	height:58px;
    	background-image:url(copyr2.png);
    	background-repeat:repeat-x, repeat-y;
    	font-family: Verdana;
    	font-size: 0.9em;
    border: 1px solid #390527;
    padding: 12px;
    }
    
    #news
    {width: 450px;
    height:220px;
    border: 1px solid #390527;
    margin-left: 300px;
    margin-right:0px;
    margin-top:-465px;
    margin-bottom:0px;
    background-color:#0f0c0f;
    background-attachment: fixed;
    font-family: Tahoma,sans-serif;
    	font-size: 9px;
    	text-align: right;
    }
    #menu
    {width: 185px;
    height:600px;
    font-family: Tahoma,sans-serif;
    	font-size: 9px;
    	text-align: center;
    	margin-right: 370px;
    
    }
    #bouton
    {width: 185px;
    height:322px;
    margin-left: 0px;
    margin-right:0px;
    margin-top:-33px;
    margin-bottom:0px;
    background-attachment: fixed;
    font-family: Tahoma,sans-serif;
    	font-size: 9px;
    	text-align: center;
    }
    #bouton2
    {width: 185px;
    height:322px;
    margin-left: 0px;
    margin-right:0px;
    margin-top:-270px;
    margin-bottom:0px;
    background-attachment: fixed;
    font-family: Tahoma,sans-serif;
    	font-size: 9px;
    	text-align: center;
    }
    .accueil
    {width: 185px;
    height: 114px;
    background-image: url(menu1.png);
    background-repeat:no-repeat;
    font-family: Tahoma,sans-serif;
    	font-size: 13px;
    }
    
    .creation
    {width: 185px;
    height: 35px;
    background-image: url(creation.png);
    font-family: Tahoma,sans-serif;
    	font-size: 12px;
    
    
    }
    
    .creation:hover{
    width: 185px;
    height: 35px;
    background-image: url(ki.png);
    background-position:top
    	
    }
    
    
    
    
    .tutoriaux
    {width: 185px;
    height: 35px;
    background-image: url(tutoriaux.png);
    font-family: Tahoma,sans-serif;
    	font-size: 12px;
    }
    .autres
    {width: 185px;
    height: 114px;
    background-image: url(menu2.png);
    font-family: Tahoma,sans-serif;
    	font-size: 13px;
    	margin-top: 12px;
    }
    
    
    .coupdecoeur
    {width: 185px;
    height: 35px;
    background-image: url(coupdecoeur.png);
    font-family: Tahoma,sans-serif;
    	font-size: 12px;
    }
    .telechargement
    {width: 185px;
    height: 35px;
    background-image: url(menu_bottom.png);
    font-family: Tahoma,sans-serif;
    font-size: 12px;
    }
    .forum
    {width: 185px;
    height: 35px;
    background-image: url(menu_bottom.png);
    font-family: Tahoma,sans-serif;
    font-size: 12px;
    }
    
    .header
    {
    padding: 12px
    }
    L_S_, 14 Décembre 2007
    #59
  20. Offline
    Maleki Pain in the ass !
    Je viens de jeter un oeil sur ton code et c'est vraiment le bazar.
    Pourquoi utiliser des tableaux alors qu'on te conseille d'utiliser de simples listes à puces ?
    PS: Ton header est très (même trop) grand.
    Maleki, 14 Décembre 2007
    #60
Statut de la discussion:
Fermée.