문제
ASP.Repeater를 사용하여 각 주석을 표시하는 주석 컨트롤을 구현하고 있습니다.현재 댓글 자체는 테이블을 사용하여 일부 이미지를 나누어 댓글을 풍선 형태로 표시하고 있습니다.
나는 테이블이 디자인 레이아웃의 악의 전형이고 브라우저에 표시하는 데 비용이 많이 든다는 것을 알고 있지만 둥근 모서리를 올바른 위치에 배치하고 모든 것이 정렬되도록 하는 방법을 정확히 알지 못합니다.
필요한 HTML/CSS에 대한 제안, 예제, 해킹이 있는 사람이 있습니까? 아니면 그냥 표를 고수하고 최선을 다해야 합니까?
해결책
DIV 요소를 사용하여 둥근 모서리를 만드는 방법에 대해 제가 본 최고의 리소스는 "A List Apart"에 대한 기사였습니다. http://alistapart.com/articles/customcorners/.전체 사이트 레이아웃을 위해 DIV 요소를 사용하려는 경우 해당 사이트에 다른 관련 기사가 몇 가지 있습니다.보다:
http://alistapart.com/articles/slidingdoors/
http://www.alistapart.com/articles/slidingdoors2/
http://www.alistapart.com/articles/negativemargins/
다른 팁
몇 가지 다른 방법이 있습니다. CSS의 둥근 모서리
나는 가능할 때마다 테이블에 CSS를 사용하는 것을 선호합니다. 왜냐하면 코드가 유지 관리하기 훨씬 더 쉽다고 생각하기 때문입니다. 그리고 이것은 발을 젖게 할 완벽한 범위를 갖춘 프로젝트처럼 들립니다.
간단히 말해서 다음과 같은 것을 원할 것입니다.
<style>
.start { background-image: url("topofbubble.png"); height: <heightofimage>; }
.end { background-image: url("bottomofbubble.png"); height: <heightofimage>; }
.body {background-image: url("sliceofbubblemiddle.png"); }
</style>
...
<div class="comment">
<span class="start"></span>
<span class="body">I would like to say that div layouts are far better than table layouts.</span>
<span class="end"></style>
</div>
그러면 시작해야 합니다.나는 코드를 구체적으로 시도하지 않았으며 필요한 경우 완전한 예제를 만들 수 있습니다.
IE 사용자에게 날카로운 모서리를 제공하려는 경우 둥근 모서리는 다음을 사용하여 간단하게 해결할 수 있습니다. border-radius
CSS 속성.현재 어떤 브라우저도 이를 기본 속성으로 구현하지 않지만 몇몇 브라우저는 접두사 속성으로 구현합니다.예를 들어, Firefox에서 사용하려면 다음 속성을 사용합니다. -moz-border-radius
, Safari의 경우 다음을 사용하세요. -webkit-border-radius
, 등.