ma première page sur deamweaver : problème

ma première page sur deamweaver : problème - HTML/CSS - Programmation

Marsh Posté le 23-10-2007 à 19:35:49    

salut à tous j'ai fais une page sous dreamwever et quand je l'ouvre avec avec IExplorer Il y a juste la trame de fpnd et une ou deux bribes d'image.
 
A quoi cela p-e du ?
 
voila ce que çà donne :
 
http://www.moughlee.homedns.org/
 
le code
 

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>menu02</title>
<style type="text/css">
<!--
#menu02 {
 position:absolute;
 left:190;
 top:25;
 width:760;
 height:80;
 z-index:1;
 background-image: url(images/menu02.png);
}
#menu03 {
 position:absolute;
 left:25;
 top:250;
 width:165;
 height:830;
 z-index:2;
 background-image: url(images/menu03.png);
}
#central {
 position:absolute;
 left:190px;
 top:250px;
 width:760;
 height:830;
 z-index:3;
 background-image: url(images/centre.png);
}
#menu01 {
 position:absolute;
 left:25;
 top:25;
 width:165;
 height:80;
 z-index:4;
 background-color: #D4D0C8;
 background-image: url(images/menu01.png);
}
body {
 background-image: url(images/fond%20page.gif);
}
.Style1 {color: #FFFF66}
#banniere {
 position:absolute;
 left:25;
 top:127.5px;
 width:920;
 height:100;
 z-index:5;
}
#Layer1 {
 position:absolute;
 left:225;
 top:37;
 width:115px;
 height:55;
 z-index:6;
 background-image: url(images/boutonmenu.gif);
}
#Layer2 {
 position:absolute;
 left:340px;
 top:37px;
 width:115px;
 height:55px;
 z-index:7;
 background-image: url(images/boutonmenu.gif);
}
#Layer3 {
 position:absolute;
 left:455px;
 top:37px;
 width:115px;
 height:55px;
 z-index:8;
 background-image: url(images/boutonmenu.gif);
}
#news {
 position:absolute;
 left:50px;
 top:37;
 width:115;
 height:55;
 z-index:9;
 background-image: url(images/boutonmenu.gif);
}
#Layer5 {
 position:absolute;
 left:570px;
 top:37;
 width:115;
 height:55px;
 z-index:10;
 background-image: url(images/boutonmenu.gif);
}
#Layer6 {
 position:absolute;
 left:685px;
 top:37;
 width:115;
 height:55px;
 z-index:11;
 background-image: url(images/boutonmenu.gif);
}
#Layer4 {
 position:absolute;
 left:820px;
 top:37;
 width:115;
 height:55;
 z-index:12;
 background-image: url(images/boutonmenu.gif);
}
#Layer7 {
 position:absolute;
 left:50;
 top:280;
 width:115px;
 height:55px;
 z-index:13;
 background-image: url(images/boutonmenu.gif);
}
#Layer8 {
 position:absolute;
 left:50px;
 top:370;
 width:115;
 height:55;
 z-index:14;
 background-image: url(images/boutonmenu.gif);
}
#Layer9 {
 position:absolute;
 left:50px;
 top:460;
 width:115;
 height:55;
 z-index:15;
 background-image: url(images/boutonmenu.gif);
}
#Layer10 {
 position:absolute;
 left:50;
 top:544px;
 width:115;
 height:55;
 z-index:16;
 background-image: url(images/boutonmenu.gif);
}
.Style2 {
 color: #CC0000;
 font-size: 24px;
}
.Style3 {font-family: "Courier New", Courier, monospace}
#Layer11 {
 position:absolute;
 left:50px;
 top:37;
 width:115;
 height:55;
 z-index:17;
 background-image: url(images/boutonmenu.gif);
}
-->
</style>
</head>
 
<body>
<div id="menu02"></div>
<div id="menu03"></div>
<div id="central">
  <p>&nbsp;</p>
  <p class="Style1">&nbsp;</p>
</div>
<div id="menu01"></div>
<div id="banniere"></div>
<div id="Layer1"></div>
<div id="Layer2"></div>
<div id="Layer3"></div>
<div id="Layer5"></div>
<div id="Layer6"></div>
<div id="Layer4"></div>
<div id="Layer7"></div>
<div id="Layer8"></div>
<div id="Layer9"></div>
<div id="Layer10"></div>
<div id="Layer11">
  <p>&nbsp;</p>
  <p><br />
  </p>
</div>
</body>
</html>


 
merci de m'aider
 
normalement je devrai arriver à ce resultat à quelque détails prés :
 
http://www.moughlee.homedns.org/co [...] s/news.htm
 
 
a+
 


---------------
ploum ploum tralala
Reply

Marsh Posté le 23-10-2007 à 19:35:49   

Reply

Marsh Posté le 24-10-2007 à 11:16:24    

c est facile il suffit de pas se servir de dreamweaver :/
la je suis désolé mais il faut tout refaire c est normal que ca marche pas

Message cité 1 fois

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 24-10-2007 à 11:52:18    


 
Bonjour
 
la vache tout est en absolute ... -_-
 
aller mon lien favoris -->  
http://css.alsacreations.com/
http://css.alsacreations.com/Const [...] us-en-CSS/
http://css.alsacreations.com/Model [...] age-en-CSS
http://css.alsacreations.com/Galeries-de-menus-en-CSS
 
Ensuite quelques petits conseils :
- Importe ta page css au lieu de mettre tout dans ta page, c'est plus pratique pour reprendre les différentes choses dont tu à besoin, surtout pour un menu,

Code :
  1. <link rel="stylesheet" type="text/css" href="tapagecss.css">

sera beaucoup plus pratique pour toi ..  
 
- Renseigne toi au niveau des positions absolutes et relatives, tu risque d'avoir des emmerdent sinon, genre maintenant :)  
 

mIRROR a écrit :

c est facile il suffit de pas se servir de dreamweaver :/
la je suis désolé mais il faut tout refaire c est normal que ca marche pas


 
Pas evident pour tout le monde de ne pas ce servir de dream, ça à beau etre une belle merde qui rajoute des trucs quand on veux pas, et qui fait un code parfois dégueu, il est quand même bien pratique parfois :)  

Reply

Marsh Posté le 24-10-2007 à 12:52:35    

DW peut etre un outil sympa quand tu comprends ce que tu fais ou alors couplé avec image ready
ca fait du code immonde mais fonctionnel
mais partir de but en blanc sur dreamweaver c ets suicidaire y a meme pas un seul lien sur son html et evidemment il peut pas s en rendre compte
 
et a son niveau alsacreations risque d etre un peu trop pointu
avant les css il doit apprendre le html

Message cité 1 fois

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 24-10-2007 à 13:11:15    

merci de vos réponses.
 
pour info, j'avais suivi le tuto là :
http://www.kachouri.com/tuto/tuto- [...] te-12.html

Message cité 1 fois

---------------
ploum ploum tralala
Reply

Marsh Posté le 24-10-2007 à 13:18:53    

mIRROR a écrit :

avant les css il doit apprendre le html


 
a vrai dire j'ai plutot tendance à dire que désormais l'un ne va pas sans l'autre si l'on veux quelque chose de propre ...
 

Message cité 1 fois
Reply

Marsh Posté le 24-10-2007 à 15:13:53    

Positiviste a écrit :

merci de vos réponses.
 
pour info, j'avais suivi le tuto là :
http://www.kachouri.com/tuto/tuto- [...] te-12.html


 
ok a toi d adapter la section "ajouter des liens" avec tes images (vu que tu n utilises pas du texte)
mais pour les questions DW va plutot sur mediabox
http://creative.mediabox.fr/index.php?showforum=5
 

micfont999 a écrit :

a vrai dire j'ai plutot tendance à dire que désormais l'un ne va pas sans l'autre si l'on veux quelque chose de propre ...


 
evidemment mais chaque chose en son temps [:spamafote]


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 24-10-2007 à 19:16:58    

bon en fait les gars je suis tombé sur un bon tuto. http://fr.html.net/
Résultat je fais tout sur notepad et c'est bien plus interressant.
 
voila ce que j'ai fait en lisant un peu. çà reste simple c'est sur et quelques étourderie concernant les sauts de lignes et alinéa.
 
 

Code :
  1. <head>
  2. <title>voyage en Asie photographies mough-lee news</title>
  4. <link rel="stylesheet" type="text/css" href="index.css" />
  5.    </head>
  7.    <body>
  8. <br />
  9. <br />
  10. <br />
  11. <br />
  12. <br />
  13. <br />
  14. <br />
  15. <br />
  16. <br />
  17. <br />
  18. <br />
  19. <br />
  20. <br />
  21. <br />
  22. <br />
  23. <br />
  24. <br />
  25. <br />
  26. <br />
  27. <br />
  28. <br />
  29. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  30.      <a href="C:\serveur01\www\contenu\pagenews\pagenews.htm">Aventuriers au grand coeur, le voyage commence ici</a>
  31.    </body>
  32. </html>


 

Code :
  1. body {
  2.  background: #000000 url("moughleesadventure.gif" ) no-repeat fixed 50% 45%;
  3. }
  6. a:link {
  7. color: #0000CC;
  8. text-decoration:none;
  9. }
  11. a:visited {
  12. color: #993300;
  13. text-decoration:none;
  14. }
  16. a:hover {
  17. color:#FF6600;
  18. font-style: italic;
  19. text-decoration:none;
  20. }


 
La je m'attaque aux pages  avec des menu en haut avec des images dessus et menu gauyche et etc..
en gros voila ce que je souhaite (en centrant bien sur) réaliser comme gabarit
http://www.moughlee.homedns.org/co [...] s/news.htm
 
encore quelques pétard et c'est bon, je me prendrai pour néo
 
a+


Message édité par Positiviste le 24-10-2007 à 19:18:39

---------------
ploum ploum tralala
Reply

Marsh Posté le 24-10-2007 à 22:28:12    

C'est un début :)
Maintenant, au lieu des sauts de ligne et les espaces insécables,  ajoute un style à ton A pour décaler ça vers le bas et la droite (indice  : margin)

 

Notepad tout court, c'est du SM par contre. DW n'est pas un mauvais éditeur de code, et puisque tu l'as... Mais en mode code, pas WYSIWYG ;)


Message édité par gooopil le 24-10-2007 à 22:30:01
Reply

Marsh Posté le 25-10-2007 à 14:26:29    

Yes margin effectué. Merci
 
étape une : création page d'accueil.
étape 2: création gabarit des pages. selon le modèle suivant :
 
http://images2.hiboox.com/vignettes/4307/ugo8hhkn.jpg
 
la partie 1 (menutop), 2(bannière), 3(menuleft), 4(body) corespondent à des banières et menu fait précédemment avec un logiciel, en format .png.
La partie 5 en haut (qui ressemble fortement à un 4) correspond à la marge.
la partie 6 en rouge est un cadre noir.
La partie 0 est le background de la page.
Les dimensions données sont en px.
 
 
Ce forum et ce post en particulier va me servir de plateforme de travail et pourquoi pas d'aide au débutant tout comme moi.


Message édité par Positiviste le 25-10-2007 à 14:42:04

---------------
ploum ploum tralala
Reply

Marsh Posté le 25-10-2007 à 14:26:29   

Reply

Marsh Posté le 25-10-2007 à 14:35:06    

Partie 0 : background
 
htlm :

Citation :


<htlm>
             <head>
 <title>voyage orient asie monde</title>
 
 <link rel="stylesheet" type="text/css" href="general.css" />
   </head>
 
   <body>  
 </body>
 
</html>


 
css/

Citation :

body {
  background: url("C:\serveur01\www\images\fondpage.gif" ) repeat fixed;
 
}

Message cité 1 fois
Message édité par Positiviste le 25-10-2007 à 14:36:00

---------------
ploum ploum tralala
Reply

Marsh Posté le 25-10-2007 à 15:22:22    

Positiviste a écrit :

Partie 0 : background
 
htlm :

Citation :


<htlm>
             <head>
 <title>voyage orient asie monde</title>
 
 <link rel="stylesheet" type="text/css" href="general.css" />
   </head>
 
   <body>  
 </body>
 
</html>


 
css/

Citation :

body {
  background: url("C:\serveur01\www\images\fondpage.gif" ) repeat fixed;
 
}



 
si tu peux evite les lien absoluent, ils te poseront problème à un moment ou un autre..
Préfère leur les liens relatifs surtout dans ce cas d'image ...  
un bon  

Code :
  1. background-image: url(images/fondpage.gif) repeat fixed;


 
suffira amplement et t'évitera bien des soucis :)  
 :hello:

Message cité 1 fois
Reply

Marsh Posté le 25-10-2007 à 15:25:13    

micfont999 a écrit :


 
si tu peux evite les lien absoluent, ils te poseront problème à un moment ou un autre..
Préfère leur les liens relatifs surtout dans ce cas d'image ...  
 


T'as un problème avec la construction du pluriel je crois ^^

Reply

Marsh Posté le 25-10-2007 à 15:28:05    

hey mais non j'ai pas fait gaffe roh :kaola:   :whistle:


Message édité par micfont999 le 26-10-2007 à 08:43:12
Reply

Marsh Posté le 25-10-2007 à 16:29:34    

ok; je prend note.merci.
 

Citation :

body {
  background: url("../images/fondpage.gif" ) repeat fixed;


Message édité par Positiviste le 25-10-2007 à 16:30:17

---------------
ploum ploum tralala
Reply

Marsh Posté le 25-10-2007 à 16:57:13    

positionnement de mes menu et barrière :
 

Citation :


 
   <body>  
<img src="../images/menutop.png" style="position:relative;"\>
<img src="menuleft.png" style="position:relative;top:110px;"\>
<img src="../images/bannièreadventure.gif"  
style="position:relative;top:-825px;"\>
<img src="../images/body.png"  
style="position:relative;top:-815px;left:165px;"\>
 </body>
 
</html>


 
css

Citation :


body {
  background: url("../images/fondpage.gif" ) repeat fixed;
 margin: 25px 25px 0px 25px;
}


Il me reste à mettre le cadre 6
voilà, comme vous l'aurez remarqué, j'ai tous placé en utilisant "position:relative" et ds le fichier htlm.
 
 
Donc prochaine étape, mettre ds le fichier .css, avec p-ê une autre méthode plus adapté et efficace que que "position:relative" sachant que sur ces images, je compte mettr du texte, des images, des liens ?
 
a+


Message édité par Positiviste le 25-10-2007 à 17:18:58

---------------
ploum ploum tralala
Reply

Marsh Posté le 30-10-2007 à 22:02:45    

salut à tous !
 
mon site avance à pas de fourmies mais il avance.
 
Je bloque sur un point ou deux : l'insertion du menu de gauche "id menu"
 
htlm

Citation :


   <head>
 <title>voyage orient asie monde</title>
 
 <link rel="stylesheet" type="text/css" href="pagenews.css" />
   </head>
 
   
   <body>
 
     
 
       <div id="en_tete">
           
       </div>
 
       <div id="banniere">
           
       </div>
   
       <div id="menu">        
                                       
       </div>
 
       <div id="corps">        
                                       
       </div>


 
css

Citation :

body
{
   width: 975px;
   margin-top: 20px;
   margin-bottom: 20px;    
   background-image: url("../images/fondpage.gif" );
}
 
 
 
#en_tete
{
   width: 925px;
   height: 82px;
   background-image: url("../images/menutop.png" );
   background-repeat: no-repeat;
   margin-bottom: 10px;
}
 
#banniere
{
   width: 925px;
   height: 85px;
   background-image: url("../images/bannièreadventure.gif" );
   background-repeat: no-repeat;
   margin-bottom: 10px;
}
 
#menu
{
   float: left
   margin-bottom: 10px;
  background-image: url("../images/body.png" );
}
#corps
{
   margin-left: 165px;
   width: 760px;
   height: 830px;
   padding: 5px;
   background-image: url("../images/body.png" );
   background-repeat: no-repeat;
   margin-bottom: 10px;
}
 


 
volia le problè, le menu soit n'apparait pas ou il apparait et le corps n'est plus à sa place.
Si vous pouviez m'aider svp
 
merci a+


---------------
ploum ploum tralala
Reply

Marsh Posté le 30-10-2007 à 22:08:06    

a priori j enleverai le margin sur ton #corps


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 31-10-2007 à 16:10:35    


htlm

Citation :


   <head>
 <title>voyage orient asie monde</title>
 
 <link rel="stylesheet" type="text/css" href="pagenews.css" />
   </head>
 
   
   <body>
 
     
 
       <div id="en_tete">
           
       </div>
 
       <div id="banniere">
           
       </div>
   
       


 
css

Citation :

body
{
   width: 975px;
   margin-top: 20px;
   margin-bottom: 20px;    
   background-image: url("../images/fondpage.gif" );
}
 
 
 
#en_tete
{
   width: 925px;
   height: 82px;
   background-image: url("../images/menutop.png" );
   background-repeat: no-repeat;
   margin-bottom: 10px;
}
 
#banniere
{
   width: 925px;
   height: 85px;
   background-image: url("../images/bannièreadventure.gif" );
   background-repeat: no-repeat;
   margin-bottom: 10px;
}
 
 


 
Bon reprenons le problème :
Actuellement j'ai inséré 1 menu horizontal qui accueillera du texte, en-dessous une bannière. Maintenant, je souhaite insérer mon menu vertical.png 165x830px et mon corprs.png 760x830 tangeant à mon menu. Mais je n'y arrive pas. problème de balise je pense et d'utilisation de celle-ci.
 
help svp.
 
a+


Message édité par Positiviste le 31-10-2007 à 16:26:00

---------------
ploum ploum tralala
Reply

Marsh Posté le 31-10-2007 à 17:31:33    

url :/


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 31-10-2007 à 20:16:49    

scuse moi, je recommence :
 
 
Pour l'instant voilà ce que j'ai pu faire:
http://www.moughlee.homedns.org/co [...] genews.htm
 
css
 

Citation :

body
{
   width: 975px;
   margin-top: 20px;
   margin-bottom: 20px;    
   background-image: url("../images/fondpage.gif" );
}
 
 
 
#menutop
{
   width: 925px;
   height: 82px;
   background-image: url("../images/menutop.png" );
   background-repeat: no-repeat;
   margin-bottom: 10px;
}
 
#banniere
{
   width: 925px;
   height: 85px;
   background-image: url("../images/bannièreadventure.gif" );
   background-repeat: no-repeat;
   margin-bottom: 10px;
}
 
#menuleft
{
   
   width: 165px;
   height: 830px;
   background-image: url("../images/menuleft.png" );
   background-repeat: no-repeat;
   margin-bottom: 10px;
}
 
#corps
 
{
   margin-left: 165px;
   width: 925px;
   height: 830px;
   background-image: url("../images/body.png" );
   background-repeat: no-repeat;
   margin-bottom: 10px;
}


 
html

Citation :

<head>
 head>
 <title>voyage orient asie monde</title>
 
 <link rel="stylesheet" type="text/css" href="pagenews.css" />
   </head>
 
   
   <body>
 
     
 
       <div id="menutop">
           
       </div>
 
       <div id="banniere">
           
       </div>
 
       <div id="menuleft">
           
       </div>
 
       <div id="corps">
 
       </div>
 
   
   </body>


 
Je n'arrive pas à placer l'image body.png, tangent au menu de droite..
 
Pouvez vous m'aidez  svp ?
Est ce que j'ai choisi la méthode adéquate si je souhaite mettre des liens sur les boutons jaunes des deux menus et du texte ou des scripts sur le corps ?
 
merci d'avance et à plus

Message cité 1 fois
Message édité par Positiviste le 31-10-2007 à 20:19:34

---------------
ploum ploum tralala
Reply

Marsh Posté le 01-11-2007 à 10:16:30    

Positiviste a écrit :

Je n'arrive pas à placer l'image body.png, tangent au menu de droite..


 
ton serveur est tombé  
mais je repete ma precedente remaque retire ton margin left sur le corps et au passage tu a changé le width de ce dernier ce qui est une erreur
 

Positiviste a écrit :

Est ce que j'ai choisi la méthode adéquate si je souhaite mettre des liens sur les boutons jaunes des deux menus et du texte ou des scripts sur le corps ?
 
merci d'avance et à plus


 
si tu a donné tout ton code html surement pas  
il n y a aucun lien dedans [:petrus75]


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed