70 replies to this topic

[Fred]

t'enregistres en quel format ? *.PNG... ?

[CaseyN]

+1 avec au dessus... Transparence = PNG rien d'autre.

[VB 6]

Salut, sphynx666.

Très sincèrement te suggère :
Macromedia Fireworks 8
Plus tôt que CS3, il s'agit d'un supère logiciel (et il fonctionne à merveille pour les site web, graphisme etc).


Sur ce,
Excellent journée !!



VB6.

[sphynx666]

Merci bien,

Oui j'enregistre en png enfin j'ai essayé tout les format^^. En png ça marche mais j'ai le cadre du transparent qui s'affiche autour de mon bouton comme des bordure :(.

Je vais donc essayé Macromedia Fireworks 8 car après de multiples manipulation et lecture sur forums je ne trouve pas la solution .

[noisette]

alu alu

une tite capture, qu'on voit (si c'est un cadre ou des bordures, par exemple).

[sphynx666]

Bah en fait que se soit un cadre , une bordure ou un cercle ça fait la même chose fond blanc mais pas grave j'ai trouvé une solution pour m'en passer mais ça na pas réolu le problème^^.


Alors voila j'ai beau batailler avec le code de mon site je ne voit pas quoi faire pour résoudre mes petits problèmes.

Tout d'abord le sites en images ( il a changé^^ )



Le code css:

p
{
text-indent: 20px;
color: white;
}
body

{
width: 1010px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-color: #4c4d4e;
}
#en_tete
{
width: 1010px;
height: 160px;
background-image: url("images/banniere.jpg");
background-repeat: no-repeat;
margin-bottom: 10px;
}
#menuhaut
{
padding: 40px;

text-align: center;

color: #B3B3B3;
background-color: #626262;
background-image: url("images/menuhaut.jpg");
background-repeat: repeat-x;

border: 0px solid black;
}

#menu
{
float: left;
width: 160px;
}

.element_menu
{
background-image: url("images/menu.jpg");

background-repeat: repeat-x;

border: 0px solid black;

margin-bouton: 100px;
}
.element_menu pre
{
margin: 0px;
color: #0F0;
font-family: Verdana, Geneva, sans-serif;
text-align: center;
text-decoration: none;
font-style: normal;
}

.element_menu ul
{
padding: 0px;
padding-left: 20px;
margin: 5px;
margin-bottom: 20px;
}

.element_menu a
{
color: #555555;

}
.element_menu a:hover
{
background-color: #658977;
color: white;
}

#corps
{
margin-left: 170px;
margin-right: 0px;
margin-bottom: 20px;
padding: 5px;
color: #B3B3B3;
background-color: #4c4d4e;
background-image:
background-repeat: repeat-x;
border: 0px solid black;
}
#pied_de_page
{
padding: 40px;

text-align: center;

color: #B3B3B3;
background-color: #626262;
background-image: url("images/bas.jpg");
background-repeat: repeat-x;

border: 0px solid black;

Se que je veux faire et que je n'arrive pas, c'est a faire descendre le menu de gauche où se trouve les boutons. Je voudrais qui soit à la même hauteur du texte " bienvenue sur mon super site" . Mais je ne voit pas du tout comment faire :(.


Autre problème:




Quand j'écris le texte dans le code html comme sur l'image je n'arrive pas à le centrer par rapport à la barre intérieur ( barre plus petite ) et à le placer dans les ovales. C'est mon menu horizontal donc par la suite les textes situé entre les ovales seront donc des liens. Est-ce qu'il faut que je refasse la barre au niveau graphique ? Ou il y a t'il un moyen ?


Merci beaucoup

[VB 6]

Je suis pas un spécialiste, mais je pense que pour donner un lien vers ton bouton (où Menu) sur une image.
Tu devra soit placé un bouton sur ton image où soit tapé ton texte sur image, pour crée un lien sur celui-ci.

Pour ton texte, as tu essayer :

<center>ton texte</center>

où
<STYLE TYPE="text/css">
<!--
.centeralign {text-align:center}
-->
</STYLE>
Si non, je t'invite à lire ce poste :
http://forum.hardwar...jet_76057_1.htm


Personnellement je calqué le bouton (forme), sur mon image où fond de site.
En tous les cas, bonne chance et tien nous aux courants

[sphynx666]

Merci ça m'a déjà aidé un petit peu, ça m'a mis sur la bonne voix^^:

#menuhaut
{
padding: 40px;

text-align: center;

color: #B3B3B3;
background-color: #626262;
background-image: url("images/menuhaut.jpg");
background-repeat: repeat-x;

border: 0px solid black;
}

J'ai changé le padding: 40px; en 30px et du coup ça à centré mon texte ^^, Me demandez pas pourquoi ni comment parce que là je vois pas en quoi ça change bref...

Maintenant le texte et centré sur ma barre intérieur et centré par rapport à l'image.
Mais comment rajouter 4lins sur la même ligne et comment régler la distance entre les liens :( là je voit pas trop :(

[noisette]

alu

si tu pouvais nous donner également le code html, ce serait plus facile .

Pour ce que j'ai compris, tout devrait avoir une solution, voire plusieurs, mais pour être sûr, il faut le code html (en tout cas en ce qui me concerne).

Pour ton menu à gauche, sous réserve, ajoute un margin-top: 100px; pour voir à:
#menu
{
float: left;
width: 160px;
}

Tiens au courant

[sphynx666]

margin-top: 100px je l'ai mis à 30px et ça à aligné le menu de gauche avec le texte "bienvenue sur mon super site "

1 problème de réglé^^. Merci bien


Ah je voulais aussi agrandir le menu de gauche en hauteur mais je n'y arrive pas même si je mets une image plus longue en hauteur rien ne change. Une erreur dans le code css? Si vous avez la solutions pour se problème là aussi je prend



Code html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR...l1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />

</head>
<body>
<div id="en_tete">
<!-- Ici on mettra la bannière -->
</div>
<br/><br/>
<div id="menuhaut">
iiiiiiiiiiiiiiiii
</div>


<div id="menu">

<div class="element_menu">
<br/>
<pre> <u><em>Page d'accueil</em></u></pre>

<br/>
<ul>

<a href="page1.html"><img src="images/bouton.gif"/></a>
<a href="page2.html"><img src="images/bouton.gif"/></a>
<a href="page3.html"><img src="images/bouton.gif"/></a>
<a href="page4.html"><img src="images/bouton.gif"/></a>
<a href="page5.html"><img src="images/bouton.gif"/></a>
<a href="page6.html"><img src="images/bouton.gif"/></a>

</ul>
</div>


</div>

<div id="corps">
<h1>Bienvenue sur mon super site</h1>
<p>Bienvenue sur mon super site !<br />
Vous allez adorer ici, c'est un site génial qui va parler de streaming, vid&eacute;os, jeux et des petits tutoriels sympathyque.<br/>Je cherche encore un peu le thème de mon site à vrai dire donc soyez indulgent tout de même :-) </h1>
<h2>A qui s'adresse ce site ?</h2>
<p>
A des privilégier, certaines personnes qui passeront par là et surtout pas au..., on va m'accuser de discrimination ;o)<br />
Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
</p>

<h2>L'auteur</h2>
<p>
L'auteur du site ? Bah, c'est moi, quelle question :-p<br />
ça doit pas être bien compliqué). Mon objectif est d'attirer un maximum de visiteurs, de les rendre accros à mon site, puis de les mettre en mon pouvoir.<br />
Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait, j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
</p>



</div>
<br/><br/><br/><br/>

<div id="pied_de_page">

</div>


</body>
</html>

[noisette]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR...l1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />

</head>
<body>
<div id="en_tete">
<!-- Ici on mettra la bannière -->
</div>
<br/><br/>

Remplace les deux <br /> par un margin-bottom sur #en_tete, ou par un margin-top sur #menu_haut.

<div id="menuhaut">
iiiiiiiiiiiiiiiii
</div>

il faut donc remplacer les iiiiiiiiiiiiiiiii par ce qu'il faut ^^.

Ca va être le plus long

Solution compliquée mais pas trop "sale": comme il s'agit d'un menu, il serait préférable d'employer une liste. Voilà ce que cela donne sur notre page partenaire (lien en haut dans le menu de navigation): j'ai mis en gras ce qui me semble important.

<ul class="menunavigation">
<li id="startmenu"><a href="http://infomars.fr/f...ortail</a></li>
<li><a href="http://infomars.fr/f...>Forum</a></li>
<li><a href="http://infomars.fr/f...Arcade</a></li>
<li><a href="http://infomars.fr/f...">iLSF</a></li>
<li><a href="http://www.infomars....">Blog</a></li>
<li id="flux"><a href="http://infomars.fr/f...ct=rssout"><img src="faux_rss.png" alt="Flux rss" /></a></li>
</ul>

avec le css:

.menunavigation
{
list-style-type: none;
margin-right: 30px;
margin-left: 30px;
background: transparent url(fond_menu_navigation.png) repeat-x;
color: #C7E877;
padding-top: 1px;
padding-bottom: 6px;
padding-left: 50px;
font-size: 1.2em;
height: 30px;
}

#startmenu
{
float: left;
display: block;
width: 110px;
padding-top: 6px;
padding-bottom: 6px;
margin-top: -1px;
border-right: solid #90A93A 1px;
border-left: solid #90A93A 1px;
text-align: center;
}


.menunavigation li
{
float: left;
display: block;
width: 110px;
padding-top: 6px;
padding-bottom: 6px;
margin-top: -1px;
border-right: solid #90A93A 1px;
text-align: center;

}

Remarques:
float left pour que les boutons se rangent les uns à la suite des autres horizontalement (les listes sont par défaut verticales)
display: block pour pouvoir donner une taille à ces boutons (les listes sont par défaut des balises "en ligne" donc non dimensionnables)
width: je leur donne une taille
J'ai séparé mon premier bouton (#startmenu) des autres boutons (.menunavigation li) pour des histoires de bordures, ce n'est pas obligatoire du tout ^^.


Bien entendu, cette technique est à adapter pour ton design à toi.

Il y a d'autres solutions, non conseillées mais plus simples, comme l'emploi d'un tableau.

Ce que tu peux faire, c'est parer au plus pressé, le temps que la page soit ré-écrite proprement, ce que je peux t'aider à faire, tout comme Kyro, fkunz ou d'autres, plus avancés techniquement que moi.

<div id="menu">

<div class="element_menu">
<br/>
<pre> <u><em>Page d'accueil</em></u></pre>

<br/>
<ul>

<a href="page1.html"><img src="images/bouton.gif"/></a>
<a href="page2.html"><img src="images/bouton.gif"/></a>
<a href="page3.html"><img src="images/bouton.gif"/></a>
<a href="page4.html"><img src="images/bouton.gif"/></a>
<a href="page5.html"><img src="images/bouton.gif"/></a>
<a href="page6.html"><img src="images/bouton.gif"/></a>

</ul>
</div>


</div>

Il manque les <li>

<br/><br/><br/><br/>

avec des margin c'est mieux

Mettre en place cela pourrait être l'occasion d'un point ensuite, avec nouveaux codes html, css et capture d'écran de ce que tu souhaites faire évoluer (je n'ai pas trop compris pour le menu de gauche par exemple).

L'idéal, pour arriver à un code sympa, ce serait de :
faire une maquette html du contenu, axé vers la cohérence (sémantique)
faire un dessin de la page

puis écrire le css qui va bien.

Si tu as des soucis pour le menu principal, n'hésites pas à demander.

[noisette]

P.S: chapeau, pour quelqu'un qui n'y connaissait rien il y a quelques temps

[VB 6]

Je confirme, bon début

[sphynx666]

lol pour les <br/> j'ai fait au plus pressé^^.

Bon j'ai essayé ta solution qui est à peu près similaire à celle que j'ai trouvé sur le site du zero mais ça ne va pas je comprend pas comment espacer les titres et les placer ou je veux . J'ai modifié toutes les données mais rien n'y fait toujours pareil j'avais réussi avec un autre code à régler 2 titres mais les 2autres était complètement décalé et in réglable.




Les flèches signifie ou je veux placer chaque liens mais ça je suppose que vous l'avez déjà compris^^.

Il manque les <li>

D'accord mais quand je les rajoutes ça me fait des puces devant mes boutons ce qui est pas top c'est pour ça que je les avaient enlevés au départ, mes "liens boutons" marchent parfaitement sans.


Pour le menu de gauche ( en vert celui avec les boutons ). Ben j'aimerais l'agrandir en hauteur, qu'il soit aussi long que la hauteur du texte.
Exemple qui soit aussi long que le rajout en noir que j'ai fait ^^. J'ai essayé d'agrandir l'image mais ça change rien.





PS: je vais essayer avec un tableau, j'en ai jamais fait encore donc je vais bien voir^^


Hihihi merci bien en fait j'ai débuté lundi

Ce message a été modifié par sphynx666 - 19 février 2009 - 23:16 .

[sphynx666]

Désolé d'avance pour le double post ça se fait pas mais j'ai trouvé la solution à presque tout mes problèmes




Alors voila pour le menu horizontal j'ai crée un tableau comme tu me l'avais supposé ensuite j'ai pu crée différentes colonnes ou j'ai pu mettre mes liens et les centrer par rapport à la cellule du tableau.

Se qui donne en html:

<div id="menuhaut">
<table width="1100" border="0">
<tr>
<td width="97"><div align="center"><strong><a href="index.html">Accueil</a></strong></div></td>
<td width="119">&nbsp;</td>
<td width="119"><div align="center"><strong><a href="forum.html">Forum</a></strong></div></td>
<td width="249">&nbsp;</td>
<td width="121"><div align="center"><strong><a href="livredor.html">Livre d'or</a></strong></div></td>
<td width="126">&nbsp;</td>
<td width="72"><div align="center"><strong><a href="liens.html">Liens</a></strong></div></td>
<td width="163">&nbsp;</td>
</tr>
</table>
</div>

Les liens s'affichent en vert lorsque je place ma souris sur le lien d'où le lien "forum" en vert . Ils sont en vert également tant qu'on a pas cliqué dessus, une fois la page visité le lien passe en gris. Je sais pas si j'ai était clair, c'est juste un petit plus que j'ai rajouté au passage.
Si ça peut aider une personne je met le code pour changer les couleurs des liens une fois visité etc...

<style type="text/css">A:link { text-decoration: none; color:#154910; }A:visited { text-decoration: none; color:#4c4d4e; }A:hover { text-decoration: none; color:#154910; }</style>

Alors l'autre problème était mon menu de gauche ou cette fois-ci l'image était trop petite se qui est réglé à présent^^

#menu
{
float: left;
width: 160px;
}

.element_menu il suffisait de supprimer ce qui est en rouge et de fusionné les lignes ci dessous au dessus
{
background-image: url("images/menu.jpg");

background-repeat: repeat-x;

border: 0px solid black;

margin-bouton: 100px;
}

etc...le reste du code menu à la suite

Se qui donne finalement:

#menu
{
margin-top: 34px;
float: left; /* Le menu flottera à gauche */
width: 160px; /* Très important : donner une taille au menu */
height: 387px;
background-image: url("images/menu.jpg");
background-repeat: repeat-x;
border: 0px solid black;
margin-bottom: 50px; /* Pour éviter que les éléments du menu ne soient trop collés */
}
etc...le reste du code menu à la suite

Par contre le problème de l'espacement de mes boutons reste un mystère encore ^^, je n'arrive pas à les espacer :(

Ce message a été modifié par sphynx666 - 20 février 2009 - 03:45 .

[noisette]

ça a bien avancé


Tu veux parler de tes boutons verts sur la gauche ?


A propos des puces: pour enlever la petite puce, il faut mettre à <ul> dans le css: list-style-type: none;, et comme ça tu peux mettre tes <li>

[sphynx666]

il faut mettre à <ul> dans le css: list-style-type: none;, et comme ça tu peux mettre tes <li>

Merci ça a marché ^^.

Oui je veux parler de ses fameux boutons vert à gauche^^, grace aux <li> je viens de réussir à les espacer .

Merci beaucoup je crois que tout mes problèmes sont réglés.

Maintenant il faut que je fasse les liens et remplir le contenu du site^^.

Ce message a été modifié par sphynx666 - 20 février 2009 - 13:50 .

[noisette]

ah ah ^^

l'aventure va bientôt commencer

N'oublie pas de balancer un lien, le temps voulu .

[VB 6]

Bonne chance, pour la suite de ton site web

[sphynx666]

Merci bien .

Pour le lien pas de problème par contre vous devez surement connaitre le logiciel wamp.

Quand je veux l'installer il me marque ça:

"please do not try to upgrade from wampX5 1.x.
If you have WAMP5 1.x installed, save your date unistall wamp5 and delete the wamp folder before installing this new release. "

en français dans le texte :
svp, n'essayez pas d'upgrader depuis wampX5 1.x
Si vous avez WAMP5 1.x d'installé, sauvez vos données, désinstaller wamp5 et supprimez le répertoire wamp avant d'installer cette nouvelle release



Hors je n'ai pas wamp 5 d'installer, j'ai cherché sur différents forums encore et encore comment résoudre le problème et j'ai rien trouvé comme d'habitude^^.

Une fois installé je devrais pouvoir lire "All services running" hors j'ai serveur hors ligne et pourtant j'arrive à me connecté au localhost ? Bizarre

Ou c'est parceque je n'ai pas encore d'hébergement?

Ce message a été modifié par sphynx666 - 20 février 2009 - 18:02 .

[noisette]

Première proposition: commencer à vérifier dans le registre:
menu démarrer / Exécuter: tape "Regedit" pour ouvrir l'explorateur du registre:
dans cette fenêtre, clique sur "Edition", "Rechercher" et effectue une recherche à "winamp".

Supprime tout ce qu'il trouve (je viens de vérifier, il n'y a aucune clé par défaut pour "winamp") et re-teste ton installation.

C'est par acquis de conscience.

[sphynx666]

J'ai effectué la recherche et il m'a rien donné du tout .

Se qui est bizarre c'est que wamp marche parfaitement. J'ai désinstallé rebooter le pc et réinstallé et toujours pareil. J'ai prit soin de regarder le port utilisé et de fermer tout les logiciels lors de l'installation.

C'est vraiment bizarre se message car je sais exactement tout se qui a sur mon pc vu que je l'ai formater il y a pas longtemps et pas de wamp à part celui là dessus^^

[noisette]

Oublie ce que j'ai écrit, j'ai un peu trop fêté le début de mes vacances

[sphynx666]

oui ça concerne winamp pas wamp apparemment.

Bref j'ai trouvé la solution j'ai installé le logiciel avec le minimum de processus et ça a marché ^^

Je suis en plein cours de php ouarfff c'est plus compliqué ^^

Ce message a été modifié par sphynx666 - 20 février 2009 - 19:48 .

[CaseyN]

Ca marche bien WAMP?

Cela m'a toujours paru contre nature de mettre du Windows en serveur Web... Enfin... sachant que la je joue avec PuTTY et surement X11 sur le Win, c'est encore plus contre nature

Peux-tu nous donner la configuration hardware et software de ton serveur stp (juste pour ma curiosité)

Mici

[sphynx666]

Bah écoute pour le moment ça marche bien, je ne m'avance pas trop vu que je n'ai pas encore fait des choses poussé en php mais pour l'instant d'après se que je viens d'apprendre il répond à pratiquement toute les possibilités:
base de données MySQL Version 4 et de l'application PHPMYADMIN, plateforme de développement basée sur Apache 1.3.31 et PHP5 etc..

Bah pour l'instant je test tout sur mon propre pc d'où l'utilisation de wamp qui d'après se que j'ai compris crée un serveur local sur mon pc pour pouvoir tester mes codes php.

Donc je n'ai pas encore d'hébergement donc la configuration software et hardware c'est celle de mon pc ( c'est celle là que tu veux par curiosité? )

Un petit aperçu du logiciel:

Page phpadmin:




Page accueil:





Par contre niveau php j'ai pas tout compris mais bon je vais essayer de batailler dessus se week-end ^^

Juste un petit truc le code php je peux le mettre directement dans mon index.html ( page de menu d'accueil au dessus sur lequel j'avais plein de problème ^^) ? comme insérer un formulaire ou des zones de textes etc...
Ou faut t'il faire un fichier php à part ? appelé le fichier php via mon fichier index.html
Ou faut t'il carrément que je passe tout en php? C'est à dire refaire complètement le code en php de mon fichier index.html

Je viens de finir le cours php/mysql et j'avoue j'ai pas tout compris, je le relirais entièrement pour voir se que j'ai pas très bien compris

Ce message a été modifié par sphynx666 - 21 février 2009 - 03:32 .

[VB 6]

Salut,
je peut te suggérer cette recherche :
http://www.commentca...-mon-index-html
Mais personnellement je doute, que tu puisse rajouter comme ça les mêmes instructions dans le même fichier.

Second question, exactement.
Un site ce construit toujours en local, pour après quand tout est OK envoyer sur ton serveur.

Concernant le php, je pense qu'il y'a plein de poste avancer pour comprendre le minimum, comme ici :
http://phortail.org/

Pour le reste, tu connait m'a réponse


Bonne journée,
VB6.

[CaseyN]

Donc si j'ai bien compris, WAMP est un bon gros clickodrôme... Le PHPMyAdmin du Appache quoi Je voulais savoir la config pour savoir ce que ton serveur allait pouvoir endurer et ce que pompe WAMP en ressources.

Bonne continuation dans tes cours

[sphynx666]

Bah se que pompe en ressource wamp ça je ne voit pas comment faire pour te le dire. Mais j'ai pas l'impression qu'il pompe grand chose en ressources pour le moment .

Pour le serveur bah je commence à chercher un hébergeur mais il y en a tellement que je ne sais que choisir^^.
Sinon pour l'instant tout est sur mon pc donc vu que c'est en local tout vas bien je n'est pas de connexion entrante et sortante .

Pour le soucis du php que j'avais j'ai trouvé la solutions il suffit de changer les extensions et de mettre tout mes fichiers de la racine de mon site dans un fichier wamp et ça marche.
J'ai rajouté un fichier .htaccess avec se code:

AddType application/x-httpd-php .htm
AddType application/x-httpd-php .html

Et tout marche donc je vais pouvoir avancer un peu plus maintenant vu que j'ai rempli de texte quelques pages deja de mon site

Ce message a été modifié par sphynx666 - 24 février 2009 - 01:00 .

[Thelwin Argon]

Pour le php, MySql, etc . je peux aider ^^
Mais faut me donner le code faux, que je l'étudie et puisse rendre le code juste
Ou alors le problème, mais en étant très très précis

Bon, bin bonne chance !