960 그리드 시스템을 사용하는 CSS 디자인에 관한 질문

나는 960 grid system을 사용하여 레이아웃 프로토 타입을 만듭니다.960 그리드 시스템을 사용하는 CSS 디자인에 관한 질문

나는 # 000 (검은 색)에 탐색 및 내용 사이의 색상을 설정하고 싶습니다,하지만 난 방법을 알아낼 수 없습니다. 내가 현재 얻을 것은 : 공간 "사이에"내가 어떻게이 모든 색상을 지정합니까

:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <link rel="stylesheet" type="text/css" media="all" href="css/text.css" /> <link rel="stylesheet" type="text/css" media="all" href="css/960.css" /> <link rel="stylesheet" type="text/css" media="all" href="css/custom.css" /> <title>The system</title> </head> <body> <div class="container_16" id="base"> <div class="grid_16" id="header">Graphical banner</div> <div class="grid_16" id="logoutrow">Logout row</div> <div class="grid_3" id="navigation">Navigation</div> <div class="grid_13" id="content">Content</div> <div class="grid_16" id="footer">Footer</div> </div> </body> </html>

내 두 가지 질문 :

이 코드를 사용하여 내비게이션과 콘텐츠 사이의 것을 좋아합니까?

튜토리얼 this처럼 명확하지 않은 경우 내 레이아웃 만 표시됩니다. 왜? 색 사이에 들어

내가 성공하지 custom.css이 퍼팅 시도했다 :

는 960 그리드 시스템에 익숙하지만 여전히 시도하고 전체를 도와하려는 경우

div#base { 
    background-color: #000; 
}

960.css는 here입니다.

두 문제 해결 :

내 두 번째 질문은 월 아 가드에 의해 게시물에 아래 해결된다. 나는 nbsp XML 엔터티를 포함하지 않았고 빈 div를 가졌다. Firefox 3.x에서는 작동하지 않았습니다.

나의 현재 코드는 다음과 같습니다

이

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> 
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" /> 
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" /> 
<link rel="stylesheet" type="text/css" media="all" href="css/custom.css" /> 
<title>The system</title> 
</head> 
<body> 

<div class="container_16" id="base"> 
    <div class="grid_16" id="header">Graphical banner</div> 
    <div class="clear">&nbsp;</div> 
    <div class="grid_16" id="logoutrow">Logout row</div> 
    <div class="clear">&nbsp;</div> 
    <div class="grid_16" id="navigation-content> 
     <div class="grid_3 alpha" id="navigation">Navigation</div> 
     <div class="grid_13 omega" id="content">Content</div> 
    </div> 
    <div class="clear">&nbsp;</div> 
    <div class="grid_16" id="footer">Footer</div> 
    <div class="clear">&nbsp;</div> 
</div> 

</body> 
</html>

960 grid system 그리드 자식 노드가 특정 규칙을 따라야했다. 첫 번째 자식 노드는 알파 클래스이고 마지막 노드는 오메가 클래스입니다. 내가 위에하고있는 것은 무엇인가. GateKiller가 아래에 준 대답과의 차이점은 을 제외하고는가 해결책을 제시 한 것입니다.

출처

2009-04-07 Anonymous

과 같이 컨테이너 사업부 내부 #navigation 및 #contents를 포장하는 것이 작업을 수행하는 가장 좋은 방법 :

#navigation-content { 
    background: #000 
}

당신에게 : 당신은 다음 않도록 배경을 설정할 수

<div class="container_16" id="base"> 
    <div class="grid_16" id="header">Graphical banner</div> 
    <div class="grid_16" id="logoutrow">Logout row</div> 
    <div class="grid_16" id="navigation-content"> 
     <div class="grid_3" id="navigation">Navigation</div> 
     <div class="grid_13" id="content">Content</div> 
    </div> 
    <div class="grid_16" id="footer">Footer</div> 
</div>

전체 16 그리드를 사용하지 않거나 클리어런스가 필요한 플로트 규칙을 사용하는 경우에만 정리 div가 정말로 필요합니다. The author has the following to say on the clear :

마지막으로 960.css에 포함 된 제거 방법에 대해 이야기하고 싶습니다.먼저 개인적인 취향에 따라 모든 요소를 지우는 악의없는 마크 업을 추가합니다. 나는 그것에 관해 이미 광범위하게 썼다. 그래서 나는 다시는 그 모든 것을 다루지 않을 것이다. 기본적으로 사라지려는 < 범위 > 또는 <div>에 class = "clear"을 추가하십시오. 유일한 효과는 부유물을 없애는 것입니다.

다른 방법은 HTML을 더럽 히고 싶지 않은 모든 마크 업 주의자를위한 것입니다. 대신 CSS를 통해 마크 업을 삽입 할 수 있습니다. 이 기술은 이미 잘 문서화되어 있습니다. 기본적으로 class = "clearfix"를 요소에 추가하여 요소 뒤에 오는 요소를 지 웁니다.

출처

2009-04-07 10:05:05 GateKiller

죄송합니다. 나는 두 번째 질문에서 튜토리얼에 대한 링크를 잊어 버렸다. 지금 수정되었습니다. –

두 번째 질문에 대한 답변을 추가했습니다. – GateKiller

나는 다시 질문을 올렸다. 유익한 답변 주셔서 감사합니다. 알파 클래스와 오메가 클래스는 언급하지 않았지만 정확합니까? (위의 추가 된 부분을 참조하십시오. 올바른 경우 변경합니다.) –

-4

이렇게하십시오. 두 번째 질문에

<div class="container_16" id="base" style="background:#000">

출처

2009-04-07 10:09:21

인라인 CSS는 bah입니다. – phidah

답변 : <div class="clear"> </div>이 페이지에 다음과 같은 스타일로 요소를 추가합니다. 그것은 기본적으로 요소를 왼쪽이나 오른쪽으로 허용하지 않는 빈 요소로, 내용 앞뒤에 내용을 분리하여 별도의 줄에 배치해야합니다. 모든 브라우저에서 필요하지는 않습니다.

{ 
    clear: both; 
    display: block; 
    overflow: hidden; 
    visibility: hidden; 
    width: 0; 
    height: 0; 
}

대신 맑은 요소의 당신은 clearfix 클래스를 사용할 수 있습니다. 이처럼 contianer 요소에 추가

<div class="container_16 clearfix" id="base">

이 방법 당신은 빈 요소를 방지 할 수 있습니다,하지만 난 다른 브라우저에이 솔루션을 덜 호환 생각합니다.

출처

2009-04-07 10:25:13

그들은 모두 #base 컨테이너가 그들을 포함하도록 확장되지 않는다고 추측하고 있습니다. #base div에 overflow: hidden;을 추가하여 플로팅 된 하위 요소를 포함하도록하십시오. 따라서 적용한 배경색을 볼 수 있습니다.

출처

2009-04-07 10:44:25 roborourke

960 그리드 시스템을 사용하는 CSS 디자인에 관한 질문

답변

관련 문제