décalage texte avec dreamweaver

Sonix · le 28 juillet 2004

bonjour, voila le problème :

Sur mon site, j'ai mis des photos avec des commentaires en dessous. Ceux ci sont bien placé dans dreamweaver mais ds IE, ils sont décalé. J'ai utilisé la fonction calque pour pouvoir écrire mes commentaires en dessous des photos.

Comment faire pour que ces commentaires ne soit plus décalés ?

Sonix · le 29 juillet 2004

euh...vous savez pas ?

ingeni · le 2 août 2004

met un morceau de code pour voir ...

Sonix · le 18 août 2004

un morceau de code ?

tu veux que je copie le code ici ?

warzi · le 18 août 2004

ben le code d'une image avec son texte ...

qu'on ai une idée de ce que DW a fait...

paikan_hck · le 18 août 2004

ou laors tu envoie le lien de ta page, on l'enregistre avec dream et on regarde :iloveyou:

theocrite · le 19 août 2004

Tu peut placer ton image en absolue et le commentaire aussi avec un décalage de la taille de l'image (getimagesize en php).

Sinon fait un tableau avec une cellule par image. Le texte sera forcément dessous (si tu met un <BR> avant)

paikan_hck · le 19 août 2004

c'est clair que le plus simple est la creation de tableaux.

au moins tu fait comme tu veux :yes:

warzi · le 19 août 2004

Sinon fait un tableau avec une cellule par image. Le texte sera forcément dessous (si tu met un <BR> avant)

:byebye: une mise en page avec des tableaux :yoda: pas bien !!

vive les CSS :byebye: la au moins tu maitrises tout !

paikan_hck · le 19 août 2004

bah si t'as juste des photos et du texte, c'est plus simple en tableaux :yoda:

Sonix · le 19 août 2004

bon j'essai de de comprendre ce que vous dite mais c po facile parce que je ne suis encore qu'un noob en language HTML et autres. j'ai pas le lien de la page car j'ai tout refait avec front page et mettant des tableaux :byebye:

Voila le code de Dreamweaver :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Page Mes Potes</title>

<!--

.Style1 {

font-size: 24px;

font-weight: bold;

font-family: "Comic Sans MS";

color: #0000FF;

}

.Style3 {

font-size: 14px;

font-family: "Times New Roman", Times, serif;

color: #000000;

}

body,td,th {

color: #FFFFFF;

}

body {

background-color: #000000;

}

a:link {

color: #FF0000;

}

a:visited {

color: #FF6600;

}

.Style5 {font-size: 14px; font-family: "Times New Roman", Times, serif; color: #FFFFFF; }

.Style10 {font-size: 14px}

.Style11 {font-size: 16px; font-family: "Times New Roman", Times, serif; color: #000000; }

.Style12 {font-size: 14px; font-family: "Times New Roman", Times, serif; color: #FFFFFF; font-weight: bold; }

-->

</style>

<!--

function MM_reloadPage(init) { //reloads the window if Nav4 resized

if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {

document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}

else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

}

MM_reloadPage(true);

//-->

</script>

</head>

<body>

<p align="left" class="Style12">Ca c'est la page réservée aux copains et copines, chose importante dans ma vie. Ca va etre rempli de photos, alors j'espère que vous avez une bonne connexion :eeek2: </p>

<p align="left" class="Style12">Désolé je suis loin d'avoir mis tout le monde mais je serai ravi de le faire ! Envoyez moi une photo de vous <span class="Style5"><a href="mailto:xsonix@msn.com">LA</a></span> et je la mettrai !</p>

</div>

<div align="center"><strong>Voila Manu ! Dans ma classe lui aussi.</strong></div>

</div>

<p align="center" class="Style12">Voici Théo, un gars super cool :).La photo a été prise au Grau du roi oùil m'avait gentilment invité :transpi: </p>

</div>

<p align="center"><strong>Camille (gauche) et Marie (droite). Des copines de Nîmes : trop sympa...et puis trop belles aussi !</strong></p>

</div>

<div align="center"><strong>Bon là c'est ma classe de l'année dernière. Les 1S2 de Carnot ! </strong></div>

</div>

<p><strong>Là c'est Dorian, bien cool lui aussi. </strong></p>

</div>

<div align="center"><strong>Voila Thomas, un pote d'enfance. On a la meme passion...l'informatique ! </strong></div>

</div>

<div align="center"><strong>Jérémy, il joue super bien de la guitare électrique et il manipule super bien les programmes de calculettes.</strong></div>

</div>

<div align="center"><strong>Elodie...elle fait du basket a Mably. </strong></div>

</div>

<div align="center"><strong>Loïc, de ma classe aussi. Il aime bien l'informatique...je dirai meme qu'il en ai fou! Lol j'ai pris cette photo le jour du monôme c'est pour ca qu'il est recouvert de farine ! </strong></div>

</div>

<div align="center"><strong>Là c'est Claire, elle aussi fait du basket a Mably. Jolie...non ? </strong></div>

</div>

<div align="center"><strong>Mélaine (a gauche) et Malvyna (a droite).</strong></div>

</div>

<div align="center"><strong>Ahhh cette photo je l'adore ! Y'a tout les gars du basket. De gauche a droite en bas : Jeff, Aymeric et Gwena (belle grimace au fait ^^) et en haut : Yohan, Théo, Alex et Thibault </strong></div>

</div>

<div align="center"><strong>Ahh ca c'est Vaness. La cousine d'un pote. Mimi non ? </strong></div>

</div>

<div align="center"><strong>Toinouuuuuuu !! Il a l'air défoncé mais il ne l'ai pas ! Du basket lui aussi. </strong></div>

</span>

<div align="center"><strong>Voila Arnaud, dis Nanard lol ! </strong></div>

</span>

<div align="center"><strong>MDRRR Ca c'est Sophie. Une fille du basket elle aussi.</strong></div>

</div>

<div align="center"><strong>Aymeric, pote de lycée et de basket. </strong></div>

</div>

<div align="center"><strong>Là c'est Frédérique. J'adore cette photo !! Elle aussi mignogne non ? </strong></div>

</div>

<div align="center"><strong>Loool Florian, il fait le con, comme d'habitude ! </strong></div>

</div>

<p align="center"><u>Mes potes (dsl ya des bugs qui decale tout!)</u></p>

<p class="Style11"><a href="Page%20d%27acueil.htm"><strong>Page D'acceuil </strong></a></p>

<p class="Style11"><strong><a href="Page_2_mes_sports.htm">Mes Sports</a></strong></p>

<p class="Style11"><strong><a href="Page_3_mes_potes.htm">Mes Potes</a></strong></p>

<p class="Style11"><strong><a href="Page_4_ma_musique.htm">Ma Musique</a></strong></p>

<p class="Style11"><strong><a href="Page_5_brice.htm">Brice de Nice</a></strong></p>

<p class="Style11"><strong><a href="Page_7_telechargements.htm">Téléchargements</a></strong></p>

</div>

</map>

</p>

</div>

</body>

</html>

GRAND MERCI :yoda: :byebye:

Country · le 19 août 2004

Haaaaaa (cri d'horreur en voyant le code)

Sonix · le 19 août 2004

Haaaaaa (cri d'horreur en voyant le code)

ben pourquoi ca !? :transpi:

Country · le 19 août 2004

Voici une solution :

<!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>Page Mes Potes</title>
<style type="text/css">
<!--
body {
background-color:#000000;
font-family:"Times New Roman", Times, serif;
font-weight:bold;
color:#FFFFFF;
}
td {
text-align:center;
}
.menu {
position:absolute;
top:150px;
left:10px;
text-align:center;
}
.intro {
position:absolute;
top:150px;
left:240px;
right:60px;
height: 100px;
}
.titre {
text-align:center;
color:#0000FF;
font-size: 24px;
font-weight: bold;
font-family: "Comic Sans MS";
text-decoration:underline;
}
.photos {
position:absolute;
top:300px;
left:200px;
}
a:link, a:active, a:over {
color: #FF0000;
}
a:visited {
color: #FF6600;
}
-->
</style>
</head>
<body>
<div class="menu">
<a href="Page%20d%27acueil.htm">Page D'acceuil</a><br /><br />
<a href="Page_1_mon_pc.htm">Mon PC</a><br /><br />
<a href="Page_2_mes_sports.htm">Mes Sports</a><br /><br />
<a href="Page_3_mes_potes.htm">Mes Potes</a><br /><br />
<a href="Page_4_ma_musique.htm">Ma Musique</a><br /><br />
<a href="Page_5_brice.htm">Brice de Nice</a><br /><br />
<a href="Page_6_moi.htm">Moi :)</a><br /><br />
<a href="Page_7_telechargements.htm">Téléchargements</a>
</div>

<div class="intro">
<div class="titre">Mes potes (dsl ya des bugs qui decale tout!)</div>
Ca c'est la page réservée aux copains et copines, chose importante dans ma vie. Ca va etre rempli de photos, alors j'espère que vous avez une bonne connexion :p<br />
<br />
Désolé je suis loin d'avoir mis tout le monde mais je serai ravi de le faire ! Envoyez moi une photo de vous <a href="mailto:xsonix@msn.com">LA</a> et je la mettrai !
</div>

<div class="photos">
 <table border="0" cellpadding="0" cellspacing="0">
   <tr>
     <td><img alt="" src="to%20mac%202.jpg" width="240" height="320" /></td>
     <td><img alt="" src="cedwic.jpg" width="240" height="320" /></td>
     <td><img alt="" src="laurent.jpg" width="240" height="320" /></td>
   </tr>
   <tr>
     <td>Voici Théo, un gars super cool :).<br />
   La photo a été prise au Grau du roi <br />
   où il m'avait gentilment invité</td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td colspan="2"><a href="Page_classe%201s2.htm" target="_blank"><img alt="" src="classe%201s2.jpg" width="512" height="384" border="0" /></a></td>
     <td><img alt="" src="dorian%203.jpg" width="352" height="288" border="0"/></td>
   </tr>
   <tr>
     <td colspan="2">Bon là c'est ma classe de l'année dernière. Les 1S2 de Carnot !</td>
     <td>Là c'est Dorian, bien cool lui aussi.</td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td><img alt="" src="thomas.jpg" width="240" height="320" /></td>
     <td><img alt="" src="jeremi%20guitare.jpg" width="240" height="320" /></td>
     <td><img alt="" src="camille%20et%20marie.jpg" width="240" height="320" /></td>
   </tr>
   <tr>
     <td>Voila Thomas, un pote d'enfance. On a la meme passion...l'informatique !</td>
     <td>Jérémy, il joue super bien de la guitare électrique et il manipule super bien les programmes de calculettes.</td>
     <td>Camille (gauche) et Marie (droite). Des copines de Nîmes : trop sympa...et puis trop belles aussi !</td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td><img alt="" src="elodie%202.jpg" width="240" height="320" /></td>
     <td><img alt="" src="loic%20monome%202.jpg" width="240" height="320" /></td>
     <td><img alt="" src="patinoire%20claire.jpg" width="240" height="320" /></td>
   </tr>
   <tr>
     <td>Elodie...elle fait du basket a Mably.</td>
     <td>Loïc, de ma classe aussi. Il aime bien l'informatique...je dirai meme qu'il en ai fou! Lol j'ai pris cette photo le jour du monôme c'est pour ca qu'il est recouvert de farine !</td>
     <td>Là c'est Claire, elle aussi fait du basket a Mably. Jolie...non ?</td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td><img alt="" src="melaine%20et%20malvy%202.jpg" width="320" height="240" /></td>
     <td><img alt="" src="les%20potos%20de%20basket.jpg" width="320" height="240" /></td>
     <td><img alt="" src="vanessouille.jpg" width="240" height="320" /></td>
   </tr>
   <tr>
     <td>Mélaine (a gauche) et Malvyna (a droite).</td>
     <td>Ahhh cette photo je l'adore ! Y'a tout les gars du basket. De gauche a droite en bas : Jeff, Aymeric et Gwena (belle grimace au fait ^^) et en haut : Yohan, Théo, Alex et Thibault </td>
     <td>Ahh ca c'est Vaness. La cousine d'un pote. Mimi non ? </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td><img alt="" src="toinou.jpg" width="240" height="320" /></td>
     <td><img alt="" src="nanard%204.jpg" width="240" height="320" /></td>
     <td><img alt="" src="so%20langue.jpg" width="240" height="320" /></td>
   </tr>
   <tr>
     <td>Toinouuuuuuu !! Il a l'air défoncé mais il ne l'ai pas ! Du basket lui aussi. </td>
     <td>Voila Arnaud, dis Nanard lol ! </td>
     <td>MDRRR Ca c'est Sophie. Une fille du basket elle aussi.</td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td><img alt="" src="aymeric.jpg" width="240" height="320" /></td>
     <td><img alt="" src="fred.jpg" width="320" height="240" /></td>
     <td><img alt="" src="flo%20bredin.jpg" width="352" height="288" /></td>
   </tr>
   <tr>
     <td>Aymeric, pote de lycée et de basket. </td>
     <td>Là c'est Frédérique. J'adore cette photo !! Elle aussi mignogne non ? </td>
     <td>Loool Florian, il fait le con, comme d'habitude ! </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td><img alt="" src="manu.jpg" width="320" height="240" /></td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td>Voila Manu ! Dans ma classe lui aussi.</td>
     <td> </td>
     <td> </td>
   </tr>
 </table>
</div>
</body>
</html>

theocrite · le 19 août 2004

une mise en page avec des tableaux pas bien !!

:roule: J'ai hésité à le dire, mais bon.... :ouioui:

Voici Théo, un gars super cool :)

Je confirme :eeek2:

warzi · le 20 août 2004

Haaaaaa (cri d'horreur en voyant le code)

idem pour moi

bon pourquoi le cri d'horreur :

si tu as defini une classe, tu n'as pas a rajouter le align="center" la, il doit se trouver dans la classe

pourquoi ne pas definir des saut de lignes plus grand? une ligne c'est mieux que 3 (tu pourrais même changer la taille du texte. C'est moins bien que les sauts, mais sa derange moins!!)

lol des positions absolues... pas cool. Celui qui a un petit ecran aura des images :ouioui: et celui qui a un grand ecran aura quelque chose de decale sur son ecran. Seuls ceux qui auront une même resolution d'ecran que toi seront content !

pour la taille des images, c'est mieux de la redefinir dans un logiciel de dessin (evolue si possible du genre paint c'est plus que parfait!) et de na pas presiser ces tailles dans le code

.Style5 {font-size: 14px; font-family: "Times New Roman", Times, serif; color: #FFFFFF; }

.Style10 {font-size: 14px}

pourquoi style10 n'a pas autant de proprietes que style5 ?? et ca a l'air dêtre le seul en plus. d'autant plus que, a part la couleur et la taille, le reste ce sont les options par defaut.

autre chose : evites de fixer la taille des textes "normaux", certaines personnes affichent de grands caracteres (probleme de vue, ecran,...) et risquent de ne pas savoir lire ton site donc ils se tirent direct du site!

autre details : pourquoi tant de paragraphes ??

<p class="Style11"><a href="Page%20d%27acueil.htm"><strong>Page D'acceuil </strong></a></p>

<p class="Style11"><strong><a href="Page_2_mes_sports.htm">Mes Sports</a></strong></p>

<p class="Style11"><strong><a href="Page_3_mes_potes.htm">Mes Potes</a></strong></p>

<p class="Style11"><strong><a href="Page_4_ma_musique.htm">Ma Musique</a></strong></p>

<p class="Style11"><strong><a href="Page_5_brice.htm">Brice de Nice</a></strong></p>

<p class="Style11"><strong><a href="Page_7_telechargements.htm">T&e

ne serait il pas mieux de remplacer ces saut de paragraphes pas des sauts de lignes? tu n'as peut être pas decouvert le saut de lignes <br /> ou <br> je ne sais pas lequel est le mieux mais avec DW, tu peux faire maj+enter, il te fera un saut de lignes, aussi plus propre que le changement de paragraphe :fume:

voila ce qu'etaient les principaux problemes. je prefere te dire ce qui ne va pas, afin que tu puisse apprendre plutot que de te donner un code plus propre que tu ne vas pas essayer de comprendre. :roule:

P.S. la solution que Country a donnée fonctionne mais c'est pas bien les tableaux pour la mise en page. Quand tu decord un mur chez toi, tu fais un grand cadre qui englobe tout le mur, dans lequel tu places de plus petit cadres pour organiser la position des differentes peintures (avec un beau cadre autour bien sûr) que tu vas placer ??

si tu remplaces tes tableaux par des posters de magazines la tu peux en plus les faire se chevaucher. alors si tu fais des petit cadres pour tout placer correctement c'est de la folie :eeek2:

theocrite · le 20 août 2004

tu n'as peut être pas decouvert le saut de lignes <br /> ou <br> je ne sais pas lequel est le mieux.

Le mieux, c'est <br /> qui est compatible XHTML. Donc autant prendre les bonnes habitudes dès maintenant.

Toutes les balises orphelines (ie qui ne sont pas de la forme </truc a='z' b='y'>blablabla</truc>, mais <truc a='z'>) doivent maintenant avoir une balise fermante.

Dans le cas du saut de ligne, <br> </br> ce qui sera remplacé avantageusement par <br />.

Country · le 20 août 2004

J'ai utilisé des tableaux pour placer les photos parce que je trouve que dans ce cas c'est le plus simple et le plus pratique en cas de mise à jour :ouioui:

Bien sur j'aurai pu utiliser des div mais bon...

Sonix · le 20 août 2004

oki j'ai RIEN compris ce que vous m'avez dis mais c'est parce que comme je l'ai dis je suis un noob en language internet :transpi: je vais me renseigner sur le net pour tenter de comprendre.

En tout cas merci bcp pour le code et les explications, je vous aime les gars lol! :mdr:

warzi · le 20 août 2004

J'ai utilisé des tableaux pour placer les photos parce que je trouve que dans ce cas c'est le plus simple et le plus pratique en cas de mise à jour
Bien sur j'aurai pu utiliser des div mais bon...

rien ne change point de vue structure des données, mais au niveau de la mise en page, c'est plus propre :transpi:

puis un div c mieux quand tu joues avec le php :mdr:

Country · le 20 août 2004

oui mais là il fallait faire joujou avec de l'html :vomi2:

warzi · le 21 août 2004

oui mais là il fallait faire joujou avec de l'html

autant prendre les bonnes habitudes dès maintenant.

pense au php que tu voudras utiliser qand tu te rendra compte que le html, c'st bien, mais c'est très limité

:transpi:

theocrite · le 21 août 2004

+1

Les tableaux c'est mal.

Les CSS/javascript, c'est bien.

Le php c'est bien.

Les sites compatibles w3c, c'est le top.

Country · le 21 août 2004

pense au php que tu voudras utiliser qand tu te rendra compte que le html, c'st bien, mais c'est très limité

J'utilise déjà du php, mais dans ce cas là où il n'y a qu'une page html et que la présentation est des plus minimaliste (et que je doute qu'il veuille s'encombrer de php/mysql pour mettre 3 photos en ligne) je trouve qu'un tableau convient mieu. De plus vu comme Sonix travaille pour l'instant avec dreamweaver en WYSISYG il lui sera plus simple de rajouter des cases au tableau afin de rajouter des photos plutot que de rajouter plusieurs calques et de les positionner comme il faut (surtout que dreamweaver risque de salloper tout le code).

Les tableaux c'est mal.
Les CSS/javascript, c'est bien.

Le php c'est bien.

Les sites compatibles w3c, c'est le top.

Je suis d'accord avec tout ça :transpi: (d'ailleur le code de la page que j'ai donné est valide XHTML 1.0 Transitional )

Sonix · le 22 août 2004

bon je vais me mettre au php pour mon prochain site puisque ca a l'air d'etre mieux que le HTML ( a moins qui'il y est encore mieux ??). Par contre je garde dreamweaver MX 2004 ou je prend frontpage ou un autre logiciel ??

Connexion

décalage texte avec dreamweaver

Messages recommandés

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Archivé