Débutant en webmastering a besoin d'aide (xHTML, CSS)

Levi59 · Le 19/12/2010, à 22:44

Voilà, il y a quelque jour j'ai terminer mon semestre à la fac par plusieurs rendus à faire par groupe et manque de chance, mes collègues n'avais ni adresse web ni messagerie instantanée (Étudiants étrangers) et avaient peur du froid (Oui j'ai été vernie!). Du coups, ça a été un vrai bordel pour tout rendre à temps...

Lecteur dubitatif : °oO(Mais pourquoi il nous parle de ça lui)

J'y viens. J'ai donc eut l'idée de me créer une petite page web à accès restreint qui regrouperais divers outils simples comme une gestionnaire de fichier, un mini-chat, etc. Seulement je n'ai jamais fait de page web. Je connais les bases HTML, les bases PHP et de nom, le CSS, donc je me lance.

Je crée mes pages avec html et php (header.php, titre_menu.php, pied_de_page.php et auth.php), jusque là tout va bien, auth.php récupère bien chaque parties dans chaque fichier et le résultat semble bon. (1ere élément à confirmer)

J'ai mis chaque partie dans des balises div avec id ou class donc je peux passer au CSS.

Là c'est le drame! J'ai utilisé le tuto du Site du Zero pour créer mon premier css mais le rendu n'est pas le même, les cadres se mélanges un peu n'importe comment. Du coup je cherche mon erreur, j'ajoute, je change...
À tel point que je ne sais plus ce qui est bon de ce qui ne l'est pas.
Voici le schéma que j'aimerais obtenir:

apparence a écrit :

------------------------------------------------------------- bord fenêtre (espace gris entre fenêtre et
| -------------------------------------------------------- |<------- "contenant" de 5-10px)
| | Titre |<|--------- barre de titre (même param que pied sauf
| -------------------------------------------------------- | police et fond)
| | | | |
| | | Menu |<|--------- bord cadre "contenant" (cf id) centré/fenêtre
| | | | |
| | Contenu | | |
| | | <----|--|--------- Un menu de largeur fixe 160px
| | | | |
| | <-------|-----------|--|--------- un contenu de largeur fixe min 800px
| -------------------------------------------------------- | (je voulais variable au début et il reste peut
| | pied de page | | être des options dans ce sens qu'il faut
| -------------------------------------------------------- | supprimer)
-------------------------------------------------------------

Il faut également 10px entre "titre" et "contenu/menu" et entre "contenu/menu" et pied de page.

Voici un lien vers les fichiers sur un autre serveur pour avoir accès au contenu du css:
http://public.byethost8.com/web/auth.php (pour l'instant ma page principale)
http://public.byethost8.com/web/styles/defaut/style.css (mon css)

Ma demande principale est donc, pouvez vous m'aider à comprendre mes erreurs, nettoyer le code et atteindre l'apparence prévue.
Si vous pensez que les codes des pages en php ont une importance, dites le moi et je les posterais.

D'avance merci.

edit: Bravo pour votre patience qui vous à amené jusqu'ici!

Dernière modification par Levi59 (Le 19/12/2010, à 22:49)

DD-10291 · Le 19/12/2010, à 22:52

C'est un projet ambicieux que tu as là. Je pense que dès qu'il y a un menu, pour des question de maintenance il faut utiliser les frames. A première vue, tout porte à croire que ton fichier css n'est même pas appellé dans le code php. Je dis ça car d'après ton fichier le fond d'acran est censé être gris. Or il est blanc chez moi.

<!--Ligne de code pour appeller un fichier css-->
<link rel="stylesheet" href="chemin vers mon fichier css">

Il te faudra également des connaissances en SQL si tu utilises php. Bon courrage pour la suite

Levi59 · Le 19/12/2010, à 23:42

J'ai déja tripoter un peux le sql (mysql + phpmyadmin sur mon hebergeur) mais je préfèrerais garder ca pour plus tard.

Pour l'appel du css, c'est bizarre car chez moi ca fonctionne (je n'ai pas de serveur local, je teste après upload sur byethost). c'est peut être la fonction php qui défini la ligne de css qui déconne. Essaye de switcher le css (au dessus du chat).

En fait pour l'instant j'ai un énorme fond d'écran et le "cadre" gris n'apparaît que au dessus et du côté droit alors qu'il devrait apparaître tout autour...

(je vais faire une image pour plus de clarté)
Autour en gris, c'est entre body et l'id conteneur (5-10px)
en jaune, c'est le wallpaper, appliqué à conteneur dans le css
Entre les blocs, il devrait y avoir 10px.
http://public.byethost8.com/Img/modele.jpg

edit modo : lien foireux

Dernière modification par nesthib (Le 20/12/2010, à 14:11)

DD-10291 · Le 19/12/2010, à 23:57

Effectivement ça fonctionne quand on switch ^^ du coup je vais réfléchir à tout ça. Bonne continuation

Levi59 · Le 20/12/2010, à 00:04

Merci de ton aide! ^^

DD-10291 · Le 20/12/2010, à 12:27

J'ai un peu de mal à voir l'erreur au final moi aussi. Je vais essayer de reproduire ta page (enfin les cadres)
Mais je pense que c'est un problème html genre une cellule ouverte en trop ou une cellule non fermée.

DD-10291 · Le 20/12/2010, à 12:30

Oui enfin fallait déjà que je pense à ouvrir ton site sous firefox j'étais sous IE:lol:
je serais ravi de t'aider aussi pour qu'il s'affiche de la même manière sous ie ^^ si tu veux tu peux m'envoyer tes fichier genre images (pour que je reproduise bien et qu'on voit si j'y arrive)

DD-10291 · Le 20/12/2010, à 13:08

Bon c'est pas encore ça.
j'ai viré ça de ton css:

html, body { 
    width: 100%;
    height: 100%;
    margin: auto;
}

ça n'aidait pas.
J'ai écris le code suivant pour y appliquer ton css, c'est pas encore ça mais c'est un bon début

<html>
    <head>
        <title>Bienvenue sur mon site!</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <!--Déjà on peut limiter le risque d'erreurs en se servant des tableaux pour centrer-->
        <table cellspacing="0" cellpadding="0" border="0" id="conteneur"><!--Un tableau sans espacement de cellule ni marges internes. Une colonne trois lignes-->
            <tr><!--En-tête-->
                <td id="titre">
                    titre
                </td>
            </tr>
            <tr><!--Corps-->
                <td>
                    <!--On va créer un autre tableau pour le corps et le tchat-->
                    <table cellspacing="0" cellpadding="0" border="0">
                        <tr>
                            <td><!--texte-->
                            <div id="contenu">
                                <H2>Accès aux modules&nbsp;:</H2>
                                <FORM NAME="Formulaire" ACTION="../backup">
                                    <P ALIGN=CENTER><A HREF="ajaxplorer-core-3.1.1/index.php"><INPUT TYPE=BUTTON NAME="Filemanager" VALUE="Gestionnaire de fichier"></A></P>
                                </FORM>
                                <!-------------------------------------------------------->
                                <h1>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... heu... Je cherche encore un peu le thème de mon site :-D
                                </p>
                                <h2>A qui s'adresse ce site ?</h2>    
                                <p>
    
                                    A tout le monde ! Si je commence à privilégier certaines personnes, 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 />
                                    Je vais essayer de faire le meilleur site du monde (ç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>

                            </td>
                            <td><!--Tchat-->
                                <div id="menu">
                                    <div class="switch">Changer de style de page<form action="" method="get"><select name="style"><option value="defaut" selected="selected">Par défaut</option><option value="no_style">Pas de style</option></select><input type="submit" value="Envoyer"/></form>
                                </div>
                                <div class="chat">
                                    <center>chatbox</center>
                                    <!-- Debut shoutbox - http://www.i-tchat.com -->
                                    <iframe src="http://www.i-tchat.com/shoutbox/shoutbox.php?idShoutbox=91223" width="150" height="400" frameborder="0" allowtransparency="true" >Votre navigateur semble incompatible, essayez d'ouvrir le <a href="http://www.i-tchat.com" title="chat de discussion" onClick="window.open(this.href+'?91223');">tchat</a>, ou rencontrez le webmaster pour plus d'informations.</iframe>
                                    <!-- Fin shoutbox -->
                                </div>

                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <div id="pied_de_page">
                        Copyright "Tout pourri Corporation" 2005, tous droits réservés
                    </div>
                </td>
            </tr>

        </table>
    </body>
</html>

DD-10291 · Le 20/12/2010, à 13:38

J'ai fais un serveur web pour que tu puisses voir: http://88.139.169.254
sauf erreur de ma part tu pourra voir le site

Dernière modification par Kanor (Le 20/12/2010, à 14:04)

Levi59 · Le 20/12/2010, à 18:19

J'ai testé la page (j'utilise FF) Le rendu correspond déjà beaucoup mieux à ce que je souhaite.
Je vais comparer ta version à mes fichiers pour voir les éventuelles erreurs de balise.

Pour ta version, il y a néanmoins un ou 2 petits détails à régler :
- Entre titre et contenu et entre contenu et menu, il n'y a pas l'espace de quelques pixel comme celui qui les sépare du pied de page.
- la barre de menu qui semble ne pas s'étendre plus que le minimum nécessaire. (ça je suppose qu'on peux le regler avec un wight et un height

En plus quand je reprend mon css à tête reposé, je me rend compte que j'ai mélangé bloc et textes de block... Je devrais faire le ménage de toute les configurations sur les polices et ca serait nettement plus clair.

raphi79 · Le 20/12/2010, à 19:05

Salut Levi59,

Levi59 a écrit :

Pour l'appel du css, c'est bizarre car chez moi ca fonctionne (je n'ai pas de serveur local, je teste après upload sur byethost)]

Là je vois déjà un soucis que tu risque de rencontrer. Si tu as pris un compte gratuit chez byethost fais bien attention au niveau du css.
Parce que byethost empêche d'actualiser sur une même ip plusieurs fois de suite.
Par exemple tu va sur l'adresse du site, tu l'affiche, 1min après tu reupload ton fichier css que tu as modifié et bien le site ne sera pas réactualiser avant au moins 5min même si tu bourrine sur la touche F5.
C'est l'une des limitations du compte gratuit de byethost.
C'est juste pour te prévenir parce que j'ai faillis devenir fou avec ce problème au début quand je le savais pas.

Bon courage à toi, j'ai pas trop suivis le reste du problème mais si tu veux un conseil bosse avec un serveur local, c'est très simple à installer et beaucoup plus efficace après à utiliser.
Et quand t'auras finis ton site et bien tu l'uploadera sur un hebergeur.

Levi59 · Le 20/12/2010, à 19:21

Je sais je l'ai compris un peu tard et c'est pourquoi je suis ici...
Maintenant j'utilise l'aperçu du code source sur le css et j'attends d'avoir la mise à jour affiché, mais avant j'ai essayé des tas de trucs, j'ai bien tout mélangé dans mes quelques connaissance donc j'ai besoin d'aide pour supprimer les conneries et reconstituer le puzzle.

Mais je crois que je vais suivre ton conseil de serveur local.

raphi79 · Le 20/12/2010, à 19:28

Pour le serveur local oublie pas de changer le repertoire de travail une fois installé pour ne pas bosser sur un dossier root.
Et si tu n'arrive pas à afficher tes sous dossier en allant à l'adresse http://localhost c'est parce que tu dois faire un clic droit sur ton dossier contenant tes sites > onglet permissions > et tu applique les modifications pour qu'il actualise avec les sous dossiers que tu aurais pu lui créer.

Pour ton problème de code tu pourrais faire un fichier compressé de ton site? Si ça te dérange pas comme ça on pourra plus rapidement t'aider.
(oui je suis en mode flemmard aujourd'hui )

Levi59 · Le 20/12/2010, à 20:46

Sitôt dis, sitôt fait!
http://public.byethost8.com/web.tar.gz

Comme tu peux le voir, c'est pas grand chose. Je commence par l'apparence et ensuite je remplirais (j'ai déjà mis le chat juste pour la taille et le gestionnaire de fichier est resté sur l'autre site). Je tenterais une page avec identification sur l'index quand tout sera en place mais avec les mêmes blocs d'où les header, titre_menu et pied de page séparés et donc le php.
Tout ca est un peu brouillon mais ca facilite quand même mes modifications...

J'ai testé la creation de serveur (Lamp) mais ca a jamais voulu fonctionner... j'avais toujours une 403 (sauf pour localhost seul) donc j'ai supprimé.

raphi79 · Le 20/12/2010, à 21:07

Pour l'installation du serveur local à la rigueur on peut voir comment t'as installé.
Tu es bien passé par cette étape ?

sudo apt-get install lamp-server^

C'est tout ce que tu avais à faire pour avoir un serveur local fonctionnel.
Pour la 403 il faut que tu change de répertoire de travail en te plaçant dans ton /home par exemple.

Donc une fois que tu as installé ton serveur local comme indiqué plus haut:
Tu entre dans un terminal:

- tu créer le dossier qui va stocker tes sites

mkdir ~/sites

(à toi d'adapter selon l'emplacement que tu veux indiquer)

- Tu rajoute un alias dans apache pour accéder à ce dossier:

gksudo gedit /etc/apache2/sites-available/default

Tu rajoute à la suite de <Directory /var/www>….</Directory>:

## REPERTOIRES SUPPLEMENTAIRES
<Directory ~/sites (à remplacer par le chemin du dossier que tu aura créer pour stocker tes sites)>
Options Indexes FollowSymLinks MultiViews
AllowOverride All
Order allow,deny
Allow from all
</Directory>

- Tu enregistre.

- Tu créer un lien symbolique dans /var/www

sudo ln -s ~/sites /var/www/sites

- Tu efface le fichier index.html présent dans le dossier /var/www pour pouvoir accéder à ce lien à partir de http://localhost :

sudo rm /var/www/index.html

- Enfin tu recharge la configuration d'apache pour prendre en compte les changements:

sudo /etc/init.d/apache2 force-reload

source des infos

Voilà déjà tu devrais avoir un serveur local fonctionnel et tu pourra placer tes sites dans le dossier "sites" situé dans ton répertoire perso.

(Pour ton site je regarde dans la soirée)

Dernière modification par raphi79 (Le 21/12/2010, à 00:05)

raphi79 · Le 20/12/2010, à 21:14

Ah et sinon je viens de voir que je n'avais pas le droit d'accès sur ton dossier compressé. Il me demande un id et un mdp.

Levi59 · Le 20/12/2010, à 22:07

Pour le serveur Lamp, j'avais suivi cette procédure de la doc mais toujours 403 (le backup qui me sert pour modifier mon site est stocké sur clé usb... Ca peux poser problème?)

Pour l'archive, ca tombe bien car je viens de l'actualiser en reprenant l'idée des tableaux. C'est pas encore parfait mais ca avance ^^
Je regarde pour le log et mdp... C'est bizarre car il n'y en a pas de configuré pour accéder sur ce serveur.

edit, je sais! j'ai redirigé l'erreur 403 vers mon site qui lui est protégé... Mais d'un autre coté, le lien fonctionne pour moi donc ca devait être un problème coté serveur.
Ca ne marche toujours pas? (même lien)

Dernière modification par Levi59 (Le 20/12/2010, à 22:08)

raphi79 · Le 20/12/2010, à 22:12

Ok bizarre ça me demande un id et un mdp que si j'utilise FF sinon avec chromium aucun soucis.
Je regarde ça dans la soirée ou cette nuit, si ça se trouve t'auras déjà tout résolu.

Pour l'erreur 403 tu pourrais me la recopier entièrement ici si possible ?

Levi59 · Le 20/12/2010, à 22:47

J'ai repris exactement les mêmes dossiers. Et j'ai même remis le site de ma clé vers mon home.
http://localhost/sites:

403 Forbidden a écrit :

Forbidden
You don't have permission to access /sites on this server.
Apache/2.2.16 (Ubuntu) Server at localhost Port 80

http://localhost/
Une arborescence vide apparait

Pour le ln -s je pointe sur ...sites/dossier1/2/3/ (sachant que mon index est en 3)

Dernière modification par Levi59 (Le 20/12/2010, à 22:48)

raphi79 · Le 20/12/2010, à 22:54

Ok essaye d'aller sur ton dossier sites
> clic droit > propriétés > onglet "permissions" > Autres > accès au dossier > Tu met "accès aux fichiers" > tu clique sur Appliquer les permissions aux fichiers inclus

Et ensuite tu reteste.

Levi59 · Le 20/12/2010, à 23:09

raphi79 a écrit :

Ok essaye d'aller sur ton dossier sites
> clic droit > propriétés > onglet "permissions" > Autres > accès au dossier > Tu met "accès aux fichiers" > tu clique sur Appliquer les permissions aux fichiers inclus
Et ensuite tu reteste.

J'ai pas accès au dossier mais j'ai accès aux fichiers et c'est déjà paramétré ainsi...

raphi79 · Le 20/12/2010, à 23:17

Le problème viens de là j'en suis quasiment sur.
Tu as bien configuré comme ça ?

Même si c'est déjà tout configuré comme ça, clique sur "appliquer les permissions aux fichiers inclus"

Peut-être que je me plante mais c'est à mon avis qu'un problème de droit que tu rencontre qui se situe ici.

Levi59 · Le 20/12/2010, à 23:54

ok je croyais que "accès au dossier" était dans la liste déroulante (ich bin ein boulet... ).

Par contre c'est bien paramétré de cette façon. c'est pour ca que je ne comprend pas.

Dernière modification par Levi59 (Le 21/12/2010, à 00:06)

raphi79 · Le 21/12/2010, à 00:10

Copie moi le contenu de ton fichier:

gksudo gedit /etc/apache2/sites-available/default

Et sinon tu as bien suivis correctement les étapes indiquées à mon post #15 ?
C'est peut-être une erreur de ma part sinon je vois pas trop d'où viens le problème...

Bon au pire on verra plus tard (je regarde ton site d'ici 1h ou 2) c'était pas ta question je t'ai un peu fais changer de sujet désolé

Levi59 · Le 21/12/2010, à 00:23

Entre temps j'ai essayé de changer le dossier root en mettant le lien vers le dossier en question pour shunter /var/www au cas ou ca viendrait du lien symbolique mais toujours la même erreur d'autorization...

<VirtualHost *:80>
    ServerAdmin webmaster@localhost

    DocumentRoot /home/rombeaut/sites/byethost/Public/web/
    <Directory />
        Options FollowSymLinks
        AllowOverride None
    </Directory>
    <Directory /home/rombeaut/sites/byethost/Public/web/>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride None
        Order allow,deny
        allow from all
    </Directory>

    ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/
    <Directory "/usr/lib/cgi-bin">
        AllowOverride None
        Options +ExecCGI -MultiViews +SymLinksIfOwnerMatch
        Order allow,deny
        Allow from all
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/error.log

    # Possible values include: debug, info, notice, warn, error, crit,
    # alert, emerg.
    LogLevel warn

    CustomLog ${APACHE_LOG_DIR}/access.log combined

    Alias /doc/ "/usr/share/doc/"
    <Directory "/usr/share/doc/">
        Options Indexes MultiViews FollowSymLinks
        AllowOverride None
        Order deny,allow
        Deny from all
        Allow from 127.0.0.0/255.0.0.0 ::1/128
    </Directory>

</VirtualHost>

Ubuntu-fr

Navigation

Liens de recherche

Annonce

#1 Le 19/12/2010, à 22:44

Débutant en webmastering a besoin d'aide (xHTML, CSS)

#2 Le 19/12/2010, à 22:52

Re : Débutant en webmastering a besoin d'aide (xHTML, CSS)

#3 Le 19/12/2010, à 23:42

Re : Débutant en webmastering a besoin d'aide (xHTML, CSS)

#4 Le 19/12/2010, à 23:57

Re : Débutant en webmastering a besoin d'aide (xHTML, CSS)

#5 Le 20/12/2010, à 00:04

Re : Débutant en webmastering a besoin d'aide (xHTML, CSS)

#6 Le 20/12/2010, à 12:27

Re : Débutant en webmastering a besoin d'aide (xHTML, CSS)

#7 Le 20/12/2010, à 12:30

Re : Débutant en webmastering a besoin d'aide (xHTML, CSS)

#8 Le 20/12/2010, à 13:08

Re : Débutant en webmastering a besoin d'aide (xHTML, CSS)

#9 Le 20/12/2010, à 13:38

Re : Débutant en webmastering a besoin d'aide (xHTML, CSS)

#10 Le 20/12/2010, à 18:19

Re : Débutant en webmastering a besoin d'aide (xHTML, CSS)

#11 Le 20/12/2010, à 19:05

Re : Débutant en webmastering a besoin d'aide (xHTML, CSS)

#12 Le 20/12/2010, à 19:21

Re : Débutant en webmastering a besoin d'aide (xHTML, CSS)

#13 Le 20/12/2010, à 19:28

Re : Débutant en webmastering a besoin d'aide (xHTML, CSS)

#14 Le 20/12/2010, à 20:46

Re : Débutant en webmastering a besoin d'aide (xHTML, CSS)

#15 Le 20/12/2010, à 21:07

Re : Débutant en webmastering a besoin d'aide (xHTML, CSS)

#16 Le 20/12/2010, à 21:14

Re : Débutant en webmastering a besoin d'aide (xHTML, CSS)

#17 Le 20/12/2010, à 22:07

Re : Débutant en webmastering a besoin d'aide (xHTML, CSS)

#18 Le 20/12/2010, à 22:12

Re : Débutant en webmastering a besoin d'aide (xHTML, CSS)

#19 Le 20/12/2010, à 22:47

Re : Débutant en webmastering a besoin d'aide (xHTML, CSS)

#20 Le 20/12/2010, à 22:54

Re : Débutant en webmastering a besoin d'aide (xHTML, CSS)

#21 Le 20/12/2010, à 23:09

Re : Débutant en webmastering a besoin d'aide (xHTML, CSS)

#22 Le 20/12/2010, à 23:17

Re : Débutant en webmastering a besoin d'aide (xHTML, CSS)

#23 Le 20/12/2010, à 23:54

Re : Débutant en webmastering a besoin d'aide (xHTML, CSS)

#24 Le 21/12/2010, à 00:10

Re : Débutant en webmastering a besoin d'aide (xHTML, CSS)

#25 Le 21/12/2010, à 00:23

Re : Débutant en webmastering a besoin d'aide (xHTML, CSS)

Pied de page des forums