어떻게 이미지/테두리가있는 격자에 대해이 코드를 개선 할 수 있습니까?

먼저 "border-radius + css3pie 또는 jquery 플러그인 사용"으로 대답하지 마십시오. css3을 사용하여이 작업을 수행 할 수있는 다른 방법이 있다는 것을 알고 있지만 괜찮습니다.어떻게 이미지/테두리가있는 격자에 대해이 코드를 개선 할 수 있습니까?

이 내 전체 코드입니다 :

.menu_books_top-bottom { width:171px; height:7px; background-color:#76614C; float:left;} 
.menu_books_center { width:155px; background-color:#76614C; padding:10px 15px 10px 15px; float:left;} 
.menu_books_top-left {width:7px; height:7px; background-image:url(../images/borders/menu_books_top-left.png); float:left;} 
.menu_books_top-right {width:7px; height:7px; background-image:url(../images/borders/menu_books_top-right.png); float:left;} 
.menu_books_bottom-right {width:7px; height:7px; background-image:url(../images/borders/menu_books_bottom-right.png); float:left;} 
.menu_books_bottom-left {width:7px; height:7px; background-image:url(../images/borders/menu_books_bottom-left.png); float:left;} 

<div class="menu_books_top-left">&nbsp;</div> 
<div class="menu_books_top-bottom">&nbsp;</div> 
<div class="menu_books_top-right">&nbsp;</div>     
<div class="menu_books_center"> 
    Content 
</div> 
<div class="menu_books_bottom-left">&nbsp;</div> 
<div class="menu_books_top-bottom">&nbsp;</div> 
<div class="menu_books_bottom-right">&nbsp;</div>

그러나 당신이 볼 수 있듯이, 너무 좋아 보인다 나던! 같은 것을하는 다른 방법이 있습니까? 또는 고전적인 방법과 같은이 코드를 더 잘 사용할 수 있습니까?

Here 예를 찾을 수 있습니다. (빨간색 = 경계선이있는 이미지)

출처

2011-05-14 kwichz

[jsFiddle 테스트 케이스] (http://jsfiddle.net/)를 만들고 [http://dummyimage.com/](http://html])의 크기가 동일한 이미지로 교체하면 도움이됩니다. dummyimage.com/). – thirtydot

음, 그래. 더미 이미지로 테두리를하는 법을 모른다 : – kwichz

예제가 추가되었습니다 :) – kwichz

I know you need IE6 지원을 고려할 때 합리적인 것으로 보입니다.

나는 그것을 재구성하고 다소 청소했다.

참조 : 나는 또한 현대적인 브라우저와 IE6에서 동일한 보이는 것을 확인했다http://jsfiddle.net/5wzC2/

나는 (에 @ SirB의 응답으로) span들에 div의 변경.
 을 제거했으며 IE6을 수정하기 위해 line-height:0; font-size:0을 추가했습니다.
corner 클래스를 추가하여 width:10px; height:10px; float:left의 모든 중복을 제거했습니다.
menu_books 문구의 일부 인스턴스가 HTML에서 제거되었습니다.
background-image이 (가) background으로 변경되었습니다. 여기서 작동하며 약간 더 짧습니다.

그래, 단지 많은 무리의 변화가있었습니다.

출처

2011-05-14 15:23:53 thirtydot

고마워요! 이것은 조금 더 좋아 보인다 :) – kwichz

고함을 보내 주셔서 감사합니다! 목표를 달성하는 과정에 도움이 되서 기쁘다. – breezy

탑 - 다운 다이빙은 필요하지 않습니다. 네가 할 수있는 방법은 4 개의 둥근 모서리가있는 4 개의 이미지를 만드는 것입니다. 실제로 필요한 것보다 더 크게 만들고 존경받는 모퉁이에 맞 춥니 다. 일반적으로 두 가지 색상이며 gif를 사용할 수 있기 때문에 페이지에 가중치를 추가하지는 않습니다 (있는 경우).


<div class="menu_books_top-left"> </div> 
<div class="menu_books_top-right"> </div>     
<div class="menu_books_center"> 
    Content 
</div> 
<div class="menu_books_bottom-left"> </div> 
<div class="menu_books_bottom-right"> </div>

출처

2011-05-14 14:15:43 locrizak

그래서 어떻게합니까 : =) 이미지 테두리가 투명하기 때문에 필요합니다. 배경을 얻으려고합니다. div 컨테이너 :) – kwichz

다음과 같이 작성할 수 있습니다. 어떤 욕망을 피할 것입니다.

<div class="content"> 
    <span class="menu_books_top-left">&nbsp;</span> 
    <span class="menu_books_top-bottom">&nbsp;</span> 
    <span class="menu_books_top-right">&nbsp;</span>      
    <span class="menu_books_center"> 
     Main 
    </span><!-- content here -->   
    <span class="menu_books_bottom-left">&nbsp;</span> 
    <span class="menu_books_top-bottom">&nbsp;</span> 
    <span class="menu_books_bottom-right">&nbsp;</span> 
</div><!-- end of .content -->

출처

2011-05-14 15:08:31 breezy

어떻게 이미지/테두리가있는 격자에 대해이 코드를 개선 할 수 있습니까?

답변

관련 문제