Conseils sur design et couleurs

[zen la tortue]

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

 

[herveG]

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

 

[malvina14]

Bonjour,
idem

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

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.

 

[OTP]

HS :

Vous trouverez sur cet annuaire toutes les meilleurs adresses sur l'écologie, les énergies renouvelables et durables

Ah ?... Il en manque...

Comparé aux énergies classiques

"ées" pour "Comparées"

l'énergie mécanique

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

Bleu du Vercors sassenage

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

 

[zen la tortue]

Edit : contacte moi qd tu auras une partie éolien

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

 

[OTP]

Edit : contacte moi qd tu auras une partie éolien

voila http://www.energies-renouvelable.info/energie-eolienne-c-2.html

Avec un contenu !

 

[zen la tortue]

Edit : contacte moi qd tu auras une partie éolien

voila http://www.energies-renouvelable.info/energie-eolienne-c-2.html

Avec un contenu !

oki d'ac pas pour maintenant mais cela viendra

sinon regardez un peu le header j'ai modifié
hum hum quand pensez vous ?

 

[OTP]

Je ne vois pas de différence !?

 

[zen la tortue]

Je ne vois pas de différence !?

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:

 

[zen la tortue]

j'ai trifouillé dans le fichier css


voici le css

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

 

[herveG]

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 ?

 

[OTP]

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 !

 

[herveG]

Je dirais que c est ca :

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

}

 

[zen la tortue]

Je dirais que c est ca :

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

}

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

 

[herveG]

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

 

[OTP]

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.