Định vị một hình ảnh bên ngoài bố cục

Tôi đang tạo trang web rộng 960px nhưng tôi muốn hình ảnh ở cả hai mặt của tiêu đề mà bạn có thể thấy nếu bạn có màn hình lớn hơn.Định vị một hình ảnh bên ngoài bố cục

vì tôi muốn giữ cho trang web 960px tôi cần những hình ảnh bên thêm để không được tính bởi trình duyệt, tôi có thể lấy nó để làm việc trên bên trái

thấy ở đây:

enter image description here

http://www.wireframebox.com/test/sideimages/index_leftworks.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
body { margin: 0; padding: 0; border: 0; background-color:#096 } 

img { border: 0; } 

#main { 
    width:960px; 
    height:216px; 
    background-image:url(main.jpg); 
    position:relative; 
    top:0; margin: 0 auto; 
} 



#left { 
    width:170px; 
    height:216px; 
    background-image:url(left.jpg); 
    float:left; 
    left:-170px; 
    position:relative; 
} 

#right { 
    width:170px; 
    height:216px; 
    background-image:url(right.jpg); 
    float:right; 
    left:170px; 
    position:relative; 
} 



</style> 

</head> 

<body> 

    <div id="main"> 
     <div id="left"></div> 
     <div id="right"></div> 
    </div> 
</body> 
</html>

nếu bạn làm cho cửa sổ mỏng hơn, hình ảnh màu đỏ bên trái biến mất khỏi trang web mà không làm cửa sổ trình duyệt nhận thanh cuộn phía dưới, tuy nhiên khi tôi thử và làm điều tương tự ở bên phải, nó không hoạt động

thấy ở đây

enter image description here

http://www.wireframebox.com/test/sideimages/

Mã là như nhau, chỉ <div id="right"></div> thiếu

css là trong nguồn.

bạn cũng có thể nhìn thấy nó được sử dụng trên trang web này để hiển thị ngày thò ra bên trái của trang, mà không ảnh hưởng đến các trang web tổng thể rộng

http://www.tequilafish.com/2009/04/22/css-how-to-pin-an-image-to-the-bottom-of-a-div/

tại sao công việc này ở bên trái nhưng không bên phải?

Nguồn

2012-03-16 russian box

i chèn hình ảnh và mã. Hãy suy nghĩ về những người khác đọc rằng với cùng một vấn đề và các trang web của bạn đang ngoại tuyến :) Và hãy áp dụng các thay đổi :) – Neysor

Cảm ơn bạn đã làm tất cả những điều đó! hy vọng ai đó có thể thấy những gì đang xảy ra, tôi cũng không biết ý bạn là gì "Và hãy áp dụng những thay đổi" –

bản sao có thể có của [Định vị hình ảnh bên ngoài bố cục, không có thanh cuộn] (http://stackoverflow.com/questions/9731774/định vị-an-hình-ngoài-của-bố cục-không-cuộn-thanh) – Starx

Xem fiddle dưới đây để biết sản lượng ...

Fiddle: http://jsfiddle.net/C2j6G/4/

Demo: http://jsfiddle.net/C2j6G/4/embedded/result/

xem dưới đây hình ảnh -

enter image description here

Nguồn

2012-03-16 07:01:03 w3uiguru

Điều này có vẻ như vậy! tuy nhiên nếu tôi đặt nội dung vào div nội dung chẳng hạn như hình ảnh có siêu liên kết trên thì tôi không thể nhấp vào nó. điều này có liên quan gì đến cách các div được xếp chồng lên nhau không? –

tôi đã sắp xếp vấn đề đó^điều này là bởi vì tôi là người mới đối với tất cả điều này vì vậy tôi playd với việc đặt một div bên trong div nội dung và cho rằng một z-index: 1; mà dường như làm cho nội dung có thể nhấp được! : O –

Cảm ơn bạn rất nhiều! –

Nếu bạn muốn trang web của bạn rộng 960px, thì bạn nên thay đổi chiều rộng của hình ảnh chính thành 960 - 170 (bên trái) - 170 (bên phải). Thay đổi chiều rộng của main.jpg thành 620px nên khắc phục sự cố của bạn.

HTH

Nguồn

2012-03-16 05:59:47 Swaraj

Tôi muốn các hình ảnh phụ không được tính vào chiều rộng của trang, nó hoạt động cho bên trái nhưng không phải ở bên phải. xem liên kết của tôi –

Đặt hình ảnh trong một div hoặc hình ảnh thẻ có dung lượng lớn hơn div trung tâm của bạn và làm cho nó trở thành con của div nội dung trung tâm. Ngoài ra hãy chắc chắn rằng vị trí của nó sẽ đưa nó ra khỏi dòng chảy (\ tuyệt đối). Nếu sau đó bạn thêm một lề âm, bạn có thể kéo hình ảnh ra ngoài div nội dung mà không làm gián đoạn vị trí của nó.

#center div.top{ 
     width:1200px; 
     height:170px; 
     margin: 0px -170px; 
     position:absolute; 

     background:url("randombackground.png") no-repeat; 
    }

Các html sẽ được kinda như thế này:

<div id="center"> 
<div class="top"></div> 
Content content content 
</div>

Nguồn

2012-03-16 06:10:13 rfinz

Tôi đã chơi xung quanh với điều này nhưng nó dường như không hoạt động. Không phải cách tôi muốn. Nó đặt một div ra bên trái màn hình của tôi so với tôi không thể thấy: S, những gì tôi đang cố gắng làm là ngồi một hình ảnh ở bên phải của tiêu đề của tôi, như tôi đã làm ở bên trái, và có nó không thêm thanh cuộn vào cuối cửa sổ khi cửa sổ có kích thước 1300px trở xuống, xem các hình ảnh sau: http://www.wireframebox.com/test/sideimages/justleft.jpg http: //www.wireframebox. com/test/sideimages/left_and_right.jpg –

bạn chỉ có 2 hình ảnh nhỏ? bạn có thể kết hợp chúng thành một chiều rộng 1200px không? sau đó giải pháp của tôi nên làm việc ... và như đối với điều cuộn, bạn có thể sẽ cần phải quấn toàn bộ trang trong một div với overflow: hidden; .. có thể sử dụng một số jQuery hoặc javascript đơn giản để giữ chiều rộng của nó ở 100% – rfinz

Sẽ tốt hơn nếu bạn có thể kết hợp hai hình ảnh & đưa ra trong background của cơ thể.như thế này:

HTML

<div id="main"></div>

CSS

body { 
margin: 0; 
padding: 0; 
background:#096 url(http://imgur.com/JHXDv.png) no-repeat top center; 
} 

#main { 
    width:960px; 
    height:216px; 
    background-image:url(http://www.wireframebox.com/test/sideimages/main.jpg); 
    margin:0 auto; 
}

Kiểm tra này http://jsfiddle.net/PVWzA/1/

Nguồn

2012-03-16 06:43:57 sandeep

Cảm ơn bạn đã làm việc về điều này. vâng, tôi biết về việc có một hình ảnh kéo dài phần trên nhưng tôi muốn giữ nó riêng biệt/nổi các hình ảnh khác ở hai bên. những gì bạn đề nghị là một cách để làm điều đó nhưng không phải là những gì tôi đang tìm kiếm. Cảm ơn vì tất cả! –

Định vị một hình ảnh bên ngoài bố cục

Trả lời

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