2012-04-02 4 views
0

사람은 나의 새로운 웹 사이트에 대한 진행 테스트 페이지에서 작업의 다음 링크에서 살펴 수 - http://goo.gl/YwGiBH2 패딩 및 사업부 위치

을 내가 CSS에 새로 온 사람, 나는 몇 가지 문제를 가로 질러 온 그 I 전문가의 도움 없이는 알아낼 수 없습니다. 누군가가 나에게 세 가지 질문에 답할 수 있었을 것인가?

1) 왜 내 중간 열은 기본적으로 자체적으로 섹션으로 나뉘는 반면, 내 오른쪽 열은 거의 동일하지만 분할이없는 이유는 무엇입니까? 저것을 오른손 란에 채우게하려면 어떻게해야합니까?

2) 오른쪽 열의 첫 번째 상자가 가운데 열의 'news'라는 제목의 상자와 나란히 놓인 다음이 상자 아래에 'blog'라는 제목의 상자가 있지만 그것은 불규칙한 길이가 될 것입니다.이 작업을 수행하는 가장 좋은 방법은 무엇입니까? 표준 위치 명령을 사용하여 해당 위치로 이동하거나 더 나은 방법이있는 경우가 맞습니까? 아니면 더 좋은 방법입니까?

3) 내 h1-h3 태그 (특히 h2 태그)의 여백과 여백은 여전히 ​​글자 위에 공백이있는 것으로 보입니다. MerceariaAntique 글꼴을 사용할 때 더 발음됩니다. 글꼴은 최종 글꼴이 될 것입니다.하지만 불행히도 지금 당장 html 파일을 수정할 수는 없습니다. 선 높이를 조정하여 문제를 해결하려고하지만 일관된 결과를 얻지는 못하고 있습니다. 줄 높이 및 여백 조정 이외의 다른 방법이 있습니까? 사전

답변

1

첫 번째로 마크 업에서 <div> 요소를 사용하여 섹션을 나누었습니다.이 요소는 완전히 허용되지만 동일한 ID를 사용하여 각 섹션을 식별했습니다. 이것은 수업을위한 것입니다. ID는 고유해야하며 페이지에서 한 번만 사용되며 클래스를 사용하여 여러 요소에 동일한 스타일을 적용 할 수 있습니다.

그래서이 :

<div id="newsitem"> 

이 있어야한다 : 이제 실제 질문에

<div class="newsitem"> 

답변!

  1. 기본적으로 단락과 머리글에는 여백과 여백이 설정되어 있습니다. 섹션에 공백이있는 이유는 단락 태그의 여백 아래입니다. 이것을 제거하면 공간이 제거되지만 다음 머리글과 함께 텍스트가 표시됩니다. 너는 <p> 태그에 여백을주고 패딩을 주거나 섹션 컨테이너에 패딩을 주면된다.

  2. 오른쪽 열의 상자와 가운데 열의 상자를 일렬로 배열하려면 레이아웃이 어떻게 작동하는지 변경해야합니다. 그러면 내가 생각하는 열이 아닌 행을 가질 수 있습니다. 그렇게하면 더 쉽게 정리할 수 있습니다.

    설명에서 다음과 같은 레이아웃을 가져야합니다.

    중간 열 | 오른쪽 열
    중간 열 | 오른쪽 열
    가운데 열

    , 당신은보다 구체적인 .column.centre (CSS 선택기의이 유형을 클래스 .centre에 background-color 속성을 적용 할 수 또는 수 가운데 열의 배경 색상을 유지하지 않을 수도 그래도 IE6에서 작동).

  3. H2의 문제는 선 높이까지 떨어지지 만 각 글꼴의 행간 길이가 다를 수 있으므로 올바른 값을 얻을 때까지 값으로 게임해야합니다. 최상위 순위를 얻었지만 밑에있는 텍스트가 더 가깝거나 겹쳐지면 H2에 패딩 하단 값을 지정하십시오.

+0

이것에 감사드립니다 - 나는 당신이 id/class와 이야기하고있는 것을 깨닫지 못했지만, 근원을 확인하고 그들이 한 번 3 개의 분리 된 섹션이었던 것을 잊었습니다! 내 마음이 완전히 미끄러졌습니다. 그래서 마진과 패딩을 사용해서 내가 원하는 것을 성취하는 것 같습니다. 또한 열보다는 행을 만드는 방법에 대해 생각해 보았지만 중간 열에 비슷한 데이터가 포함되어 있으므로 접근하는 방법을 알지 못했으며 오른쪽 열의 아래쪽 상자의 길이가 다를 수 있습니다. – tomdot

+0

두 번째 변수가 가변 높이 인 경우 오른쪽 열에 문제가 발생할 수 있습니다. 각 열의 첫 번째 상자의 높이가 같지 않으면 현재 레이아웃이 어떻게 잘못 되었습니까? – cchana

+0

실제로는 아무 것도 없습니다 - 정확히 정렬 할 필요는 없지만 출발점에 도달 한 다음 나중에 원하는대로 수정하는 것이 좋을 것이라고 생각했습니다. 모든 콘텐츠 섹션은 머리글 부분으로 이동해야합니다. 어쨌든 거기 공간의 크기가 마음에 들지 않습니다. 오른쪽 열에 대한 여백 문제는 내가 정렬하고 싶습니다. 나는 모든 것이 함께 달리는 것을 원하지는 않았지만 앞으로는 상자 하나 밖에 없을 것으로 확신하지는 않습니다. 어느 쪽이든, 나는 그것을 정렬하기 위해 마진과 패딩을 사용할 수 있다고 생각합니다. – tomdot

0

에서

덕분에 나는 당신이 H2와 H3를 사용하는,하지만 난 당신이 언급 한 H1을 찾을 수 없습니다를 참조하십시오. 잘못된/잘못된 간격을 방지하기 위해 CSS에서 "줄 높이"옵션을 제거합니다.

div의 평행선을 실행하려면 두 div (왼쪽과 오른쪽)에 동일한 패딩과 여백이 있어야합니다. 이렇게하려면 왼쪽에 떠있는 floatColumn 클래스를 만들어 모든 여백과 패딩이있는 div에 추가합니다.

+0

답변 해 주셔서 감사합니다. 나는 스트랩 라인 (strapline)을 제거 할 때까지 h1 태그를 가지고 있다는 사실을 재확인했다. 내 로고 아래 h1을 숨겨서 여전히 사용하지 않도록 할 수 있습니다. – tomdot