18041 sujets

Questions générales et questions de débutants

Mise en page php/html

Bonjour !

Je viens ici pour poser deux petites questions (je suis débutant !).

Tout d'abord, en suivant un tutoriel pour créer un site (en html et css), je me suis décidé à rajouter un peu de php, juste un include pour les news de mon site.

J'ai donc tout fait sans problème en suivant via easyphp la mise en page. Ayant "fini" ma page principale j'en ai commencé une autre (sans php à l'intérieur) et je switchais entre les deux avec les liens sur le site (toujours via easyphp du coup).
Une fois ma mise en page terminée, je met le tout sur un ftp pour voir ce que ça donne et la surprise : tout est décalé.
Je reviens dans mes dossiers, je double clique sur le .html concerné : la mise en page est décalée.
J'ouvre la page easyphp, j'ouvre mon site et la page : la mise en page est niquel.

Voila deux screen pour illustrer ça :
En passant par easyphp
http://www.imagehost.co.za/thumb-C9E2_4D866E56.jpg

En cliquant sur le .html
http://www.imagehost.co.za/thumb-63DE_4D866E56.jpg

Quelqu'un peut-il me dire d'où ça vient, et surtout comment le régler ?

Et j'ai une autre question, plus rapide cette fois. On peut voir sur le lien du screenshot pour la situation via easyphp, que j'ai un soucis avec les border de mon menu. En fait, j'ai vilement récupéré les border d'un site existant pour faire mes tests mais quand je les enregistre, il y a un arrière plan. Du coup, même si le dessin à la base est arrondis sur les angles, l'arrière plan noir fait un angle droit.
Existe-t-il un code couleur qui fait une couleur invisible une fois sur le site ? Je ne pense pas pouvoir utiliser la valeur transparent ici puisque je fais les border avec des div.

Merci d'avance !
Modifié par hindi (21 Mar 2011 - 07:40)
Bonjour,

En regardant ton code html pendant 3 secondes, j'ai déjà pu apercevoir une erreur ici : 
<div class="[b][#red]middlle[/#][/b]">


Dans la feuille CSS, le mot "middle" est orthographié correctement:
.middle
{
width: 220px;
float: left;
background: url("image/middle.jpg");
height: 150px;
}

Commence toujours par ça !

Cordialement
Une autre erreur pour les images :

<img / id="bluehole" title="logo bluehole studio" src="bh.jpg" alt="logo bluehole">


au lieu de :

<img id="bluehole" title="logo bluehole studio" src="bh.jpg" alt="logo bluehole" />


Encore une ici :

<a if="officiel" href="http://www.tera-online.com">TERA online</a>


au lieu de (enfin, je le suppose) :

<a [b]id[/b]="officiel" href="http://www.tera-online.com">TERA online</a>

Modifié par lddsoft (21 Mar 2011 - 15:51)
Merci beaucoup pour votre aide à tous les deux, étant débutant comme précisé je fais beaucoup de fautes !

Je m'attelle à la tâche de correction Smiley sweatdrop
Alors alors !

J'ai corrigé toutes les erreurs de la page /monde sans modification (hormis pour l'image de titre que je n'arrive plus à régler ! Smiley lol )
Dans un même temps je me suis attaqué à la page principale (celle qui contient du php) et j'ai deux erreurs que je ne sais pas régler, tout simplement parce quelles touchent au doctype, et que je ne sais pas du tout ce que c'est moi tout ça !

Voila le lien de la page : http://cbouyer.fr/vins/main.php

et voila les deux erreurs :
1. Error Line 52, Column 7: "DOCTYPE" declaration not allowed in instance

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org…

&#9993;
2. Error Line 53, Column 58: document type does not allow element "html" here

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

&#9993;

The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
C'est tout bête, tu as tout simplement 2 fois un doctype et 2 fois un head ! Supprime ces doublons dans ton code si tu veux que validator soit content Smiley biggrin

Tu as aussi une erreur dans ta feuille CSS :
.haut
{
height: 170px;
width: 350px;
margin: auto;
margin-bottom: 3%;
border: non;
}


border: non; doit devenir border: none;
Modifié par lddsoft (21 Mar 2011 - 20:11)
Pas de doctype dans un include, c'est noté !
Bon ben validator est content, et ma mise en page commence à s'arranger (je l'ai finalement modifié en passant directement par le ftp plutôt que par easyphp qui lagait en plus).

Merci pour toute ton aide iddsoft, et pour avoir noté l'erreur de frappe dans le .css !

Il me reste encore une question, qui touche au graphisme cette fois. Je l'avais posé au début mais apparemment personne n'a répondu. En gros, je cherche à savoir comment dessiner mes borders (je suis encore plus débutant en dessin qu'en html/css ! Smiley eek ). Celle que j'ai actuellement sur le site ont conservé l'arrière plan et je voudrais savoir comment le retirer (pitié ne me dite pas "background-color: transparent" : je fais mes borders avec des div et mon image est donc le background !). Je cherche par exemple un code couleur, ou un programme léger qui fasse autre chose que des images carrée (comme paint).
Bonjour,

Pour retoucher les images, il existe différents logiciels performants gratuits tels que Gimp ou Paint.Net.
Les images de fond dont tu veux gommer les coins sont actuellement au format .jpg. Il faudra les mettre à un format autorisant la tranparence (.gif ou .png) et effacer les coins.
N'oublie pas de revoir le code des pages ou des feuilles CSS en ce qui concerne les noms des fichiers images!

J'ai remarqué que l'image top.jpg du menu de gauche était manquante. Il faudra également corriger tes balises images ( <img...), car il faut un espace avant /> en fin de balise.

Attention au copiage non autorisé d'images ou de codes !!!!
A+
Merci pour cette réponse, je vaiis tester un de ces programme quand j'aurais un peu de temps.

a écrit :

Attention au copiage non autorisé d'images ou de codes !!!!


Oui j'ai récupéré ces images de bordures pour faire mes tests mais je compte bien les changer une fois la mise en page finie. Concernant le code, j'ai vérifié les orthographe et le chemin et je ne comprend pas pourquoi l'image top.jpg ne s'affiche (je n'ai copié aucun code sur un autre site ! Le but de ce site est de me faire la main sur la manière de le mettre en œuvre, ce serait totalement contre productif de prendre du tout prêt). Bref, il y a surement quelque chose qui m'échappe encore.
Sujet clos
Aller à