2009-09-11 6 views
0

이미지를 보입니다. 테두리가 생겨서 이미지가 더 멋지게 보입니다. 오른쪽 상단, 위쪽, 왼쪽 위, 오른쪽, 왼쪽, 아래쪽, 오른쪽 아래, 왼쪽 아래, 아래쪽의 이미지가있는 이미지를 잘라 냈습니다.이미지 테두리가 제대로 정렬되지 않습니다.

테두리는 모서리를 제외하고 모두 훌륭합니다. 나 좀 도와 줘? 나는 Im가 약간의 CSS를 놓치고 있다고 생각한다. 이미지는 잘게 잘라진 것처럼 보입니다 - 그러나 Im은 추천을 엽니 다.

감사 및 종류에 관해서는

<table cellspacing="0" cellpadding="0" border="0"> 
        <tr> 
         <td > 
          <img alt="Corner" src="graphics/bgTopLeft.PNG" width="15px" height="13px" /></td> 
         <td class="AdminBoxTitleMainTop" > 
          </td> 
         <td> 
          <img alt="Corner" src="graphics/bgTopRight.PNG" /> </td> 
        </tr> 
        <tr> 
         <td class="AdminBoxTitleMainLeft"> 
          </td> 
         <td> <img id="afMgrPhoto" alt="Affiliate Manager" src='#' runat="server" /> 
         </td> 
         <td class="AdminBoxTitleMainRight"> 
          </td> 
        </tr> 
        <tr> 
         <td> 
          <img alt="Corner" src="graphics/bgBottomLeft.PNG" /> </td> 
         <td class="AdminBoxTitleMainBottom"> 
          </td> 
         <td > 
          <img alt="Corner" src="graphics/bgBottomRight.PNG" /> </td> 
        </tr> 
       </table> 

.AdminBoxTitleMainTop { 
    background-image: url(../graphics/bgTop.PNG); 
    background-repeat: repeat-x; 
    height: 17px; 
} 

.AdminBoxTitleMainBottom { 
    background-image: url(../graphics/bgBottom.PNG); 
    background-repeat: repeat-x; 
    height: 17px; 
} 

.AdminBoxTitleMainRight { 
    background-image: url(../graphics/bgRight.PNG); 
    background-repeat: repeat-y; 
    height: 17px; 
} 

.AdminBoxTitleMainLeft { 
    background-image: url(../graphics/bgLeft.PNG); 
    background-repeat: repeat-y; 
    height: 17px; 
} 

답변

1

당신은 오른쪽과 왼쪽 셀에 대한 폭 속성을 설정하려고 할 수있는 CSS를있는 HTML을 것입니다 (TD 집단). 나는 당신이 둥근 모서리 물건을하지 않는 한 HTML에서 모범 사례가 아닌 보충 이미지를 사용하여 경계를 주려고 노력하고 있다고 생각합니다. 그러나 둥근 모서리를 원하지 않는다면. 당신은 단지 IMG 요소를 사용하고 멋진 보이게하기 위해 (일부 패딩 이벤트) 테두리를 제공 할 수 있습니다 (좋네요 적은 HTML 코드를.)

<img style="padding: 5px; border: solid 1px #dedede" src="img.png" alt="" /> 

당신은 이벤트 마우스를 두었을 때의 테두리 색상을 전환 할 수 있습니다 이미지의 이벤트 (자바 스크립트없이 요소 안에 img 요소를 두는 경우에만 작동 함).

<a href='#'><img src="img.png" alt="" /></a> 

스타일 :

a img 
{ 
    border: solid 1px #dedede; 
    padding: 5px; 
} 

a:hover img 
{ 
    border-color: #069; 
} 
관련 문제