CSS div를 수정하는 동적 웹 템플릿?

Question

필자는 Microsoft Express Web 4를 사용하고 있으며 내장 된 동적 웹 템플릿 (DWT) 기능을 활용하여 이상한 동작에 대한 정보를 찾으려고 노력하고 있습니다.

나는 그것이 내가 그렇게하도록 선택하는 경우에 붙어 차례로, 업데이트 페이지 내 DWT를 업데이트 할 때마다 문제가 실행 해요. 당연히 페이지 헤더 나 탐색 메뉴를 수정할 때 모든 페이지가 새로운 정보로 업데이트되기를 바랍니다. 완벽하게 작동하므로 템플릿에 첨부 된 모든 페이지가 그에 따라 업데이트되지만 내 CSS에는 다른 변경 사항이 있습니다. 내 인덱스 페이지도 업데이트됩니다 때마다 나는 DWT를 업데이트

여기 거래입니다. 일반적으로 괜찮을 지 모르지만 내 <div id="post"> 태그를 계속 변경합니다. 내 인덱스에 <div id="post">이 다섯 개 있다고 가정 해 보겠습니다. 내 CSS 아무튼,

<div id="post">

<div id="post0">

<div id="post1">

<div id="post2">

<div id="post3">

당신이 추측 수 있듯이 : 나는 DWT를 업데이트하는 경우, 그들은 이후에 다음과 같이 표시됩니다 그중 하나만 보이는 것처럼, 나중에 똑같이 보지 마라. 내 post div 수는 계속 유지됩니다. 나머지는 숫자가 추가되고 서식이 망가집니다. 그런 다음 끝에 가서 각 번호를 삭제해야합니다.

처음에, 나는 div의 내 총 스파게티 사업부를 추가, 그들은 기본적으로 전체 페이지를 다시 작성하고이 DWTs를 사용하여 대규모의 문제로 실행했습니다. 나는 적어도 HTML이 약간 지저분하다고 생각하고, 많은 태그를 변경하여 표현 웹이 괴롭히지 않게 만들었다.

게시물에 대한 나의 CSS는 다음과 같습니다

내가 템플릿의 편집 외부가되도록 DWT에서 지정한 페이지에있는 지역이 내 편집 가능한 지역 내에서

article, #post { width:auto; padding:5px; border: 1px #A9E8DB groove; background-color:whitesmoke; overflow:auto; margin-bottom:10px; }

, 내 HTML의 모습 이 같은 :

나는 사람들이 그것이 필요하다고 생각하면 나는 내 질문에 대해 충분히 명확 해요, 그리고 더 많은 코드를 제공 할 수 있기를 바랍니다

<div id="rightcolumn"> 
    <h2>BlahBlah.</h2> 
    <br /> 
    <div id="post"> 

      Foo 

    </div> 
    <br /> 
    <hr /><br /> 
    <br /> 
    <div id="post"> 

      Foo 

    </div> 
    <br /> 
    <hr /><br /> 
    <div id="post"> 

      Foo 

    </div> 
    <br /> 
    <hr /><br /> 
    <div id="post"> 

      Foo 

    </div> 
    <br /> 
    <hr /><br /> 
    <div id="post"> 

      Foo 

    </div> 
    <br /> 
    <hr /><br /> 
    <div id="post"> 

      Foo 

    </div> 
    <hr /></div> 

, 나는 (훨씬 더하지 비록) 임의의 정보를 압도하고 싶지 않았다.

나는 아마도 내가 그것을 경험하는 첫번째하지 않다,이 문제에 대한 통찰력을 조금 공유 할 수 당신에게 사람을 바라고 있어요? 내 HTML이 작성된 방식과 관련이 있다는 느낌이 들었습니다. 가능한 최상의 방법은 아닙니다. 닫히지 않은 태그는 보이지 않으며 태그의 중복 또는 정렬을 볼 수 없습니다. 이 페이지는 올바르게 렌더링되고 GUI에서 기대하는 방식으로 보입니다.

아이디어가 있으십니까?

Answer 1

당신의 도구를 모르겠습니다. ID는 고유해야합니다.

<div class="post">

및

이

.post { 
    width:auto; 
    padding:5px; 
    border: 1px #A9E8DB groove; 
    background-color:whitesmoke; 
    overflow:auto; 
    margin-bottom:10px; 
    }