Mon nouveau site

[snooper]

Voici une ébauche de mon nouveau site:

http://www.eco-malin.com/

Le concept: Faire des économies d'argent (ECO) tout en respectant l'environnement (ECOlogie).

J'aimerais savoir ce que vous pensez du concept, à savoir proposer de l'écologie non pas au nom de l'écologie, mais au nom du pouvoir d'achat. Selon moi, c'est la seule manière de convaincre les gens de changer leurs habitudes. Je désirerai également que vous me disiez ce que vous pensez du graphisme, ainsi que du style d'écriture. Ayant écrit une petite cinquantaine d'articles sous word, j'attends vos réponses avant de tout convertir ça en articles pour le web.

Pour le moment, je n'ai mis que quelques articles en ligne, et la bannière reste vierge, car je n'ai pas bien maitrisé l'outil Texte du Gimp (je n'ai pas trouvé l'option de lisser les lettres pour éviter une pixalisation).

Cordialement

 

[bixi]

design : top 10 des sites les plus laids

contenu : c'est un sujet digne d'interet c'est sur (mon avis s'arretera la, c'est un forum de developpement ici )

 

[snooper]

OK je voulais savoir car je trouvais le concept peu développé jusqu'ici. Au niveau design les couleurs sont trop vives? Ne se marrient pas ensemble? Car par rapport a ce que je faisais avant (http://www.legypteantique.com) j'étais plutot satifai d'un design sobre... Juste pour savoir qu'est-ce que tu aime le moins?

Bonne soirée

 

[Lio7]

Franchement, le design c'est super important. Si c'est répugnant, tes visiteurs ne vont pas s'éterniser.

Dans ton cas, c'est une bonne idée de vouloir faire un design sobre et classe. Seulement, ça fait pas très ... "stable" (puces en forme de fleches trop hautes dans le menu), le vert choisi est hyper fade, tu repètes trois fois le même motif (ces espèces de feuilles).

Moi aussi, a un moment je voulais faire des beaux designs, mais sans une formation complète à The Gimp/Photoshop et surtout un instinct inné, c'est très très dur.
J'entends par beaux sites, ceux qu'on trouver dans ce billet.

Franchement j'ai abandonné cette partie, je me concentre sur le contenu et sur le référencement.
Il y a de très beaux design tout prêts et sous licence CC sur freecsstemplates.org.

Bonne continuation

PS : Pour le text sous The Gimp, coche "Lissage" et "indices d'ajustement" ....

 

[snooper]

Pour les feuilles je vais tavouer: je n'avais que deux images et pas d'acces a internet ce week end, j'ai fais avec ce que j'avais. Je sais que le design c'est super important, mais je pense que si je ne pond pas des merveilles, ca reste mieux que certaines horreurs que je vois fréquemment en kit graphique. OK merci pour l'avis tu me dira juste pour le concept ce que tu en penses? @+++

 

[bixi]

deja changes les polices des liens et change ce vert immonde digne des pires sites qu'on faisait dans les années 90

 

[snooper]

Mieux vaut mettre du arial que du cambria? Sinon ok pour le vert mais quoi mettre a la place? Du vert moins flashy? Du blanc? Une autre couleur?

Quand au concept, tu en pense quoi?

Sinon par exemple trouvez vous plus beau un kit type http://www.zwatla.com/kit_graphique_green_bridge/???

Cordialement

 

[bixi]

mais mon dieu mais non, fais tu expres de choisir le pire?

pourquoi ne pas partir de cette base http://www.zwatla.com/kits-graphiques/k ... ule/rouge/ ? ca a deja beaucoup plus de gueule


sinon tous nceux la on de la gueule, ne t'arrete pas a la couleur verte ! prends n'importe lequel, tu pourra facilement changer les tons sur toshop et les mettre en vert rapidos

 

[snooper]

OK no prob, mais les sites qu'on trouve beau je les trouve trop vides = trop blancs. Ok je vais regarder plus en profondeur sur zwatla, ainsi que changer les couleurs (sous gimp estce possible je n'ai pas photoshop)?

Bonne soirée

 

[bixi]

change la couleurs et agremente quand c'est vide.. ca te permet de partir d'une base pas laide

 

[snooper]

Agrémenter = mettre des images du graphisme ou tu veux dire du lorem ipsum pour voir le rendu de la page?

Cordialement

 

[bixi]

8O

reprendre des elements du graphisme de tel ou tel kit graphique, une boite, un menu, un coin arrondi etc.. et tu crée un nouveau graphisme (pas trop heterogene) a partir de tous ca.. comme quand tu t'habilles le matin quoi..

tu prend un pantalon ici, un pull la, des chaussures qui vont pas trop mal avec..

!!!

 

[snooper]

OK. Donc faire comme ce que j'avais deja fait (header d'un wordpress, style des titres de nautica, reste du design selon mes anciens sites)... mais en plus beau.



Sinon au question couleur, j'aimerais rester dans le dominante vert



Bonne soirée

 

[snooper]

Au fait question idiote mais j'aimerais que le texte soit centré au milieu de la zone blanche de contenu, et j'ai tout essayé

#article {
width:566px; display:inline; text-align:justify;
padding:10px 0 0 10px;
}

ou encore padding, margin, ... rien ne fonctionne. Savez vous comment faire???

Pire encore: si je me contente de mettre #article {
width:566px; display:inline; text-align:justify;
} ce con de navuigateur m'affiche une partie du fond d'écran en décalé au beau milieu de la page...

Autrement, ayant passe plusieurs heures sur ce foutu design, j'ai envie de le finir pour relever le challenge. Comme conseillé, j'ai modifié le design avec:

-Un fond d'écran blanc
-Un dégradé de pourtour de site plus atténué
-Des liens désormais en arial
-Des couleurs de colonnes plus claires

D'autres conseils a me donner pour ameliorer tout ça? Promis une fois fini pour mes futurs sites j'utiliserai des kits
Bonne soirée

 

[cw-nico]

Ben déjà, utilisé un text-align:justify pour centrer sa me semble louche ...
sa serait pas plutot un text-align:center qui a sa place ici, non ?

Et par contre si tu veux centrer ta div (calque) ... un simple :
margin-right: auto;
margin-left: auto;

+ width (bien sur)

suffit ... 8)

voilà en espérant t'avoir aidé pour ce problème de css

 

[bixi]

width:566px; display:inline

c'est pas possible d'attribuer une taille à un element INLINE.. par definition un element inline à la taille de son contenu (taille du text, ni plus ni moins)

tu dois plutot mettre le contexte de formatage : display:block...

la tu pourra fixer la taille, le padding, etc et centrer ton text avec text-align:center; et centrer ta div avec marigin:auto auto;

 

[cw-nico]

oui c'est bien de le rappeler bixi ...

parce que si il garde le display:inline, ce que j'ai dit risque de ne pas marcher en effet.

mais bon à la limite même pas besoin de définir le display étant donné que display:block c'est normalement la valeur par défaut.

Donc faut enlever le méchant inline

 

[snooper]

cw-nico: je ne veux pas que le texte soit centré a partir du milieu, je veux simplement que l'ensemble de l'article soit centré, ou, dit autrement, qu'il y aie une marge de 10 pixels tout autour du contenu. Comme il y a 596 pixels de blncs, pour avoir un texte centré, j'ai tenté le code

width: 566px; margin:10px; en vain. j'ai aussi essayé ton code, en vain

bixi

merci beaucoup pour le coup du dispaly cela marche. Sinon ce displayj e 'lavais trouvé dans un kit mais a quoi sert il concretement?


Enfin, je ne comprends pas: j'ai fais un petit essai a la page suivante

http://www.eco-malin.com/index2.html

Dans mon index j'ai le code

#article {
width:566px; display:block; text-align:justify; background-color: #ffffff;
}

et dans index2.html

#article {
width:566px; display:block; text-align:justify; background-color: #ffffff;
padding:10px;
}

SOus iexplore l'affichage est le meme pour les deux. Sous ff dans index2, il y a une petite marge en haut sur toute la largeur du site, quand a opera il m'affiche une partie du fond d'écran en décalé retrouvant ainsi la vordure grise de droite au milieu.

Pourtant le div en question faisant 566 pixel de large dans index2 pour un espace dispo de 586, je ne vois pas ou est le probleme, sachant qu'elles sont conforme au validator


Bonne journée

 

[snooper]

Sinon pourriez vous me dire ce que je pourrai encore améliorer avec ce design, sachant que j'ai deja modifie la page avec:

-Un fond d'écran blanc
-Un dégradé de pourtour de site plus atténué
-Des liens désormais en arial
-Des couleurs de colonnes plus claires


Cordialement

 

[cw-nico]

ben pour le display tout est expliqué ici http://zonecss.free.fr/style_css/feuille_css_display.html

donc en gros c'est la méthode d'affichage ...

 

[cw-nico]

Personnellement niveau amélioration encore à faire ...

:idea: le bas de page totalement en arial, time new roman c'est moche ... sauf dans certain cas 8)

:!: dans tes balises img de tes flèches vertes de ton menu, rajoute un align="absmiddle" , pour que tes flèches soit centrer verticalement par rapport à ton texte. Parce que vraiment sa le fait pas ... :twisted:

:!: varie les images ... parce que tes photos de feuille verte sa saoule surtout pour une page d'accueil !!!

:?: Script de contact non disponible (peut-être un lien mort ?) lors du lien "me contacter" ainsi que dans le menu principal en haut ... 8O

:!: Met un padding haut et bas sur tes div (si s'en est ?) de rubrique à gauche (menu) : "Ecomalin" et "Absolute Ecomalin", parce c'est pas assez aérer. 8O 8O 8O


Et voilà après tout sa ... sa devrait le faire

 

[snooper]

cw-nico ok merci beaucoup pour le lien et la réponse

Le bas de page totalement en arial, time new roman c'est moche ... sauf dans certain cas

OK tu as raison, en Verdana, c'est bien mieux.

dans tes balises img de tes flèches vertes de ton menu, rajoute un align="absmiddle" , pour que tes flèches soit centrer verticalement par rapport à ton texte. Parce que vraiment sa le fait pas ...

Les fleches sont placées dans un background, comme le code qui suit:

a.menu-gauche
{
background-image: url("images/fleche-vert.gif") ;
background-repeat: no-repeat;
padding-left: 10px;
margin-left: 10px;
}

J'ai essayé le ligne background-align: absmiddle; ou de mettre background-image: url("images/fleche-vert.gif") align="absmiddle; cela ne fonctionne pas.

NB: Le bug ne vient pas de l'image puisque si je mets manuellement <img src="">avant le lien il est centré (cf premier lien en haut à gauche).

varie les images ... parce que tes photos de feuille verte sa saoule surtout pour une page d'accueil !!!

Tu me conseillerai quoi? Quelque chose ayant rapport a l'environnement, ou rien du tout, pour faire plus sobre???

Bon j'ai dégagé la feuille de la colonne gauche pour voir. Sinon l'idee de mettre des petites images pour agrémenter comme sur http://www.legypteantique.com tu aime bien??? Quant aux couleur des colonnes, est-ce sobre? Ni trop foncé, trop clair, ou pisseux?

Script de contact non disponible (peut-être un lien mort ?) lors du lien "me contacter" ainsi que dans le menu principal en haut ..

Oui c'est normal la page n'est qu'en essai. J'ai mis contact comme j'aurais mis lorem ou ipsum.

Met un padding haut et bas sur tes div (si s'en est ?) de rubrique à gauche (menu) : "Ecomalin" et "Absolute Ecomalin", parce c'est pas assez aérer.

Merci pour le conseil. Non ce n'est pas un div, seulement un h2, mais margin fonctionne également. Sinon a propos du h2, est-il possible de combiner 2 backgrounds pour avoir et le fond different et une fleche a gauche des titres ecomalin et absolute ecomalin?

Sinon au niveau des liens je trouve moche de mettre le code

<br/><a href=""></a>
<br/><a href=""></a>

Pour supprimer les br, j'ai tenté de mettre margin-bottom:10px; et cela ne fonctionne pas. Ou est l'erreur?

Cordialement (et merci pour tout)

 

[cw-nico]

Pour les flèches :

Bon donc pour les flèches (premier lien en haut à gauche) sa devrait être bon comme sa à part encore un petit espace sur le gauche de la flèche est nécessaire.

Les images :

Moi je te conseil :

-pour l'image d'header (haut), de reprendre l'image (éditer) et de l'agrémenter du nom de ton site voir même mettre un logo par la suite dessus (comme ton site sur l'égypte, mais moins gros le texte).

-pour l'image(s) de ton menu tu peux soit laisser comme sa, soit l'agrémenter d'image qui reflète la rubrique et/ou mettre un petite image devant le nom des rubriques (10px pas plus)

-pour l'image de la ex-feuille dans "édito", là à toi de voir soit tu laisse comme sa (sobre) soit tu l'agrémente d'une image autre que la ex-feuille ...

... après c'est à toi de décider ...
pour les couleurs le vert pistache sa fait un peu vieillot mais sa passe, tu peux le garder ...

voir jouer entre cette couleur de fond et les couleurs du texte (intelligement sinon n'essaye même pas, genre bleu sur noir sa rend pas) ...

sinon soit tu prend une templates tout fait mais là faudra que tu refasse tout, soit tu crée un design qui déchire mais faut avoir des notions de webdesign ^^


Script de contact : ok

Pour les background rubriques :

Pourquoi toujours mettre tes flèches dans un background ? h2 (disons) > background > "fond vert" et à l'intérieur une balise img (flèche) puis ton nom de rubrique ...

Sinon pour répondre à ta question de combiner 2 background ... la réponse est oui et non ...
:!: Non, c'est pas autoriser de mettre 2 déclarations background à l'intérieur d'un style css .... mais ...
:idea: Oui en fesant par exemple une balise h2 stylé background 'fond vert' puis à l'intérieur de faire une autre balise (exemple : une div qui contient une autre div) stylé background 'flèche', voilà .

Un peu compliqué, mais difficile de simplifier la mise en place des nuances du css.


voilà ralala j't'en donne du boulot ... mais bon on fait ses pages comme un grand ou alors on paye des pro ...

les durs choix du webmastering

 

[snooper]

cw nico: pour les fleches, j'aimerais les mettre en css plutot que les mettre manuellement avec le code <img src="">avant chaque lien simplement pour respecter les dernieres normes w3c. Comment faire sachant que le code background-align="absmiddle" ou background-position: absmiddle; n'ont pas fonctionnés?



Pour le header je suis conscient du probleme mais je n'arrive pas a modifier la place du texte a mon aise jusqu'à le centrer, ni faire un effet d'ombrage sous gimp.



Sinon au niveau des couleurs, me conseillerai tu une couleur bleue en dominante, une couleur qui peut également evoquer l'écologie - ciel, mer, planete bleue, ... - tout en etant plus neutre? En meme temps l'header choquerait sur une thematique bleu, non?
J'ai fait un essai, si tu peux m'en donner un avis: http://www.eco-malin.com/index-bleu-et-vert.html

(avec banniere vert)

et

http://www.eco-malin.com/index-bleu.html

Enfin, ayant visité http://www.econologie.com/, je me suis dit: pourquoi ne pas mieux isoler le menu gauche du menu central. Tu trouve cela bien ou trop fermé?

Quand a l'idee de templates pourquoi pas mais pour mes prochains sites. Je n'aime pas etre dans un constat d'echec et vu le temps que j'y ai passe, j'ai envie d'aller jusqu'au bout.

Enfin, merci pour la combine, j'y avais pensé mais avait peur d'alourdir le texte. Tu me conseille quoi? De suivre le W3C a la lettre et mettre 2 div, ou de rajouter manuellement la fleche a gauche et mettre le menu gauche dans un bon vieux include pour faciliter les maj du genre

<div id="left">
<? include('menu-gauche.php'); ?>
</div>

Merci beaucoup pour ton aide et bonne soirée. Tu pourra juste me dire quel est l'adresse de ton site pour que j'aille le voir?

Cordialement

 

[cw-nico]

:arrow: Bon alors pour les flèches ...

t'a de la chance j'ai quelques minutes devant moi ... alors je t'ai fait une page d'exemple au sujet des alignements rubriques/image de fond et la flèche !

http://www.colaswebsite.com/lab/Mateo.html

voilà donc si tu veux tu peux t'amuser à décortiquer la page, n'ai pas peur si tu vois dans la page le terme ems 8O , c'est une unité comme le pixel (px), y'en a qui travail avec du pixel moi c'est le ems (em).

:arrow: Bon pour les header, là à toi de jouer avec ton éditeur d'image ...

:arrow: Pour les couleurs :

Personnellement je trouve que sa ne le fait pas en bleu ... le vert sa peut-être bien à condition que c'est bien réaliser ... donc reste sur le vert après les nuances à toi de voir ...

Par contre pas mal le header du thème bleu c'est bien fait mais sa ne suit pas malheureusement ...

:!: Chose à savoir avec les couleurs ... n'oublie pas que les couleurs sa reflète le message que tu veux faire passer (bleu : le calme, la mer ... le blanc : la transparence, la pureté, la lumière ... vert : la nature, l'environnement ... ainsi de suite) ... donc à toi de voir

:arrow: Par contre pour le menu à l'éconologie ... je te recommande pas étant donné que t'a du déjà galéré pour ajuster tout le design comme sa ... :lol:

et personnellement ce site ... a procédé comme sa uniquement pour mettre ses pub à la *** (nota :et il en on mis le paquet :twisted: ).

:arrow: Pour les div superposés ... non sa alourdit pas le texte :twisted: ... sa dépend se que tu veux faire ... pour être franc, il m'ai déjà arriver de ne pas suivre le w3c sur mes pages, exemple : il y a quelques pages où j'été dans l'impasse ... et je me suis pas géner pour mettre un bon vieux tableau ! 8)

Mais suis pas mon exemple, moi c'est surtout parce que j'ai tellement de page de script que j'ai dut délaissé un peu les problèmes de css pour avancer, j'optimiserai plus tard ... :lol: :lol:

Donc décrypte un peu ma page que je t'ai indiqué ... et normalement tu y arrivera comme tu veux pour les rubriques ...

:?: Qu'est-ce que c'est que sa ? :
<? include('menu-gauche.php'); ?>

Tu est encore en php3 :twisted: ? Sa ce n'est pas plus correcte ?
<?php include('menu-gauche.php'); ?>



:arrow: Bref, par contre pour mon site, ben ta du deviner maintenant que c'est :
http://www.colaswebsite.com/


Alors il est en cours de migration vers sa nouvelle version ... et c'est du boulot ... il reouvre dans 5 jours ... voir le compteur ...

En gros c'est un site ...

C'est un site pour partager ses connaissances/expériences professionnelles en quelques sortes ... étudiants, salariés, etc .... sur différents supports cours, exposé, thèse, etc .

Un gros truc de fou, surtout avec des multi listes dynamique qui comptabilise ainsi toutes les matières, filières, etc en france pour les étudiants et des thèmes/sous-thème pour les autres catégories de visiteurs.



bref ... mais si tu veux je t'enverrai en mp la capture d'écran du design de la nouvelle version du site ... ^^ juste demande le moi

et comme sa tu me dira ce que tu en pense ...

héhé et pourquoi en mp :?: ... parce que j'ai pas envi de réduire l'impact de mon teasing. tout simplement ...

 

[snooper]

OK pour tout tes messages. je vais aller voir et reviens tout a l'heure. Par contre pour le mp si tu peux le faire ce soir, ce serait cool, car je serai durant une semaine sans internet (vacances au ski).

@+++

 

[snooper]

Salut

Je viens d'essayer ton code (premiere fleuche bleu du haut) et cela ne fonctionne pas (texte centré, fleche trop bas) alors que chez toi, c'est nickel.

Par contre en testant

.arrow1 {
background-image: url("images/fleche-bleu.gif");
background-repeat: no-repeat;
background-position:left;
width: 1em;
line-height: 18px;
float: left;
padding-left: 0.1em;
margin-left: 0.5em;

}

.text1 {
margin-left: -1.5em;
}

et


<h2 class="titresmenugauche"><div class="arrow1" id="arrow1">&nbsp;</div>
<span class="text1" id="text1"> Absolute Ecomalin</span>
</h2>



Cela fonctionne nickel. Mais pourquoi devoir mettre une marge négative pour recentrer le titre a gauche???


Pour les couleurs, OK. J'ai toutefois pensé a utilise rle design bleu piour http://www.jeuxfun.com qui me semble mieux adapté. Tu en pense quoi???

OK pour econologie.

Et pour le php a part alourdir de 3 pixel la page, a quoi sert de taper <?php plutot que <? ???



Bonne soirée

 

[cw-nico]

Ben pour le décalage ... sa doit-être du à la structure de page, moi la rubrique été direct à gauche ... donc voilà ...

Pour le design bleu à toi de voir, mais je trouve que sa va encore pour jeuxfun.com.

Pour le <?php , ben normalement un bloc de code php supérieur à 4 (version) normalement constitué s'écrit comme sa <?php ... ?> ...

l'écriture en <? ... ?> ... c'est de l'antiquité ... sa devrait même plus être utilisé .... si sa marche sur ton site c'est qu'il doit posséder une version de php inférieur à la version 4.

voilà et au faite t'a jeté un coup d'oeil sur le screenshot ??? :lol:

 

[cw-nico]

excuse ... j'ai pas regarder mes msg :lol: :lol: :lol:

ok

 

[snooper]

No prob. Pour mon site, il est hébergé chez 1and1.

Sinon je vais tester ca pour jeuxfun.com uniquement pour l'index.

Autrement si tu retourne sur eco-malin.com ce qui est bizarre c'est que le background se décale si le menu gauche est plus long que l'article... sur opera et sur firefox.

Sinon il est cool ton site. Bon courage.

Cordialement

 

[cw-nico]

ok ben alors paramètre ton width à la valeur exacte en px en fonction du nombre de pixel que prend ta colonne ... ou essaye width 100%(voir 95%) pour les balise (div, etc) qui sont à l'intérieur de ta balise de menu (colonne) (un h2 il me semble).

Ou alors c'est les remplissages (padding) qui décale le tout mais le mieux c'est de tâtonner les unités jusqu'à avoir le rendu que tu veux ...

merci pour ton compliment sur mon site ...

 

[snooper]

OK j'essaierai ca le week end prochain (plus le temps).

De rien, je t'ai simplement dis ce que je pensais.
@+++

 

[coolspot]

Au fait question idiote mais j'aimerais que le texte soit centré au milieu de la zone blanche de contenu, et j'ai tout essayé

#article {
width:566px; display:inline; text-align:justify;
padding:10px 0 0 10px;
}

ou encore padding, margin, ... rien ne fonctionne. Savez vous comment faire???

Pire encore: si je me contente de mettre #article {
width:566px; display:inline; text-align:justify;
} ce con de navuigateur m'affiche une partie du fond d'écran en décalé au beau milieu de la page...

Autrement, ayant passe plusieurs heures sur ce foutu design, j'ai envie de le finir pour relever le challenge. Comme conseillé, j'ai modifié le design avec:

-Un fond d'écran blanc
-Un dégradé de pourtour de site plus atténué
-Des liens désormais en arial
-Des couleurs de colonnes plus claires

D'autres conseils a me donner pour ameliorer tout ça? Promis une fois fini pour mes futurs sites j'utiliserai des kits
Bonne soirée

mettre un width aec la propriété display:inline est totalement inutile car le width ne sera pas pris en compte pour cela il te faut la mettre en display:block

après centrer un texte se fait avec un text-align:center et pas text-align:justify


Ensuite fait bien attention entre tes padding et tes dimension width car quand tu ajoute des marge intérieur padding il faut retranché les pixel ajouter au padding de ta propriété width et height car sinon ta boite ferait par exemple avec une marge intérieur gauche et droite de 10 px + un block original a 500 ferait un total de 520 px ce qui te ruinera ton design prévu pour du 500px par exemple.

 

[coolspot]

Sinon pendant qu'on y est quelque point à revoir pour une meilleur compatibilité et meilleur sémantique

	<div id="menu-haut">
		<a href="">Accueil</a> -  
		<a href="http://www.i-services.net/membres/livredor/livredor.php?user=17146">Livre d' or</a> - 
		<a href="http://www.i-services.net/membres/forum/sommaire.php?user=17146">Forums</a> - 	
		<a href="http://www.jeuxfun.com/chat/index.htm">Chat</a> - 
		<a href="http://www.i-services.net/membres/faq/faq.php3?user=17146">F.A.Q</a> - 
		<a href="me_contacter.php">Contact </a> - 
		<a href="http://www.legypteantique.com/rss_legypteantique.xml" title="Suivez les mises à jour"><img src="images/rss_14x14.png" alt="Flux RSS" height="14" width="14"></a>
	</div>

Il est préférable lorsqu'il y a une liste de liens d'utiliser <ul><li> en display:inline c'est plus sémantique et tu peut utiliser les li:after pour definir tes séparateurs de liens avec espacement précis grace au margin (même si IE le gère pas encore)

<div id="container">
    
<div id="left">


<br><br><br>

Les br pour créer les espacement ce n'est pas top car trop imprécis il faut mieux utiliser des marge intérieur padding par exemple.

<div align="center">
<img src="images/drapeau-allemand.jpg" alt="Drapeau Allemand" height="17" width="25">  
<img src="images/drapeau-americain.jpg" alt="Drapeau Américain" height="17" width="25">
</div>

Encore une liste à transformer en <ul><li>

<br><a class="menu-gauche" href="transport.html">Le transport</a>
<br><a class="menu-gauche" href="economiser-le-papier.html">Le papier</a>
<br><a class="menu-gauche" href="l-alimentation.html">L'alimentation</a>
<br><br>

Le br pour lister un menu en ligne c'est a deconseiller car tu a peu de controle et suivant les navigateur ta des truc bizarre. Il vaut mieux encore une fois utiliser un <ul><li> en display:block cette fois-ci.

Après pour la suite ce sont a peu prés les même erreur des br en abus et des flottants qui ne sont pas "washer"

 

[cw-nico]

Au fait question idiote mais j'aimerais que le texte soit centré au milieu de la zone blanche de contenu, et j'ai tout essayé

#article {
width:566px; display:inline; text-align:justify;
padding:10px 0 0 10px;
}

ou encore padding, margin, ... rien ne fonctionne. Savez vous comment faire???

Pire encore: si je me contente de mettre #article {
width:566px; display:inline; text-align:justify;
} ce con de navuigateur m'affiche une partie du fond d'écran en décalé au beau milieu de la page...

Autrement, ayant passe plusieurs heures sur ce foutu design, j'ai envie de le finir pour relever le challenge. Comme conseillé, j'ai modifié le design avec:

-Un fond d'écran blanc
-Un dégradé de pourtour de site plus atténué
-Des liens désormais en arial
-Des couleurs de colonnes plus claires

D'autres conseils a me donner pour ameliorer tout ça? Promis une fois fini pour mes futurs sites j'utiliserai des kits
Bonne soirée

mettre un width aec la propriété display:inline est totalement inutile car le width ne sera pas pris en compte pour cela il te faut la mettre en display:block

après centrer un texte se fait avec un text-align:center et pas text-align:justify


Ensuite fait bien attention entre tes padding et tes dimension width car quand tu ajoute des marge intérieur padding il faut retranché les pixel ajouter au padding de ta propriété width et height car sinon ta boite ferait par exemple avec une marge intérieur gauche et droite de 10 px + un block original a 500 ferait un total de 520 px ce qui te ruinera ton design prévu pour du 500px par exemple.

euuuh ???? 8O 8O 8O

je ne sais pas si tu a suivi mais ce problème de inline il est déjà au courant !!! bixi et moi on l'a déjà informé ... (voir page 2)

Bon par contre pour le <ul><li> et li:after c'est ok mais même pas besoin de définir de display:inline ... là pas compris 8O

Oui pour les <br>, je sais j'alé lui dire quand il sera revenu de vacance ^^ ...
c'est quand même mieux de le définir en CSS je sais

Par contre ... faut suivre un peu coolspot ... au lieu de sauter de la page 1 à la page 3 quand-même ... :twisted:

 

[coolspot]

euuuh ???? 8O 8O 8O

je ne sais pas si tu a suivi mais ce problème de inline il est déjà au courant !!! bixi et moi on l'a déjà informé ... (voir page 2)

A vrai dire j'ai vu vos réponses après avoir poster lorsque j'avais commencer à répondre vos réponse n'était pas encore la

Bon par contre pour le <ul><li> et li:after c'est ok mais même pas besoin de définir de display:inline ... là pas compris 8O

Ben ul li a par default une propirété block ce qui fait que si il ne spécifie pas inline sa liste du haut se serait afficher en :

ligne 1
ligne 2
ligne 3

au lieu de quelquechose comme sa liste du haut :

ligne 1 | ligne 2 | ligne 3

Oui pour les <br>, je sais j'alé lui dire quand il sera revenu de vacance ^^ ...
c'est quand même mieux de le définir en CSS je sais

Par contre ... faut suivre un peu coolspot ... au lieu de sauter de la page 1 à la page 3 quand-même ... :twisted:

Bah j'ai voulu faire un post global même si il y avait des truc qui avait déjà était vu.

 

[snooper]

Bonjour a toutes et a tous

Desole de ne pas avoir repondu plus tot à vos messages, je n'avais alors pas accès à Internet (vacances).

Coolspot

Ensuite fait bien attention entre tes padding et tes dimension width car quand tu ajoute des marge intérieur padding il faut retranché les pixel ajouter au padding de ta propriété width et height car sinon ta boite ferait par exemple avec une marge intérieur gauche et droite de 10 px + un block original a 500 ferait un total de 520 px ce qui te ruinera ton design prévu pour du 500px par exemple.

OK je fais bien gaffe avec les padding...

Il est préférable lorsqu'il y a une liste de liens d'utiliser <ul><li> en display:inline c'est plus sémantique et tu peut utiliser les li:after pour definir tes séparateurs de liens avec espacement précis grace au margin (même si IE le gère pas encore)

Tu pourrais me dire en français ce que tu viens de dire, car je n'ai pas tout saisi en termes informatiques???

Les br pour créer les espacement ce n'est pas top car trop imprécis il faut mieux utiliser des marge intérieur padding par exemple.

OK, je m'en charge

Encore une liste à transformer en <ul><li>

Comment supprimer l'inesthetique rond noir qui apparait sous firefox ou iexplore avec les listes de liens??? Sachant que je ne veux definir aucune image en background pour autant sur certains liens (images, ...)

Le br pour lister un menu en ligne c'est a deconseiller car tu a peu de controle et suivant les navigateur ta des truc bizarre. Il vaut mieux encore une fois utiliser un <ul><li> en display:block cette fois-ci.

Si je definis un backgroudn, l'inesthetique rond noir partira???

flottants qui ne sont pas "washer"

Tu veux dire quoi par la???


wc-nico

Par contre ... faut suivre un peu coolspot ... au lieu de sauter de la page 1 à la page 3 quand-même ...

Pas grave lol. Sur ce bonne soirée à tous les deux. Je vais regarder ca de plus pres.

Cordialement

 

[snooper]

En gros je galere avec ces maudits points noirs des balises ul

http://www.jeuxfun.com/@/index-bleu.html

Et le probleme de centrage des fleches... Et par exemple dans les titres de menu gauche, pour que le titre soit juste a droite de la fleche et pas decale a droite, je suis oblige de mettre dans mon code


.text1 {
margin-left: -1.5em;
}

Cordialement

 

[snooper]

coolspot

J'ai mis en application ce que tu m'a dit. (cf http://www.jeuxfun.com/@/index-bleu.html)



par contre je ne vois aps trop pour les li after et, au niveau de mon menu haut, il y a un probleme: seul le premier mot s'affiche.

<div id="menu-haut">
<ul class="barre-haut">
<li><a href="">Accueil</a></li>
<li><a href="http://www.i-services.net/membres/livredor/livredor.php?user=17146">Livre d' or</a></li>
<li><a href="http://www.i-services.net/membres/forum/sommaire.php?user=17146">Forums</a></li>
<li><a href="http://www.jeuxfun.com/chat/index.htm">Chat</a></li>
<li><a href="http://www.i-services.net/membres/faq/faq.php3?user=17146">F.A.Q</a></li>
<li><a href="me_contacter.php">Contact </a></li>
<li><a href="http://www.legypteantique.com/rss_legypteantique.xml" title='Suivez les mises à jour'><img src="images/rss_14x14.png" alt="Flux RSS" height="14" width="14"/></a></li>
</ul>
</div>

et dans mon CSS

ul.barre-haut
{
display:inline;
list-style-image: url("");
}


#menu-haut {
width:766px;
height:20px;
margin:auto;
padding:143px 0 0 0;
background-image:url(images/banniere.jpg);
background-position:top;
background-repeat:no-repeat;
background-color: #d6d7ff;
position:relative;
text-align:center;
border-bottom: 1px solid #000000;
font-family: Verdana, Cambria, arial;
}

Enfin, est-ce normal que pour que la puce ne soit pas une fleche dans le menu haut, je sois de definir une image vierge dans le ul de la barre du haut?

ul
{
list-style-image: url("images/fleche-bleu.gif");

}


ul.barre-haut
{
list-style-image: url("");
}

Et comment faire pour centrer le texte dans la barre du haut? Car quand l'image du flux RSS s'affiche, elle n'est pas centrée dans la barre bleue. j'ai tenté text-align:adsmiddle, en vain.


Enfin, en passant au validator ma page web il me trouve quelques erreurs genre a ce niveau la

<h2 class="titresmenugauche">
<div class="arrow" id="arrow">&nbsp;</div>
<span class="text1" id="text1"> Jeux</span>
</h2>

Je ne vois pas ou est l'erreur de syntaxe...

Cordialement (et merci d'avance).

 

[arobase95]

création du site est incomplète

J'ai visité le site mais, à mon avis, c'est incomplet. A moins que ce ne soit involontaire : pourquoi il n'ya pas de bannière sur les autres pages (forum ou livre d'or) ? Il faut que toutes tes pages se ressemblent. Au moins qu'on sache que site web est toujours le même à chaque page !!

 

[snooper]

Simplement parce que mon abonnement ne me le permettait pas. Je viens de prendre un abonnement payant pour resoudre ces problemes.

Sinon que trouvez vous le moins moche niveau graphisme?

http://www.legypteantique.com/index.php
ou par exemple

http://www.legypteantique.com/art.php?

Cordialement