...

View Full Version : How Would I Position Images Here???



grahamy84
10-30-2009, 01:39 PM
I'd like some help.

I'm wondering how I'd position images in the following black areas in the image:

http://img688.imageshack.us/img688/3519/picturelinks.jpg

My site is: www.caffevinci.com

I'd appreciate some help!

Scriptet
10-30-2009, 01:46 PM
I'd just set it up as a 3 column layout and put the images in the left and right columns and the main content in the centre column.

Something like:



<div id="container">
<div id="left-col">Left Col images go here</div>
<div id="content">Content Goes Here</div>
<div id="right-col">Right col images go here</div>
</div>


CSS:



#container{
overflow:auto;
width:900px;
marign:0 auto;
}
#left-col, #content, #right-col{
float:left;
}
#left-col{
width:200px;
}
#content{
width:500px;
background:#fff;
}
#right-col{
width:200px;
}


Float them left to each other, make the container the size of the 3 columns put together (obviously change the widths to suit).

grahamy84
10-30-2009, 03:43 PM
Thanks for the post. You're right.

I'm curious though, if I did want an image to overlap the main content and the background...how would I do it?

abduraooft
10-30-2009, 04:33 PM
I'm curious though, if I did want an image to overlap the main content and the background...how would I do it? There comes the absolute position in handy.

grahamy84
10-30-2009, 04:42 PM
There comes the absolute position in handy.

ap divs?

abduraooft
10-30-2009, 04:45 PM
You may set absolute position on the image itself, if it's a part of document. If it's just for styling, you may set it as a background image of a div and then position that div.

Scriptet
10-30-2009, 06:25 PM
Or you can use a negative margin on the image to push it upwards over some content.


<div id="content">
<p>Some Content<p>
</div>
<img src="img.jpg" class="image />

CSS:



.image{ margin-top -50px; /*Pushes the image up 50px*/ }


You may need to adjust the z-index if the image isnt' appearing over the content:



.image{ margin-top -50px; position:relative; z-index:100; }


Or positioning would work aswell, you set position relative on the container around the content and image, and then set postion absolute on the image, and specify it's positions (top,left,right,bottom)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum