Votre question

page a remodifié selons les balise div

Tags :
  • Programmation
Dernière réponse : dans Programmation
25 Février 2007 22:02:22

bonjour,
je voudrais faire des cadres C S S je vous explique en gros
cadre menu haut :
on trouveras un tableau avec 2 colonnes la 1 er colonne se trouve ma bannière et sur ma 2 colonne j'ai fait un tableau que je mettrais
inscription profil etc.....
et en sous du tableau j'ajouterais un tableau de 10 colonne pour
mettre les rubriques.
ensuite j'ai fais 1 grand tableau avec 3 colonnes
menu gauche, menu droite avec cadre c SS
ensuite j'aimerais faire un cadre c SS qui se trouveras entre les 2 menus
droite et gauche
faire un cadre de 9 ligne avec border da shed
mais quand je met le border dasched on ne voit pas les pointillé dans le tableau pour
voir les 9 ligne
car j'ai fait vite fait pour voir ceux que ca donne
http://le.coffre.free.fr/pagemodele.php
mais entre la rubrique vue et taille j'aimerais mettre des tiret mais on ne les voit pas pour temps dans ma pages style je les mis
es ce que vous pourriez me dire comment je pourrais l'amélioré
merci d'avance
ha houai il vous manque le code
j'ai refait une page bien mais vide pour juste que vous puissiez voir
page :

Citation :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<html xmlns="http://www.w3.org/1999/xhtml"/>
<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="style" href="style.css"/>
<body>
<div id="cadrehaut">mon texte</div>
<div id="moncadre"><table width="980">
<tr>
<td width="680" height="100" align="left" valign="top" bgcolor="282828"><div id="cadrehautgauche"><p class="titre"><img src="telechargement/logo/baniere.jpg" alt="Ma baniere" ></div></td>
<td width="300" height="100" align="left" valign="top" bgcolor="282828"><div id="cadrehautdroite"><table width="300">
<tr>
<td width="150" height="10" align="center" valign="top" bgcolor="282828"><p>mon texte</p></td>
<td width="100" height="10" align="center" valign="top" bgcolor="282828"><p>mon texte</p></td>
</tr>
</table>
<table width="300">
<tr>
<td width="300" height="10" align="center" valign="top" bgcolor="282828"><p>mon texte</p></td>
</tr>
<tr>
<td width="300" height="10" align="center" valign="top" bgcolor="282828"><p>mon texte</p></td>
</tr>
<tr>
<td width="300" height="10" align="center" valign="top" bgcolor="282828"><p>mon texte</p></td>
</tr>
<tr>
<td width="300" height="10" align="center" valign="top" bgcolor="282828"><p>mon texte</p></td>
</tr>
<tr>
<td width="300" height="10" align="center" valign="top" bgcolor="282828"><p>mon texte</p></td>
</tr>
<tr>
<td width="300" height="10" align="center" valign="top" bgcolor="282828"><p>mon texte</p></td>
</tr>
</table>
</div></td>
</tr>
</table>
<br />
<table width="980">
<tr>
<td width="98" height="10" align="center" valign="top"><div id="cadrehautbas">mon texte</div></td>
<td width="98" height="10" align="center" valign="top"><p>mon texte</p></td>
<td width="98" height="10" align="center" valign="top"><p>mon texte</p></td>
<td width="98" height="10" align="center" valign="top"><p>mon texte</p></td>
<td width="98" height="10" align="center" valign="top"><p>mon texte</p></td>
<td width="98" height="10" align="center" valign="top"><p>mon texte</p></td>
<td width="98" height="10" align="center" valign="top"><p>mon texte</p></td>
<td width="98" height="10" align="center" valign="top"><p>mon texte</p></td>
<td width="98" height="10" align="center" valign="top"><p>mon texte</p></td>
<td width="98" height="10" align="center" valign="top"><p>mon texte</p></td>
</tr>
</table>
<br />
<br />
<table width="980">
<tr>
<td width="150" height="900" align="left" valign="top"><div class="cadredumenugauche">mon texte</div></td>
<td width="680" height="900" align="center" valign="top"><div id="cadrecentrale">mon texte</div></td>
<td width="150" height="900" align="left" valign="top"><div class="cadredumenudroite">mon texte</div></td>
</tr>
</table>
</div>
</body>
</html>


et ma page styles

Citation :
/* CSS Document */

<style type="text/css">
<!--
.titre {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #fa008e;
}
.texte {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #969696;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: 969696;
}
body {
background-color: #282828;
margin-left: 1px;
margin-top: 1px;
margin-right: 1px;
margin-bottom: 1px;
}
a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color: 969696;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
-->

#cadrehaut {
height:100px;
background-color:#282828;
margin-bottom:10px;
}
#moncadre {
width:980px;
margin:auto;
padding:10px;
background-color:#282828;
border-left:1px solid #000000; /* couleur du cadre */
border-right:1px solid #000000;
border-bottom:1px solid #fa008e;
border-top:1px solid #fa008e;
}
.cadredumenugauche {
float:left;
text-align:left;
width:150px;
padding:10px;
background-color:#282828;
border:1px solid #fa008e; /* cadre menu */
color:#969696;
}
.cadrecentrale {
margin-center:680px;
min-height:600px;
margin-center:680px;
border-center:3px dashed #fa008e; /* couleur du cadre */
border-center:3px dashed #fa008e;
border-bottom:3px dashed #fa008e;
border-top:3px dashed #fa008e;
background-color:#282828;
}
.cadremilieu {
margin-center:680px;
min-height:600px;
margin-center:680px;
border-center:3px dashed #fa008e; /* couleur du cadre */
border-center:3px dashed #fa008e;
border-bottom:3px dashed #fa008e;
border-top:3px dashed #fa008e;
background-color:#282828;
}
.cadredumenudroite {
float:left;
text-align:left;
width:150px;
padding:10px;
background-color:#282828;
border:1px solid #fa008e; /* cadre menu */
color:#969696;
}

<style type="text/css">
<!--
</style>


avant il faut que je dise il parais que les tableau ca ne sert a rien
il faut utilise les balise div

mais je veux bien alors expliquez moi comment mettre les div

pour faire 2 collones plus exactement dans le menu haut

ps si vous m'avez toujours pas compris que je voudrais faire

juste me dire qures ce qu'il me faut faire poure enlenvé les tableau que j'ai mis en menu haut pourt les transformé en div

et aussi j'ai étais voir la validation de ma page il y as 2 erreur

que je ne comprend pas es ce que vous pouriez le regarder et me dire ceux que je doit mettre

http://validator.w3.org/check?uri=http%3A%2F%2Fle.coffr...

Autres pages sur : page remodifie selons balise div

26 Février 2007 12:38:05

Une nouvelle fois y a encore une erreur dans ton fichier css ...

Citation :

.cadredumenudroite {
float:left;
text-align:left;
width:150px;
padding:10px;
background-color:#282828;
border:1px solid #fa008e; /* cadre menu */
color:#969696;
}

<style type="text/css">
<!--
</style>


Ensuite il est faux de dire que les tableaux ne servent à rien ( encore quelqu'un qui a fait sa crise de divite.

Les tableaux servent à structurer les données et contrairement aux div qui permettent entre autre de faire de la mise en page.

Il y a beaucoup de possibilité de positionnement avec les div , et malheureusement beaucoup de problème pour certains cas ( si on va chercher dans la complexité ).

Etant donné que tu ne maitrises pas très bien html/Css au vue de tes derniers codes ( mais ca évolue , c'est déjà bien ^^ ) , je te mets donc en garde à leur utilisation .

Pour ton cas , on peut le faire assez simplement( heureusement xD ) .


Je commence du body , donc n'oublie pas de rajouter le header et tout ce qu'il faut ( pas de doublons ! )
  1. <body>
  2. <div id="header">Ta bannière</div>
  3. <div id="menuGauche">Le menu de gauche</div>
  4. <div id="content">Le contenu central</div>
  5. <div id="menuDroite">Le menu de droite</div>
  6. </body>
  7.  
  8. Le css
  9.  
  10. #header{
  11. position:absolute;
  12. left:0px;
  13. top:0px;
  14. width:800px;
  15. height:200px;
  16. border:1px solid #999999;
  17. }
  18. #menuDroite{
  19. position:absolute;
  20. left:0px;
  21. top:200px;
  22. width:200px;
  23. height:400px;
  24. border:1px solid #999999;
  25. }
  26. #content{
  27. position:absolute;
  28. left:200px;
  29. top:200px;
  30. width:400px;
  31. height:400px;
  32. border:1px solid #999999;
  33. }
  34. #menuDroite{
  35. position:absolute;
  36. left:600px;
  37. top:200px;
  38. width:800px;
  39. height:200px;
  40. border:1px solid #999999;
  41. }




Bon y a moyen de faire mieux , mais c'est pour le principe de base sans passer par des tableaux.
26 Février 2007 13:40:08

j'ai refait

mais ca vas pas trop

es ce que tu pouras me le refaire car il manque des cadre surement


voilà ceux que j'zai pu faire

Citation :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<html xmlns="http://www.w3.org/1999/xhtml"/>
<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="style" href="style.css"/>
<style type="text/css">
#moncadre {
width:980px;
margin:auto;
padding:10px;
background-color:#282828;
border-left:1px solid #000000; /* couleur du cadre */
border-right:1px solid #000000;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}
#header{
position:absolute;
left:0px;
top:0px;
width:800px;
height:200px;
border:1px solid #999999;
}
#menuDroite{
position:absolute;
left:0px;
top:200px;
width:200px;
height:400px;
border:1px solid #999999;
}
#content{
position:absolute;
left:200px;
top:200px;
width:400px;
height:400px;
border:1px solid #999999;
}
#menuDroite{
position:absolute;
left:600px;
top:200px;
width:800px;
height:200px;
border:1px solid #999999;
}
.cadredumenugauche {
float:left;
text-align:left;
width:150px;
padding:10px;
background-color:#282828;
border:1px solid #000000;
color:#666666;
}
.cadredumenudroite {
float:right;
text-align:left;
width:150px;
padding:10px;
background-color:#282828;
border:1px solid #000000;
color:#666666;
}
/* cadre du conteneur */
#cadrecentrale { margin-left:180px;
min-height:150px;
margin-right:180px;
border-left:1px dashed #000000;
border-right:1px dashed #000000;
border-bottom:1px dashed #000000;
border-top:1px dashed #000000;
background-color:#282828;
}
.titre {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #fa008e;
}
.texte {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #969696;
}
</style>
</head>
<body>
<div id="moncadre">
<div id="header"></div>
<div class="menuDroite"></div>
<div class="content"></div>
<div class="menuDroite"></div>
<div class="cadredumenugauche"></div>
<div class="cadrecentrale"></div>
<div class="cadredumenudroite"></div>
</div>
</body>
</html>


moi je le voit bien comment on, le fait mais je n'arrive pas a le mettre

donc j'ai bessoin que tu m'aide a me l faire c'est surement un truc tout bête

26 Février 2007 14:30:29

Citation :

<link rel="stylesheet" media="screen" type="text/css" title="style" href="style.css"/>
<style type="text/css">

#moncadre {
width:980px;
margin:auto;
padding:10px;
background-color:#282828;
border-left:1px solid #000000; /* couleur du cadre */
border-right:1px solid #000000;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}
#header{


Pourquoi tu link un style sheet et que tu décris également ton css ??
Fait l'un ou l'autre ( de préférence laisse le stylesheet ) . Mais pas les deux .
26 Février 2007 14:38:23

Fait attention quand tu fais tes copier coller , plusieurs fois j'ai la definition de menuDroite et les positionnements sont pas bon .

Bon j'ai fait un effort ( t'as de la chance que j'ai besoin de décompresser sur qqch de plus facile que ce que je suis en train de faire au boulot xD ) .

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"/>
  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" rel="nofollow" target="_blank">http://www.w3.org/1999/xhtml</a>"/>
  3. <head>
  4. <title>Bienvenue sur mon site</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <style type="text/css">
  7. #header{
  8. position:absolute;
  9. left:0px;
  10. top:0px;
  11. width:800px;
  12. height:200px;
  13. border:1px solid #999999;
  14. }
  15. #menuDroite{
  16. position:absolute;
  17. left:600px;
  18. top:200px;
  19. width:200px;
  20. height:400px;
  21. border:1px solid #999999;
  22. }
  23. #content{
  24. position:absolute;
  25. left:200px;
  26. top:200px;
  27. width:400px;
  28. height:400px;
  29. border:1px solid #999999;
  30. }
  31. #menuGauche{
  32. position:absolute;
  33. left:0px;
  34. top:200px;
  35. width:200px;
  36. height:400px;
  37. border:1px solid #999999;
  38. }
  39. </style>
  40. </head>
  41. <body>
  42. <div id="header"></div>
  43. <div id="menuDroite"></div>
  44. <div id="content"></div>
  45. <div id="menuGauche"></div>
  46.  
  47. </div>
  48. </body>
  49. </html>

Ce que je te conseillerai , c'est de faire juste un cadre à la fois , de le placer selon certains points , ensuite tu en rajouter un deuxième etc ...
26 Février 2007 16:22:18

re

merci c'est bon je croit que je tient le bout

mais il y as un petit soucy je n'arrive pas a mettre le menue droite ca decale

http://le.coffre.free.fr/cadre.php

merci pour tout et surtout votre patient messieur remy
26 Février 2007 17:12:13

  1. # <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"/>
  2. # <html xmlns="<a href="http://www.w3.org/1999/xhtml" rel="nofollow" target="_blank">http://www.w3.org/1999/xhtml</a>"/>
  3. # <head>
  4. # <title>Bienvenue sur mon site</title>
  5. # <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. # <link rel="stylesheet" media="screen" type="text/css" title="style" href="style.css"/>
  7. # </head>
  8. # <body>
  9. # <br />
  10. # <br />
  11. # <div id="header"><head>
  12. # <link rel="stylesheet" media="screen" type="text/css" title="style" href="style.css"/>
  13. [b]# </head>[/b]


Une balise fermante qui traine ^^

Tu utilises quoi comme IDE pour coder ? Si tu utilises Dreamweaver en mode mixte il te met en Highlight les balises non ouvertes ou fermées.

Héhé , je ne m'appelle pas Remy ^^
26 Février 2007 18:13:00

en faite j'utilise dream mais avant je fessait mode création et la je me suis mis mode code

et j'ai modifié le code que tu ma mis

Citation :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<html xmlns="http://www.w3.org/1999/xhtml"/>
<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="style" href="style.css"/>
</head>
<body>
<br />
<br />
<div id="header"><?php include("menuhaut.php"); ?><head>
<link rel="stylesheet" media="screen" type="text/css" title="style" href="style.css"/>
</head>
<div id="menuGauche"><?php include("menudroite.php"); ?></div>
<div id="content">


il y as toujour erreur :


http://validator.w3.org/check?uri=http%3A%2F%2Fle.coffr...

et la colonne droit et decalé

http://le.coffre.free.fr/messengerpluslive.php

et j'ai mis le fond 282828 mais pk il est bleu mon fond du milieu

et un petit detail que je j'aimerais avoir precision

j'ai remarque quon pouvais faire ca

ex :
dans mon tableau il y as

Citation :
<td width="680" height="10" align="left" valign="top" bgcolor="28288" class="texte"><p>mon texte</p></td>
</tr>
<tr>
<td width="680" height="40" align="left" valign="top" bgcolor="28288" class="texte"><p>mon texte</p></td>
</tr>


es ce quon peux enlenvé les code couleur height etc pour mettre dans ma page style

on mettra

Citation :


td {
widht
height
align
valign
bgcolor
classe
}


etc..

en sachant qsue je met tout le temp la même chose
je me suis dit pk pas les mettres dans style.css

mais si tu peux me dire ques ce qu'il faut mettre

pour ne pas me tromper

merci
26 Février 2007 18:21:10

Tu peux très bien le faire ( content de voir que tu apprends par toi même ^^ ) .

Je te conseillerais même de faire une classe carrément .

Petit exemple :
  1. [u]Style css: [/u]
  2.  
  3. .taTable {
  4. ...............
  5. }
  6. .taTable table {
  7. ...............
  8. }
  9. .taTable td {
  10. ...............
  11. }
  12.  
  13. [u]code html de la table:[/u]
  14.  
  15. <table class="taTable">
  16. <tr>
  17. <td></td>
  18. </tr>
  19. </table>


Je regarde de suite l'erreur.
26 Février 2007 18:23:16

Hum me semblait te l'avoir dit juste avant :/ 

T'as une balise de fermeture head en trop qu traine dans le code ainsi qu'un stylesheet en trop .

Citation :

# <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
# <html xmlns="http://www.w3.org/1999/xhtml"/>
# <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="style" href="style.css"/>
# </head>
# <body>
# <br />
# <br />
# <div id="header"><head>
# <link rel="stylesheet" media="screen" type="text/css" title="style" href="style.css"/>
# </head>



Le mode création de dreamweaver c'est clair qu'il te met des pourritures dans le code , mais il peut déjà te valider tes balises , autant en profiter .
26 Février 2007 18:58:57

re

j'ai essayé de fair un style comme ca :

Citation :


td {
width:680px;
height:60px;
align="center";
valign="top";
bgcolor="282828"
classe="titre"
border:1px solid #282828;
}
td {
width:680px;
height:60px;
align="center";
valign="top";
bgcolor="282828"
classe="texte"
border:1px solid #282828;
}

td {
width:150px;
height:10px;
align="center";
valign="top";
bgcolor="282828"
classe="titre"
border:1px solid #282828;
}
td {
width:150px;
height:10px;
align="center";
valign="top";
bgcolor="282828"
classe="texte"
border:1px solid #282828;
}
td {
width:300px;
height:10px;
align="center";
valign="top";
bgcolor="282828"
classe="titre"
border:1px solid #282828;
}


j'aio mis ca mai peux etrte ca vas lui faire embrouilé car j'ai mis td

a par si je les renomme si je le fait je serais obligé de renommé dans ma page

si on prend ca car il y as 2 style

Citation :
<table width="680">
<tr>
<td width="680" height="60" align="center" valign="top" bgcolor="28288" class="titre"><p>Messenger Plus ! Live</p>
<p class="texte">Logiciel connu mondialement, il vous permet de :<br />
Avoir vos conversations par onglet<br />
avoir votre pseudo en couleur<br />
Insérer des scripts<br />
Avoir un effet de transparent description</td>
</tr>
<tr>


et ca me donneras un truc

Citation :
<table width="680">
<tr>
<td><p>Messenger Plus ! Live</p>
<p>Logiciel connu mondialement, il vous permet de :<br />
Avoir vos conversations par onglet<br />
avoir votre pseudo en couleur<br />
Insérer des scripts<br />
Avoir un effet de transparent description</td>
</tr>
<tr>


donc j'ai supprimé les balise ca je pourais faire dans maz page mais si je fait dansd le menue gauche je peux le faire mais ca vas lui enbrouilé

donc il faudras les rénomé td on mettras quoi

c juste ça qui me gene si j'ai mes colone et ligne a la meme dimension je me poserais pas ces question mais

il y as des tableau de 150 ou 300 ou 680 ou 98

c juste ca et apres c bon c acquis
et ensuite j'étais sur fir fox là c le bordel
26 Février 2007 20:11:49

re

j'ai reflechit je pense je vais pas m'emerdé avec ca et je laisserais comme

en tout cas je vais refaire ma page pour que je puisse voir pour quoi ça me décalé la colone de droite
merci pour tout

je voiudrais te demandé enfin si ta le temp puisse apparent tu est plutot calme et trés patient donc c'est pour ca que je demanderais des que je finirais a savoir pk la colonne de droite et decale

je te ferais signe pour que tu m'explique coment réalisé son propre forum en tout piece en sachant j'ai déja pus faire les pages

je te demanderais si c'est bon et ques ce qui vas pas

sinon je tien au courant des que je finirais ma page et si ma colone a encore decalé là il faut que tu m'aide a savcoir pour quoi
26 Février 2007 20:33:20

Dans ton css , ce n'est pas une erreur de redéfinir une balise plusieurs fois même si le validator bronche dessus . C'est pour ca que ca ne fouare pas , mais il interprète la dernière déclaration.

Pour construire ton css , je pense que tu devrais appliquer cette méthode :
- faire un simple modèle de tes pages sur papier par exemple
- analyser les zones qui auront la même "tronche" xD
- pour ces zones similaires créer une classe
  1. /*feuille de style*/
  2. .maClasseMenuGauche{
  3. ......
  4. }
  5.  
  6. /* ou */
  7. #maClasseMenuGauche {
  8. .......
  9. }

- selon si tu utilise les id ou les class (généralement moi pour ce qui est du positionnement de cadre je prend des id , surtout si j'intègre ajax , mais la c'est un autre sujet ^^ ).
- souvent j'essaie de regrouper mes classes pour un div ( genre un menu sur la gauche)
  1. <div id="maClasseMenuGauche">
  2. contenu du bloc
  3. </div>

- ce div sera en fait tout ton cadre . Il contiendra plusieurs éléments , des tables , des lignes , des cellules etc .
- dans ton css tu déclares le style pour ce div la pour une table , une ligne , une cellule.

  1. #maClasseMenuGauche table{
  2.  
  3. }
  4. #maClasseMenuGauche tr{
  5.  
  6. }
  7.  
  8. #maClasseMenuGauche td{
  9.  
  10. }


- Tu n'auras pas besoin d'indiquer l'id de la classe pour tout ce qui sera inséré dans le div , la mise en forme ce fera automatiquement . Tout les tableaux , lignes et cellules auront la même mise en forme.
  1. <div id="maClasseMenuGauche">
  2. <table>
  3. <tr>
  4. <td></td>
  5. </tr>
  6. </table>
  7. <table>
  8. <tr>
  9. <td></td>
  10. </tr>
  11. </table>
  12. </div>
27 Février 2007 02:31:52

bonjour

j'ai trouvé peux être trouvé pour quoi ca beugue.

j'ai fai menuehaut et menuegauche et menuedroite et centre

j'ai trouvé 2 erreurs donc maintenant

il n'y pas d'erreus sur les 4 menue principaux

donc ensuite j'ai voulu mettre

Citation :
<div id="header"><?php include("menuhaut.php"); ?></div>
<div id="menuGauche"><?php include("menugauche.php"); ?></div>
<div id="content">pas d'include</div>
<div id="menuDroite"><?php include("menugauche.php"); ?></div>



mais il ma trouves des erreurs

si tu peux me dire ques ce que je pourais mettre pour que ca puisse marché

je vais essayé de voir de mon coté si je trouve la solution

maintenant je sais ou ca vient c juste les includes
27 Février 2007 07:52:57

Bon continuons ton apprentissage ^^

As tu regardé le code que tes include génère ( suffit de cocher show source sur le validator) .

La structure pour chaque page à l'air correcte si elle était indépendante l'une de l'autre.
Je vais quand même un peu t'éclaircir le fonctionnement des includes.

  1. <div> <?php include'mapage.php';?> </div>


Ce bout de code insère en fait le code de mapage.php dans la page dans laquelle l'include est appellée.

Le problème qu'il se passe c'est que tu déclares tes pages d'include comme si c'était des pages normales , hors tu ne dois pas dans ce cas la.
Donc du coup tu as plusieurs head body etc ... sur la même page !
Citation :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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="style" href="style.css"/>
</head>
<body>

<br/>
<br/>
<div id="header"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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="style" href="style.css"/>
</head>



Donc la manière de penser est celle-ci:

- tu fais une page qui va servir de modèle ( ou template , même si c'est pas vraiment le même qu'avec la class de phpbb).
- celle-ci va contenir le minimum requis pour afficher une page html standard avec tous les includes que tu souhaites.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" rel="nofollow" target="_blank">http://www.w3.org/1999/xhtml</a>">
  3. <head><title>Bienvenue sur mon site</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <link rel="stylesheet" media="screen" type="text/css" title="style" href="style.css"/>
  6. </head>
  7. <body>
  8. <div>
  9. <?php include'mapage.php';?>
  10. </div>
  11. </body>
  12. </html>


- Pour ce bout de code la , normalement ( on ne sait jamais ^^ ) ca passe dans le validator sans problème.
- Maintenant passons à mapage.php, celle-ci va contenir le bout de code qui va s'inclure à ton modèle.

  1. <p>
  2. <?php
  3. echo 'Prout prout que je t'aime ... viens par ici ma petite amie';
  4. ?>
  5. </p>


Comme tu peux le constater il n'y a pas de balise head etc sur cette page.

Essai un simple petit exemple en te basant sur ma petite explication .
27 Février 2007 14:20:38

J'ai trouvé tes deux erreurs , la première c'est vrai que c'en est pas vraiment une mais bon autant essayer de la corriger remplace & par &
La deuxième il te manque une balise <tr> avant une cellule .

Citation :

Avoir un effet de transparent description</p></td>
</tr>
<tr>
<td width="680" height="10" align="left" valign="top" bgcolor="282828" class="texte">
<p></p></td>
</tr>
27 Février 2007 14:24:05

Le dashed est bien présent , seulement il est en dessous de la bannière . Il suffit juste de repositionner le div plus bas.

Je suis juste un peu choqué de voir que dans ton source tu as autant d'attributs de style alors que tu utilises le css .

Enfin bon ca avance tout doucement ;) 
27 Février 2007 15:06:07

re

pourtemps il y as pas de style dans mes page doncje ne voit pas ceu que tu entend par là

et pour ta question, dashed j'ai pas encore mis dans mon style

Citation :
/* CSS Document */
<style type="text/css">
#header{
position:absolute;
left:0px;
top:0px;
width:980px;
height:230px;
border:1px solid #282828;
}
#menuGauche{
position:absolute;
left:0px;
top:200px;
width:150px;
height:400px;
border:1px solid #282828;
}
#content{
position:absolute;
left:161px;
top:197px;
width:600px;
height:400px;
border:1px solid #282828;
}
#menuDroite{
position:absolute;
left:845px;
top:196px;
width:150px;
height:400px;
border:1px solid #282828;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: 969696;
}
body {
background-color: #282828;
margin-left: 1px;
margin-top: 1px;
margin-right: 1px;
margin-bottom: 1px;
}
a {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: 969696;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
.titre {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #fa008e;
}
.texte {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #969696;
}
-->
</style>


donc il faut les mettre
28 Février 2007 02:56:38

re

je t'explique vite fait ceux que j'ai fais

1/ j'ai tout supprmé les tableaux qui me parais inutiles

2/ j'ai mis les code suivants:

je t'explique en résumé

sur ma page principale :

Citation :
<div id="header"><?php include("menuhaut.php"); ?></div>
<div id="menuGauche"><?php include("menugauche.php"); ?></div>
<div id="content">texte </div>
<div id="menuDroite"><?php include("menudroite.php"); ?></div>


et ensuite
sur menugauche et droite

j'ai supprime les lignes j'ai pensé que ca peux être bien

et ensuite sur menue haut j'ai mis ca :

Citation :
<table width="980" align="center">
<tr>
<td width="680" height="49" align="left" valign="top"><div id="colonne1">
<p><img src="telechargement/logo/baniere.jpg" alt="Ma baniere" />
</p></div></td>
<td width="300" height="49" align="left" valign="top">
<div id="colonne2">
<p class="titre">Mon Profil Pour quoi s'inscrire<br />
Votre identifiant<br />
Votre Mot de Passe<br />
Nouveau ?<br />
Mot de Passe Oublié ?</div></td>
</tr>
</table>
<br />
<table width="980">
<tr>
<td width="980" height="10" align="left" valign="top"><div id="colonne3">
<p class="titre">Acceuil Inscription Mon profil News Actualité Météo Programe T.V. Livre d'or Sondage Contacte</p></div></td>
</tr>
</table>


mais peux etre il faudras mettre des trais pour séparé les mots

ds ma fiche style.css

et j'ai rajouté ca :

Citation :
colonne1 {
position:absolute;
width:680px;
height:100px;
}
colonne2 {
position:absolute;
width:300px;
height:100px;
}
colonne3 {
position:absolute;
width:980px;
height:10px;
}


voilà mais des que met dans le serveur ca me fais ca

http://le.coffre.free.fr/messengerpluslive.php

je pense que je suis sur le bon chemin

donc c'est toi qui me feras remetre correctement

tu me diras si c'est bien ceux que j'ai pus faire

28 Février 2007 08:15:33

Oui, dans ton fichiers CCS, il n faut pas mettre de <style>, tu met le code CCS, brut.
Et pour l'intégrer : <link rel="stylesheet" media="screen" type="text/css" title="style" href="tonstyle.css"
28 Février 2007 08:30:48

En tout cas j'avais recopié ton source sur mon dreamweaver et les Dashed était bien présent , mais pas à l'affichage du site .

Oula en effet , y a du bordel ^^ ( Excuse l'expression :p  )

Bon j'ai codé un petit truc en vitesse , faudra vérifier si sur firefox ca passe , les floats ... c'est tout une histoire :s

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" rel="nofollow" target="_blank">http://www.w3.org/1999/xhtml</a>">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Untitled Document</title>
  6. <link href="Untitled-2.css" rel="stylesheet" type="text/css" />
  7. </head>
  8.  
  9. <body>
  10. <div id="header">Ton header</div>
  11. <div id="menu">Ton menu</div>
  12. <div class="data">
  13. <div class="menuGauche">Colonne de gauche</div>
  14. <div class="content">Contenu</div>
  15. <div class="menuDroite">Colonne de droite</div>
  16. </div>
  17. <div id="footer">Ton footer</div>
  18. </body>
  19. </html>


  1. /* CSS Document */
  2.  
  3. #header{
  4. position:relative;
  5. width:800px;
  6. height:100px;
  7. padding:10px;
  8. border:1px solid #000000;
  9. /*A supprimer */
  10. text-align:center;
  11. vertical-align:middle;
  12. }
  13. #menu{
  14. position:relative;
  15. width:800px;
  16. height:30px;
  17. padding:10px;
  18. border:1px solid #000000;
  19. /*A supprimer */
  20. text-align:center;
  21. vertical-align:middle;
  22. }
  23. div.data{
  24. width:800px;
  25. }
  26. div.menuDroite{
  27. float:left;
  28. width:179px;
  29. padding:10px;
  30. height:380px;
  31. border-left:1px solid #999999;
  32. }
  33. div.content{
  34. float:left;
  35. width:380px;
  36. padding:10px;
  37. height:380px;
  38. border-top:2px dashed #FF0000;
  39. }
  40. div.menuGauche{
  41. float:left;
  42. width:179px;
  43. padding:10px;
  44. height:380px;
  45. border-right:1px solid #999999;
  46. }
  47. #footer{
  48. position:relative;
  49. width:800px;
  50. height:30px;
  51. padding:10px;
  52. border:1px solid #000000;
  53. }

Le problème vient surtout de la manière dont les tailles sont calculées selon le navigateur . Et malheureusement ce n'est pas identique sur chacun .
Au cas ou tu aurais du décalage sous firefox , ce qui peut etre rajouté à ce code-ci , c'est rajouter un div qui englobe les trois colonnes avec une taille de 800px dans ce cas-ci , faire un padding:auto et de mettre les 3 colonnes avec au maximum un total de 800px en additionnant margin+padding+border . Au pire des cas sur un des navigateur le texte sera légèrement plus centrée , mais il ne devrait pas avoir de décalage de calque abusif.

Si tu ne comprend pas , hésite pas à demander.


28 Février 2007 13:06:06

en faite j'ai un peux compris le sens des menue et le style

don,c j'ai mis les 2 include menue gauche et droite ca je pense ca vas

et pour le menu du haut j'ai fait 2 pages

menuthaut
munuhaut1

je ne sais pas si c'est ca que tu voulais que je fasse

sinon j'ai suprime le div qui seras en bas car j'ai pas bessoin

mais des que je commence a mettre les texte du milieu le 1 er paragraphe ca vas
mais des que je commence a faire la suite il part en bas
et aussi il veux pas continue les ligne il le coupe en milieu

il s'arrete le trai a la hauteur de smiley

donc peux être c'est une question de mon style

et aussi j'ai voulu mettre 980 de largeur mais il dépasse il met l'ascenceur pour allé de droite a gauche donc j'ai mis 970 là cva passe

et pourtemp avant qd je fait un tableau je mettais 980 et ca passe

en sachant le bas il y as 3colonne
donc j'ai mis 150 pour les 2collonnes gauche et droite
donc si on calcule 970 - 300 = 670 je met 670 mais ca ma décallé la collonne droite

si ta le temps de regarde les vrai dimension

voilà le résultat que j'ai pu faire

http://le.coffre.free.fr/cadre.php

ma page


Citation :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="dimension.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header"><?php include("menuhaut.php"); ?></div>
<div id="menu"><?php include("menuhaut1.php"); ?></div>
<div class="data">
<div class="menuGauche"><?php include("menugauche.php"); ?></div>
<div class="content"><table width="680">
<tr>

<td width="680" height="70" align="center" valign="top" class="titre" style="background-color:282828">
<p class="titre">Messenger Plus ! Live</p>
<p class="texte">Logiciel connu mondialement, il vous permet de :<br />
Avoir vos conversations par onglet<br />
avoir votre pseudo en couleur<br />
Insérer des scripts<br />
Avoir un effet de transparent description
<br />
<br />
<br />
</td>
</tr>
</table></div>
<div class="menuDroite"><?php include("menudroite.php"); ?></div>
</div>
</body>
</html>


Citation :


/* CSS Document */

#header{
position:relative;
width:970px;
height:100px;
padding:10px;
border:1px solid #282828;
/*A supprimer */
text-align:center;
vertical-align:middle;
}
#menu{
position:relative;
width:970px;
height:30px;
padding:10px;
border:1px solid #282828;
/*A supprimer */
text-align:center;
vertical-align:middle;
}
div.data{
width:970px;
}
div.menuDroite{
float:left;
width:150px;
padding:10px;
height:380px;
border-left:1px solid #282828;
}
div.content{
float:left;
width:600px;
padding:10px;
height:380px;
border-top:2px dashed #282828;
}
div.menuGauche{
float:left;
width:150px;
padding:10px;
height:380px;
border-right:1px solid #282828;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
body {
background-color: #282828;
margin-left: 1px;
margin-top: 1px;
margin-right: 1px;
margin-bottom: 1px;
}



si tu peux regardé quelle est la bonne taille de with
28 Février 2007 14:10:49

Pour les dimensions tout dépend du rendu que tu veux avoir , pour l'instant je fais encore des sites d'une taille de 800 en largeur et pour ce qui est de la hauteur je laisse en automatique.
Mais tout cela dépend de la résolution de l'écran de celui qui va aller sur ton site .

Je pourrais dire que normalement on pourrais monter jusqu'à du 1000 actuellement . Les écrans 17'' étant très répandu et montant facilement à du 1280. ( Pour ma part je suis sur du 23'' donc ... mdr ) .

Bon sinon revenons en à nos moutons ^^

Le tableau que tu mets dans le content , si j'étais toi la par contre je ne renseignerais pas de taille fixe, mais en pourcentage.

L'attribut de couleur de fond est définie dans body ca c'est bien , plus besoin de la renseigné dans ta table.
Par contre les borders des menu avec la même couleur sont inutiles .

Tu n'as pas tenu compte de la règle d'addition que je t'ai renseignée lors de mon dernier post.

  1. /* CSS Document */
  2. *{
  3. /* Je n'arrivais pas à lire ^^ */
  4. font-family:Arial, Helvetica, sans-serif;
  5. font-size:9px;
  6. color:#FFFFFF;
  7. /* Pär défaut aucune bordure */
  8. border:0;
  9. border-collapse:0;
  10. border-spacing:0;
  11. }
  12. #header{
  13. position:relative;
  14. width:970px;
  15. /* width:968px;
  16.  
  17. Si tu décommentes les bordures
  18.  
  19. width:948px;
  20.  
  21. Si tu décommentes également le padding
  22. */
  23. height:100px;
  24. /*padding:10px; */
  25. /*border:1px solid #282828; */
  26. /*A supprimer */
  27. text-align:center;
  28. vertical-align:middle;
  29. }
  30. #menu{
  31. position:relative;
  32. width:970px;
  33. height:30px;
  34. /*padding:10px; */
  35. /*border:1px solid #282828; */
  36. /*A supprimer */
  37. text-align:center;
  38. vertical-align:middle;
  39. }
  40. div.data{
  41. width:970px;
  42. }
  43. div.menuDroite{
  44. float:left;
  45. width:148px;
  46. /*padding:10px; */
  47. height:380px;
  48. border-left:1px solid #282828;
  49. }
  50. div.content{
  51. float:left;
  52. width:670px;
  53. /*padding:10px; */
  54. height:380px;
  55. border-top:2px dashed #282828;
  56. }
  57. div.menuGauche{
  58. float:left;
  59. width:150px;
  60. /*padding:10px; */
  61. height:380px;
  62. /*border-right:1px solid #282828; */
  63. }
  64. table.softInfo{
  65. width:100%;
  66. height:auto;
  67. /* Pour ne pas que ca se colle au cadre du div*/
  68. margin:5px;
  69. }
  70. th.softInfo{
  71. text-decoration:underline;
  72. font-weight:bolder;
  73. }
  74. body,td,th {
  75. font-family: Verdana, Arial, Helvetica, sans-serif;
  76. font-size: 11px;
  77. }
  78. body {
  79. background-color: #282828;
  80. margin-left:auto;
  81. margin-right:auto;
  82. }


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" rel="nofollow" target="_blank">http://www.w3.org/1999/xhtml</a>">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Untitled Document</title>
  6.  
  7. <link href="Untitled-3.css" rel="stylesheet" type="text/css" />
  8. </head>
  9.  
  10. <body>
  11. <div id="header"></div>
  12. <div id="menu"></div>
  13. <div class="data">
  14. <div class="menuGauche"></div>
  15. <div class="content">
  16. <table class="softInfo">
  17. <tr>
  18. <th>Messenger Plus ! Live</th>
  19. </tr>
  20. <tr>
  21. <td>
  22. <p>Logiciel connu mondialement, il vous permet de :
  23. <li>Avoir vos conversations par onglet</li>
  24. <li>avoir votre pseudo en couleur</li>
  25. <li>Insérer des scripts</li>
  26. <li>Avoir un effet de transparent description </li>
  27. </p>
  28. </td>
  29. </tr>
  30. </table>
  31. </div>
  32. <div class="menuDroite"></div>
  33. </div>
  34. </body>
  35. </html>
28 Février 2007 14:59:47

excuse moi entre temps je me suis posez la question pour quoi pas essayé a nouveau de supprimer les ligne

je pense que je suis presque au drapeau d'arrivé
maintenenant il faut sépare la bare de menu haut car le texte est trop raproché donc le myen c de fair un tableau avec 9 colone mais comme certain sont hanti tableau

donc il faudras trouvé le mot exacte pour permettre les bien séparé et ensuite je pense queca seras finit

a part si tu voit d'autre chose a modifié ou a faire

et j'ai mis du h5 car j'ai essayé du h 6 ou h 4 mais ce n'est pas térrible donc j'ai voté du h 5

tu me diras comment tu trouve en tout cas c'est mieux en mien que le debut

http://le.coffre.free.fr/messengerpluslive.php
si tu peux me ditre comment je pourais amélioré le commentaire

en sachant j'aimerais mettre en 2 colonne
1 pour le pseudo
et l'autre ca seras pour le message

en sachant que plus tard je mettra un forum donc je mettrais un code qui permetras

quand quelqu'un met leur message il verront leur foto et son pseudo et dans l'autre colonne le message

en gros

en sachant que j'ai pas encore passé au valido il y as surement des erreurs tout béte

je vais voir ceux qui me propose comme erreur lol
je vais éssayé de trouvé mais certain erreur je ne serai pas donc si tu peux me dire

merci d'avance je te tien aucourant
28 Février 2007 17:04:42

re

je pense que j'ai trouvé mais je ne sais pas mettre en place

il faut faire une class séparateur

j'ai fait sur la page style :

Citation :
.separateur {
clear: both;
}


et j'ai mis sur la page

menuhaut1 :

Citation :
<div id="conteneur">
<div id="contenu" class="titre">Acceuil Inscription Mon profil News Actualité Météo Programe T.V. Livre d'or Sondage Contacte</div>
<hr class="separateur" />
</div>


et menuhaut

Citation :
<div id="conteneur">
<div id="contenu" class="titre"><p><img src="telechargement/logo/baniere.jpg" alt="Ma baniere" />
</p></div>
<div id="conteneur">
<div id="contenu" class="titre">Mon Profil Pour quoi s'inscrire</div>
<hr class="separateur" />
</div>
<p align="center" class="titre"><input type="text" name="champ3" value="Votre identifiant" size="20" onFocus="this.value=''"><br />
<input type="text" name="champ3" value="Votre Mot de Passe" size="20" onFocus="this.value=''"><br />
Nouveau ?<br />
Mot de Passe Oublié ?</div>


il faudras changé 2 ou 3 chose pour permetre de faire ceux que je lui demande

sur ma page j'ai mis ca :

Citation :
<div id="header"><?php include("menuhaut.php"); ?></div>
<div id="conteneur"><?php include("menuhaut1.php"); ?></div>
<div class="data">
<div class="menuGauche"><?php include("menugauche.php"); ?></div>
<div class="content">



c pour permerttre de faire des séparateurs mais je ne sais pas comment je pourais le mettre en place

mais le principe est là

fure a messur on enleve les table

j'essayerais de voir si j'arrivé a le faire mais 10 % que j'arrive lol

et j'ai vu ca me fait beugué
1 Mars 2007 10:24:17

Ah ben tu viens de m'apprendre quelque chose avec la propriété clear. Je ne connaissais pas .
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS