ugrás a tartalomhoz

Kép igazítás probléma

Karvaly84 · 2012. Jún. 20. (Sze), 06.02
Sziasztok!

Valószínűleg én vagyok az analfabéta és mivel angolul nem tudtam megfogalmazni a problémám, nem tudtam érdemi találatot kicsikarni a keresőből, így felteszem a kérdést:

Lényegében van egy konténer div 336 pixel széles belső térrel. 360(padding: 0 12px);

Ebbe a konténerbe pakolnék 7 darab 48x48-as képet ami együtt elvileg pont 336 pixel;

A Firebug-al nem mentem sokra, viszont egy outline beállításával a képeken látszik, hogy a képek között kb 2 pixel széles tér van, ami miatt az utolsó kép lecsúszik új sorba;

DOCTYPE: XHTML 1.0 Transitional

css:
  1. /* layout.css */  
  2.   
  3. html {  
  4.     min-height: 100%;  
  5. }  
  6.   
  7. body {  
  8.     margin: 0 0 0 0;  
  9.     min-height: 100%;  
  10.     font-family: sans-serif;  
  11. }  
  12.   
  13. a img {  
  14.     border: none;  
  15. }  
  16.   
  17. .float-left {  
  18.     float: left;  
  19. }  
  20.   
  21. .float-right {  
  22.     float: right;  
  23. }  
  24.   
  25. .clear-both {  
  26.     clear: both;  
  27. }  
  28.   
  29. .font-weight-bold {  
  30.     font-weight: bold;  
  31. }  
  32.   
  33. wrapper {  
  34.     min-height: 100%;  
  35. }  
  36.   
  37. #left-side, #right-side {  
  38.     position: absolute;  
  39.     top: 0;  
  40.     width: 50%;  
  41.     min-height: 100%;  
  42. }  
  43.   
  44. #left-side {  
  45.     left: 0;  
  46. }  
  47.   
  48. #right-side {  
  49.     right: 0;  
  50. }  
  51.   
  52. #left-side > .content, #right-side > .content {  
  53.     width: 360px;  
  54. }  
  55.   
  56. #left-side > .content {  
  57.     margin: 0 0 0 auto;  
  58.     text-align: center;  
  59. }  
  60.   
  61. #right-side > .content {  
  62.     margin: 0 auto 0 0;  
  63. }  
  64.   
  65. #left-side > .content > div, #right-side > .content > div {  
  66.     padding: 0 12px;  
  67. }  
html:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  5. <link type="text/css" rel="stylesheet" href="styles/style.css" />  
  6. <title>index.html</title>  
  7. </head>  
  8. <body>  
  9.     <div id="wrapper">  
  10.         <div id="left-side">  
  11.             <div class="content">  
  12.                 <div>  
  13.                     <img src="image1.jpg" width="48" height="48" />  
  14.                     <img src="image2.jpg" width="48" height="48" />  
  15.                     <img src="image3.jpg" width="48" height="48" />  
  16.                     <img src="image4.jpg" width="48" height="48" />  
  17.                     <img src="image5.jpg" width="48" height="48" />  
  18.                     <img src="image6.jpg" width="48" height="48" />  
  19.                     <img src="image7.jpg" width="48" height="48" />  
  20.                 </div>  
  21.             </div>  
  22.         </div>  
  23.         <div id="right-side">  
  24.             <div class="content"></div>  
  25.         </div>  
  26.     </div>  
  27. </body>  
  28. </html>  
‹ onmousedown onmouseup CKEDITOR Horgany ›
 ■
1

Közbe csináltam egy olyat,

Karvaly84 · 2012. Jún. 20. (Sze), 06.29
Közbe csináltam egy olyat, hogy a képeket a forráskódban egy sorba tettem:
  1. <div><img ... /><img ... /></div>  
Az eredmény az aminek lennie kéne, pont beférnek egy sorba.

Ez egyébként miért van?

Mivel az oldalt XSLT-vel generálom kivettem az output-ból az indent="yes" attribútumot, viszont így olvashatatlan a kód sajnos.
2

whitespace

Poetro · 2012. Jún. 20. (Sze), 06.57
Mivel a képek inline-block elemek, ezért megjelenik közöttük a szóköz, mint bármilyen másik inline vagy inline-block elem között. Használhatsz esetleg float-ot, vagy a XSLT-ben abban a blokkban valahogy eltávolítod a szóközöket (talán <xsl:strip-space>).
3

köszönöm

Karvaly84 · 2012. Jún. 20. (Sze), 07.37
köszönöm