Tôi đã thêm hai div để giữ hình nền cho mục đích trang trí - theo yêu cầu của nghệ sĩ đang làm việc với tôi trên trang web.Định vị tuyệt đối: Một phần tử mở rộng cửa sổ, phần tử khác không ảnh hưởng đến nó. Cả hai đều sử dụng cùng một mã: C
Lúc đầu, nó hoạt động rất tốt. Những hình ảnh được cho là hiển thị trên mỗi bên của div wrapper giữ nội dung trang web - mà không ảnh hưởng đến chiều rộng trang.
Sau đó, tổ chức sở hữu trang web có một nhà tài trợ khác, biểu trưng của tôi, tôi phải thêm vào cột ở bên phải. Tôi đã tạo một id mới cho nút "thứ 5" và tạo một div cho nó. Tải lên nó, tôi nhận thấy rằng một thanh cuộn đã bất ngờ xuất hiện ở dưới cùng của trang, không có lý do rõ ràng.
Lần đầu tiên tôi nghi ngờ nút là vấn đề, nhưng cuối cùng phát hiện ra rằng div trang trí đúng nhất đang uốn chiều rộng trang, mặc dù sử dụng vị trí tuyệt đối. Cả hai divs sử dụng cùng một mã, chỉ được nhân đôi cho trái và phải. Tôi không có ý tưởng những gì đang gây ra vấn đề ..
(Bạn có thể gặp sự cố trong hành động trong khi nó kéo dài tại www.torucon.no/no/)
Xin hãy giúp tôi ra! Dưới đây là CSS cho cả hai divs:
#wolf
{
position:absolute;
min-height:500px;
min-width:498px;
left:-293px;
top:150px;
background-image:url('http://www.torucon.no/css/wolf.png');
z-index:-1;
}
#lion
{
position:absolute;
min-height:500px;
min-width:498px;
right:-293px;
top:150px;
background-image:url('http://www.torucon.no/css/lion.png');
z-index:-1;
}
Dưới đây là một đoạn mã HTML hiển thị HTML của divs:
<div class="wrapper"> <!-- Contains the entire website for structure -->
<div id="wolf">
</div>
<div id="lion">
</div>
((Trong trường hợp bạn đã không nhận được nó: Các wrapper div Nhưng khi tôi thay đổi kích thước cửa sổ của mình, tôi thấy thanh cuộn xuất hiện lâu trước khi nội dung của trình bao bọc thậm chí còn gần với đường viền cửa sổ trình duyệt. Điều này sẽ gây phiền toái cho máy tính có độ phân giải thấp hoặc màn hình nhỏ !))
Tôi có thể đề xuất 'body {/ * nội dung khác */overflow-x: hidden; } '? Tôi không chắc chắn, nhưng, * tại sao * điều này đang xảy ra, nhưng có vẻ như để điều trị các triệu chứng, ít nhất. Bạn có thể cần phải xác định 'overflow-y: auto;' mặc dù, để tránh các vấn đề trong một số trình duyệt. –
@DavidThomas Vâng, tôi cũng đoán là tôi cũng có thể làm điều đó. Nhưng nó không thực sự xảy ra, phải không? Các yếu tố vị trí tuyệt đối bị bỏ qua bởi luồng trang và do đó nó không ảnh hưởng đến chiều rộng của phần tử cơ thể - theo như tôi hiểu. Vì vậy, nó không phải là lỗi của tôi, mà là một vấn đề với khả năng hiển thị mã của trình duyệt? Ngoài ra - sử dụng overflow-x: hidden ;, điều đó cũng không làm cho trình bao bọc div biến mất bên ngoài tường trình duyệt khi bạn thay đổi kích thước màn hình? –
Tôi có xu hướng nghi ngờ rằng, tùy thuộc vào trình duyệt bạn sử dụng, các nhà phát triển tuân thủ các tiêu chuẩn W3 để hiển thị (không có phần mềm hoàn hảo, vì vậy có thể có lỗi, nhưng ngay cả như vậy ...). Và vâng; nó có vấn đề của nó như là một cách tiếp cận. =/ –