CSS가있는 탐색 막대 배치

내 컨텐츠 탐색기 왼쪽에 내 세로 탐색 모음을 배치하는 데 문제가 있습니다. 여기에 내가 원하는 내가 무엇을하고 :CSS가있는 탐색 막대 배치

문제는, 그 크기가 비슷하지 않은 모니터에 대해 서로 다른, 그래서 그것은 고정 된 위치라는 것이다. 그래서 나는 상대적인 포지셔닝이 필요할 것이라고 생각하지만, 어떻게해야하는지에 대해서는 확신이 없습니다.

HTML

<!DOCTYPE html> 
<html> 
<head> 
<title> Home Page </title> 
<link rel="stylesheet" type="text/css" href= "styles/styling.css" /> 
</head> 

<div class="container"> 
    <ul class="nav">.....(Just nav bar stuff) 


<div class="content"> 
<h1>abcd</h1> 

<p>abcd</p> 
</div>

CSS

.content { 
background-color: #FFFFFF; 
width: 650px; 
padding: 20px; 
margin: auto; 
word-wrap: break-word 
} 

.container { 
position: fixed; 
top: 151px; 
left: 420px; 
}

감사합니다!

출처

2014-12-15 Popcorn727

jsfiddle 또는 실제 예제를 제공해 주실 수 없습니까? –

고정 위치는 아래로 스크롤 할 때 메뉴를 계속 표시하는 데 도움이됩니다. 그렇지 않으면 사용하지 않아야합니다.

<div class="container"> 
    <div class="one-third column"> 
     <ul class="yourmenu">xxx</ul> 
     <div class="filler"></div> 
    </div> 
    <div class="two-thirds column"> 
     Your page content here 
    </div> 
</div> 

<style> 
    .container {width:960px;margin:auto;} 
    .column {float:left;position:relative;} 
    .one-third {width:320px;} 
    .two-thirds {width:640px;} 
    .filler {width:100%;height:10px;} 
    .yourmenu {position:fixed;top:100px;} /* do not define left, because it will fix the screen and not the column div */ 
</style>

출처

2014-12-15 17:55:06 DooKie

감사합니다. 컨테이너의 값과 "yourmenu"상단 정렬을 변경하여 내 것과 잘 맞도록해야했지만 모두 작동합니다. 다시 한 번 감사드립니다 :) – Popcorn727

픽셀 (px) 대신 백분율 (%)을 사용하십시오.

출처

2014-12-15 18:52:43 user3693097

더 구체적으로 할 수 있습니까? 어떤 값을 변경해야합니까? –

예. "%"에 대해 "px"를 변경하십시오. 이 점이 당신을 이해하는 데 도움이됩니까? – user3693097

어떤 규칙이 있습니까? 폭? 신장? –

CSS가있는 탐색 막대 배치

답변

관련 문제