이미지가 완전히 표시되지 않습니다.

다음은 내 사이트에 사용하고있는 CSS 템플릿입니다. 내 div #title에 로고를 추가하려고하면 문제가 발생합니다. 이미지의 절반 만 (높이) 나타납니다. 내 마진에 문제가 있다고 생각하지만 크기를 변경하거나 여백 크기를 변경하는 방법에 상관없이 전체 높이 (너비가 좋아 보인다)가 표시되지 않는 이유를 알 수 없습니다.이미지가 완전히 표시되지 않습니다.

해결책을 제안 해 주시겠습니까? #title에서

html { 
    overflow: hidden; 
    height: 99%; 
} 

body { 
    background: $ffffff; 
    height: 99%; 
    margin: 0; 
    padding: 0; 
    line-height: 150%; 
    text-align: center; 
} 

* { 
    font-size: 8pt; 
    font-family: Tahoma, Verdana, sans-serif; 
    color: #000000; 
    text-align: left; 
} 

/* === Containers === */ 

#mainContentArea { 
    margin: 0 auto 0 auto; 
    display: table; 
    height: 100%; 
    position: relative; 
    overflow: hidden; 
    width: 600px; 
} 

.link,.linkActive { 
    width:75px; 
    margin-right:10px; 
    float: left; 
    margin-top:24px; 
    text-align:center; 
    font-family:Georgia, "Times New Roman", Times, serif; 
    background-image:url(tab.gif); 
    position:relative; bottom:0px; 
} 

.link:hover { background-image:url(tab2.gif); } 

a { text-decoration:none; } 

.link a { 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:12px; 
    font-weight:bold; 
} 

#linkGroup { 
    margin-right:10px; 
    height:40px; 
    width:600px; 
} 

#title { 
    width:230px; 
    height:40px; 
    margin-right:20px; 
    margin-top:15px; 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    font-size:20px; 
    font-weight:bold; 
    text-align:center; 
    float:left; 
} 

.contentTitle { 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    color:#213E74; 
    font-size:19px; 
    margin-left:15px; 
    margin-right:12px; 
    margin-bottom:12px; 
    width:573px; 
} 

.pageContent { 
    font-family: Arial, Helvetica, sans-serif; 
    color:#000000; 
    font-size:12px; 
    margin-left:20px; 
    margin-right:20px; 
    width:560px; 
} 


#blueBox { 
    position: absolute; 
    vertical-align: middle; 
    background-color:#E7EDF8; 
    width:600px; 
    clear:both; 
} 

#header { 
    width:600px; 
    height:20px; 
    background-color:#FFFFFF; 
    background-image:url(header.gif); 
    background-repeat:no-repeat; 
} 

#footer { 
    width:600px; 
    height:20px; 
    background-color:#FFFFFF; 
    background-image:url(footer.gif); 
    background-repeat:no-repeat; 
    text-align:center; 
    padding-right:10px; 
    color:#BDCDEC; 
} 

#footer a { 
    font-size:9px; 
    color:#BDCDEC; 
} 

#contentBox { margin-top:25px; } 

html, body { text-align: center; } 

p {text-align: left;}

출처

2012-05-24 user1413830

이미지 얼마나 큰 유지? 높이가 40px보다 크다면'height' 규칙이 그것을 잘라 버릴 것입니다. –

이미지를 40px로 설정 했는데도 반으로 잘린 상태로 높이 규칙을 편집 해 보았습니다. – user1413830

더 많이 볼 필요가있는 경우 일 수 있습니다. 우리가 그것을 볼 수있는 URL을 게시 할 수 있습니까? –

제거 margin-top: 15px; 나를 위해 일했다.

출처

2012-05-24 00:32:37

감사합니다. – user1413830

-1

는 CSS에서

width:230px; 
    height:40px;

를 제거하고

<img src="image " width="" height=""></img>

출처

2012-05-24 08:00:15 qwerty

이미지가 완전히 표시되지 않습니다.

답변

관련 문제