Se connecter avec
S'enregistrer | Connectez-vous

(HTML & CSS , découpe d'un design, sa bug sous IE comme sur FF :(

Dernière réponse : dans Programmation
Lassé par la pub ? Créez un compte

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 !

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: :) 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" 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; }
  10.  
  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; }
  14.  
  15. #global { margin:0; width: 624px; 
  16. background-image: url(<a href="http://www.cecilestudio.com/decoupe/6/images/extensible.gif" target="_blank">http://www.cecilestudio.com/decoupe/6/images/extensible...</a>); background-repeat: repeat-y; }
  17.  
  18. #header { width: 624px; height: 173px; 
  19. background-image: url(<a href="http://www.cecilestudio.com/decoupe/6/images/header.gif" target="_blank">http://www.cecilestudio.com/decoupe/6/images/header.gif</a>); background-repeat: no-repeat; }
  20.  
  21. #header h1 { font-size: 11pt; margin-left: 250px; padding-top: 145px; }
  22.  
  23. #gauche { float: left; width: 184px; } 
  24.  
  25. .debutmenu { margin:0; padding-top: 5px; margin-top: 30px;  width: 184px; 
  26. background-image: url(<a href="http://www.cecilestudio.com/decoupe/6/images/tiretsmenu.gif" target="_blank">http://www.cecilestudio.com/decoupe/6/images/tiretsmenu...</a>); background-repeat: no-repeat; } 
  27. .finmenu { margin:0; padding-top: 5px; margin-top: 30px;  width: 184px;  
  28. background-image: url(<a href="http://www.cecilestudio.com/decoupe/6/images/tiretsmenu.gif" target="_blank">http://www.cecilestudio.com/decoupe/6/images/tiretsmenu...</a>); background-repeat: no-repeat; }
  29.  
  30. ul.menu { padding:0 ; list-style-type: none; text-align:center;margin:0;}
  31.  
  32. #droite {  margin-left: 190px} 
  33. #droite h1 { font-size: 11pt; margin-left: 65px; }
  34.  
  35. .dernierecrea { margin:0; padding-top: 15px; width: 440px; 
  36. background-image: url(<a href="http://www.cecilestudio.com/decoupe/6/images/tiretspartie.gif" target="_blank">http://www.cecilestudio.com/decoupe/6/images/tiretspart...</a>); background-repeat: no-repeat;  }
  37. .dernierecrea  p { margin-top: 0; }
  38.  
  39. #footer { clear: both; width: 624px; height: 58px; 
  40. background-image: url(<a href="http://www.cecilestudio.com/decoupe/6/images/footer.gif" target="_blank">http://www.cecilestudio.com/decoupe/6/images/footer.gif</a>); background-repeat: no-repeat; }
  41. </style>
  42. </head>
  43. <body>
  44.  
  45. 	<div id="global">
  46.  
  47. 		<div id="header">
  48.  
  49.  
  50. 			<h1> >> Edito</h1>
  51.  
  52. 		</div>
  53.  
  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>
  59.  
  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>
  66.  
  67.  
  68. 			</div>
  69.  
  70.  
  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">
  80.  
  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>
  89.  
  90.  
  91. 		<div id="footer"></div>
  92.  
  93. 	</div>
  94.  
  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

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:

  1. body { width: 624px; margin: auto; margin-top: 40px; background-color:#fff;
  2. font-family: Arial, Verdana, Helvetica, sans-serif; color:#000; }
  3.  
  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; }
  7.  
  8. #global { margin:0; width: 624px;
  9. background-image: url(images/extensible.gif); background-repeat: repeat-y; }
  10.  
  11. #header { width: 624px; height: 173px;
  12. background-image: url(images/header.gif); background-repeat: no-repeat; }
  13.  
  14. #header h1 { font-size: 11pt; margin-left: 250px; padding-top: 145px; }
  15.  
  16. #gauche { float: left; width: 184px; }
  17.  
  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; }
  22.  
  23. ul.menu { padding:0 ; list-style-type: none; text-align:center;margin:0;}
  24.  
  25. #droite {  margin-left: 190px}
  26. #droite h1 { font-size: 11pt; margin-left: 65px; }
  27.  
  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; }
  31.  
  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...
Lassé par la pub ? Créez un compte

Répondre Créer un nouveau sujet

Tom's guide dans le monde