Version complète: sur le forum Webmaster Hub : Problême de marge !
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net
Matt37
dimanche 8 janvier 2006 à 11:53
Bonjour,
En effet nous recommencons le design de notre site !
Et débute assez mal pour le moment car on bute sur ceci, il y a une marge entre l'image et le block en bas comme en haut et je n'arrive pas à y remedier !
D'avance merci de vos réponses !

http://240plan.ovh.net/~girondin/index3.php

Voici le code :
CODE
<table width="201" border="0" cellspacing="0">
 <tr>
   <td colspan="5"><img src="new/design/haut_breve.jpg" width="188" height="13" display: block;></td>
 </tr>
 <tr>
   <td><img src="new/design/menu_gauche.jpg" width="9" height="185"></td>
   <td width="125">&nbsp;</td>
   <td><img src="new/design/droite_breve.jpg" width="55" height="186"></td>
 </tr>
 <tr><td height="21" colspan="6"><div align="left"></div>
    &nbsp;<img src="new/design/bas_breve.jpg" width="137" height="11" align="top" display: block;></div></td>
 </tr>
</table>
sarc
dimanche 8 janvier 2006 à 12:53
Bonjour,

Malheur ! Ce mélange de CSS, de HTML, de tout plein de choses, juste pour une petite image ? Raah non ! Me fais pas ça !
display=block en plein milieu du html !

Non sérieusement, là ça va pas du tout, avant même de regarder le site, ça se sent, ça fonctionnera pas...

En css, il te faudrait deux lignes !
CODE
<div class='cadre'>Texte</div>

Ca c'est la ligne html...
CODE
.cadre{background:url('machin.gif') no-repeat; padding:22px;}

Voilà la ligne en CSS...

Voilà encore une preuve de l'efficacité du CSS par rapport aux tableaux de tableaux de tableaux d'une table imbriquée dans une autre... wink.gif
Matt37
dimanche 8 janvier 2006 à 13:01
Merci de ta réponse Sarc !
Donc s je comprends bien il me faut créer un fichier style.css avec dans ce fichier ces deux lignes avec le nom de l'image du haut? pour que cela se règle !

D'avance merci de ta réponse !
Un peu newbie encore ! hypocrite.gif
sarc
dimanche 8 janvier 2006 à 13:05
Tu dois surtout apprendre le CSS, tu trouveras beaucoup de liens dans la partie consacrée au html+CSS wink.gif
Tu crées une image avec le cadre entier, plus besoin de le découper.. tu crées un fichier style.css avec la ligne css que je t'ai donné, tu mets la ligne html dans ton fichier html, avec dans ton head un appel à la feuille de style, et puis tu t'adaptes après, mais normalement ça devrait marcher pas trop mal wink.gif
Matt37
dimanche 8 janvier 2006 à 13:08
Encore merci de tes éclaircissements, je vais m'y mettre ! wink.gif
Matt37
dimanche 8 janvier 2006 à 13:35
Maintenant que j'ai réussi à faire la table grâce à ton aide, il faut que je réussissse à intégrer les brêves dedans chose complexe aussi ! rolleyes.gif
sarc
dimanche 8 janvier 2006 à 13:40
Bien tu joues sur le padding, comme tu as essayé, puis tu joues sur height (tu mets la hauteur de l'image en height:...px), etc... Tu peux tout modifier en CSS, la couleur, la taille, l'emplacement, etc... wink.gif
Matt37
dimanche 8 janvier 2006 à 14:39
J'arrive pas à recentrer ce fichu texte ! huh.gif

J'ai changer le padding, bon ca doit pas être ca, après j'ai essayer de mettre d'autres chose style margin, mais c'est pas ça non plus, je cherche dans le site qui apprend le CSS mais je voit pas ! huh.gif
sarc
dimanche 8 janvier 2006 à 14:42
Je sais pas comment tu veux le placer, donc c'est pas facile de t'aider...
Sur ta page là si tu mets le style :
CODE
.cadre{background:url('entier.gif') no-repeat; position:absolute;text-align:center;height:180px;width:180px;padding-right:30px;

Tu auras un texte à peu près centré en largeur, suffit de jouer sur le padding après..., et mettre les tailles qu'il faut en hauteur et largeur !

Ensuite pour centrer en hauteur, si tu connais la taille du texte et la taille de ta div, ça devrait le faire sans souci.. !
Matt37
dimanche 8 janvier 2006 à 14:50
Merci !

En fait ce que je veux c'est centrer le texte dans la table que la distance soit égale de chaque coté pour après rajouter une iframe !
sarc
dimanche 8 janvier 2006 à 14:54
ah oui avec une iframe ça doit être un poil plus compliqué...
Hum
CODE
.cadre{background:url('entier.gif') no-repeat; position:absolute;text-align:center;height:180px;width:180px;}

.ifra{margin:auto;}


Dans ton html tu mets iframe class='ifra' pour que ça soit pris en compte

Bon après je vais pas pouvoir créer ta page à ta place, il faut que tu essayes de mettre tes éléments, de tester des trucs, et après de donner une url de ta page pour pouvoir modifier s'il y a un petit souci wink.gif
Matt37
dimanche 8 janvier 2006 à 15:21
Merci beaucoup sarc, j'y suis enfin arrivé, en grande partie grâce à toi !

Encore merci ! wink.gif
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.