Conseils sur design et couleurs

Discussion dans 'Demandes d'avis et de conseils sur vos sites' créé par zen la tortue, 14 Juillet 2008.

  1. zen la tortue
    zen la tortue WRInaute occasionnel
    Inscrit:
    10 Septembre 2006
    Messages:
    261
    J'aime reçus:
    0
    bonjour,
    voila je suis en train de modifié un template
    et j'aimerais avoir votre avis sur les couleurs

    que pensez vous de la couleur noir en backround ?
    le header , je voudrais ajouter des éoliennes et des panneaux solaires , est ce que cela ne surchargera pas le header ?


    Apres , je pense que la question n'est pas dans la bonne catégorie :oops:
    comment enlever le titre en pein sur le header "énergies renouvelables"

    merci, si vous avez des remarques ou autres conseils , n'hésitez pas

    le lien du site : http://www.energies-renouvelable.info
     
  2. herveG
    herveG WRInaute accro
    Inscrit:
    5 Mars 2003
    Messages:
    7 986
    J'aime reçus:
    0
    Je trouve le designe très sympa. Ne pas surcharger surtout...

    Par contre le noir ne fait pas très "écologique" (ca me fait plus penser au CO2, au goudron, etc.).

    Je verrai plutot de la lumière, des couleurs claires etc.

    le header eh haut a guahce, on aurait même presque l´impression qu´on va prendre un bon orage sur la tête... (certe, un orage fait partie de la nature, mais ca donne aussi un sentiment négatif !)

    a+

    ps : le ndd avec moitié au pluriel, moitié au singulier... c´est limite... (mais si je connais les raisons de ton choix)...
     
  3. malvina14
    malvina14 WRInaute discret
    Inscrit:
    5 Janvier 2007
    Messages:
    210
    J'aime reçus:
    0
    Bonjour,
    idem
    si le vert est sympa, par contre le noir me choque par rapport au sujet, il faut éclaircir tout ça à mon avis. perso, je mettrai soit du blanc à la place du noir, soit du blanc en fond et un gris mais plus gris sous le contenu.
     
  4. OTP
    OTP WRInaute accro
    Inscrit:
    16 Décembre 2005
    Messages:
    14 581
    J'aime reçus:
    3
    HS :

    Ah ?... Il en manque...

    "ées" pour "Comparées"

    Cite aussi le pompage (partie éolien de l'intro)

    Rapport aux ER ?

    Pas HS :

    C'est vrai que le backgound fleure bon le dioxyde de carbone.

    Edit : contacte moi qd tu auras une partie éolien
     
  5. zen la tortue
    zen la tortue WRInaute occasionnel
    Inscrit:
    10 Septembre 2006
    Messages:
    261
    J'aime reçus:
    0
    voila http://www.energies-renouvelable.info/energie-eolienne-c-2.html

    sinon vous êtes tous d'accord sur le noir
    je vais essayé de faire gris foncé et gris clair sur le fond de contour

    allez vais me lancer dans le ccs

    merci pour vos conseils
     
  6. OTP
    OTP WRInaute accro
    Inscrit:
    16 Décembre 2005
    Messages:
    14 581
    J'aime reçus:
    3
  7. zen la tortue
    zen la tortue WRInaute occasionnel
    Inscrit:
    10 Septembre 2006
    Messages:
    261
    J'aime reçus:
    0
    oki d'ac pas pour maintenant mais cela viendra

    sinon regardez un peu le header :oops: j'ai modifié
    hum hum quand pensez vous ?
     
  8. OTP
    OTP WRInaute accro
    Inscrit:
    16 Décembre 2005
    Messages:
    14 581
    J'aime reçus:
    3
    Je ne vois pas de différence !?
     
  9. zen la tortue
    zen la tortue WRInaute occasionnel
    Inscrit:
    10 Septembre 2006
    Messages:
    261
    J'aime reçus:
    0
    j'ai ajouté des éolienne ,un soleil ,un panneau solair et pres de l'arbre une maison avec un panneau solaire


    pour la couleur du fond , je fais actuellement des essaies
    je vous demanderais votre avis quand j'auais trouvé une couleur grise qui me plait

    merci :wink:
     
  10. zen la tortue
    zen la tortue WRInaute occasionnel
    Inscrit:
    10 Septembre 2006
    Messages:
    261
    J'aime reçus:
    0
    j'ai trifouillé dans le fichier css


    voici le css


    Code:
    body {
    	margin:0;
    	padding-top:0px;
    	background:#777;
    	font-family:"Myriad web",Tahoma,Verdana,sans-serif;
    	color:#f3f3f3;
    	font-size:13px;
    	}
    
    a {
    	color:#c2c2c2;
    	text-decoration:none
    	}
    a:hover {
    	color:#fff;
    	text-decoration:none
    		}
    h1, h2, h3, h4, h5, h6 {
    	
    	}
    
    img {
    	border:0;
    	}
    
    
    	p img {
        float:left;
        margin:0 10px 0 0;
        padding-left: 6px;
        padding-bottom: 2px;
    }
    	html {
    	scrollbar-face-color:#000000;
    	scrollbar-highlight-color:#000000;
    	scrollbar-3dlight-color:#000000;
    	scrollbar-darkshadow-color:#000000;
    	scrollbar-shadow-color:#000000;
    	scrollbar-arrow-color:#ffffff;
    	scrollbar-track-color:#000000;
    }
    
    
    h5 { font: bold 1.31em "Arial", Sans-Serif; margin: 0; color: #81a100; }
    h6 { font: bold 1.31em "Arial", Sans-Serif; margin: 0; color: #81a100; }
    
    
    .catego{
    	background: #ffffff;
    	width : 200px;
    	height: 6px;
        padding: 3px 3px 3px 3px;
    	border: 1px dotted #CCCCFF;
    
    }
    
    
    table.sample { 
        width:100%;
    }
    
    table.sample th {
    	
    }
    table.sample td {
        width:33%;
        text-align:left;
    	
        padding-top: 3px;
    	padding-bottom: 3px;
    	padding-left: 3px;
    	padding-right: 3px;
    	-moz-border-radius: 12px;
    }
    
    
    .champs {width: 150px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; border: 1px solid #ff6600; background-color: #000000; font-weight: bold; color: #c2c2c2; text-decoration:none}
    
    
    
    
    .catwdc{
    	color:#eeeeee;
    	text-decoration:none;
    	font-size:13px;
    }
    
    .catwdc a{
    	color:#eeeeee;
    	text-decoration:none;
    	font-size:13px;
    }
    
    .catwdc a:hover{
    	color:#81a100;
    	text-decoration:none;
    	font-size:13px;
    }
    
    .topsearch {
    	color:#eeeeee;
    	text-decoration:none;
    	font-size:11px;
    }
    
    .details{
    	color:#81a100;
    	text-decoration:none;
    	font-size:11px;
    }
    
    .details a{
    	color:#81a100;
    	text-decoration:none;
    	font-size:11px;
    }
    
    
    
    .details a:hover{
    	color:#c2c2c2;
    	text-decoration:underline;
    	font-size:11px;
    }
    
    .rss {
    	color:#81a100;
    	text-decoration:none;
    	font-size:11px;
    }
    
    
    
    .rss a{
    	color:#777777;
    	text-decoration:none;
    	font-size:11px;
    }
    
    
    .rss a:hover{
    	color:#c2c2c2;
    	text-decoration:none;
    	font-size:11px;
    }
    
    
    .annau{
    	color:#ffff00;
    	text-decoration:none;
    	font-size:28px;
    }
    
    
    .annau:hover{
    	color:#F1F1F1;
    	text-decoration:none;
    	font-size:28px;
    }
    
    .sitetable {
    	width: 100%;
    	border: 1px solid #c2c2c2;
    	vertical-align : top;
    }
    
    .sitetables {
    	width: 100%;
    	vertical-align : top;
    }
    
    .sitetd {
    	border: 1px solid #c2c2c2;
    }
    
    .votelargeur {width: 50px;}
    
    a.cat_display {
    	text-decoration: none;
    	font-weight: bold;
    	font-size: 13px;
    	color:#333333;
    }
    
    a.cat_display:hover {
    	text-decoration: none;
    	font-weight: bold;
    	font-size: 13px;
    	color:#CC0000;
    	}
    
    a.subcat_display {
    	text-decoration: none;
    	font-size: 10px;
    	border-bottom : 1px dotted #CCC;
    }
    
    
    .votetable {
    	background: #000000;
    	width : 50px;
    	height: 92px;
    	margin-right: 5px;
    
    }
    
    .vote span.note {
    font-size: 9px;
    height: 12px;
    display: block;
    
    }
    .vote span.nombre 
    {
    font-size: 16px;
    display: block;
    }
    
    .vote a{
    	color: #81a100;
    	font-size: 16px;
    	font-weight: bold;
    }
    
    .vote a:hover{
    	color: #81a100;
    	font-size: 16px;
    	font-weight: bold;
    }
    
    
    
    /* Onglets fiche site */
    #containered {
    	font: bold 10px Verdana;
    	list-style-type: none;
    	text-align: left; 
    	width: 630px;
    }
    
    #containered hr {
    	clear: both;
    	border: 1px solid #CCC;
    	margin-top: 10px;
    	width: 50%;
    }
    
    #containered ul#mest {	
    	font-weight: bold;
    }
    #containered ul#mest li {
    	font: bold 10px Verdana;
    	list-style-type: none;
    	text-align: left; 
    	display: inline;
    	margin: 1px;
    }
    #containered ul#mest li a {
    text-decoration: none;
    
    }
    #containered ul#mest li a:hover {
    text-decoration: none;
    color: #333333;
    }
    #containered h1,
    
    #containered .content {
    	border: 1px solid #d5d5d5;
    	padding: 10px;
    	text-align: left;
    }
    
    #containered a.current {
    	padding: 5px 3px;
    	border: 1px solid #d5d5d5;
    	background-image: url(images/shadeactive.gif);
    	border-bottom-color: white;
    	background-color: white;
    	color: #333333;
    	font-size: 12px;
    }
    #containered a.ghost  {
    	padding: 5px 3px;
    	margin-right: 1px;
    	border: 1px solid #d5d5d5;
    	color: #333333;
    	font-size: 12px;
    	background: white url(images/shade.gif) top left repeat-x;
    }
    
    #containered a.current:hover {
    	padding: 5px 3px;
    	border: 1px solid #d5d5d5;
    	background-image: url(images/shadeactive.gif);
    	border-bottom-color: white;
    	background-color: white;
    	font-size: 12px;
    	color: #333333;
    }
    #containered a.ghost:hover  {
    	padding: 5px 3px;
    	margin-right: 1px;
    	border: 1px solid #d5d5d5;
    	color: #333333;
    	font-size: 12px;
    }
    
    #containered .on {
    	display: block;
    	text-align: left;
    }
    #containered .off {
    	display: none;
    }
    
    
    blockquote {
    	padding-left:10px;
    	color:#599700;
    	font-style: normal;
    	
    	}
    .clear {
    	clear:both;
    	}
    .alignleft {
    	float:left;
    	}
    .alignright {
    	float:right;
    	}
    
    .wrapper {
    	width:1000px;
    	margin:0 auto;
    			
    	}
    
    .top {
    	height:251px;
    	margin-top:0px;
    	background:url(images/top.jpg);
    	}
    .blogname {
    	float:left;
    	width:700px;
    	}
    .blogname h1  {
    	font-size:50px;
    	font-weight:normal;
    	margin:40px 0 0 20px;
    	color:#fff;
    	text-decoration: none;
    	}
    
    .blogname h2 {
    	margin:0px 0 0 30px;
    	font-size:20px;
    	font-weight:normal;
    	color:#fff;
    	}
    
    .menu {
    	height:29px;
    	background:url(images/menu.jpg);
    	background-repeat:repeat-x;
    	}
    .menu ul {
    	list-style:none;
    	margin:0;
    	padding:5px 5px 0 0;
    	float:left;
    	}
    .menu li {
    	display:inline;
    	font-size:12px;
    	padding:0px 5px 0px 5px;
    	font-weight:normal;
    	}
    .menu a {
    	color:#fff;
    	text-decoration:none;
    	}
    .menu a:hover {
    	color:#000;
    	background:none;
    	}
    
    .date {
    	float:left;
    	width:49px;
    	height:50px;
    	background:url(images/date.gif);
    	text-align:center;
    	font-size:12px;
    	line-height:23px;
    	text-transform:uppercase;
    	color:#000;
    	}
    .date .day {
    	color:#fff;
    	font-size:24px;
    	font-weight:bold;
    	padding-bottom:3px;
    	line-height:15px;
    	}
    .content {
    	padding:15px 10px 25px 15px;
    	background:#000 url(images/content.jpg) top no-repeat;
    	
    	}
    
    .text {
    	width:750px;
    	float:right;
    	text-align:justify;
    
    		}
    .post {
    	padding:0px 0px 10px 5px;
    		
    	}
    
    h1.title {
        font-size:25px;
    	margin:2px 0 0 0;
    	padding:5px 3px 0px 0px;
    	color:#81a100;
    	font-weight:normal;
    	background:none;
    			
    	}
    h1.title a {
    	color:#81a100;
    	text-decoration:none;
    	}
    h1.title a:hover {
    	color:#81a100;
    	background:none;
    	font-weight:normal;
    	text-decoration:none;
    	}
    .postinfo {
    	height:15px;
    	padding: 2px 5px 2px 2px;
    	background:#999;
    
    		}
    		
    .postinfo a {
    	
    	color:#fff;
    	font-weight:normal;
    	text-decoration:none;
    	}
    
    .sidebar {
    	float:left;
    	width:208px;
    	padding-top:1px;
    	padding-left:0px;
    	font-size:13px;
    	}
    .sidebar ul {
    	margin:0;
    	padding:0;
    	list-style:none;
    	}
    .sidebar h2 {
    	height:33px;
    	line-height:20px;
    	font-size:16px;
    	color:#c2c2c2;
    	margin:0;
    	background:url(images/h2.gif);
    	padding:0 0 0 10px;
    	}
    
    .sidebar ul li {
    	background:url(images/sidebarbottom.gif) bottom no-repeat;
    	padding-bottom:7px;
    	margin-bottom:7px;
    		}
    .sidebar ul li li {
    	background:none;
    	padding-bottom:0;
    	margin-bottom:0;
    
    	}
    .sidebar ul li ul, .sidebar ul li div {
    	padding:9px;
    	background:#030511;
    		}
    .sidebar ul li ul ul, .sidebar ul li div div {
    	padding:0;
    	background:none;
    	}
    .sidebar ul li ul li {
    	background:none;
    	padding-left:5px;
    	}
    .sidebar table {
    	width:100%;
    	text-align:center;
    	}
    
    .sidebar ul li.ad div {
    	text-align:center;
    	}
    	
    #bottombar {
    	width:100%;
    	height:auto;
    	margin:0 0 0 0;
    	padding:15px 0 0 0;
    	background:#c9ed00 url(images/bottom.jpg) repeat-x;
    	
    	}
    
    .bar-one {
    	float:left;
    	display:inline;
    	width:30%;
    	margin-right:30px;
    	font-size:12px;
    	font-weight:normal;
    	letter-spacing:1px;
    	}
    
    .bar-one h2 {
    	width:100%;
    	height:20px;
    	margin:0px 0px 10px 10px;
    	padding:4px 0px 0 5px;
    	color:#fff;
    	letter-spacing:1px;
    	font-weight:bold;
    	font-size:14px;
    	}
    
    #footer {
    	height:20px;
    	padding:6px 0 0 15px;
    	margin:20px 0 0 0;
    	background:#334100;
    	border:1px solid #fff;
    	color:#000;
    	font-size:10px;
    	font-weight:normal;
    	letter-spacing:1px;
    	}
    
    #footer a {
    	color:#81a100;
    	}
    
    #footer a:hover {
    	color:#FFF;
    	}
    
    .bar-one li {
    	list-style:none !important;
    	list-style:outside;
    	margin:0px 0px 0px 0px;
    	padding:0px 0px 0px 0px;	
    	}
    
    .bar-one ul {
    	list-style:none;
    	margin:0px 0px 15px 15px;
    	padding:0px 0px 0px 0px;	
    	}
    
    .bar-one ul li {
    	list-style:none;
    	margin:5px 0px 5px 0px;
    	padding:0px 0px 5px 10px;
    	border-bottom:1px dashed #fff;
    	}
    
    .bar-one ul li a {
    	color:#000;
    	}
    
    .bar-one ul li a:hover {
    	color:#FFF;
    	
    }
    
    .navigation {
    	height:25px;
    	padding:0 20px;
    	}
    .navigation a {
    	font-weight:bold;
    	text-decoration:none;
    	font-size:14px;
    	color:#9e90dc;
    	}
    .navigation a:hover {
    	color:#fff;
    	background:#eedcbd;
    	}
    
    .contentCenter {
    	text-align:center;
    	}
    
    h2.pagetitle {
    	padding:0;
    	margin:0 0 20px 0;
    	font-size:25px;
    	text-align:center;
    	}
    
    .comments {
    	}
    .comments form {
    	}
    .comments textarea {
    	width:90%;
    	height:156px;
    	background:#dcdcdc;
    	border:1px solid #ababab;
    	color:#484849;
    	padding:10px;
    	overflow:auto;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:14px;
    	}
    #commentform {
    	padding-left:23px;
    	}
    #commentform input {
    	background:#dcdcdc;
    	border:1px solid #ababab;
    	color:#484849;
    	padding-left:10px;
    	}
    .comments input#submit {
    	padding:0;
    	width:72px;
    	height:29px;
    	}
    .comments h2 {
    	font-size:19px;
    	line-height:30px;
    	margin:24px 0 0 23px;
    	padding:0;
    	font-weight:normal;
    	}
    .comments ol li p {
    	padding:0;
    	margin:10px 0;
    	}

    j'ai modifié a chaque fois que je voyais backround (cela n'a rien changer)

    j'ai changé la couleur de l'image content.jpg maisce n'est pas le backround mais un bandeau du header

    voila si qu'elqu'un a une idée pour changer la couleur noire du backround
    merci par avance
     
  11. herveG
    herveG WRInaute accro
    Inscrit:
    5 Mars 2003
    Messages:
    7 986
    J'aime reçus:
    0
    body {
    margin:0;
    padding-top:0px;
    background:#777;
    font-family:"Myriad web",Tahoma,Verdana,sans-serif;
    color:#f3f3f3;
    font-size:13px;
    }

    C´est quoi cette couleur 777 ?
     
  12. OTP
    OTP WRInaute accro
    Inscrit:
    16 Décembre 2005
    Messages:
    14 581
    J'aime reçus:
    3
    777777 si je ne m'abuse (doublage si seulement 3 caractères)

    Edit : un lien vers le CSS aurait éviter de flingueur les roulettes des souris !
     
  13. herveG
    herveG WRInaute accro
    Inscrit:
    5 Mars 2003
    Messages:
    7 986
    J'aime reçus:
    0
    Je dirais que c est ca :

    .content {
    padding:15px 10px 25px 15px;
    background:#000 url(images/content.jpg) top no-repeat;

    }
     
  14. zen la tortue
    zen la tortue WRInaute occasionnel
    Inscrit:
    10 Septembre 2006
    Messages:
    261
    J'aime reçus:
    0
    bravo j'ai changé :#000 par #4B4B4B

    mais bon maintenant je dois changer plein de truc l'interieurdes menus et autres
    je voies cela dans la soirée , je dois sortir
    encore merci
    on revoie cela ce soir
     
  15. herveG
    herveG WRInaute accro
    Inscrit:
    5 Mars 2003
    Messages:
    7 986
    J'aime reçus:
    0
    Par contre je sais pas si le gris fait moins "CO2".... j´aurais même tendance à dire....

    Enfin maintenant que tu sais ou est le bouton à tourner tu vas pouvoir tester tout ca ! Un petit vert pastel en tont sur ton peutêtre ? qui rappellerai un peu le ton du header ? c´est juste une idée...
     
  16. OTP
    OTP WRInaute accro
    Inscrit:
    16 Décembre 2005
    Messages:
    14 581
    J'aime reçus:
    3
    Les éoliennes du header sont trop proches les unes des autres. Ce n'est pas réaliste. Il faut les éloigner ou en faire des petites et des grandes pour faire une perspective.
     
Chargement...
Similar Threads - Conseils design couleurs Forum Date
Recherche d'avis et conseils concernant ce site svp ( design, architecture, SEo) Problèmes de référencement spécifiques à vos sites 28 Mars 2013
Besoin d'avis & de conseils pour refaire le design de mon site... Demandes d'avis et de conseils sur vos sites 8 Février 2013
Design d'une page d'accueil (avis , conseils. ) Développement d'un site Web ou d'une appli mobile 29 Février 2012
Conseils sur le design Demandes d'avis et de conseils sur vos sites 1 Août 2009
Conseils design et ergonomie sur nouveau site Demandes d'avis et de conseils sur vos sites 8 Octobre 2008
Conseils sur un design Demandes d'avis et de conseils sur vos sites 16 Janvier 2007
Mon site, vos conseils |nouveaus design,plus d'iframe etc| Problèmes de référencement spécifiques à vos sites 29 Juin 2005
Besoin de conseils de Design? C'est ici. Problèmes de référencement spécifiques à vos sites 25 Novembre 2004
Conseils site web Demandes d'avis et de conseils sur vos sites 16 Juin 2022
WordPress Bonjour, J'aimerai avoir des conseils. Mon site internet est-il bien construit ? Débuter en référencement 29 Mars 2022
Conseils pour site Hightech Demandes d'avis et de conseils sur vos sites 16 Mars 2022
besoin de conseils pour mon site Débuter en référencement 9 Mars 2022
Tout simplement à la recherche de conseils... Débuter en référencement 13 Novembre 2021
Hébergement Cloud, VPS infogéré... besoin de conseils Administration d'un site Web 8 Juin 2021
conseils sécurité sur internet Le café de WebRankInfo 1 Juin 2021
Conseils Mots Clés Débuter en référencement 19 Mars 2021
Recherche conseils et aide pour hébergement Administration d'un site Web 14 Mars 2021
Besoin de conseils pour rendre un site web plus attractif Débuter en référencement 16 Septembre 2020
Quelques conseils : pagination et canonical Référencement Google 7 Avril 2020
Conseils pour améliorer un site E-commerce Demandes d'avis et de conseils sur vos sites 28 Janvier 2020