2017-02-22 5 views
0

저는 경험이 거의없는 웹 프로그래머입니다. HTML 또는 CSS를 여기저기서 사용하십시오. 나는 본질적으로 이것에 대해 아무것도 알지 못합니다.설문 조사 웹 사이트 (설문 조사 기즈모)로 CSS 사용하기

현재 내 문제는 웹 코딩에 대한 지식이 부족한 지 또는이 설문 도구가 설정된 방법인지 여부를 결정할 수 없습니다.

설문 조사 기즈모에서는 설문 자체의 외부 위치에서 '맞춤 CSS'코딩을 만들 수 있습니다. 외부 CSS 스타일 시트 역할을하지만 스타일을 여러 개 지정할 수 있다고 생각합니다.

그런 다음 설문 조사의 각 페이지에 대해 다른 장소에서 정의한 스타일에 링크하거나 각 질문에 대해 링크 할 수 있습니다. 또한 페이지의 머리 부분을 수정할 수도 있으며, 별도의 문서에있는 '사용자 정의 HTML'옵션도 있습니다. 내가 노력하고있어

나는 거시기 (SG) 이것에 대해 도움을 조사 얘기 시도, 그러나 그들의 태도는 내가 그것을 이해한다, 또는 내가 나를 위해 그것을 프로그램을 지불해야한다는 것입니다 ...

이렇게하면 화면 왼쪽에 동영상 플레이어가 있고 동영상 플레이어가 움직이지 않는 동안 스크롤 할 수있는 화면 오른쪽에 여러 가지 질문이 있습니다. . - 그것은 클래스, 또는 어떻게 든 스타일 시트 이름을 근사

.width-33{ 
clear: none; 
float: left; 
width: 33%; } 

난 정말이게 뭔지 이해가 안 :

은 이제 예제 SG는 CSS에 대해 다음과 같이 일을하고 있습니다 제공? 어쨌든 설문 조사 질문에 성공적으로 적용 할 수 있습니다. 그러나 나는 더 복잡한 구조를 성공적으로 적용하는 방법을 모른다. 이를 적용하려면 설문 조사 질문을 클릭하고 사용자 정의 CSS 스타일 필드가 있으며 해당 필드에 "width-33"을 입력합니다.

여기에 나타나는 것과 같은 것을하고 싶습니다 : http://jsfiddle.net/avrahamcool/QMsuD/1/하지만 (주위를 전환하는 방법을 알 필요가 없습니다. SG에서 작동하도록하는 방법을 배울 필요가 없습니다).

해당 페이지에서 CSS는이

* { 
    margin: 0; 
    padding: 0; 
} 
html, 
body, 
.Container { 
    height: 100%; 
} 
.Container:before { 
    content: ''; 
    height: 100%; 
    float: left; 
} 
.Header { 
    margin-bottom: 10px; 
    background-color: #6ea364; 
} 
.Content { 
    position: relative; 
    z-index: 1; 
} 
.Content:after { 
    content: ''; 
    clear: both; 
    display: block; 
} 
.Wrapper { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
} 
.Wrapper > div { 
    height: 100%; 
} 
.LeftContent { 
    background-color: purple; 
    overflow: hidden; 
} 
.LeftContent:hover { 
    overflow: auto; 
} 
.RightContent { 
    background-color: orange; 
    float: right; 
    margin-left: 10px; 
} 

모양과 HTML은 다음과 같습니다

<div class="Container"> 
    <div class="Header"> 
     <p>The Header div height is not fixed (But he can be if you want it to)</p> 
     <p>This Layout has been tested on: IE10, IE9, IE8, FireFox, Chrome, Safari, Opera. using Pure CSS 2.1 only</p> 
    </div> 
    <div class="Content"> 
     <div class="Wrapper"> 
      <div class="RightContent"> 
       <p>You can fix the width of this content.</p> 
       <p>if you wont, his width will stretch just as it needs to.</p> 
      </div> 
      <div class="LeftContent"> 
       <p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p> 
       <p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p> 
       <p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p> 
       <p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p> 
       <p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p> 
       <p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p> 
       <p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p> 
       <p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p> 
      </div> 
     </div> 
    </div> 
</div> 

그래서, 난 그냥이 작업을하는 방법을 알아 내려고 노력하고있다. 설문 조사 도구가이를 어떻게 활용하는지 이해하려고 혼란스러워할지 모르겠지만 경험이 풍부한 프로그래머에게는 실제로 이해가가는 뭔가가있을 수 있기를 바랍니다.

기본적으로이 코드 예제를 설문 조사 기즈모 시스템에 구두쇠를 달기 위해 어떻게 파싱합니까? 위의 CSS 코드를 외부 스타일 시트로 바꾸려면 어떻게해야하나요? 설문 도구에 CSS 스타일 "leftContent"(내 동영상 플레이어)와 CSS 스타일 "rightContent"(예 : 내 질문).

이 작업을 수행하는 방법에 대한 다른 제안 사항이 있습니까? 이 도구는 또한 자바 스크립트를 허용합니다.

답변

0

첫 번째 질문에 답변하십시오. 코드의이 부분은 무엇입니까?

.width-33 { 
    // elements with a float are allowed next to the object with this class. It's redundant though because it has this property by default. 
    clear: none; 
    // align this object to the left of it's parent container. Multiple items with float:left will be placed next to each other. 
    float: left; 
    // the width is 33% of the parent containers' width. The classname is named after this property. 
    width: 33%; 
} 

이것이 올바른 수업이라고 생각했습니다.div처럼 할당 된 경우 : <div class="width-33"></div>이 div는 해당 속성을 가져옵니다.

설문 조사 Gizmo에서 스타일을 적용 할 수있는 방법이 현재로서는 명확하지 않습니다. 당신은 어떤 종류의 외부 스타일 시트를 만들고 그 스타일 시트를 다른 질문에 할당 할 수 있다고 말합니다. 그리고 'custom HTML'부분도 있습니다.

달성하고자하는 것부터 사용자 정의 HTML 부분이 필요하다고 생각합니다. 질문 자체가 아닌 모든 질문을 담고있는 컨테이너를 다루기를 원할 것입니다. 따라서 설문 조사의 각기 다른 부분이 어떻게 명명되었는지, 학급 이름이 무엇인지 또는 ID가 무엇인지 파악해야합니다.
설문 조사를 작성중인 백엔드 편집기 또는 대시 보드에서 이것이 분명하지 않은 경우 조사를 미리보고 '조사'또는 '요소 검사'를 마우스 오른쪽 버튼으로 클릭하는 것이 좋습니다. 검사기 도구가 열리고 소스 코드를 볼 수 있습니다. 질문이 포함 된 컨테이너의 이름과 비디오가 포함 된 컨테이너의 이름을 찾아야합니다.

당신이 있다면 그 레이아웃을 만들 수 있습니다.
아주 기본적인 레이아웃입니다. 나는 당신이 당신의 예보다 적은 수의 줄로 그것을 능동적으로 할 수 있기 때문에 설명 할 것입니다.

비디오 컨테이너와 질문 컨테이너는 서로 옆에 배치해야합니다. 두 컨테이너 모두 화면의 전체 높이를 채워야합니다. 마지막으로 사용자가 질문 - 컨테이너 내부를 스크롤 할 수있게하려고합니다.

.video-container { 
    height: 100vh; // vh stands for view height. See explanation below 
    float: left; 
    width: 40%; // or any other width. 
} 
.questions-container { 
    height: 100vh; 
    float: left; // with both elements floated to the left, they'll be placed next to each other. 
    overflow: auto; // when the questions are longer than the container is high, a scrollbar will be added and you'll be able to scroll 
    width: 60%; // 100% - 40% (the other element) 
} 

100vh하지 100%를 선택 하는가? 100%을 사용하면 해당 컨테이너의 다른 상위 컨테이너도 높이를 100 %로 유지해야합니다. 도대체 <body> 태그까지. 이는 예제의 두 번째 코드 블록에서 수행됩니다.

두 컨테이너가 서로 옆에 위치하지 않으면 일부 여백 또는 패딩이 맨 위에 추가되기 때문에 여분의 너비를 제공 할 수 있습니다. 예를 들어 40 % + 10px + 50px
가장 간단한 해결책은 padding: 0;margin: 0;을 추가하여이를 제거하는 것입니다.

당신은 내가 다음과 같은 스타일을 추가 제안 패딩 추가 할 경우 :

.video-container { 
    height: 100vh; 
    float: left; 
    width: 40%; 

    box-sizing: border-box; // any padding (and borders) will be inset and will not be added to the total width. This doesn't count for margin! 
    padding: 20px; // or whatever width of padding you want 
} 

난이 도움이되기를 바랍니다 있습니다.