Retour à Forum de site web

Space Layout Unwated dans DIV est une douleur dans l'Johnson!

  • cerebralailment
  • Newbie
  • Newbie
  • No Avatar
  • Inscription: Jan 20, 2009
  • Messages: 9
  • Status: Offline

Message Novembre 4th, 2010, 11:29 am

Salutations,

J'ai récemment conçu un site Web - pour une raison que je n'arrive pas à comprendre pourquoi j'ai un peu grosse (comme 2px) de l'espace sur le côté droit de quelques-unes des pages - sa me rend dingue friggen - Je déteste les petites choses de ce genre qui vous faire passer crazzy pendant quelques jours avant de réaliser à quel point vous étiez stupide et supprimer le type de petit-o ou ce qu'il ne faut.

Voici un exemple de ce que je parle et #058;
mainejunkyards (dot) net

Voici la source:
Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="w3/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Find Used Parts Now! Fast, easy, &amp; simple! - MaineJunkYards</title>
<META name="description" content="Find & Locate Maine Junk Yards Near You! MaineJunkYards" />
<META name="keywords" content="maine, junkyards, junk, yards, salvage, scrap, metal, cars, trucks, used, parts, auotmotive, chevy, ford, dodge, honda, acura, toyota, gmc, lexus, audi, bmw, tires, rims, shell" />
<style type="text/css">
<!--
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #000;
    background-image:url(../img/background.png);
    background-repeat:repeat-y;
    background-position: top center;
    background-color: #3ba13b;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;     /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
    padding-right: 15px;
    padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
    border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
    color: #42413C;
    text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
    color: #6E6C64;
    text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
    text-decoration: none;
}

/* ~~ this fixed width container surrounds all other elements ~~ */
.container {
    width: 960px;
    background: #FFF;
    margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}

/* ~~ This is the layout information. ~~

1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.

*/
.content {

    padding-left: 1px;
}
.quote { padding: 6px 4px 4px 6px; background-color:#9F6;
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
    float: left;
    margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
body,td,th {
    font-family: Arial, Helvetica, sans-serif;
}
-->
</style>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
 if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<script type="text/javascript">

 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-19201113-1']);
 _gaq.push(['_trackPageview']);

 (function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'www') + '.google-analytics/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();

</script></head>

<body onload="MM_preloadImages('../img/over/images/locate.gif','../img/over/images/MNKJKYRDSlayout_03.gif','../img/over/images/MNKJKYRDSlayout_04.gif','../img/over/images/MNKJKYRDSlayout_05.gif')">

<div class="container">
 <div class="content">
         
      <div class="head"> <a href="index.html"><img src="../img/images/MNKJKYRDSlayout_01.gif" width="278" height="287" /></a><a href="locateme.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('locate','','../img/over/images/locate.gif',1)"><img src="../img/images/locate.gif" alt="Locate Maine Junk Yards" name="locate" width="167" height="287" border="0" id="locate" /></a><a href="usedparts.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('usedparts','','../img/over/images/MNKJKYRDSlayout_03.gif',1)"><img src="../img/images/MNKJKYRDSlayout_03.gif" alt="Find Used Parts" name="usedparts" width="168" height="287" border="0" id="usedparts" /></a><a href="selljunkcars.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('junk cars','','../img/over/images/MNKJKYRDSlayout_04.gif',1)"><img src="../img/images/MNKJKYRDSlayout_04.gif" alt="Sell Junk Cars" name="junk cars" width="168" height="287" border="0" id="junk cars" /></a><a href="scrapmetal.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('recyclemetal','','../img/over/images/MNKJKYRDSlayout_05.gif',1)"><img src="../img/images/MNKJKYRDSlayout_05.gif" alt="Recycle Metal" name="recyclemetal" width="178" height="287" border="0" id="recyclemetal" /></a></div>
    <div class="quote">
     <center>
     <b>The Used Part Database is Currently Under Development. Projected Completion Date - January 2011.</b>
     </center>
    </div>
    <div class="mainbody">
   <h3>Used Parts Networking - Sell - Buy - Locate!</h3>
   <h3>Search Our Online Inventory - Coming Soon</h3>
   
    <p>    Search our online inventory of used car parts. Our collection is always growing as we find new & useful product. All items are sold as-is and are presumed to be in working order before removed. Shipping & local pick-up is availbile. Cash & Credit Cards Only.    </p>
   <h3>Keep An Eye Out
    Wanted Ads</h3>
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
     <tr>
      <td width="5%" bgcolor="#009900"><strong>Year</strong></td>
      <td width="6%" bgcolor="#009900"><strong>Make</strong></td>
      <td width="9%" bgcolor="#009900"><strong>Model</strong></td>
      <td width="28%" bgcolor="#009900"><strong>Part Description</strong></td>
      <td width="13%" bgcolor="#009900"><strong>Price</strong></td>
      <td width="39%" bgcolor="#009900"><strong>Contact Information</strong></td>
    </tr>
     <tr>
      <td>1998</td>
      <td>GMC</td>
      <td>1500 SL<br />
      Ext Cab</td>
      <td>Pair of Rust Free Doors</td>
      <td>150.00</td>
      <td><a href="mailto:nchenevert@gmail">N. Chenevert</a><br />
       Durham, ME
       <br /></td>
     </tr>
     <tr>
      <td bgcolor="#CCCCCC">1997+</td>
      <td bgcolor="#CCCCCC">Acura</td>
      <td bgcolor="#CCCCCC">Integra GSR</td>
      <td bgcolor="#CCCCCC">Complete Engine Swap</td>
      <td bgcolor="#CCCCCC">1,000.00</td>
      <td bgcolor="#CCCCCC"><a href="mailto:IdesignedYou@Gmail">J. Leighton</a><br />
       Pownal, ME<br /></td>
     </tr>
     <tr>
      <td>Your</td>
      <td>Wanted</td>
      <td>Ad</td>
      <td>Goes</td>
      <td>Here</td>
      <td>FREE!</td>
     </tr>
   </table>
</div>
         <div class="footer"><center>
        <font size="-1">1-207-449-2288 &#8226; <a href="mailto:&quot;iDesignedYou@Gmail&quot;">iDesignedYou@Gmail</a> &#8226; <a href="sitemap.html" title="Site Map" target="_blank">Site Map</a><br />
        &copy; 2010 MaineJunkYards, All Rights Reserved.<br /><a href="ourdisclaimer/?i=MaineJunkYards" target="_blank">
        <img src="ourdisclaimer/ourdisclaimer.gif" alt="Our Disclaimer"
width="80" height="15" border="0" /></a><br />
        </font>
   </center>
    </div>
 </div>
<!-- end .container --></div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="w3/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Find Used Parts Now! Fast, easy, &amp; simple! - MaineJunkYards</title>
  6. <META name="description" content="Find & Locate Maine Junk Yards Near You! MaineJunkYards" />
  7. <META name="keywords" content="maine, junkyards, junk, yards, salvage, scrap, metal, cars, trucks, used, parts, auotmotive, chevy, ford, dodge, honda, acura, toyota, gmc, lexus, audi, bmw, tires, rims, shell" />
  8. <style type="text/css">
  9. <!--
  10. body {
  11.     font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
  12.     margin: 0;
  13.     padding: 0;
  14.     color: #000;
  15.     background-image:url(../img/background.png);
  16.     background-repeat:repeat-y;
  17.     background-position: top center;
  18.     background-color: #3ba13b;
  19. }
  21. /* ~~ Element/tag selectors ~~ */
  22. ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
  23.     padding: 0;
  24.     margin: 0;
  25. }
  26. h1, h2, h3, h4, h5, h6, p {
  27.     margin-top: 0;     /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
  28.     padding-right: 15px;
  29.     padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
  30. }
  31. a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
  32.     border: none;
  33. }
  34. /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
  35. a:link {
  36.     color: #42413C;
  37.     text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
  38. }
  39. a:visited {
  40.     color: #6E6C64;
  41.     text-decoration: underline;
  42. }
  43. a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
  44.     text-decoration: none;
  45. }
  47. /* ~~ this fixed width container surrounds all other elements ~~ */
  48. .container {
  49.     width: 960px;
  50.     background: #FFF;
  51.     margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
  52. }
  54. /* ~~ This is the layout information. ~~
  56. 1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
  58. */
  59. .content {
  61.     padding-left: 1px;
  62. }
  63. .quote { padding: 6px 4px 4px 6px; background-color:#9F6;
  64. }
  65. /* ~~ miscellaneous float/clear classes ~~ */
  66. .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
  67.     float: right;
  68.     margin-left: 8px;
  69. }
  70. .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
  71.     float: left;
  72.     margin-right: 8px;
  73. }
  74. .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
  75.     clear:both;
  76.     height:0;
  77.     font-size: 1px;
  78.     line-height: 0px;
  79. }
  80. body,td,th {
  81.     font-family: Arial, Helvetica, sans-serif;
  82. }
  83. -->
  84. </style>
  85. <script type="text/javascript">
  86. function MM_swapImgRestore() { //v3.0
  87.  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
  88. }
  89. function MM_preloadImages() { //v3.0
  90.  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  91.   var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  92.   if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  93. }
  95. function MM_findObj(n, d) { //v4.01
  96.  var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  97.   d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  98.  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  99.  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  100.  if(!x && d.getElementById) x=d.getElementById(n); return x;
  101. }
  103. function MM_swapImage() { //v3.0
  104.  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  105.   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
  106. }
  107. </script>
  108. <script type="text/javascript">
  110.  var _gaq = _gaq || [];
  111.  _gaq.push(['_setAccount', 'UA-19201113-1']);
  112.  _gaq.push(['_trackPageview']);
  114.  (function() {
  115.   var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  116.   ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'www') + '.google-analytics/ga.js';
  117.   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  118.  })();
  120. </script></head>
  122. <body onload="MM_preloadImages('../img/over/images/locate.gif','../img/over/images/MNKJKYRDSlayout_03.gif','../img/over/images/MNKJKYRDSlayout_04.gif','../img/over/images/MNKJKYRDSlayout_05.gif')">
  124. <div class="container">
  125.  <div class="content">
  126.          
  127.       <div class="head"> <a href="index.html"><img src="../img/images/MNKJKYRDSlayout_01.gif" width="278" height="287" /></a><a href="locateme.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('locate','','../img/over/images/locate.gif',1)"><img src="../img/images/locate.gif" alt="Locate Maine Junk Yards" name="locate" width="167" height="287" border="0" id="locate" /></a><a href="usedparts.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('usedparts','','../img/over/images/MNKJKYRDSlayout_03.gif',1)"><img src="../img/images/MNKJKYRDSlayout_03.gif" alt="Find Used Parts" name="usedparts" width="168" height="287" border="0" id="usedparts" /></a><a href="selljunkcars.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('junk cars','','../img/over/images/MNKJKYRDSlayout_04.gif',1)"><img src="../img/images/MNKJKYRDSlayout_04.gif" alt="Sell Junk Cars" name="junk cars" width="168" height="287" border="0" id="junk cars" /></a><a href="scrapmetal.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('recyclemetal','','../img/over/images/MNKJKYRDSlayout_05.gif',1)"><img src="../img/images/MNKJKYRDSlayout_05.gif" alt="Recycle Metal" name="recyclemetal" width="178" height="287" border="0" id="recyclemetal" /></a></div>
  128.     <div class="quote">
  129.      <center>
  130.      <b>The Used Part Database is Currently Under Development. Projected Completion Date - January 2011.</b>
  131.      </center>
  132.     </div>
  133.     <div class="mainbody">
  134.    <h3>Used Parts Networking - Sell - Buy - Locate!</h3>
  135.    <h3>Search Our Online Inventory - Coming Soon</h3>
  136.    
  137.     <p>    Search our online inventory of used car parts. Our collection is always growing as we find new & useful product. All items are sold as-is and are presumed to be in working order before removed. Shipping & local pick-up is availbile. Cash & Credit Cards Only.    </p>
  138.    <h3>Keep An Eye Out
  139.     Wanted Ads</h3>
  140.   <table width="100%" border="0" cellspacing="0" cellpadding="0">
  141.      <tr>
  142.       <td width="5%" bgcolor="#009900"><strong>Year</strong></td>
  143.       <td width="6%" bgcolor="#009900"><strong>Make</strong></td>
  144.       <td width="9%" bgcolor="#009900"><strong>Model</strong></td>
  145.       <td width="28%" bgcolor="#009900"><strong>Part Description</strong></td>
  146.       <td width="13%" bgcolor="#009900"><strong>Price</strong></td>
  147.       <td width="39%" bgcolor="#009900"><strong>Contact Information</strong></td>
  148.     </tr>
  149.      <tr>
  150.       <td>1998</td>
  151.       <td>GMC</td>
  152.       <td>1500 SL<br />
  153.       Ext Cab</td>
  154.       <td>Pair of Rust Free Doors</td>
  155.       <td>150.00</td>
  156.       <td><a href="mailto:nchenevert@gmail">N. Chenevert</a><br />
  157.        Durham, ME
  158.        <br /></td>
  159.      </tr>
  160.      <tr>
  161.       <td bgcolor="#CCCCCC">1997+</td>
  162.       <td bgcolor="#CCCCCC">Acura</td>
  163.       <td bgcolor="#CCCCCC">Integra GSR</td>
  164.       <td bgcolor="#CCCCCC">Complete Engine Swap</td>
  165.       <td bgcolor="#CCCCCC">1,000.00</td>
  166.       <td bgcolor="#CCCCCC"><a href="mailto:IdesignedYou@Gmail">J. Leighton</a><br />
  167.        Pownal, ME<br /></td>
  168.      </tr>
  169.      <tr>
  170.       <td>Your</td>
  171.       <td>Wanted</td>
  172.       <td>Ad</td>
  173.       <td>Goes</td>
  174.       <td>Here</td>
  175.       <td>FREE!</td>
  176.      </tr>
  177.    </table>
  178. </div>
  179.          <div class="footer"><center>
  180.         <font size="-1">1-207-449-2288 &#8226; <a href="mailto:&quot;iDesignedYou@Gmail&quot;">iDesignedYou@Gmail</a> &#8226; <a href="sitemap.html" title="Site Map" target="_blank">Site Map</a><br />
  181.         &copy; 2010 MaineJunkYards, All Rights Reserved.<br /><a href="ourdisclaimer/?i=MaineJunkYards" target="_blank">
  182.         <img src="ourdisclaimer/ourdisclaimer.gif" alt="Our Disclaimer"
  183. width="80" height="15" border="0" /></a><br />
  184.         </font>
  185.    </center>
  186.     </div>
  187.  </div>
  188. <!-- end .container --></div>
  189. </body>
  190. </html>


Pouvez-vous m'aider souligner que peu de taches il thats quelque part m'empêche de passer? :|
Je vous remercie,
Cerebralailment
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Novembre 4th, 2010, 11:29 am

  • graphixboy
  • Control + Z
  • Mastermind
  • Avatar de l’utilisateur
  • Inscription: Juil 11, 2005
  • Messages: 1828
  • Loc: In the Great White North
  • Status: Offline

Message Novembre 4th, 2010, 9:03 pm

quelque chose dans votre mise en page est de quelques pixels plus large que le 960px spécifié pour. contenant Si vous faites un peu plus large (963px), il le fixe. Je suppose que le problème est dans la largeur des images dans votre nav mais je peux me tromper.
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 2 messages
  • Utilisateurs parcourant ce forum: roelof et 120 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC