• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 254
  • Last Modified:

Image at the side of the div

Hi,

Wondering what is the best way of positioning an image so it as at the edge of my div and looks to be on the outside almost like a bookend. I currently have all my divs centered. Any thoughts.

A div on the outside,  div with a minus margin?
0
wilflife
Asked:
wilflife
2 Solutions
 
wdfdo1986Commented:
can u give me some design of what u need?
I cant understand what u need.
0
 
wilflifeAuthor Commented:
central div with all the content, to the top and on the outside of the div central div an image as if on the outside of the content. Hmm put this in the wrong group i think. Should have been css, html etc.
0
 
AmickCommented:
Are you looking for a similar effect to what http://www.bergamotus.ws/samples/3column-stretch-with-borders.html shows with the navigation and sidebar areas bearing images that bracket the content area?  If so, the source code provided at that link will offer a great starting point.
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
Roman GhermanSenior Software EngineerCommented:
Hi,

It is hard to understand what you really need, maybe a mock-up image would help.
However, when we talk about positioning I think jQuery position from the UI would help. Anyway, this could also be done using CSS but I will need more details.

---------------------------
You can find me on - Deveolopment Solutions: www.extremedev.blogspot.com
0
 
wilflifeAuthor Commented:
So i guess the closest i have to what i want is the following site:

http://pikachoose.com/

The image is on the outside of the main content area.
0
 
Roman GhermanSenior Software EngineerCommented:
Hi,

Well actually the link that you have provided does not any divs moved outside another div element - it is just images and dives arranged so that it looks like but actually it is not.

However here is an example of what you needed - as I said - using jQuery UI position():
<head>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

    <title></title>
</head>
<body>
    <center>
        <div id='mainDiv' style="width: 350px; height: 400px; background-color: Yellow">
            TESTTESTTESTTESTTESTTESTTEST TESTTESTTESTTESTTESTTESTTEST TESTTESTTESTTESTTESTTESTTEST
            TESTTESTTESTTESTTESTTESTTEST TESTTESTTESTTESTTESTTESTTEST TESTTESTTESTTESTTESTTESTTEST
        </div>
        <div id='outDiv' style="width: 100px; height: 100px; background-color: Maroon;">
            TEST OUT</div>

        <script type="text/javascript">
            $('#outDiv').position({
                my: 'center center',
                at: 'right top',
                of: '#mainDiv',
                offset: '-20 10'
            });

        </script>
    </center>
</body>
</html>

Open in new window


---------------------------
You can find me on - Deveolopment Solutions: www.extremedev.blogspot.com
0
 
wilflifeAuthor Commented:
Architecturally which is the best way of doing it as they have or using your solution?

Thanks.
0
 
Roman GhermanSenior Software EngineerCommented:
Hi,

In my opinion it is better to use tables as these are more stable than div elements.

Row1- Header + COLSPAN
Row2 - Content
Row3 - Footer + COLSPAN

and if you need to achieve what they have - you just make it in the way they did -  put the image as a background and then put your text on top.

But if you don't need text then just put it as image.

It's easy.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now