CSS의 절대 열

Question

간단한 블로그를 디자인하고 싶습니다. 워드 프레스에서 부모 테마 (샌드 박스)를 사용하고 싶습니다. 내가 여기 댄 루빈의 기사에 자신을 절대 열을 사용하고자 지금까지 기반으로 한 : http://24ways.org/2008/absolute-columns

내 문제는 여기에서 볼 수 있듯이 사이드 바 오른쪽으로 이동하지 것입니다 : 분명히 www.dearjasmina.com 을, 나는 전혀 새로운 해요 이 모든 조언은 도움이 될 것입니다. 당신은 .sidebar CSS의 top:10px 및 right:10px 행 다음에 세미콜론을 잊어

#header { 
height: 60px; 
} 

#container div { 
margin: 0; 
} 

#container { 
position: relative; 
} 

#access { 
visibility: hidden; 
height: 0; 
margin: 0; 
padding: 0; 
} 

#menu { 
visibility: hidden; 
height: 0; 
margin: 0; 
padding: 0; 
} 

#wrapper { 
width:800px; 
margin:auto; 
padding:10px; 
background-color:#f2f2f2; 
border:10px solid #fff; 
text-align:left; 
} 

div div { 
background-color:#E6E6E6; 
margin-bottom:10px; 
padding:10px; 
} 

div div div { 
background-color:#DADADA; 
} 

.sidebar { 
bottom: 10px; 
position: absolute; 
right: 10px 
top:10px 
width: 200px; 
} 

.sidebar ul { 
margin: 0; 
padding: 0; 
list-style-type: none; 
} 

#content { 
width: 530px; 
} 

body { 
margin:0; 
font-family:"helvetica neue",helvetica,arial,sans-serif; 
font-size:12px; 
font-weight:bold; 
text-transform:uppercase; 
color:#a1a1a1; 
text-align:center; 
} 

h2 { 
font-size:12px; 
text-align:center; 
} 

p { 
font-weight:normal; 
text-align:left; 
text-transform:none; 
line-height:1.2; 
} 

Answer 1

여기서 무엇을하려고하는지 조금 분명하지 않지만 두 개의 사이드 바 (#primary 및 #secondary)가 있습니다. 양쪽 모두를 나란히 나타나게하려면 각각의 "오른쪽"속성을 개별적으로 조정해야합니다. 서로의 위에 나타나기를 원하면 높이를 알아야하며 변경해서는 안됩니다.

먼저 div # wrapper의 "position"을 relative로 설정해야합니다. 이렇게하면 div.sidebar 요소가 포함 된 div # 래퍼 요소를 기준으로 위치가 설정됩니다. 위치를 설정하지 않고

div#wrapper { 
    position: relative; 
} 

: DIV 번호 래퍼에 상대는 당신의 사이드 바는 "body"원소에 자신이 절대적으로 상대적인 위치합니다.

절대적으로 배치 된 사이드 바에 대한 올바른 참조 프레임을 설정 했으므로 원하는 위치에 배치 할 수 있습니다. 현재는 정확한 위치와 정확한 너비로 서로 겹칠 수 있습니다. 이것은 아마도 당신이 원하는 것이 아니며, 210px의 "올바른"속성을 갖도록 설정해보십시오.

div#primary { 
    right: 210px; 
} 

이제 세 개의 열, 콘텐츠, 기본 사이드 바 및 보조 사이드 바가 모두 표시됩니다. 기본 사이드 바가 콘텐츠와 겹치기 쉽기 때문에 보조 사이드 바를 숨기고 기본 사이드 바를 "오른쪽 : 10px"로 다시 이동하거나 보조 사이드 바를 기본 사이드 바 위에 올려 놓으십시오. 콘텐츠가 보이지 않으므로 역동적이고 성장하지 않을 것입니다.

CSS를 배우는 경우 실제 웹 사이트에서 CSS를 검사하고 편집 할 수 있도록 절대적으로 방화범이 필요합니다. Firebug

Answer 2

:

.sidebar { 
bottom: 10px; 
position: absolute; 
right: 10px 
top:10px 
width: 200px; 
} 

이 있어야 할 ...

.sidebar { 
bottom: 10px; 
position: absolute; 
right: 10px; 
top:10px; 
width: 200px; 
} 

Answer 3

추가 DAV 년대이 지금까지 코드 위의 대답에 동의하지 않는 한, 컨테이너 클래스의 내부에 콘텐츠의 형제 인 사이드 바를 포함시키고 자 할 것입니다 :

<div id="container"> 
    <div id="content"></div> 
    <div class="sidebar"></div> 
</div>