Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Mar 2009
    Posts
    178
    Thanks
    41
    Thanked 0 Times in 0 Posts

    How Would I Position Images Here???

    I'd like some help.

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



    My site is: www.caffevinci.com

    I'd appreciate some help!

  • #2
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    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:

    Code:
    <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:

    Code:
    #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).

  • Users who have thanked Scriptet for this post:

    grahamy84 (10-30-2009)

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Posts
    178
    Thanks
    41
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Mar 2009
    Posts
    178
    Thanks
    41
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    There comes the absolute position in handy.
    ap divs?

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    grahamy84 (11-02-2009)

  • #7
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Or you can use a negative margin on the image to push it upwards over some content.

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

    Code:
    .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:

    Code:
    .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)

  • Users who have thanked Scriptet for this post:

    grahamy84 (11-02-2009)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •