?
Solved

Image at the side of the div

Posted on 2011-03-13
8
Medium Priority
?
241 Views
Last Modified: 2012-08-13
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
Comment
Question by:wilflife
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
8 Comments
 
LVL 7

Expert Comment

by:wdfdo1986
ID: 35121412
can u give me some design of what u need?
I cant understand what u need.
0
 

Author Comment

by:wilflife
ID: 35122871
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
 
LVL 12

Expert Comment

by:Amick
ID: 35122980
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
Will your db performance match your db growth?

In Percona’s white paper “Performance at Scale: Keeping Your Database on Its Toes,” we take a high-level approach to what you need to think about when planning for database scalability.

 
LVL 9

Expert Comment

by:Roman Gherman
ID: 35123141
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
 

Author Comment

by:wilflife
ID: 35130253
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
 
LVL 9

Accepted Solution

by:
Roman Gherman earned 2000 total points
ID: 35131938
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
 

Author Comment

by:wilflife
ID: 35175136
Architecturally which is the best way of doing it as they have or using your solution?

Thanks.
0
 
LVL 9

Assisted Solution

by:Roman Gherman
Roman Gherman earned 2000 total points
ID: 35178515
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

Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How important is it to take extra precautions to protect your online business? These are some steps you can take to make sure you're free of any cyber crime.
This article was initially published on Monitis Blog, you can read it here . When it comes to deciding which approach to website performance monitoring is best for your business, unfortunately, like so many options in life . . . it depends. In th…
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
This video explains how to create simple products associated to Magento configurable product and offers fast way of their generation with Store Manager for Magento tool.

719 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question