Définir une largeur au-delà de laquelle le texte passe à la ligne suiv

Définir une largeur au-delà de laquelle le texte passe à la ligne suiv - HTML/CSS - Programmation

Marsh Posté le 29-10-2007 à 09:44:14    

Bonsoir à tous,
 
Je suis en train de créer un papier à lettre pour Outlook. Il s'agit en fait simplement d'une image de fond : http://information.ixelles.be/background.gif
 
Je voudrais regler les marges de sorte que le texte commence sous la bande du haut et passe à la ligne suivante juste avant la bande de droite.
 
Pour le haut, je crée le css suivant :
 
BODY
{
     margin-top: 125 px;
}
 
Mais pour la droite... je ne vois pas... J'ai pensé à margin-right, mais la taille de l'écran peut varier et la marge ne serait pas toujours la même...  
 
Une idée ?
 
--edit--
 
Il existe max-width ... mais a priori, ça ne fait rien...
 
Il existe aussi width (tout court) ça marche dans Dreamweaver mais pas dans IE7 ni dans Outlook


Message édité par zezette le 29-10-2007 à 10:48:21

---------------
"Par moment j'me d'mande si chui pas con" G. de Suresnes
Reply

Marsh Posté le 29-10-2007 à 09:44:14   

Reply

Marsh Posté le 29-10-2007 à 09:54:26    

Faudrait peut être que tu précise de quelle manière la page va s'étendre. Parce que là, je serais quand même tenté de répondre par un margin-right...


---------------
-- Debian -- Le système d'exploitation universel | Le gras c'est la vie! | /(bb|[^b]{2})/
Reply

Marsh Posté le 29-10-2007 à 10:07:52    

Ben margin-right ca veut dire que la marge de droite fait n pixels  
 
Avec une marge de droite à 500 px, si tu regardes sur un écran en 1024*768, la taille du texte sera de 524 px mais sur un écran en 1600*1200, elle sera de 1100 px.
 
Dans le premier cas, on est bien dans la zone blanche, mais dans le second, on passe sur la colonne brune de droite...


---------------
"Par moment j'me d'mande si chui pas con" G. de Suresnes
Reply

Marsh Posté le 29-10-2007 à 10:51:32    

dwogsi a écrit :

Faudrait peut être que tu précise de quelle manière la page va s'étendre.


Il me sembait que ma demande était pourtant clair...
Soit tu explique comment elle s'étend, soit tu donne un lien vers la page, soit tu lache le code ici!
 
Le code ou un lien serait quand même mieux!


---------------
-- Debian -- Le système d'exploitation universel | Le gras c'est la vie! | /(bb|[^b]{2})/
Reply

Marsh Posté le 29-10-2007 à 10:59:47    

Je ne comprend toujours pas la question... donc voilà le code :
 

Code :
  1. <HTML>
  2. <HEAD>
  3. <STYLE>
  4. body {
  5. font-family: Arial;
  6. font-size: 10pt;
  7. color: 000000;
  8. margin-top: 125px;
  9. margin-left: 25px;
  10. background-position: top left;
  11. background-repeat: no-repeat;
  12. }
  13. </STYLE>
  14. </HEAD>
  15. <BODY background="background.gif">
  16. Le contenu
  17. </BODY>
  18. </HTML>


 


Message édité par zezette le 29-10-2007 à 11:01:24

---------------
"Par moment j'me d'mande si chui pas con" G. de Suresnes
Reply

Marsh Posté le 29-10-2007 à 11:12:39    

Donc si j'ai bien compris tu as une image de fond qui reste à gauche. Et tu aimerais que le texte reste dans le cadre blanc de l'image en question.

 

Si c'est bien cela, il te suffit de rajouter un conteneur (genre div) dans ta page. Supposons que ton imagefait 300px de largeur, que la partie haute fait 125px et que la partie droite faite 100px :

 
Code :
  1. <html>
  2. <head>
  3.  <style type="text/css">
  4.  body {
  5.   font-family: Arial,sans-serif;
  6.   font-size: 10pt;
  7.   color: #000;
  8.   background-position: top left;
  9.   background-repeat: no-repeat;
  10.   background-image: url('background.gif');
  11.  }
  12.  #content
  13.  {
  14.   margin-top:125px; /* Hauteur de la bande du haut */
  15.   width:300px;  /* Largeur de l'image de fond */
  16.   padding-right:100px; /* largeur de la artie droite */
  17.  }
  18.  </style>
  19. </head>
  20. <body>
  21.  <div id="content">
  22.   <!-- Le contenu -->
  23.  </div>
  24. </body>
  25. </html>
 

Comme ça je pense que ça devrait aller. A tester quand même, j'ai fait ça de tête.


Message édité par dwogsi le 29-10-2007 à 11:13:29

---------------
-- Debian -- Le système d'exploitation universel | Le gras c'est la vie! | /(bb|[^b]{2})/
Reply

Marsh Posté le 29-10-2007 à 11:33:05    

Ha ben oui, tout simplement... :) En fait avant de poster, j'avais essayé avec un tableau mais outlook acceptait pas...  
 
merci bcp ;)


---------------
"Par moment j'me d'mande si chui pas con" G. de Suresnes
Reply

Sujets relatifs:

Leave a Replay

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