Thanh Điều hướng Định vị với CSS

Tôi gặp sự cố khi định vị thanh điều hướng dọc của tôi ở bên trái của nội dung Div của tôi. Dưới đây là những gì tôi có và những gì tôi muốn:Thanh Điều hướng Định vị với CSS

Vấn đề, là rằng đó là một vị trí cố định vì vậy nó khác nhau cho màn hình mà không phải là một kích thước tương tự. Vì vậy, tôi đoán tôi sẽ cần phải có vị trí tương đối nhưng tôi không quá chắc chắn về cách làm điều đó.

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; 
}

Cảm ơn!

Nguồn

2014-12-15 Popcorn727

Bạn có thể vui lòng cung cấp một ví dụ trực tiếp hoặc jsfiddle không? –

Vị trí cố định sẽ giúp bạn giữ cho trình đơn hiển thị khi bạn cuộn xuống. Nếu không, bạn không nên sử dụng nó.

<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>

Nguồn

2014-12-15 17:55:06 DooKie

Cảm ơn, điều này đã hiệu quả. Tôi đã phải thay đổi các giá trị của container và liên kết hàng đầu "yourmenu" để làm cho nó phù hợp với tôi nhưng tất cả đều hoạt động. Cảm ơn một lần nữa :) – Popcorn727

Sử dụng phần trăm (%) thay vì pixel (px).

Nguồn

2014-12-15 18:52:43 user3693097

Bạn có thể cụ thể hơn không? Giá trị nào nên được thay đổi? –

Có. Thay đổi "px" cho "%". Điều này có giúp bạn hiểu không? – user3693097

Quy tắc nào? Chiều rộng? Chiều cao? –

Thanh Điều hướng Định vị với CSS

Trả lời

Các vấn đề liên quan