floyde
Áp phích gốc- Ngày 7 tháng 4 năm 2005
- Monterrey Mexico
- Ngày 27 tháng 3 năm 2006
Tôi có hai div. Một cái có chiều cao cố định và tôi muốn cái kia lấp đầy không gian dọc còn lại trên cửa sổ. Nếu tôi đặt chiều cao của div sau thành 100%, nó sẽ làm cho nó có cùng chiều cao với cửa sổ, nhưng tôi muốn nó bằng chiều cao của cửa sổ trừ đi chiều cao của div đầu tiên.
Đây là mã tôi đang sử dụng:
Mã:
Vertical div test body { margin:0; padding:0; height:100%; } #div1 { height: 100px; background-color: blue; } #div2 { height: 100%; background-color: green; } Tôi cũng bao gồm một số hình ảnh cho thấy những gì tôi muốn làm và những gì tôi có thể làm cho đến nay. Cảm ơn trước
Tập tin đính kèm
n
NoNameBrand
- Ngày 17 tháng 11 năm 2005
- Halifax, Canada
- Ngày 27 tháng 3 năm 2006
Nếu không, tôi không thể nghĩ ra cách mà bạn sẽ đạt được những gì bạn muốn.
stevep
- Ngày 13 tháng 10 năm 2004
- Vương quốc Anh
- Ngày 27 tháng 3 năm 2006
Cố gắng:
Tài liệu không có tiêu đề
đến
NS
NS
NS
Và
ps Tôi đã gian lận bằng cách làm điều đó trong DW, thêm một số nội dung vào lớp thứ hai, và sau đó làm rối với mã - DW thích những thứ có một số đệm làm tròn các cạnh và mặc dù bạn có thể chỉ định trong hộp thoại mà bạn muốn một lớp bắt đầu ở 0px từ góc trên cùng, bạn phải nói nó hai lần, sử dụng Chế độ xem mã. Tôi đã phải anyway.
floyde
Áp phích gốc- Ngày 7 tháng 4 năm 2005
- Monterrey Mexico
- Ngày 27 tháng 3 năm 2006
NoNameBrand đã nói: Tại sao không lồng cái đầu tiên vào bên trong cái thứ 2?
Nếu không, tôi không thể nghĩ ra cách mà bạn sẽ đạt được những gì bạn muốn.
Cảm ơn, điều đó hoạt động trực quan, nhưng div thứ hai sẽ là vùng chứa cho bố cục này, vì vậy tôi vẫn cần nó có kích thước phù hợp để nội dung của nó có thể kế thừa chúng.
Vì vậy, có lẽ nó chỉ đơn giản là không thể? Có lẽ tôi sẽ cần sử dụng một chút javascript để làm cho nó hoạt động?
stevep đã nói: Hãy thử:Cảm ơn, nhưng tôi không thể làm cho nó hoạt động, bạn đã sử dụng trình duyệt nào?
floyde
Áp phích gốc- Ngày 7 tháng 4 năm 2005
- Monterrey Mexico
- Ngày 27 tháng 3 năm 2006
Ok, đây là một bức tranh về mục tiêu cuối cùng của tôi. Cho đến nay tôi đang làm nó dần dần, vì vậy có thể vấn đề là cách tiếp cận ban đầu của tôi. Vì vậy, làm thế nào các bạn sẽ tiếp cận điều này (tôi chỉ cần ý tưởng)? Bạn sẽ sử dụng css thuần túy, hay bạn sẽ nhượng bộ các bảng hoặc khung?
Tập tin đính kèm
stevep
- Ngày 13 tháng 10 năm 2004
- Vương quốc Anh
- Ngày 27 tháng 3 năm 2006
Một chút bạn phải chơi xung quanh là:
# Lớp1 {
vị trí: tuyệt đối;
trái: 0px;
đầu trang: 0px;
chiều rộng: 100%;
chiều cao: 180px;
chỉ số z: 1;
màu nền: # 99CCFF;
}
Viết thô trang của bạn trên một tờ giấy để bạn có đúng vị trí và điều đó sẽ cung cấp cho bạn vị trí của góc LH trên cùng của mỗi lớp. Chiều cao của lớp 1 sẽ xác định vị trí bắt đầu của lớp 2 - trong trường hợp này, lớp 2 phải cóđầu trang: 180px;dòng mã.
Nếu bạn muốn 3 lớp như bạn hiển thị trong bài viết trước của mình, thì lớp ngoài cùng bên trái sẽ là:
# Lớp1 {
vị trí: tuyệt đối;
trái: 0px;
đầu trang: 0px;
chiều rộng: 200px;
chiều cao: 100%;
chỉ số z: 1;
màu nền: # 336699;
}
và lớp RH trên cùng sẽ là:
# Lớp1 {
vị trí: tuyệt đối;
trái: 200px;
đầu trang: 0px;
chiều rộng: 100%;
chiều cao: 180px;
chỉ số z: 2;
màu nền: # 33CCFF;
}
và lớp thứ 3 để lấp đầy phần còn lại của cửa sổ (tuy nhiên nó đã được thay đổi kích thước) sẽ giống như sau:
# Lớp1 {
vị trí: tuyệt đối;
trái: 200px;
đầu trang: 180px;
chiều rộng: 100%;
chiều cao: 100%;
chỉ số z: 3;
màu nền: # 99CCFF;
}
Tốt nhất bạn nên đặt một số nội dung giả trong mỗi lớp nếu bạn đang sử dụng Dreamweaver, trong trường hợp lớp thu nhỏ lại không có gì trong chế độ xem trang, do đó, 'a, b, c, v.v.' trong html gốc ở trên.
ps Tôi không phải là một chuyên gia, tôi có thể sai nhưng tôi hy vọng nó sẽ giúp. Những gì tôi có thể nói là đoạn mã đầu tiên của tôi dường như hoạt động. Cá nhân tôi sẽ không lồng các lớp nếu tôi có thể giúp đỡ một chút, nhưng đó chỉ là tôi - tôi chỉ làm đơn giản. n
NoNameBrand
- Ngày 17 tháng 11 năm 2005
- Halifax, Canada
- Ngày 27 tháng 3 năm 2006
Đây là những gì tôi sẽ làm:
Mã số:
foo bạn tin!
-
- 14 tháng 6 năm 2003
-
-
- MD / VA / DC
- Ngày 27 tháng 3 năm 2006
Không chấp nhận ...
Kiểm tra FlashObject và trong bản tải xuống có mã để tạo toàn màn hình div .. có thể nó có thể được điều chỉnh theo cách bạn muốn.
http://blog.deconcept.com/flashobject/ floyde
Áp phích gốc -
- Ngày 7 tháng 4 năm 2005
-
-
- Monterrey Mexico
- 28 tháng 4 năm 2006
Cảm ơn tất cả những người đã giúp đỡ, nhưng tôi vừa nhận ra rằng không thể đạt được bố cục chính xác mà tôi muốn với sự kết hợp của chiều rộng / chiều cao và tỷ lệ phần trăm cố định. Tôi đã viết lại nó chỉ bằng cách sử dụng tỷ lệ phần trăm và bây giờ nó hoạt động. Nếu bạn quan tâm đến đánh dấu, hãy cho tôi biết và tôi sẽ đăng nó. stevep
-
- Ngày 13 tháng 10 năm 2004
-
-
- Vương quốc Anh
- 28 tháng 4 năm 2006
floyde đã nói: Nếu bạn quan tâm đến đánh dấu, hãy cho tôi biết và tôi sẽ đăng nó.
Tôi muốn xem nếu bạn có thời gian để đăng lại.
NoNameBrand đã nói: Đây là thứ 'lớp' là gì? đó có phải là Dreamweaver-esque để 'phá vỡ những thứ thật-tốt' không?
Chà, tôi không biết về 'công cụ phá vỡ' nhưng tôi đoán bạn đã nghi ngờ rằng tôi không phải là người thông thạo CSS - các lớp là một cái tên thuận tiện do DW đặt cho những thứ mà tôi nghĩ nên được gọi là 'các phần tử định vị CSS' - và Tôi nghĩ rằng họ gọi chúng như vậy để làm cho những người như tôi từ nền tảng DTP / Photoshop cảm thấy thoải mái hơn một chút. Nhìn vào mã bạn đã đưa vào bài đăng của mình NoNameBrand nó thanh lịch hơn rất nhiều so với mã của tôi - Tôi sẽ phải cố gắng thực sự làm cho đầu của tôi xoay quanh thẻ div. Cảm ơn OP và các câu trả lời. n NoNameBrand
-
- Ngày 17 tháng 11 năm 2005
-
-
- Halifax, Canada
- 28 tháng 4 năm 2006
stevep đã nói: Chà, tôi không biết về 'những thứ phá vỡ' nhưng tôi đoán bạn đã nghi ngờ rằng tôi không phải là người biết CSS - các lớp là một cái tên thuận tiện do DW đặt cho những thứ mà tôi nghĩ nên được gọi là 'các phần tử định vị CSS '
Họ cũng có các chỉ mục z xếp chồng lên nhau - định vị mọi thứ từ trước ra sau trên một trang. Tôi đã từng thấy các lớp DW trước đó đã phá vỡ hoàn toàn một trang web, nhưng nếu không thì chưa tiếp xúc nhiều với chúng (thực sự là đủ).
Tôi sẽ phải cố gắng thực sự làm cho đầu của tôi xoay quanh thẻ div.
A chỉ là một khối tùy ý - nó không có ý nghĩa gì về mặt ngữ nghĩa, theo cách ahiện (một đoạn văn bản). MỘTlà cùng một ý tưởng, nhưng đối với những thứ nội tuyến (như nhưng một lần nữa, không có ngữ nghĩa).
Điều dễ dàng nhất để học công cụ này là ngừng sử dụng Dreamweaver. Tôi thiết kế các trang web của mình trong Photoshop và sau đó lưu các phần tử đồ họa mà tôi muốn, cùng với việc ghi nhanh các mã màu và một số phép đo pixel thô cho mục đích căn chỉnh, sau đó tôi viết mã trang web bằng TextWrangler hoặc VIM. floyde
Áp phích gốc -
- Ngày 7 tháng 4 năm 2005
-
-
- Monterrey Mexico
- 28 tháng 4 năm 2006
stevep nói: Tôi muốn xem nếu bạn có thời gian để đăng lại.
Đây rồi, có một chút tiếng Tây Ban Nha trong đó, tôi hy vọng nó không quá khó hiểu:
Mã số:Grand Scheme html {height: 100%; } body {margin: 0; đệm: 0; chiều cao: 100%; chiều rộng: 100%; } #left, #right {float: left; } #left {height: 100%; background-color: cam; chiều rộng: 10%; } #right {height: 100%; chức vụ: thân nhân; chiều rộng: 90%; } #top {background-color: blue; chiều cao: 10%; } #fotos {vị trí: tương đối; chiều cao: 90%; } #foto_sup_izq, #foto_sup_der, #foto_inf_izq, #foto_inf_der {height: 50%; chiều rộng: 50%; tràn: tự động; vị trí: tuyệt đối; } #foto_sup_izq, #foto_sup_der {top: 0; } #foto_sup_der, #foto_inf_der {còn lại: 50%; } #foto_inf_izq, #foto_inf_der {top: 50%; } 
Tập tin đính kèm
Bài ViếT Phổ BiếN