当前位置: 动力学知识库 > 问答 > 编程问答 >

css - positioning multiple images in various places around the page

问题描述:

Hi I am having problems positioning several images. It is very important that max height of the site stays at approximately 580 pixels as I want to give the impression of a picture frame around the site. I have attached a picture to show how exactly the site is laid out and where I want to position my images in the top, middle and bottom divs. I do not want to have them as background images because I want to have some as links and I want to have some jquery animations (i.e. fadeIn and toggle) with the other images. This is a fluid layout but I do not want the vertical width to expand when the browser is at the min width of 780px, I also would like that the images are some what centred on the page.

I am still learning CSS so I have done the best I can but it is still out of position.

Thanks for your help

Site Layout Picture

.container {

width: 100%;

max-width: 1096px;

min-width: 780px;

margin: 0 auto;}

.header {

background:#231f20;

height: 65px;

}

.sidebar1 {

padding: 0px;

float: left;

width: 65px;

background: #231f20;

margin: 0;

min-height: 450px;}

.sidebar2 {

float: right;

width: 65px;

background:#231f20;

margin: 0;

min-height: 450px;}

.main_content{

padding: 0px;

width: 80%;

float: left;

}

.footer {

height: 65px;

background:#231f20;

position: relative;

}

HTML

<body>

<div class="container">

<div class="header"></div>

<div class="sidebar1"></div>

<div class="main_content">

<div class="top"></div>

<div class=”middle"></div>

<div class=”bottom"></div>

</div>

<div class="sidebar2"></div>

</div>

</body>

网友答案:

Add position: relative to all the containing div's (you may have to set the height of them to the height of the tallest image also). Then position all the images something like:

.img1 { /* or whatever class name works for you */
    position: absolute;
    left: 50%; /* this centers it, if you want thirds, us 33%, 66%, etc. */
    margin-right: -50px; /* note: 50px is an example, it needs to be half the width of your image width */
}
网友答案:

Try adding clear: both; to the CSS for the .footer. This will force it to the bottom of the "picture frame".

分享给朋友:
您可能感兴趣的文章:
随机阅读: