Tom's Guide > Forum > Programmation > (HTML & CSS , découpe d'un design, sa bug sous IE comme sur FF :(
(HTML & CSS , découpe d'un design, sa bug sous IE comme sur FF :( - Programmation
TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Répondre
Mot :    Pseudo :           
 
Lowi   03-11-2005 à 02:41:53

Bonjour, une personne a découper le design de mon futur portfolio mais apparement la découpe est un peux mal faite elle bug :

Voyez vous même.

Aurriez vous une idée d'ou viens le problème ?

Merci d'avance. :)

Répondre
Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.
casimarc   03-11-2005 à 15:34:23
- 0 +

bah je ne sais pas trop ce qui etait prevu au départ mais en tout cas :
les largeurs pour les images de fond debutMenu et finMenu me semble un peu grandes :-)
le float:left sur le div droite est bizarre aussi.
pour le centrage du div sur IE tu peux mettre un div autour en text-align:center et le mettre en left sur ton global.

en modifiant ca j'obtient un affichage correct mais je ne sais pas si c'est ce que tu veux !

Répondre à casimarc
Lowi   03-11-2005 à 16:42:52
- 0 +

Tu serrais me l'envoyer ? que je vois ...

Répondre à Lowi
Lowi   03-11-2005 à 16:43:14
- 0 +

Tu serrais me l'envoyer ? que je vois ...

Répondre à Lowi
Lowi   03-11-2005 à 21:11:07
- 0 +

Je suis désolé d'insisté mais je suis vraiment stressé, j'ai plus beaucoup de temps pour travailler dessus, donc faut que je règle ce problèmeau plus vite :(

Répondre à Lowi
gccyrillus   04-11-2005 à 00:49:51
- 0 +

bonjour,
2 erreurs:
le corp ou contenu n'a pas besoin d'etre mis en float, le menu seul suffit.
et tes div de 440px de debut et fin de menu !!??? pour un menu de 184px de large c'est un peu exagere: :)

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  3. <head>
  4.         <title>###</title>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.         <link rel="shortcut icon" href="favicon.gif" type="image/ico" />
  7.     <style type="text/css">
  8. body { width: 624px; margin: auto; margin-top: 40px; background-color:#fff;
  9. font-family: Arial, Verdana, Helvetica, sans-serif; color:#000; }
  11. p { padding-top: 5px; font-size: 10pt; margin-left: 15px; margin-right: 15px; }
  12. a { color: #C1D8E1; font-size: 10pt; }
  13. a:hover { color: #86A5B2; text-decoration: overline; }
  15. #global { margin:0; width: 624px;
  16. background-image: url(http://www.cecilestudio.com/decoupe/6/images/extensible.gif); background-repeat: repeat-y; }
  18. #header { width: 624px; height: 173px;
  19. background-image: url(http://www.cecilestudio.com/decoupe/6/images/header.gif); background-repeat: no-repeat; }
  21. #header h1 { font-size: 11pt; margin-left: 250px; padding-top: 145px; }
  23. #gauche { float: left; width: 184px; }
  25. .debutmenu { margin:0; padding-top: 5px; margin-top: 30px;  width: 184px;
  26. background-image: url(http://www.cecilestudio.com/decoupe/6/images/tiretsmenu.gif); background-repeat: no-repeat; }
  27. .finmenu { margin:0; padding-top: 5px; margin-top: 30px;  width: 184px; 
  28. background-image: url(http://www.cecilestudio.com/decoupe/6/images/tiretsmenu.gif); background-repeat: no-repeat; }
  30. ul.menu { padding:0 ; list-style-type: none; text-align:center;margin:0;}
  32. #droite {  margin-left: 190px}
  33. #droite h1 { font-size: 11pt; margin-left: 65px; }
  35. .dernierecrea { margin:0; padding-top: 15px; width: 440px;
  36. background-image: url(http://www.cecilestudio.com/decoupe/6/images/tiretspartie.gif); background-repeat: no-repeat;  }
  37. .dernierecrea  p { margin-top: 0; }
  39. #footer { clear: both; width: 624px; height: 58px;
  40. background-image: url(http://www.cecilestudio.com/decoupe/6/images/footer.gif); background-repeat: no-repeat; }
  41. </style>
  42. </head>
  43. <body>
  45.     <div id="global">
  47.         <div id="header">
  50.             <h1> >> Edito</h1>
  52.         </div>
  54.             <div id="gauche">
  55.                 <div class="debutmenu"></div>
  56.                     <ul class="menu">
  57.                         <li><a href="#">Lien</a></li>
  58.                         <li><a href="#">Lien</a></li>
  60.                         <li><a href="#">Lien</a></li>
  61.                         <li><a href="#">Lien</a></li>
  62.                         <li><a href="#">Lien</a></li>
  63.                         <li><a href="#">Lien</a></li>
  64.                     </ul>
  65.                 <div class="finmenu"></div>
  68.             </div>
  71.             <div id="droite">
  72.                         <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
  73.                         invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
  74.                         accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  75.                         sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
  76.                         sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
  77.                         aliquyam erat, sed diam voluptua.</p>
  78.                 <h1> >> Dernières créations</h1>
  79.                     <div class="dernierecrea">
  81.                         <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
  82.                         invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
  83.                         accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  84.                         sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
  85.                         sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
  86.                         aliquyam erat, sed diam voluptua.</p>
  87.                     </div>
  88.             </div>
  91.         <div id="footer"></div>
  93.     </div>
  95. </body>
  96. </html>



tu noteras dans le css les 3 modif, des largeurs remise a 184px a la place de tes 440px et le float qui disparait pour ton #droite.

j'aime bien tes design.

a plus

edit, j'en ai profiter aussi pour toucher a ton css pour ul

Répondre à gccyrillus
Lowi   04-11-2005 à 01:17:27
- 0 +

Merci a toi :) le problème c'est que la découpe que je vous avais présenté n'est pas de moi donc maintenant comment puis je faire pour importer la page ( je travaille sur namo webeditor 5.5 ) ?

Répondre à Lowi
SiM07   04-11-2005 à 09:30:06
- 0 +

On dit pas FF mais Fx

Répondre à SiM07
gccyrillus   04-11-2005 à 16:07:03
- 0 +

bonjour,
je ne connais pas ton editeur web, a vrai dire je bricole avec le bloc-notes de windows (meme mes script php, c'est une histoire d'habitude )
Mais si ta page en lien est editable il te suffit alors de recopier la partie css de la page que je t'ai remis, dans le fichier css lié a ta page .
suis-je clair , lol ?
...
ta page en lien est lié au fichier "style.css" dans lequelle se trouve les attribut et valeurs des style appliqué a ta page.
edite ce fichier au blocnotes et remplace son contenu par ceci:

Code :
  1. body { width: 624px; margin: auto; margin-top: 40px; background-color:#fff;
  2. font-family: Arial, Verdana, Helvetica, sans-serif; color:#000; }
  4. p { padding-top: 5px; font-size: 10pt; margin-left: 15px; margin-right: 15px; }
  5. a { color: #C1D8E1; font-size: 10pt; }
  6. a:hover { color: #86A5B2; text-decoration: overline; }
  8. #global { margin:0; width: 624px;
  9. background-image: url(images/extensible.gif); background-repeat: repeat-y; }
  11. #header { width: 624px; height: 173px;
  12. background-image: url(images/header.gif); background-repeat: no-repeat; }
  14. #header h1 { font-size: 11pt; margin-left: 250px; padding-top: 145px; }
  16. #gauche { float: left; width: 184px; }
  18. .debutmenu { margin:0; padding-top: 5px; margin-top: 30px;  width: 184px;
  19. background-image: url(images/tiretsmenu.gif); background-repeat: no-repeat; }
  20. .finmenu { margin:0; padding-top: 5px; margin-top: 30px;  width: 184px; 
  21. background-image: url(images/tiretsmenu.gif); background-repeat: no-repeat; }
  23. ul.menu { padding:0 ; list-style-type: none; text-align:center;margin:0;}
  25. #droite {  margin-left: 190px}
  26. #droite h1 { font-size: 11pt; margin-left: 65px; }
  28. .dernierecrea { margin:0; padding-top: 15px; width: 440px;
  29. background-image: url(images/tiretspartie.gif); background-repeat: no-repeat;  }
  30. .dernierecrea  p { margin-top: 0; }
  32. #footer { clear: both; width: 624px; height: 58px;
  33. background-image: url(images/footer.gif); background-repeat: no-repeat; }



j'espere que cela te suffira


<edit> et pis moi je dis aussi FF (ou RF pour Renard de Feu) :ptdr: lalalere. Sans rancune, mais genre troll flooder...

Répondre à gccyrillus
Créer un nouveau sujet Répondre
Tom's Guide > Forum > Programmation > (HTML & CSS , découpe d'un design, sa bug sous IE comme sur FF :(
Aller à :

Il y a 251 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Plan du forum
Forum Bestofmedia ©
2000-2009 Bestofmedia Group
Page générée en 0,242 secondes
Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler
Liens