중첩 디자인

Question

웹 프로그래밍 내 능력을 내가 올바른 용어를 알고하지 않기 때문에, 어려운 주제에 대한 인터넷 검색을하게하는, 꽤 제한으로 ..

어쨌든 내 질문에, (나 실례하는 이상한 말을하게 될 것입니다.이 말을하는 법을 모르겠습니다.) :

html + css로이 pseduocode를 달성 할 방법이 있습니까?

CSS 파일 :

#ropeimage { 
    background-repeat:repeat-x; 
    background:url(images/rope.png); 
} 

#ropetext { 
    <div id="ropeimage"> 
    /* some text properties */ 
} 

다음 HTML 파일에

<div id="ropetext">hello</div> 
<div id="ropetext">there</div> 

나는 내가

<div id="ropetext"><div id="ropeimage">hello</div></div> 
<div id="ropetext"><div id="ropeimage">there</div></div> 

에 가깝다 뭔가를 할 수 알면서도 물어 이유 만약 내가 항상 이것을 알고 있다면, 왜 그것을 css 파일에 넣지 않았습니까?

내가 궁금한 점이 있다면 반복 할 x-a '밧줄'이미지를 만든 다음 세로로 인쇄하는 div를 작성하는 것입니다. 로프의 배경 이미지가 텍스트 아래에서 반복되기 때문에 한 div에서 모든 것을 정상적으로 가질 수 없으므로 텍스트 div에 도달하는 즉시 이미지가 반복되는 것을 방지하려면 두 div가 필요합니다.

a crude picture explaining what im trying to do

Answer 1

난 당신이 class를 사용하려면 오히려 id를 사용하는 것보다 생각합니다.

그래서 CSS는과 같이 보일 것이다 : 당신의 HTML에서 그런

.ropetext { 
    /* properties */ 
} 

:

<div class="ropetext"></div> 

클래스와 ID 사이의 차이점은 하나의 ID를 사용하고자하는 것입니다 HTML 태그. 클래스는 많은 태그에 적용 할 수 있습니다. 나는이 테스트를하지 않은

<div class="rope"> 
    <div class="top"> 
    </div> 
    <div class="bottom"> 
     Hello 
    </div> 
</div> 

을하지만 난이 당신 무엇을 궤도에 생각 : 당신의 HTML에서

.rope { 
    /* properties defining any rope div in general */ 
    position: relative; 
} 

.rope .top { 
    /* properties defining the top of the div */ 
    /* background image stuff goes here */ 
} 

.rope .bottom { 
    /* properties defining the bottom of the div */ 
    position: absolute; 
    bottom: 0px; 
} 

을 : 또한

, 당신은 당신의 CSS에 중첩 스타일 정의를 만들 수 있습니다 찾고있어.